/* =============================================================================
   Accessibility layer — WCAG 2.1 AA.
   Loaded AFTER styles.css so the design-system file stays byte-identical across
   all Online CPD Academy sites. It only re-points colour tokens to AA-compliant
   shades of the same brand blue / grey and adds missing keyboard-focus styles,
   fixing contrast on every CTA button, accent text, link and fine-print at once.
   Fully reversible: remove the <link rel="stylesheet" href="/assets/css/a11y.css">
   tag from the pages to revert to the original palette.
   ----------------------------------------------------------------------------- */
:root {
  --c-brand:        #0B6FAC;  /* was #00A4EE (~2.8:1 on white) -> ~5.4:1 — passes AA for accent text + links */
  --c-cart:         #1E6AC4;  /* was #2B7EE0 (~4.1:1) -> ~5.4:1 — AA for white text on the CTA / add-to-basket pills */
  --c-brand-hover:  #085C8E;  /* darker hover for the new brand blue */
  --c-muted:        #566173;  /* was #8A94A6 (~2.9:1) -> ~6.4:1 — readable fine-print / helper text */
}

/* Visible keyboard-focus indicator for custom radio/checkbox "option" controls
   whose real <input> is visually hidden (opacity:0) — e.g. the quiz / team
   calculator risk selector. Without this the global :focus-visible ring lands on
   the invisible input and a keyboard user sees no focus. Harmless on pages with
   no .quiz-option. */
.quiz-option:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(11,111,172,.35);
}

/* Blue accents on DARK navy sections need a LIGHT blue — the AA brand blue
   (#0B6FAC, tuned for white backgrounds) is too dark to read on navy.
   Covers the hero eyebrow/headline highlight and the team-pack manager panel
   ("FOR MANAGERS" eyebrow, the seat-count numbers, the tick icons). */
.hero .eyebrow,
.hero h1 .h1-levels,
.tp-manager-eyebrow,
.tp-manager-mix-count,
.accred-section .eyebrow { color: #8fd4f3 !important; }
.tp-manager-list li svg { color: #8fd4f3; }
.tp-manager-eyebrow { background: rgba(143,212,243,.16); }

/* Further blue-on-dark fixes: the "How it works" step labels/eyebrow and the
   dark page-header banner's eyebrow + breadcrumb all sit on navy. */
.hiw-head .eyebrow,
.hiw-num,
.page-header .eyebrow,
.page-header .breadcrumb a { color: #8fd4f3 !important; }
.page-header .breadcrumb,
.page-header .breadcrumb li,
.page-header .breadcrumb span { color: rgba(255,255,255,.75); }

/* Base scale: the original 18px desktop cap read as "zoomed in"; a standard
   16px max gives a more comfortable, professional density (whole rem-based
   design scales with it). */
html { font-size: clamp(15px, 14px + 0.2vw, 16px); }

/* Tap targets — remaining small controls (>=40px) */
.tpc-stepper button { min-width:40px; min-height:40px; }
.cart-remove { min-height:40px; display:inline-flex; align-items:center; }