/* What the accessibility menu does to a page. ONE file for both sites: the app's CSS imports it into its `a11y` layer (src/accessibility.css, which adds the px
 * text sizes that only Tailwind's classes need) and the landing pages link it as it is (public/landing/a11y.js loads the menu itself).
 *
 * The menus put `data-a11y-*` attributes on <html> (src/lib/accessibility.ts in the app, public/landing/a11y.js on the landing pages: the same names, the same
 * values, the same localStorage entry, so a choice made on one site holds on the other) and the rules below follow them. Nothing here applies to a visitor who
 * switched nothing on.
 *
 * Every declaration is `!important`: in the app the rules live in a cascade layer declared before Tailwind's (where a normal declaration would lose to everything and
 * an `!important` one beats the app's own `!important` colours and fonts), and on the landing pages they must win over the page's own styles.
 */

/* ── Text size ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   The root font size follows the text size setting: whatever is sized in rem (the app) or inherits it moves with it. Text sized in px is multiplied by
   --a11y-scale where it is declared: the landing pages write `font-size: calc(15px * var(--a11y-scale, 1))` (and `--a11y-scale-lg` for sizes of 24px and up, which grow less),
   the app's Tailwind classes are covered in
   src/accessibility.css. A test fails when a px size is left out (src/lib/accessibility.test.ts, tools/landing/test/landing.test.mjs). */
html[data-a11y-font] { font-size: calc(100% * var(--a11y-scale, 1)) !important; }

/* ── Contrast ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* White on black. Photos are <img>, so they stay; gradients and background pictures are dropped (text must not sit on them). The menu's own dim layer behind its panel keeps its tint. */
html[data-a11y-contrast="dark"] body,
html[data-a11y-contrast="dark"] body *:not(img, video, canvas, iframe, [data-a11y-backdrop]) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-a11y-contrast="dark"] body *:not([style*="url("]) { background-image: none !important; }
html[data-a11y-contrast="dark"] body :is(a, a *) { color: #ff0 !important; }
/* a button is no longer a coloured shape, so it gets an outline that does not move the layout */
html[data-a11y-contrast="dark"] body :is(button, [role="button"], summary, select) { outline: 1px solid #fff !important; outline-offset: -1px !important; }
/* what is selected (a day, a time, a tab) was told apart by its colour: it keeps being told apart, reversed */
html[data-a11y-contrast="dark"] body :is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"]), .rdp-selected),
html[data-a11y-contrast="dark"] body :is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"]), .rdp-selected) * {
  background-color: #fff !important;
  color: #000 !important;
}

/* Black on white */
html[data-a11y-contrast="light"] body,
html[data-a11y-contrast="light"] body *:not(img, video, canvas, iframe, [data-a11y-backdrop]) {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-a11y-contrast="light"] body *:not([style*="url("]) { background-image: none !important; }
html[data-a11y-contrast="light"] body :is(a, a *) { color: #0000b3 !important; }
html[data-a11y-contrast="light"] body :is(button, [role="button"], summary, select) { outline: 1px solid #000 !important; outline-offset: -1px !important; }
html[data-a11y-contrast="light"] body :is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"]), .rdp-selected),
html[data-a11y-contrast="light"] body :is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current]:not([aria-current="false"]), .rdp-selected) * {
  background-color: #000 !important;
  color: #fff !important;
}

/* The colours reversed. A filter keeps every difference between colours (so a selected day is still told from the others); the pictures are reversed back. */
html[data-a11y-contrast="invert"] { filter: invert(1) hue-rotate(180deg) !important; }
html[data-a11y-contrast="invert"] body :is(img, video, canvas, iframe, picture, [style*="url("]) { filter: invert(1) hue-rotate(180deg) !important; }

/* Grey tones (on <html>, so a fixed bar or a dialog is covered too; a filter on the root does not make a box for fixed elements) */
html[data-a11y-gray] { filter: grayscale(1) !important; }
html[data-a11y-gray][data-a11y-contrast="invert"] { filter: invert(1) hue-rotate(180deg) grayscale(1) !important; }

/* Mark a focused control in the two high-contrast colour schemes the way the focus setting does */
html[data-a11y-contrast="dark"] body :focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px !important; }
html[data-a11y-contrast="light"] body :focus-visible { outline: 3px solid #0000b3 !important; outline-offset: 2px !important; }

/* ── Reading ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-a11y-links] body :is(a, [role="link"]) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.2em !important;
  font-weight: 700 !important;
}
html[data-a11y-headings] body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
  background-color: #fff6bf !important;
  color: #000 !important;
  outline: 2px solid #1a3d8f !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
  padding-inline: 0.25em !important;
}
/* a plain, familiar typeface (Layout sets the page font with !important, which a layer declared first still beats) */
html[data-a11y-readable] body,
html[data-a11y-readable] body * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; }
html[data-a11y-spacing] body * {
  line-height: 1.75 !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.12em !important;
}

/* ── Motion and pointer ───────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-a11y-motion],
html[data-a11y-motion] *,
html[data-a11y-motion] *::before,
html[data-a11y-motion] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/* A big arrow, and a big hand over what can be clicked (SVG cursors, black with a white edge; the hotspot is the tip). */
html[data-a11y-cursor],
html[data-a11y-cursor] body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8 3.8 7.7-3.2 1.5-3.8-7.7L4.5 19.5z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html[data-a11y-cursor] body :is(a, button, [role="button"], [role="link"], [role="tab"], summary, label, select, input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], .cursor-pointer, .cursor-pointer *) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='white' stroke-width='4.2'%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-4 0v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3Cg stroke='black' stroke-width='1.8'%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-4 0v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/g%3E%3C/svg%3E") 8 3, pointer !important;
}

/* ── Keyboard focus ───────────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-a11y-focus] body :focus-visible {
  outline: 4px solid #0b3fa8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 7px #fff !important;
}
html[data-a11y-focus][data-a11y-contrast="dark"] body :focus-visible {
  outline-color: #ff0 !important;
  box-shadow: 0 0 0 7px #000 !important;
}