/* ============================================================================
   TIVI Accessibility layer
   ----------------------------------------------------------------------------
   Overrides + additions to make the app keyboard-navigable, screen-reader
   friendly, and respectful of motion preferences. Loaded last so it wins
   specificity battles.
============================================================================ */

/* ─── Visible focus ─────────────────────────────────────────────────────────
   Default browser focus rings are weak. We want a strong gold ring that's
   visible against the dark theme. Applied to all interactive elements. */
*:focus-visible {
  outline: 3px solid var(--gold-hi, #D4B27A) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* But never on the video element itself — it has its own controls */
video:focus-visible { outline: none !important; }

/* ─── Reduced motion ────────────────────────────────────────────────────────
   Some users get motion sickness from auto-rotating carousels and fade
   transitions. Respect their OS-level preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Auto-rotating hero stops rotating */
  .hero__slide { transition: opacity 200ms !important; }
}

/* ─── Skip-to-content link ──────────────────────────────────────────────────
   Hidden until focused. Keyboard users can press Tab once and jump past
   the nav to the main content. Standard a11y pattern. */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 12px;
  padding: 10px 18px;
  background: var(--gold-hi, #D4B27A);
  color: #1A0F03;
  font-weight: 800;
  text-decoration: none;
  border-radius: 6px;
  z-index: 10000;
  transition: top 150ms;
}
.skip-to-content:focus {
  top: 12px;
}

/* ─── Screen-reader-only text ──────────────────────────────────────────────
   Visually hidden but accessible to AT — use for context that sighted users
   get from icons/layout. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ─── High contrast mode support ────────────────────────────────────────── */
@media (forced-colors: active) {
  .card, .btn, .feature3__card {
    border: 1px solid CanvasText;
  }
  .live-dot { background: Highlight; }
}

/* ─── Touch target sizes — WCAG 2.5.5 (Target Size) ───────────────────────
   Minimum 44×44 px for any tap target. We override only the small icons. */
.nav__icon, .lib-row__icon, button[aria-label] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Form field labels visible & associated ──────────────────────────────
   Even when label is visually compact, ensure the label-input relationship
   is screen-reader detectable. */
label > input,
label > select,
label > textarea {
  margin-top: 4px;
}

/* ─── Card hover should not be the only state — focus too ───────────────── */
.card:focus-within .card__hover,
.card:focus .card__hover {
  opacity: 1;
}

/* ─── Player controls — large enough for low-vision users ─────────────── */
.player__btn {
  min-width: 48px;
  min-height: 48px;
}
.player__scrub {
  min-height: 32px;  /* easier grab on scrubber */
}