/*
  Esatto.Umbraco.Backoffice.Accessibility: visitor features.

  Every site rule below is keyed on a data-a11y-* attribute on <html>, set by a11y-boot.js from the
  visitor's choices and OS settings. Nothing applies until an attribute is set. The defaults are
  deliberately conservative; refine them in the site's own CSS, e.g.
    html[data-a11y-contrast="high"] .hero { background: #000; color: #fff; }
*/

/* ---------- Readable font (Atkinson Hyperlegible, SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/esatto-accessibility/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/esatto-accessibility/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Larger text (works when the site sizes text in rem/em) ---------- */
html[data-a11y-text="large"] { font-size: 125% !important; }

/* ---------- Bigger buttons and more spacing (WCAG 1.4.12 text spacing + 44px targets, 2.5.5) ---------- */
html[data-a11y-spacing="wide"] body :is(p, li, dd, dt, td, th, blockquote, figcaption) {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
html[data-a11y-spacing="wide"] body p { margin-block-end: 2em !important; }
html[data-a11y-spacing="wide"] body :is(button, select, input:not([type="checkbox"]):not([type="radio"]), textarea, summary, [role="button"]) {
  min-block-size: 44px !important;
  min-inline-size: 44px !important;
}
html[data-a11y-spacing="wide"] body :is(input[type="checkbox"], input[type="radio"]) {
  inline-size: 24px !important;
  block-size: 24px !important;
}
/* Links outside running text (menus, footers, cards) become 44px targets with room between them. */
html[data-a11y-spacing="wide"] body :is(nav, header, footer, aside, [role="navigation"]) a {
  display: inline-flex !important;
  align-items: center !important;
  min-block-size: 44px !important;
  min-inline-size: 44px !important;
  padding-inline: 0.25em !important;
}
html[data-a11y-spacing="wide"] body :is(nav, header, footer, aside, [role="navigation"]) :is(ul, ol) { row-gap: 8px !important; column-gap: 12px !important; }
html[data-a11y-spacing="wide"] body :is(button, [role="button"], .button, .btn) + :is(button, [role="button"], .button, .btn) { margin-inline-start: 12px !important; }

/* ---------- High contrast ----------
   Dark text on white everywhere: every element gets a solid white background and no background image,
   so text can never end up dark-on-dark inside a dark hero, header or footer. Media is left alone (never
   filter: contrast(), which distorts images). The panel keeps its own styles. */
html[data-a11y-contrast="high"] body,
html[data-a11y-contrast="high"] body *:not(img, svg, svg *, video, picture, canvas, iframe, .esatto-a11y, .esatto-a11y *, .esatto-a11y-guide) {
  color: #111 !important;
  background-color: #fff !important;
  background-image: none !important;
  text-shadow: none !important;
}
html[data-a11y-contrast="high"] body a:not(.esatto-a11y *) { color: #0b3d91 !important; }
html[data-a11y-contrast="high"] body :is(button, input, select, textarea, [role="button"]):not(.esatto-a11y *) {
  border: 2px solid #111 !important;
}
html[data-a11y-contrast="high"] body :focus-visible { outline: 3px solid #111 !important; outline-offset: 3px !important; }

/* ---------- Reduce motion ---------- */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---------- Readable font (icons keep their own fonts) ---------- */
html[data-a11y-font="readable"] body,
html[data-a11y-font="readable"] body :not(i):not([class*="icon"]):not([class*="fa-"]):not(code):not(pre):not(kbd) {
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important;
}

/* ---------- Highlight links ---------- */
html[data-a11y-links="highlight"] body a {
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

/* ---------- Reading guide ---------- */
.esatto-a11y-guide {
  position: fixed;
  inset-inline: 0;
  top: 0;
  block-size: 3.5em;
  pointer-events: none;
  z-index: 2147483646;
  background: rgb(255 230 0 / 0.18);
  border-block: 2px solid rgb(0 0 0 / 0.6);
}
.esatto-a11y-guide[hidden] { display: none; }

/* ---------- The panel itself (WCAG 2.2 AAA) ---------- */
.esatto-a11y {
  position: fixed;
  inset-block-end: 1rem;
  z-index: 2147483647;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.esatto-a11y[data-position="bottom-right"] { inset-inline-end: 1rem; }
.esatto-a11y[data-position="bottom-left"] { inset-inline-start: 1rem; }
/* Stepped aside for a focused element it would cover (a11y-panel.ts); still reachable with Tab, and back on focus. */
.esatto-a11y[data-yield] { opacity: 0; pointer-events: none; }
.esatto-a11y__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: 0.5em 1em 0.5em 0.75em;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #1b264f;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
}
.esatto-a11y__button:hover { background: #0f1736; }
.esatto-a11y__button:focus-visible { outline: 3px solid #1b264f; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.esatto-a11y__icon { flex: none; }
.esatto-a11y__dialog {
  box-sizing: border-box;
  max-inline-size: min(28rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  border: 2px solid #111;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
.esatto-a11y__dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.esatto-a11y__title { margin: 0 0 1rem; font-size: 1.25rem; color: #111; }
.esatto-a11y__options { border: 0; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.esatto-a11y__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 44px;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  color: #111;
}
.esatto-a11y__option:hover { background: #eef0f6; }
.esatto-a11y__option input { inline-size: 24px; block-size: 24px; margin: 0; flex: none; accent-color: #1b264f; }
.esatto-a11y__note { margin: 1rem 0; font-size: 0.9rem; color: #333; }
.esatto-a11y__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
.esatto-a11y__primary,
.esatto-a11y__secondary {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0.5em 1.25em;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.esatto-a11y__primary { border: 2px solid #1b264f; background: #1b264f; color: #fff; }
.esatto-a11y__secondary { border: 2px solid #1b264f; background: #fff; color: #1b264f; }
.esatto-a11y__dialog :focus-visible { outline: 3px solid #1b264f; outline-offset: 2px; }
.esatto-a11y__visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Windows High Contrast / forced colours: system colours, visible borders and focus. */
@media (forced-colors: active) {
  .esatto-a11y__button, .esatto-a11y__primary, .esatto-a11y__secondary { border: 2px solid ButtonText; forced-color-adjust: auto; }
  .esatto-a11y__dialog { border: 2px solid CanvasText; }
  .esatto-a11y-guide { background: transparent; border-block: 3px solid Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}