/**
 * 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;
  }

  /* 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 specific override */
  .header-theme-toggle button {
    width: 48px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Navigation links */
  nav a,
  .nav-link,
  .site-logo a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !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) {
  
  /* Even tighter spacing but maintain touch targets */
  .header-theme-toggle button {
    width: 44px !important;
    height: 44px !important;
  }

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

/* High DPI displays - ensure physical size */
@media (max-width: 768px) and (min-resolution: 2dppx),
       (max-width: 768px) and (min-resolution: 192dpi) {
  
  /* Additional adjustments for high DPI screens if needed */
  button,
  a,
  input,
  select {
    
    /* Touch targets already set with min-height/width */
    
    /* This media query is for future adjustments if needed */
  }
}