/*
Theme Name: MJ Creative
Theme URI: https://www.michellejonescreative.com/
Description: This is the custom theme created for MJ Creative clients.
Author: MJ Creative
Author URI: https://www.michellejonescreative.com/

Version: 2.10.0

Tags: accessibility-ready, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, left-sidebar, one-column, right-sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns, wide-blocks

Template: hello-elementor

License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: mjcreative */

/* Accessibility Additions */
@media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  
  :focus {
    outline: 2px solid blue; /* Adjust the color to match your site's design */
    outline-offset: 2px; /* Offset the outline slightly for visibility */
  }

/* Visually hidden class for screen reader accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  @media (forced-colors: active) {
    * {
      background-color: transparent;
      color: WindowText;
      border-color: WindowText;
    }
  }

  button, a {
    padding: inherit; /* Adjust to create a larger hit area */
    display: inline-block; /* Ensure padding is respected */
  }
  
  input:not([type="checkbox"]), textarea, select {
    min-height: 44px; /* Minimum size for touch targets */
  }

ul, ol {
    line-height: 1.6; /* Adjust depending on your design */
  }
  
input, textarea, select, button {
    padding: 8px;
    font-size: 16px; /* Ensure font size is legible */
  }
  
input:focus, textarea:focus, select:focus, button:focus {
    outline: 2px solid #0056b3; /* Ensure forms have a visible focus state */
  }
  
  video[autoplay] {
    display: none !important; /* Hides autoplaying videos */
  }
  @media (prefers-reduced-data: reduce) {
    img, video {
      display: none; /* Or provide lower-resolution media */
    }
  }