/* accessibility-2026.css — re-implements the html-class accessibility toggles
   (set by settings.html) against the new --bento-* tokens and component
   classes. The original accessibility.css stays loaded, untouched, for pages
   not yet redesigned. Never use outline:none without a replacement. */

.skip-link {
  position: absolute;
  top: -999px; left: -999px;
  padding: 12px 20px;
  background: var(--bento-tan-200);
  color: var(--bento-btn-text);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--r-sm);
  z-index: 10000;
  text-decoration: none;
  font-style: normal;
}
.skip-link:focus {
  top: 8px; left: 8px;
  outline: 3px solid var(--bento-tan-300);
  outline-offset: 2px;
}

[role="button"]:focus-visible,
[role="option"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bento-tan-300) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-xs);
}

button, [role="button"], a, input[type="button"], input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}

/* ── High Contrast Mode ───────────────────────────────────────────────── */
html.high-contrast {
  --bento-white: #000000;
  --bento-cream: #000000;
  --bento-sand: #111111;
  --bento-tan-100: #222222;
  --bento-tan-200: #FFFF00;
  --bento-tan-300: #FFFF00;
  --bento-line: #FFFFFF;
  --bento-ink: #FFFFFF;
  --bento-ink-soft: #EEEEEE;
  --bento-btn-text: #000000;
}
html.high-contrast * { border-color: #FFFFFF !important; text-shadow: none !important; }
html.high-contrast a { color: #FFFF00 !important; }
html.high-contrast img { filter: contrast(1.3); }

/* ── Dyslexia-Friendly Font ───────────────────────────────────────────── */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
html.dyslexic {
  --font-display: 'OpenDyslexic', 'Comic Sans MS', cursive;
  --font-body: 'OpenDyslexic', 'Comic Sans MS', cursive;
}
html.dyslexic body,
html.dyslexic p, html.dyslexic li, html.dyslexic div, html.dyslexic span,
html.dyslexic h1, html.dyslexic h2, html.dyslexic h3, html.dyslexic h4 {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important;
  font-style: normal !important;
  letter-spacing: 0.05em;
  word-spacing: 0.12em;
  line-height: 1.9 !important;
}

/* ── Colour Blind Mode ────────────────────────────────────────────────── */
html.colorblind {
  --bento-success: #0057B7;
  --bento-error: #D55E00;
  --bento-warning: #E69F00;
  --bento-info: #56B4E9;
}
html.colorblind .btn-fill,
html.colorblind .chip.is-active,
html.colorblind .bento-card--tan,
html.colorblind .site-nav__links a.is-active {
  position: relative;
  overflow: hidden;
}
html.colorblind .btn-fill::after,
html.colorblind .chip.is-active::after,
html.colorblind .bento-card--tan::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(0,0,0,0.13) 4px, rgba(0,0,0,0.13) 8px
  );
}

/* ── Font Size Adjustments ────────────────────────────────────────────── */
html.font-sm { font-size: 14px; }
html.font-sm .article-content { font-size: 0.95rem; line-height: 1.75; }
html.font-lg { font-size: 20px; }
html.font-lg .article-content { font-size: 1.1rem; line-height: 1.9; }

/* ── Warm / Sepia Mode ────────────────────────────────────────────────── */
html.warm {
  --bento-white: #F0E6D0;
  --bento-cream: #F8F0DC;
  --bento-sand: #EDE0C8;
  --bento-ink: #2C1810;
  --bento-ink-soft: #5C3820;
}
html.warm img { filter: sepia(15%); }

/* ── Reduced Motion (manual site toggle, distinct from OS prefers-reduced-motion) ── */
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── Misc ─────────────────────────────────────────────────────────────── */
[aria-hidden="true"] { pointer-events: none; }
label.required::after { content: ' *'; color: var(--bento-error); font-style: normal; }
.field-error {
  border-color: var(--bento-error) !important;
  box-shadow: 0 0 0 3px rgba(163,74,58,0.15) !important;
}
.field-error-msg {
  color: var(--bento-error);
  font-size: 0.82rem;
  font-style: normal;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}