/* ♿ Accessibility options (js/a11y.js): each person's own choices, on every page (dashboard, web shop, /join, home).
   They work on top of any look (Ember, Daylight, a member shop's own) because they only adjust tokens and a few rules. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
}

/* Always on: a skip link for keyboard and screen-reader users, a clear focus ring */
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--accent); outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Text size (rem-based sizes follow; the browser's own zoom keeps working too) */
html[data-a11y-text="115"] { font-size: 115%; }
html[data-a11y-text="130"] { font-size: 130%; }
html[data-a11y-text="150"] { font-size: 150%; }

/* Stronger contrast: full-strength text, borders that carry meaning, nothing see-through or moving. The :not(#a11y) only
   raises specificity so this wins over every theme's own colour rules (Ember, Daylight, a member shop's look). */
:root:not(#a11y)[data-a11y-contrast] {
  --text-muted: var(--text);
  --text-subtle: var(--text);
  --border: var(--border-strong);
  --glow: none;
}
html[data-a11y-contrast] *, html[data-a11y-contrast] *::before, html[data-a11y-contrast] *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important;
}
html[data-a11y-contrast] .backdrop, html[data-a11y-contrast] body::before { display: none !important; }
html[data-a11y-contrast] :focus-visible { outline-width: 3px; }

/* Easier-to-read font */
:root:not(#a11y)[data-a11y-font] { --font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif; }
html[data-a11y-font] body { font-family: var(--font); }

/* More text spacing (WCAG 1.4.12 Text Spacing values) */
html[data-a11y-spacing] body { letter-spacing: 0.12em; word-spacing: 0.16em; line-height: 1.6; }
html[data-a11y-spacing] p { margin-bottom: 1em; }

/* Underline links */
html[data-a11y-links] a { text-decoration: underline; text-underline-offset: 0.18em; }

/* Reduce motion: nothing animates, moving backgrounds stop (js/a11y.js motionOff() also stops video autoplay) */
html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
html[data-a11y-motion] .backdrop { display: none !important; }

/* Bigger buttons and touch targets (WCAG 2.5.5 target size: 44 px and more) */
html[data-a11y-targets] :is(button, .btn, a.btn, select, input:not([type="checkbox"]):not([type="radio"])) { min-height: 48px; }
html[data-a11y-targets] :is(input[type="checkbox"], input[type="radio"]) { width: 24px; height: 24px; }
html[data-a11y-targets] .btn { padding-inline: 20px; }

/* The panel */
.a11y-panel { display: grid; gap: 14px; }
.a11y-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.a11y-row__check { width: 22px; height: 22px; accent-color: var(--accent); }
.a11y-row__label { font-weight: 600; cursor: pointer; }
.a11y-row__help { grid-column: 2; margin: 0; color: var(--text-muted); font-size: var(--text-sm); }