/* Green Flag Theory — the "Accessibility" menu and its effects. Same design as the Oliver Ulysse
   site, with this site's colours (--bg, --text, --muted, --line, --card, --accent). */

/* The floating button, bottom right of every page. Hidden until settings.js has run. */
html:not(.settings-ready) .a11y-button { display: none !important; }
.a11y-button {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px 10px 12px; border: 0; border-radius: 999px;
  background: var(--text); color: var(--bg); cursor: pointer;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.a11y-button:hover, .a11y-button[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
.a11y-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.a11y-button svg { flex: none; }
/* Small screens: icon only, the name stays for screen readers. */
@media (max-width: 640px) {
  .a11y-button { padding: 12px; }
  .a11y-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .a11y-button, .a11y-panel { display: none !important; } }

.a11y-panel {
  position: fixed; bottom: 76px; right: 16px; z-index: 1000;
  width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 92px); overflow: auto;
  padding: 24px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
  font: 500 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { margin: 0 0 18px; padding: 0; font: 700 1.6rem/1 "Oswald", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
.a11y-panel .a11y-group { margin: 0 0 10px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.a11y-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.a11y-panel button { min-height: 36px; font: 600 14px/1 system-ui, sans-serif; color: var(--text); background: var(--card); border: 1.5px solid transparent; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.a11y-panel button:hover { border-color: var(--text); }
.a11y-panel button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.a11y-panel button:focus-visible, .a11y-panel input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.a11y-panel label { display: flex; gap: 12px; align-items: center; padding: 7px 0; min-height: 36px; cursor: pointer; }
.a11y-panel input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.a11y-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.a11y-panel [data-a11y-reset] { background: none; padding: 9px 4px; color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; }
.a11y-panel [data-a11y-reset]:hover { border-color: transparent; }
.a11y-panel [data-a11y-close] { margin-left: auto; background: var(--text); color: var(--bg); }
.a11y-panel .a11y-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- The effects ---------- */
html.a11y-size-2 body { zoom: 1.15; }
html.a11y-size-3 body { zoom: 1.3; }
html.a11y-size-2 .a11y-panel, html.a11y-size-2 .a11y-button { zoom: .87; }
html.a11y-size-3 .a11y-panel, html.a11y-size-3 .a11y-button { zoom: .77; }

/* Stronger contrast: black on white in light theme, white on black in dark theme. */
:root.a11y-contrast.theme-light, :root.a11y-contrast:not(.theme-light):not(.theme-dark) {
  --bg: #fff; --text: #000; --muted: #000; --line: #000; --card: #fff;
  --accent: #0d5c2c; --accent-text: #0d5c2c; --on-accent: #fff; --red: #8f1d14; --focus: #0d5c2c;
}
:root.a11y-contrast.theme-dark {
  --bg: #000; --text: #fff; --muted: #fff; --line: #fff; --card: #000;
  --accent: #5ef08f; --accent-text: #5ef08f; --on-accent: #000; --red: #ff9a90; --focus: #5ef08f;
}
html.a11y-contrast .flag, html.a11y-contrast .help { border-width: 2px; }

html.a11y-readable body, html.a11y-readable body *:not(.a11y-panel):not(.a11y-panel *) {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif !important; letter-spacing: .01em !important;
}
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable .brand, html.a11y-readable .kicker { text-transform: none !important; }

html.a11y-spacing body p, html.a11y-spacing body li, html.a11y-spacing body dd { line-height: 1.95 !important; }

html.a11y-links body a { text-decoration: underline !important; text-underline-offset: .18em; }

html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Room under the footer so the floating button never covers its content. */
body::after { content: ""; display: block; height: 72px; }
@media print { body::after { display: none; } }