/* =========================================================================
   PP DIGITAL, aanvulling.css
   De conditionele lagen die de Bricks Style Manager niet kan uitdrukken.
   Alle tokenwaarden staan in Bricks als global variables; dit bestand voegt
   uitsluitend voorwaardelijke regels toe.
   Bron: Bricks Foundation v1.0 deel 19, Build Specification v1.1.
   ========================================================================= */

/* ---------- 1. Terugval voor browsers zonder oklch ---------- */
@supports not (color: oklch(0 0 0)) {
  :root {
    --kleur-neutraal-50: #F7F5F0;
    --kleur-neutraal-100: #EFEDE8;
    --kleur-neutraal-200: #DEDCD6;
    --kleur-neutraal-300: #C6C4BE;
    --kleur-neutraal-400: #A7A49E;
    --kleur-neutraal-500: #88867F;
    --kleur-neutraal-600: #6B6963;
    --kleur-neutraal-700: #575550;
    --kleur-neutraal-800: #44423E;
    --kleur-neutraal-900: #2F2E29;
    --kleur-neutraal-950: #16181C;
    --kleur-zee-50: #EFF8FE;
    --kleur-zee-100: #DEF0FB;
    --kleur-zee-200: #C1E2F6;
    --kleur-zee-300: #98CCEB;
    --kleur-zee-400: #62AFD9;
    --kleur-zee-500: #2C90C1;
    --kleur-zee-600: #00729E;
    --kleur-zee-700: #0E5F83;
    --kleur-zee-800: #004866;
    --kleur-zee-900: #003249;
    --kleur-zee-950: #001C2B;
    --kleur-oker-50: #FEF4F0;
    --kleur-oker-100: #FCE8E0;
    --kleur-oker-200: #F7D4C6;
    --kleur-oker-300: #ECB6A0;
    --kleur-oker-400: #D99073;
    --kleur-oker-500: #BF6D4B;
    --kleur-oker-600: #A8481B;
    --kleur-oker-700: #863D1D;
    --kleur-oker-800: #692F15;
    --kleur-oker-900: #4A200E;
    --kleur-oker-950: #2B1106;
    --kleur-groen-50: #F1F9F3;
    --kleur-groen-100: #E1F2E6;
    --kleur-groen-200: #C6E6D0;
    --kleur-groen-300: #A0D2B1;
    --kleur-groen-400: #6FB78B;
    --kleur-groen-500: #419A68;
    --kleur-groen-600: #137D4B;
    --kleur-groen-700: #2C6E49;
    --kleur-groen-800: #00502D;
    --kleur-groen-900: #03381E;
    --kleur-groen-950: #022010;
    --kleur-rood-50: #FFF4F2;
    --kleur-rood-100: #FDE7E4;
    --kleur-rood-200: #F8D2CC;
    --kleur-rood-300: #EEB4AA;
    --kleur-rood-400: #DB8D81;
    --kleur-rood-500: #C2695D;
    --kleur-rood-600: #A34A3F;
    --kleur-rood-700: #A3281F;
    --kleur-rood-800: #6B2C24;
    --kleur-rood-900: #4B1E18;
    --kleur-rood-950: #2C100C;
    --kleur-cyaan: #29ABE2;
  }
}

/* ---------- 2. Ruimere kleuren op P3-schermen, alleen decoratief ---------- */
@media (color-gamut: p3) {
  :root { --kleur-cyaan: oklch(0.6985 0.16 232.4); }
}

/* ---------- 2b. Wortelgrootte terugzetten op de browserstandaard ----------
   Bricks zet in zijn frontend-CSS hardgecodeerd html{font-size:62.5%}, waardoor
   1rem 10px wordt. Het volledige tokenbestand is gerekend op 1rem = 16px:
   --ruimte-200 is 1rem en staat gedocumenteerd als 16px, --raakvlak-min is
   2.75rem en staat gedocumenteerd als 44px (WCAG 2.2 AAA).
   Zonder deze regel levert elk rem-token 62,5% van de vastgelegde waarde op.
   Bricks gebruikt in zijn eigen frontend-CSS 1 rem-waarde tegenover 118 px-waarden,
   dus deze correctie raakt Bricks' eigen componenten niet.
   Dit wijzigt geen enkel token; het herstelt de eenheid waarin ze gerekend zijn. */
html { font-size: 100%; }

/* ---------- 3. Focus, een regel voor de hele site ----------
   Twee tokens: de ring en de contraring, zodat de zichtbaarheid op licht
   en op omgekeerd vlak allebei boven 3:1 blijft.
   Geen border-radius: inherit, en geen outline: none. Build Specification. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 9px var(--focus-ring-contra);
}
/* De overslaan-naar-inhoudlink is verborgen tot hij focus krijgt. Zonder deze
   regel is hij voor een toetsenbordgebruiker onzichtbaar, en dat is precies de
   gebruiker voor wie hij bestaat. WCAG 2.4.1 plus de 44px-eis uit de Foundation. */
.u-alleen-schermlezer:focus-visible {
  position: static;
  inline-size: auto;
  block-size: auto;
  min-height: var(--raakvlak-min);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--ruimte-200);
  overflow: visible;
  clip-path: none;
  background-color: var(--vlak-papier);
  color: var(--tekst-primair);
}

html {
  scroll-padding-top: var(--header-hoogte, 6rem);
  scroll-padding-bottom: var(--onderbalk-hoogte, 4rem);
}

/* De vaste onderbalk staat over de inhoud. Onder 768 px krijgt de pagina daarom
   ruimte aan de onderkant, zodat de laatste regel niet onder de balk verdwijnt.
   Mobile first: de ruimte is er standaard en verdwijnt vanaf 768 px, precies waar
   de klasse onderbalk zichzelf ook verbergt. */
body {
  padding-block-end: var(--onderbalk-hoogte, 4rem);
}

@media (min-width: 768px) {
  body {
    padding-block-end: 0;
  }
}

/* ---------- 4. Bewegingsvoorkeur ----------
   Geen harde nul maar een verkorte, niet-verplaatsende variant. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duur-direct: 1ms; --duur-snel: 1ms; --duur-normaal: 1ms;
    --duur-traag: 1ms; --duur-pagina: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 5. Dwangmodus ----------
   Vier componenten dragen hun betekenis in het vlak. In hoogcontrast
   verdwijnt dat vlak, dus daar komt een rand voor in de plaats. */
@media (forced-colors: active) {
  .kaart, .meldblok, .tag, .cijferblok {
    border: 1px solid CanvasText;
  }
  .knop {
    border: 1px solid ButtonText;
  }
  :focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
}

/* ---------- 6. Aanwijzen, alleen op apparaten met een muis ---------- */
@media (hover: hover) {
  .knop--primair:hover { background-color: var(--actie-vlak-hover); }
  .knop--secundair:hover,
  .knop--outline:hover { border-color: var(--rand-sterk); background-color: var(--vlak-verdiept); }
  .knop--ghost:hover { text-decoration: underline; text-underline-offset: 0.15em; }
  .link:hover { color: var(--tekst-link-hover); text-decoration-thickness: 2px; }
  .veld:hover { border-color: var(--kleur-neutraal-700); }
  .kaart:hover { border-color: var(--rand-standaard); }
}

/* ---------- 9. Paginabreedte ----------
   De preview van Build 01 zet main op de maximale paginabreedte en centreert
   hem. De token --breedte-max bestond wel maar werd nergens toegepast, waardoor
   de l-laag-kolommen op brede schermen uit elkaar liepen. */
main#brx-content {
  max-inline-size: var(--breedte-max);
  margin-inline: auto;
}