/**
 * Mobile Accessibility Overrides
 * Ensures all interactive elements meet WCAG 2.1 Level AA touch target requirements
 * Minimum touch target size: 44x44 pixels on mobile devices
 */

/* Mobile viewport touch target overrides */
@media (max-width: 768px) {
  
  /* Button and link base styles */
  .btn,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.button,
  .cta-button,
  .action-button,
  .jai-link,
  .back-button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 16px !important;
  }
  
  /* Action buttons in header - use negative margins to prevent header expansion */
  /* Exclude theme toggle as it's handled by header.css container queries */
  .header-actions .btn,
  .header-actions button:not(.header-theme-toggle button),
  .header-actions .icon-btn {
    margin-top: -8px !important;
    margin-bottom: -8px !important;
  }

  /* Small buttons still need 44px touch targets */
  .btn-sm {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
  }

  /* Icon buttons */
  .btn-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
  }

  /* Modal close buttons */
  .modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Form elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  select,
  textarea,
  .form-input,
  .form-select,
  .search-input {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  /* Toggle switches */
  .toggle-switch {
    min-height: 44px !important;
  }

  .toggle-switch input + .toggle-slider {
    width: 60px !important;
    height: 34px !important;
  }

  .toggle-switch input + .toggle-slider::before {
    width: 26px !important;
    height: 26px !important;
    left: 4px !important;
    bottom: 4px !important;
  }

  /* Header theme toggle - let header.css handle sizing */
  /* Container queries in header.css provide appropriate touch-friendly sizes */
  .header-theme-toggle button,
  #theme-toggle-btn {
    min-height: initial !important;
    min-width: initial !important;
    padding: initial !important;
    margin-top: initial !important;
    margin-bottom: initial !important;
  }

  /* Navigation links in header - use negative margins to prevent expansion */
  .page-header nav a,
  .page-header .nav-link,
  .breadcrumb-nav a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
  }
  
  /* Navigation links elsewhere (not in header) - normal behavior */
  nav a:not(.page-header nav a):not(.breadcrumb-nav a),
  .nav-link:not(.page-header .nav-link) {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  /* Site logo - use negative margins to prevent header expansion */
  .site-logo a {
    min-height: 44px !important;
    padding: 10px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-top: -10px !important;
    margin-bottom: -10px !important;
  }

  /* Card links and clickable cards */
  .jai-card,
  .project-card,
  .app-card {
    
    /* Ensure the clickable area meets minimum requirements */
    min-height: 120px !important;
  }

  /* Inline links in content */
  p a,
  li a,
  .content a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    margin: -10px -8px !important; /* Compensate for padding to maintain text flow */
  }

  /* Skip to content link */
  .skip-to-content {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Badge links */
  .badge {
    min-height: 32px !important;
    padding: 8px 16px !important;
  }

  /* Creator link / X handle */
  .creator-link,
  .x-handle {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Tab controls */
  [role="tab"] {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Dropdown items */
  .dropdown-item,
  option {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  /* Service worker update button */
  .sw-update-button {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Debug buttons */
  .debug-button {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Back link container buttons */
  .back-link {
    min-height: 44px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Ensure focus indicators are visible */
  *:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
  }

  /* Additional spacing between interactive elements */
  button + button,
  .btn + .btn,
  a + a {
    margin-left: 8px !important;
  }

  /* Form field spacing */
  .form-group {
    margin-bottom: 24px !important;
  }

  /* Ensure clickable areas don't overlap */
  .jai-container,
  .projects-container {
    gap: 20px !important;
  }
}

/* Extra small mobile devices */
@media (max-width: 420px) {
  
  /* Theme toggle handled by header.css container queries */

  /* Ensure minimum spacing between elements */
  .jai-container,
  .projects-container {
    gap: 16px !important;
  }
}

/* High DPI displays - ensure physical size */
/* Reserved for future high DPI specific adjustments if needed */
/* Touch targets are already set with min-height/width in the main mobile breakpoint */