/* css/a11y.css — accessibility + touch-target + contrast fixes */

/* =========================
   Skip link (WCAG 2.4.1)
   ========================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent, #ff7a00);
  color: #000;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  z-index: 10000;
  text-decoration: none;
}
.skip-link:focus { left: 0; outline: 3px solid #000; }

/* =========================
   Universal focus rings
   (WCAG 2.4.7 — never remove without replacement)
   ========================= */
:focus-visible {
  outline: 2px solid var(--accent, #ff7a00);
  outline-offset: 2px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline-offset: 3px; }
/* Kill default tap highlight on mobile (we provide our own focus ring) */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* =========================
   Touch targets — min 44×44 (WCAG 2.5.5)
   Visual size preserved; hit-area expanded via padding.
   ========================= */
.slider-dots span,
.testimonial-nav span {
  /* Preserve the original 12×12 / 10×10 visual; expand tap area via a pseudo-element */
  position: relative;
  cursor: pointer;
}
.slider-dots span::before,
.testimonial-nav span::before {
  content: '';
  position: absolute;
  inset: -16px; /* 44-px total hit area around a 12×12 dot */
  border-radius: 50%;
}

.nav-social a,
.footer-social a,
.social-links a,
footer .social a,
.nav .social a {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Don't enlarge the visible SVG — just the anchor's hit area */
.nav-social a svg,
.footer-social a svg,
.social-links a svg { pointer-events: none; }

/* Only enforce 44px hit area on .nav-toggle when it's actually displayed
   (the base stylesheet hides it at widths > 1024px). Don't override display. */
.nav-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

/* Release-player controls + Jukebox floating player buttons */
.rp-ctrl, .rp-toggle, .rp-prev, .rp-next, .rp-thumb-play,
.jukebox .jb-btn, .jukebox button, .jb-prev, .jb-play, .jb-next, .jb-mute {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 10px;
}

/* Cookie banner buttons + sticky CTA close + sticky-cta close + lightbox closes */
.cookie-banner button, .cookie-banner a.btn,
.cookie-banner .cb-btn, .cookie-banner [class*=accept], .cookie-banner [class*=essential],
button.sticky-cta-close, .sticky-cta-close,
.work-with-pill button, .work-with-pill .x,
.lightbox-close, .home-vid-close, .release-modal-close {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 8px 14px;
}

/* Streaming buttons at mobile — visually tight but hit-area ≥ 44 */
@media (max-width: 768px) {
  .svc-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* =========================
   Color contrast bumps (WCAG 1.4.3 AA)
   Replace --text-gray #999 (4.52:1 fails body) with #b3b3b3 (5.9:1 passes).
   ========================= */
:root {
  --text-gray-a11y: #b3b3b3;
}
.footer-legal,
.footer-legal a,
.meta-label,
.credit-body small,
.release-meta-list .meta-label { color: var(--text-gray-a11y) !important; }

/* =========================
   Grid tile overlay — show on touch
   (hover-only titles hide from touch/keyboard users)
   ========================= */
@media (hover: none) {
  .home-disco-grid .disco-overlay,
  .release-item .release-overlay,
  .disco-item .disco-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, transparent 70%) !important;
  }
}

/* =========================
   Modal polish + focus trap hooks
   ========================= */
.release-modal[aria-hidden="true"] { display: none; }
.release-modal.open { display: flex; align-items: center; justify-content: center; }
body.modal-open { overflow: hidden; }
body.modal-open > *:not(.release-modal):not(.skip-link) { /* visually 'inert' */ }

/* Entrance/exit animations pause for reduced-motion (global rule below) */

/* =========================
   Safe-area insets — iOS notched devices
   ========================= */
@supports (padding: max(0px)) {
  .nav {
    padding-top: env(safe-area-inset-top, 0);
    padding-left:  max(20px, env(safe-area-inset-left, 0));
    padding-right: max(20px, env(safe-area-inset-right, 0));
  }
  .footer { padding-bottom: max(20px, env(safe-area-inset-bottom, 0)); }
  .work-with-pill, .jukebox {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
}

/* =========================
   Keyboard shortcuts dialog
   ========================= */
kbd {
  display: inline-block;
  padding: 3px 7px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-bottom-width: 2px;
  border-radius: 4px;
  color: #eee;
  white-space: nowrap;
}

/* =========================
   Reduced motion — global kill (WCAG 2.3.3)
   (JS code must ALSO honor matchMedia('(prefers-reduced-motion: reduce)')
   for setInterval-driven animations like the hero slider.)
   ========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slider { animation: none !important; }
}

/* =========================
   Visually-hidden utility (for SR-only H1, etc.)
   ========================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}