/* 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+6. (REMOVED) Color overrides moved out of universal patch — they assume dark-theme.
   On light-themed sites (edu-path) forcing white on white = contrast errors.
   Each site's own globals.css is responsible for color tokens; the patch is theme-neutral now. */

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