/*
 * public_html/assets/css/a11y.css — the WCAG 2.2 AA reinforcements and the
 * optional Accessibility Mode (build step 11.1; brief §11). Loaded AFTER
 * site.css/pages.css so these rules win where they overlap.
 *
 * The keyboard/focus/skip-link/live-region/reduced-motion baseline was built in
 * Phase 4 (see site.css). This file adds the two things 11.1 still owes:
 *   1. an always-on WCAG 2.2 §2.5.8 target-size floor (24×24 CSS px for controls);
 *   2. Accessibility Mode — a user-toggled `html.a11y-mode` that delivers the
 *      brief's promise: larger text, higher contrast, simplified (flat) surfaces,
 *      persistent (non-dimmed) labels, stronger focus, and motion fully off
 *      regardless of the OS setting. "Reduced timed pressure" is enforced in JS
 *      (core/a11y.js prefersReducedTimingPressure()).
 */

/* ====================================================================== *
 *  Always-on AA reinforcements (apply to every user)
 * ====================================================================== */

/* WCAG 2.2 §2.5.8 Target Size (Minimum): interactive controls are at least
 * 24×24 CSS px. Inline text links inside prose are exempt, so this targets
 * buttons, button-styled links, the language <select>, and form controls. */
button,
.btn,
[role="button"],
select,
input[type="checkbox"],
input[type="radio"] {
  min-height: 24px;
  min-width: 24px;
}

/* Give checkbox/radio a little hit area without changing their visual size. */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

/* ====================================================================== *
 *  Accessibility Mode — html.a11y-mode
 * ====================================================================== */

/* 1. Larger text. Scaling the root font scales the whole rem-based layout, so
 *    spacing grows with the type instead of cramping. ~18px base. */
html.a11y-mode {
  font-size: 118.75%;
}

/* 2. Higher contrast. We override the design tokens (not individual rules), so
 *    every component inherits the stronger palette. Secondary text in particular
 *    stops being grey — the most common AA contrast failure. */
html.a11y-mode {
  --ink:             #101317;   /* ~16:1 on surface */
  --muted:           #34393f;   /* ~10:1 (was ~4.6:1) */
  --hairline:        #b9bdb7;   /* visible borders, not faint */
  --hairline-strong: #8d918b;
  --accent:          #1d3c5e;   /* stronger link/button blue */
  --accent-strong:   #142b44;
  --focus:           #0b3d91;   /* deep, unmistakable focus */
}

/* 3. Persistent labels. Secondary/caption text is no longer dimmed — labels and
 *    helper text read at full contrast (brief §11 "persistent labels"). */
html.a11y-mode .muted,
html.a11y-mode .caption,
html.a11y-mode .eyebrow {
  color: var(--ink);
}

/* 4. Simplified, flat surfaces. Remove decorative depth/gradients so structure
 *    is carried by borders and spacing, not shadow. */
html.a11y-mode .card,
html.a11y-mode .site-header,
html.a11y-mode .notice {
  box-shadow: none;
  background-image: none;
}
html.a11y-mode .card {
  border: 1px solid var(--hairline-strong);
}

/* 5. Stronger focus indicator. */
html.a11y-mode :focus-visible,
html.a11y-mode [tabindex="-1"]:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

/* 6. Larger touch targets for primary controls (toward §2.5.5). */
html.a11y-mode button,
html.a11y-mode .btn,
html.a11y-mode [role="button"],
html.a11y-mode select,
html.a11y-mode input[type="text"],
html.a11y-mode input[type="email"],
html.a11y-mode input[type="password"] {
  min-height: 44px;
}

/* 7. Motion off — independent of the OS preference, since the user asked for it
 *    explicitly here. Mirrors the prefers-reduced-motion rules in site.css. */
html.a11y-mode *,
html.a11y-mode *::before,
html.a11y-mode *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}