/**
 * Mobile Accessibility CSS
 * Enforces WCAG 2.5.5 minimum touch target sizes (44px × 44px)
 * 
 * Bug Condition: Touch targets < 44px causing accessibility failures
 * Expected Behavior: Enforce 44px × 44px minimum for all interactive elements
 * Preservation: Visual layout and spacing (Req 3.8)
 * Requirements: 1.23, 2.23
 */

/* Target touch devices using pointer: coarse media query */
@media (pointer: coarse) {
  /* Base interactive elements.
     No `padding` here. It is a shorthand, so on every touch device it wiped the
     component-specific padding of every button and link in the app and inflated
     their boxes until adjacent hit areas overlapped — taps then landed on
     whichever element painted last rather than the one aimed at. min-width /
     min-height alone satisfy WCAG 2.5.5 without touching visual layout, which
     is what "Preservation: Visual layout and spacing (Req 3.8)" above asks for. */
  button,
  a,
  .interactive,
  .clickable,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Icon buttons - ensure proper centering */
  .icon-button,
  button.icon,
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }

  /* Navigation elements */
  nav a,
  .nav-link,
  .menu-item {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px;
  }

  /* Form controls */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Custom controls and interactive cards */
  .card.clickable,
  .interactive-card {
    min-height: 44px;
    padding: 12px;
  }

  /* Ensure small icons have adequate touch area */
  .icon-small,
  .icon-xs {
    padding: 14px; /* Extra padding for smaller icons */
  }

  /* Close buttons and small controls */
  .close-button,
  .dismiss-button,
  .toggle-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tabs and segmented controls */
  .tab,
  .segment-button {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }

  /* Spacing between adjacent touch targets is left to each component's own
     layout (the header, nav pill and card grids all set their own gap). A blanket
     `margin-left` on every button/link pair shifted those layouts on touch
     devices only, so the phone rendering drifted away from the design. */

  /* Floating action buttons */
  .fab,
  .floating-button {
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Player controls */
  .player-control,
  .audio-control,
  .video-control {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }

  /* Slider thumbs and range inputs */
  input[type="range"] {
    min-height: 44px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 44px;
    height: 44px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 44px;
    height: 44px;
  }

  /* Dropdown and select elements */
  select {
    min-height: 44px;
    padding: 12px;
  }

  /* Ensure text inputs have adequate height */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea {
    min-height: 44px;
    padding: 12px;
  }
}