/* HV a11y-patch.css — universal WCAG 2.1 AA defenses.
   Drop into any HV site (HTML / Next.js / Shopify) AFTER the site's own CSS so it overrides. */

/* 1. Focus rings — never let outline:none ship without a replacement.
   Targets common shadcn/Tailwind defaults that strip the outline. */
:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #FFD700 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Browsers without :focus-visible support — keyboard fallback */
:focus:not(:focus-visible) {
  outline: none;
}

/* 2. Skip-to-content link — injected by a11y-patch.js as <a class="hv-skip-link"> */
.hv-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #0A0A0A;
  color: #FFD700;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #FFD700;
  border-radius: 4px;
}
.hv-skip-link:focus {
  top: 8px;
  left: 8px;
}

/* 3. Glass-panel scrim helper — apply to translucent text containers over imagery.
   Use class="hv-scrim" or data-hv-scrim on the parent of any text block on a glass panel. */
.hv-scrim,
[data-hv-scrim] {
  position: relative;
  isolation: isolate;
}
.hv-scrim::before,
[data-hv-scrim]::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.55) 0%,
    rgba(10, 10, 10, 0.75) 100%
  );
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* 4. F24.FGColour fallback — DELIBERATELY EMPTY.
   Earlier we forced html { bg: #0A0A0A } here as a Pa11y contrast-computation aid,
   but that forced dark on light-themed sites and inflated false contrast errors.
   Each site MUST set its own body/html bg in globals.css; we no longer override. */

/* 5. Bump common low-contrast text tokens.
   These match the HV design tokens that fall just below 4.5:1 on real backgrounds.
   Override only if the site declares its own tokens (CSS specificity respects later rules). */
:root {
  /* HV palette safe minimums */
  --hv-a11y-muted: #B8B8C0;        /* 6.7:1 on #0A0A0A vs old #A1A1AA at 6.5:1 */
  --hv-a11y-eyebrow: #FFFFFF;       /* never use 60% white for eyebrow text on glass */
  --hv-a11y-link-on-dark: #FFD700;  /* gold on dark always passes */
}

/* 6. Eyebrow / kicker text on glass — common HV pattern.
   Bump opacity/color when over translucent surfaces. */
.eyebrow,
[data-eyebrow],
.kicker {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 7. Touch target minimum 44x44 on mobile (WCAG 2.5.5 / 2.2 enhancement).
   Soft enforce — don't break tight horizontal nav, only icon-only buttons. */
@media (pointer: coarse) {
  button[aria-label]:not([data-no-min-target]),
  a[aria-label]:not([data-no-min-target]),
  [role="button"][aria-label]:not([data-no-min-target]) {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 8. Image fallback — an <img> with no alt is invisible to screen readers AND
   triggers an ADA error. We can't write alt text from CSS, but we can make
   the issue visible to devs in non-prod. JS shim adds a console warning. */

/* 9. prefers-reduced-motion — neutralize all transitions/animations site-wide.
   Sites should already gate framer-motion via useReducedMotion(), but this is a safety net. */
@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;
  }
}

/* 10. Visually-hidden utility (for sr-only labels added by a11y-patch.js) */
.hv-visually-hidden {
  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;
}