/* ===========================================================================
   Accessibility overrides
   ===========================================================================

   This is the only stylesheet the course adds to the Material theme. It exists
   because two theme defaults fall below the WCAG 2.2 AA contrast thresholds
   when measured against this site's own palette (primary: indigo, accent:
   indigo, both colour schemes). Everything else is left to the theme.

   The numbers below are measured, not estimated: tools/check-accessibility.py
   recomputes them from the built stylesheet and checks that these selectors can
   actually match the markup, which fails if any of them drops back under
   threshold. Re-run that script after any theme upgrade.

   1. Link hover and focus colour.
      Material recolours a link on hover/focus with --md-accent-fg-color, which
      for `accent: indigo` is #526cfe in both schemes. Against this site's
      backgrounds that measures 4.26:1 on white and 3.78:1 on the dark page
      background — under 4.5:1, the AA threshold for body text. The resting link
      colours (#4051b5 and #5488e8) already pass, so hovering a link or tabbing
      to it currently makes the text harder to read. Overriding the variable keeps
      both states legible while staying in the indigo family.

   2. Collapsible disclosure indicator.
      The chevron on a <summary> takes the block type's colour. For the two types
      this course uses collapsibly, that is 2.98:1 (`note`) and 1.66:1
      (`question`) against the block's own tinted header — under the 3:1 threshold
      that applies to a non-text state indicator. Dark mode already passes
      (4.24:1 and 3.96:1) and is deliberately not overridden.

   Why the selectors look like this
   --------------------------------
   Material does **not** put the colour scheme on <html>. Its palette script sets
   `data-md-color-scheme` on **<body>**, and every one of the theme's own scheme
   rules is an unqualified `[data-md-color-scheme=…]` attribute selector that
   matches that element. A rule written as `html[data-md-color-scheme=…]` matches
   nothing, silently — which is how an earlier version of this file failed to
   change anything at all. The `:root` rule below covers the moment before that
   script runs (and readers with scripting disabled, who never get the attribute);
   the scheme-scoped rules, being more specific, then win.
   ======================================================================== */

/* 1. Link hover / focus ------------------------------------------------- */

/* Fallback for the pre-script and no-script state: light palette. */
:root {
  --md-accent-fg-color: #5c6bc0; /* 4.86:1 on white (was 4.26:1) */
}

/* ...and the matching fallback when the operating system asks for dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --md-accent-fg-color: #7f9cf5; /* 6.11:1 on the page background (was 3.78:1) */
  }
}

/* The reader's actual scheme, once Material has set it (and after a manual
   toggle). More specific than the theme's own variable declarations. */
body[data-md-color-scheme="default"] {
  --md-accent-fg-color: #5c6bc0; /* 4.86:1 on white, 6.29:1 on the code background */
}

body[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #7f9cf5; /* 6.11:1 on the page background, 5.41:1 on code */
}

/* 2. Collapsible disclosure chevron ------------------------------------- */

[data-md-color-scheme="default"] .md-typeset .note > summary::after {
  color: #2f74e0; /* 4.02:1 on the note header tint (was 2.98:1) */
}

[data-md-color-scheme="default"] .md-typeset .question > summary::after {
  color: #3d8c0e; /* 3.98:1 on the question header tint (was 1.66:1) */
}