/* Accuservice - basis.
   theme.json is de bron voor kleuren/typografie in de editor. Hieronder staan
   dezelfde designtokens onder hun ONTWERPnaam (--kleur-*), zodat de blokpatronen
   die uit het goedgekeurde ontwerp komen één-op-één blijven werken, plus een
   handvol regels die theme.json niet kan uitdrukken. */

:root {
  --kleur-primair: #3C529E;
  --kleur-primair-donker: #2E4080;
  --kleur-primair-40: #B1BAD8;
  --kleur-primair-15: #E2E5F1;
  --kleur-accent: #F03920;
  --kleur-accent-40: #F9B0A6;
  --kleur-accent-15: #FDE1DE;
  --kleur-secundair: #444A5A;
  --kleur-tekst: #000000;
  --kleur-tekst-zacht: #4A4A4A;
  --kleur-rand: #E6E6E6;
  --kleur-veldrand: #6B77A6; /* rand van invulvelden: ~4:1 op wit en op de paginakleur (WCAG 1.4.11), i.t.t. --kleur-primair-40 dat daarvoor te licht is */
  --kleur-achtergrond: #F7F8FB;
  --kleur-wit: #FFFFFF;
  --font-titel: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --tekst-basis: 17px;
  --radius: 2px;
}

/* Dingen die theme.json niet dekt */
/* Focusrand zichtbaar op ELKE ondergrond: een witte ring om het element met een
   merkblauwe ring eromheen. Op een lichte pagina valt de witte weg maar blijft de
   blauwe zichtbaar; op donker (voettekst, mobiele balk, blauwe knoppen) andersom.
   Accentrood op het voettekst-blauw haalde de WCAG-drempel van 3:1 niet. */
:focus-visible { outline: 3px solid var(--kleur-primair); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

img { max-width: 100%; height: auto; }
body { text-wrap: pretty; }

/* Raakvlakken minimaal 48px (ruimer dan de norm van 44) - stijlgids */
.wp-element-button,
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

/* Megamenu valt dicht op aanraakschermen (geen hover) - progressive enhancement */
@media (hover: none) { [data-mega]:hover > [data-mega-paneel] { display: none; } }