/* Toegankelijkheidswidget + de aanpassingen die bezoekers kunnen kiezen.
   De aanpassingen gelden voor de pagina (body > alles behalve de widget), niet voor de widget zelf,
   zodat het paneel altijd bruikbaar blijft. */

/* ===== Aanpassingen op de pagina ===== */

/* Tekstgrootte: de hele pagina schaalt mee en loopt opnieuw door (geen horizontaal scrollen). */
html[data-a11y-tekst="1"] body > :not(.mhd-a11y) { zoom: 1.15; }
html[data-a11y-tekst="2"] body > :not(.mhd-a11y) { zoom: 1.3; }
html[data-a11y-tekst="3"] body > :not(.mhd-a11y) { zoom: 1.5; }

/* Kleurverzadiging */
html[data-a11y-kleur="laag"] body > :not(.mhd-a11y) { filter: saturate(.5); }
html[data-a11y-kleur="hoog"] body > :not(.mhd-a11y) { filter: saturate(1.6); }
html[data-a11y-kleur="zwartwit"] body > :not(.mhd-a11y) { filter: grayscale(1); }

/* Koppen markeren */
html.a11y-koppen body > :not(.mhd-a11y) :is(h1, h2, h3, h4, legend, summary) {
  outline: 3px solid var(--action); outline-offset: 4px; border-radius: 4px;
}

/* Links markeren: gewone links geel met zwarte tekst, knoppen een dikke rand. */
html.a11y-links body > :not(.mhd-a11y) a:not(.btn) {
  background: #ffe14d !important; color: #000000 !important;
  text-decoration: underline 2px !important; text-underline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe14d; border-radius: 2px;
}
html.a11y-links body > :not(.mhd-a11y) :is(a.btn, button) { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* Dyslexievriendelijk lettertype (Lexend wordt pas geladen als iemand dit kiest). */
html.a11y-dyslexie body > :not(.mhd-a11y),
html.a11y-dyslexie body > :not(.mhd-a11y) * { font-family: "Lexend", "Atkinson Hyperlegible", Verdana, sans-serif !important; }

/* Vetgedrukte tekst */
html.a11y-vet body > :not(.mhd-a11y),
html.a11y-vet body > :not(.mhd-a11y) * { font-weight: 700 !important; }

/* Letterafstand en regelafstand (de waarden uit WCAG 1.4.12) */
html.a11y-letterafstand body > :not(.mhd-a11y),
html.a11y-letterafstand body > :not(.mhd-a11y) * { letter-spacing: .12em !important; word-spacing: .16em !important; }
html.a11y-regelafstand body > :not(.mhd-a11y) :is(p, li, dd, dt, label, blockquote, figcaption, summary, td, th, span, a) { line-height: 2 !important; }
html.a11y-regelafstand body > :not(.mhd-a11y) p { margin-bottom: .5em; }

/* Tekst links uitlijnen */
html.a11y-links-uitlijnen body > :not(.mhd-a11y),
html.a11y-links-uitlijnen body > :not(.mhd-a11y) * { text-align: left !important; }

/* Animaties en overgangen uit */
html.a11y-animaties-uit *, html.a11y-animaties-uit *::before, html.a11y-animaties-uit *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* Grote muisaanwijzer: zwarte pijl met witte rand; boven iets klikbaars wordt hij blauw. */
html.a11y-grote-cursor, html.a11y-grote-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 27H22l8 14-6 3-8-14-10 9z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-grote-cursor :is(a, button, label, summary, select, [role="button"]),
html.a11y-grote-cursor :is(a, button, label, summary, select, [role="button"]) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 27H22l8 14-6 3-8-14-10 9z' fill='%230033a0' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important;
}

/* Leeslijn: een balk die met de muis (of de focus) meebeweegt. */
.mhd-a11y__leeslijn {
  position: fixed; left: 0; right: 0; height: 44px; z-index: 90; pointer-events: none;
  border-block: 3px solid var(--action); background: color-mix(in srgb, var(--action) 8%, transparent);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .18);
}

/* ===== De widget zelf ===== */
.mhd-a11y { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: var(--ink); }
.mhd-a11y *, .mhd-a11y *::before, .mhd-a11y *::after { box-sizing: border-box; }

.mhd-a11y__open {
  position: fixed; left: var(--space-2); bottom: var(--space-2); z-index: 95;
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  display: grid; place-items: center; cursor: pointer;
  background: var(--chrome); color: var(--on-chrome);
  border: 3px solid var(--on-chrome); box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.mhd-a11y__open svg { width: 30px; height: 30px; }
.mhd-a11y__open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 767px) {
  /* Op telefoons staat de knop ín de vaste balk met "Plan mijn klus" en "Bel", zodat hij geen tekst bedekt. */
  body.has-sticky-cta .mhd-a11y__open { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  body.has-sticky-cta .sticky-cta { padding-left: 72px; }
  body.has-sticky-cta .sticky-cta .btn--secondary { flex: 0 0 auto; }
  /* Zonder vaste balk: houd een element met focus vrij van de knop (WCAG 2.4.11). */
  html { scroll-padding-bottom: 88px; }
}

.mhd-a11y__panel {
  position: fixed; left: var(--space-2); bottom: 88px; z-index: 96;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow-y: auto;
  background: var(--surface-raised); color: var(--ink);
  border: 2px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  padding: var(--space-3); display: grid; gap: var(--space-3);
}
.mhd-a11y__panel[hidden] { display: none; }
@media (max-width: 767px) {
  .mhd-a11y__panel { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: calc(100dvh - 16px); }
}

.mhd-a11y__kop { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.mhd-a11y__kop h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--ink); }
.mhd-a11y__sluit {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink);
}
.mhd-a11y__sluit svg { width: 22px; height: 22px; }
.mhd-a11y__intro { margin: 0; font-size: 16px; color: var(--ink-muted); }

.mhd-a11y__groep { display: grid; gap: var(--space-1); }
.mhd-a11y__groep h3 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }

.mhd-a11y__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }

.mhd-a11y button { font: inherit; }
.mhd-a11y__knop {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px;
  border: 2px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); text-align: left; cursor: pointer;
  font-size: 16px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; min-width: 0;
}
.mhd-a11y__knop svg { width: 22px; height: 22px; flex: none; }
.mhd-a11y__knop:hover { border-color: var(--action); }
.mhd-a11y__knop[aria-pressed="true"] { border-color: var(--action); background: var(--action-soft); font-weight: 700; }
.mhd-a11y__knop[aria-pressed="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; color: var(--action); }
.mhd-a11y :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.mhd-a11y__stapper { display: grid; grid-template-columns: 52px 1fr 52px; gap: var(--space-1); align-items: center; }
.mhd-a11y__stapper button {
  height: 52px; border: 2px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); font-size: 26px; font-weight: 700; cursor: pointer;
}
.mhd-a11y__stapper button:disabled { opacity: .45; cursor: not-allowed; }
.mhd-a11y__stapper output { text-align: center; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

.mhd-a11y__status { margin: 0; font-size: 16px; color: var(--ink-muted); min-height: 1.5em; }

.mhd-a11y__voet { display: grid; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.mhd-a11y__reset {
  min-height: 48px; border-radius: var(--radius-md); border: 2px solid var(--action);
  background: var(--action); color: var(--on-action); font-weight: 700; cursor: pointer;
}
.mhd-a11y__voet a { color: var(--action); font-size: 16px; }
.mhd-a11y__voet p { margin: 0; font-size: 15px; color: var(--ink-muted); }
.mhd-a11y kbd { font-family: inherit; font-weight: 700; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 4px; }