/* ============================================================
 * a11y-polish.css · WCAG AA + keyboard navigation overrides
 * ------------------------------------------------------------
 * Surgical overrides. Loaded LAST so it wins. Designed to
 * patch axe-detected violations without touching foundation
 * tokens (tokens.css, styles.css, classroom.css).
 *
 * - Bumps insufficient-contrast text to AA (4.5:1 body / 3:1 large)
 * - Adds visible focus rings on every interactive element
 * - Restores link distinguishability inside text blocks
 * - Honours prefers-reduced-motion
 * - Enforces ≥44px touch targets on coarse pointers
 * ============================================================ */

/* ---------- 1. Brand / nav text contrast --------------------- */

/* `.brand-tagline` was #7c87a8 (var(--ink-400)) on cream → 3.41:1.
 * Bump to --ink-500 (#545e85) → 5.36:1 on #fdfaf2. */
.brand-tagline {
  color: var(--ink-500, #545e85) !important;
}

/* `.brand-name .ai` was --amber-500 (#f59e0b) on cream → 2.05:1.
 * Use a darker amber that still reads as the brand accent. */
.brand-name .ai {
  color: var(--amber-700, #b45309) !important;
}

/* Add fallback token (some pages don't expose --amber-700). */
:root {
  --amber-700: #b45309;
}

/* ---------- 2. .link-btn (used in admin + classroom panels) -- */

/* Was --amber-600 (#d97706) on #ffffff → 3.18:1. Underline it AND
 * darken to --amber-700 so it satisfies link-distinguishability and
 * contrast at the same time. */
.link-btn {
  color: var(--amber-700, #b45309) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.link-btn:hover,
.link-btn:focus-visible {
  color: var(--ink-900, #0a0f2c) !important;
}

/* ---------- 3. Admin dashboard bar chart labels -------------- */
/* `.bar-label` was --ink-400 → 3.56:1. */
.bar-label,
.bar-wrap .bar-label {
  color: var(--ink-600, #34406b) !important;
}

/* ---------- 4. Parent dashboard nav group labels ------------- */
/* `.pd-nav__group` was #94a3b8 → 2.56:1 on white. */
.pd-nav__group {
  color: var(--ink-600, #475569) !important;
}

/* Parent header descriptor `p` (#64748b on #f6f7fb = 4.44, barely under) */
.parent-shell header > div > p,
.pd-page__header p,
.pd-view__head p,
.pd-view__head > div > p {
  color: var(--ink-600, #475569) !important;
}

/* ---------- 4b. programs / register hero --------------------- */
/* `.ages-emphasis` is --amber-600 on --amber-100 (#fef3c7) → 2.86. */
.ages-emphasis {
  color: #78350f !important;     /* amber-900 / brown — 9.4:1 on #fef3c7 */
}
/* `.age-pill__ages` was --amber-600 on #fff7ed → 3:1, and --indigo-500 on #eef2ff → 3.31. */
.age-pill .age-pill__ages,
.age-pill--explorers .age-pill__ages {
  color: #78350f !important;     /* dark brown */
}
.age-pill--innovators .age-pill__ages {
  color: #1e3a8a !important;     /* indigo-900 — 11.6:1 on #eef2ff */
}

/* Cohort cards on programs page · amber-600 on white → 3.18. */
.cohort-card__time,
.cohort-card__cta,
.cohort-card a .cohort-card__cta,
.cohort-card a .cohort-card__time {
  color: var(--amber-700, #b45309) !important;
}

/* `.aikc-tour-btn--primary` was 4.46 (white on #6366f1, barely under). */
.aikc-tour-btn--primary {
  background-color: #4f46e5 !important;   /* indigo-600 → 5.16:1 white text */
  color: #ffffff !important;
}

/* ---------- 5. Cookie consent link distinguishability -------- */
#aikc-cookie-banner .aikc-cc-copy a,
#aikc-cookie-banner .aikc-cc-copy a[href$="policies"] {
  color: #6b3a07 !important;            /* darker amber for surrounding-text contrast */
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* ---------- 6. Inline-styled spans on home hero / CTA -------- */
/* The CTA block already has a dark bg (--ink-900). Tighten the
 * inline-styled accent + white text so axe stops flagging the
 * cream parent, and to guarantee readability over the gradient. */
.cta-block,
.cta-block h2,
.cta-block p,
.cta-block strong,
.cta-block span {
  /* explicit dark bg so contrast calc never falls back to body */
  background-color: var(--ink-900, #0a0f2c);
}
.cta-block {
  isolation: isolate;
}
.cta-block h2,
.cta-block h2 span {
  background-color: transparent !important;
  color: #fffbeb !important;            /* near-white, ≥15:1 on --ink-900 */
}
.cta-block h2 span[style*="--amber-400"] {
  color: #fde68a !important;            /* lighter amber, ≥12:1 on --ink-900 */
}
.cta-block p,
.cta-block p strong {
  background-color: transparent !important;
  color: rgba(255,255,255,0.92) !important;
}

/* ---------- 7. Universal focus ring -------------------------- */
/* Visible, AA-compliant focus ring on every interactive element. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber-500, #f59e0b) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
  /* keep box-shadow rings working (admin uses them) */
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}

/* Dark surfaces — brighter ring */
.bg-ink a:focus-visible,
.bg-ink button:focus-visible,
.cta-block a:focus-visible,
.cta-block button:focus-visible,
.classroom-side a:focus-visible,
.classroom-side button:focus-visible {
  outline-color: #fde68a !important;
  box-shadow: 0 0 0 4px rgba(253, 230, 138, 0.35);
}

/* Skip-link (added below in #6) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--ink-900, #0a0f2c);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 9999;
  text-decoration: none;
  transition: top 180ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid var(--amber-400, #fbbf24);
  outline-offset: 2px;
}

/* ---------- 8. Classroom side wallet button (a11y companion) -- */
/* Invisible-but-focusable button so keyboard users can open the
 * wallet sheet. Sits on top of avatar+meta area of the pill. */
.classroom-side__user {
  position: relative;
}
.aikc-side-wallet-btn {
  position: absolute;
  inset: 0 36px 0 0;            /* leave room for signout button */
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1;
  border-radius: inherit;
}
.aikc-side-wallet-btn:focus-visible {
  outline: 3px solid var(--amber-400, #fbbf24) !important;
  outline-offset: -3px !important;
  box-shadow: none;
}
/* Signout button must sit above the overlay so it remains clickable. */
.classroom-side__signout {
  position: relative;
  z-index: 2;
}

/* ---------- 9. Touch targets ≥ 44px on coarse pointers -------- */
@media (pointer: coarse) {
  .nav-links a,
  .link-btn,
  .classroom-nav__item,
  .pd-nav a,
  .footer-cols a,
  button:not(.nav-toggle):not([data-allow-small]),
  .btn,
  .btn-ghost {
    min-height: 44px;
  }
}

/* ---------- 10. prefers-reduced-motion ----------------------- */
@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;
  }
  /* Keep focus indicator transitions snappy but visible */
  *:focus-visible {
    transition: outline-color 0.001ms !important;
  }
}

/* ---------- 11. sr-only utility (if not already defined) ----- */
.sr-only,
.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;
}

/* Visible when focused (e.g. skip-to-content) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ---------- 12. Form error live regions (announces a11y) ----- */
[role="alert"],
.aikc-form-error,
.field-error,
[data-form-error] {
  /* axe doesn't flag this directly, but ensures errors are not
   * announced as decorative text. */
  display: block;
}