/* ==========================================================================
   G2 · Themareset — Natuurlijk Gezonder
   v1.0 · 2026-08-30
   --------------------------------------------------------------------------
   Neutraliseert de themalaag ÉÉN keer, site-breed. Daarna nooit meer per
   component, en nooit met !important: dat is dweilen, en het is eerder
   viermaal in één sessie misgegaan bij een andere bouw.

   Hello Elementor is een licht thema, maar het stijlt wel degelijk
   button / input / select / textarea, en WordPress zelf voegt nog
   wpautop-alinea's toe rond formuliervelden. Dat wordt hier afgevangen.

   Laadt na 00-tokens.css, vóór elke componentlaag.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Fundament
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* De schuifbalkgoot blijft altijd gereserveerd. Zonder dit springt de hele
     pagina vijftien pixels opzij zodra een overlay `overflow:hidden` op de
     body zet — gemeten bij het openen van het mobiele menu. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ng-grond);
  color: var(--ng-tekst);
  font-family: var(--ng-font-tekst);
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  font-weight: var(--ng-w-normaal);
  letter-spacing: var(--ng-ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   2 · Typografie — de themawaarden vervangen, niet overschrijven
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ng-s-3);
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-licht);
  line-height: var(--ng-lh-kop);
  letter-spacing: var(--ng-ls-kop);
  color: var(--ng-kop);
  text-wrap: balance;
}
h1 { font-size: var(--ng-t-h1); line-height: var(--ng-lh-display); letter-spacing: var(--ng-ls-display); }
h2 { font-size: var(--ng-t-h2); }
h3 { font-size: var(--ng-t-h3); font-weight: var(--ng-w-medium); }
h4 { font-size: var(--ng-t-lead); font-weight: var(--ng-w-medium); }
h5, h6 {
  font-family: var(--ng-font-tekst);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst-zacht);
}

p { margin: 0 0 var(--ng-s-3); }
p:last-child { margin-bottom: 0; }

/* Lopende tekst krijgt een leesbreedte; brede vlakken mogen vol, tekst nooit. */
.ng-tekst > p,
.ng-tekst > ul,
.ng-tekst > ol { max-width: var(--ng-tekstbreedte); }

strong, b { font-weight: var(--ng-w-half); }

a {
  color: var(--ng-actie);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--ng-duur-snel) var(--ng-easing);
}
a:hover { color: var(--ng-actie-hover); }

/* R3 · 2026-10-01 · een link in lopende tekst is onderstreept.
   Elementor levert `.elementor a { text-decoration: none }` (0,1,1) en het thema `a { text-decoration: none }`.
   De previews en het prototype kennen die regels niet: daar is een link in een zin gewoon onderstreept, en zo
   zijn de componenten ook ontworpen. Op de site verdween de streep overal, zonder melding — gemeten bij stap 1
   op dertien pagina's (juridische pagina's, omgeving, contact, accommodaties, bedankt, 404). Zonder streep
   onderscheidt alleen kleur de link van de zin eromheen, en dat is te weinig.

   Alleen links ZONDER klasse, in een alinea, definitie, tabelcel of bijschrift. Knoppen, menu's, de
   footerlijsten en het kruimelpad dragen een klasse of staan in een lijst en blijven zoals ze zijn.
   Weegt (0,1,2): zwaarder dan beide regels hierboven, zonder !important. */
:is(p, dd, td, figcaption, blockquote) a:not([class]) { text-decoration: underline; }

ul, ol { margin: 0 0 var(--ng-s-3); padding-left: var(--ng-s-4); }

/* Ruimte tussen items in een lopende tekst. */
li + li { margin-top: var(--ng-s-2); }

/* …maar niet in een lijst die een component zelf opmaakt. Die gebruiken
   allemaal `gap`, en deze marge kwam daar bovenop: het eerste item bleef
   staan en alle volgende schoven 8 px omlaag. In één kolom is dat extra
   lucht, in meer kolommen staat de eerste kaart 8 px hoger dan de rest.

   Op 31-08 gemeten over alle previews: het raakte negen lijsten in zeven
   componenten (`ac__lijst`, `og__lijst` ×3, `ao__feiten`, `wt__feiten`,
   `rc__cijfers`, `ws__voorzieningen`, `lg__iolijst`, `st__kaarten`) — en
   het was in geen enkele losse component opgevallen.

   Een klasse op de lijst is hier het onderscheid: elke componentlijst in
   dit project heeft er een, elke prozalijst niet. Het kruimelpad is de
   uitzondering — die `<ol>` draagt zelf geen klasse en regelt zijn eigen
   marge hieronder. */
:is(ul, ol)[class] > li + li { margin-top: 0; }

/* --------------------------------------------------------------------------
   Kruimelpad

   Woonde tot 31-08 als `.ac__kruimels` in de stylesheet van het
   accommodatie-post-type. Het wordt inmiddels op zeven pagina's gebruikt —
   accommodaties, overzicht, omgeving, wellnesstuin en drie juridische
   pagina's — en die moesten allemaal die stylesheet meeladen voor vijf
   regels. Nu heet het `.ng-kruimels` en staat het in de globale laag,
   waar het thuishoort.
   -------------------------------------------------------------------------- */

.ng-kruimels {
  padding: var(--ng-s-4) 0 0;
  font-size: var(--ng-t-micro);
  color: var(--ng-tekst-zacht);
}
.ng-kruimels ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Deze <ol> draagt zelf geen klasse, dus de uitzondering hierboven pakt hem
   niet. Zonder deze regel schuift elk item ná het eerste 8 px omlaag in een
   rij die `display: flex` is. */
.ng-kruimels li { margin: 0; }
.ng-kruimels li + li::before { content: "›"; margin-right: var(--ng-s-2); opacity: .6; }
.ng-kruimels a { color: inherit; }
.ng-kruimels a:hover { color: var(--ng-actie); }
.ng-kruimels [aria-current="page"] { color: var(--ng-tekst); }
/* R3 · 2026-10-01 · tikvlak. Een kruimel is 15 px hoog; op een aanraakscherm is dat te weinig (gemeten op elke
   pagina met een kruimelpad: 33 × 15). De vulling maakt het raakvlak 45 px hoog, de negatieve marge houdt de
   regel even hoog als hij was. */
@media (pointer: coarse) {
  .ng-kruimels a { display: inline-block; padding-block: .9375rem; margin-block: -.9375rem; }
}


hr { border: 0; border-top: 1px solid var(--ng-lijn); margin: var(--ng-s-6) 0; }

/* --------------------------------------------------------------------------
   Tabellen — R3 · 2026-10-01
   --------------------------------------------------------------------------
   Het thema stijlt ELKE tabel: een grijze rand om elke cel, 15 px vulling,
   90 % lettermaat, om-en-om een grijze rij en een grijze rij bij aanwijzen.
   De vergelijktabel en de tabel in de privacyverklaring zijn zonder die laag
   ontworpen en zetten alleen wat ze zelf nodig hebben; de rest lekte door
   (gezien op staging: grijze celranden en een gestreepte tabel op het
   overzicht). Hier gaat de themalaag één keer op nul.

   ⚠️ De streepregel van het thema weegt (0,1,3). Deze reset weegt even zwaar
   en zet de achtergrond op transparant. Een component die een cel een eigen
   achtergrond geeft (de vastgezette naamkolom), moet dat dus met minstens
   (0,1,3) doen — zie A0-ao-accommodatieoverzicht.css.
   -------------------------------------------------------------------------- */

table { font-size: inherit; margin-block-end: 0; }
table td,
table th { border: 0; padding: 0; line-height: inherit; }
table caption + thead tr:first-child td,
table caption + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td,
table thead:first-child tr:first-child th { border-block-start: 0; }
table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td,
table tbody tr:hover > th { background-color: transparent; }

/* --------------------------------------------------------------------------
   3 · Beeld en media
   -------------------------------------------------------------------------- */

/* ⚠️ SPECIFICITEIT VAN BEELDEN — lees dit voor je een hoogte op een foto zet.

   Elementor levert in frontend.min.css:

       .elementor img { height: auto }        specificiteit (0,1,1)

   Dat verslaat elke enkelvoudige klasse van ons — .ov__beeld weegt maar
   (0,1,0). Gevolg: een regel als

       .ov__beeld { height: clamp(14rem, 32vw, 26rem) }

   wordt stil genegeerd. Geen fout, geen waarschuwing; het beeld neemt gewoon
   zijn eigen verhouding aan. Op 02-09 gevonden doordat een duinfoto 950 px
   hoog werd waar 416 px stond — inline dezelfde waarde gaf wél 416.

   VUISTREGEL: zet je een hoogte op een img, schrijf dan img.klasse.
   Dat weegt (0,1,1) — gelijk aan Elementor — en onze stylesheets laden ná
   die van Elementor (positie 17+ tegen 5-12), dus wint de bronvolgorde.
   Geen !important nodig.

   Uitzondering: aspect-ratio wordt door deze regel niet geraakt, dus een
   beeld dat zijn maat daaruit haalt is veilig met één klasse.

   GEEN uitzondering, hoewel het er wel op lijkt: een absoluut gepositioneerd
   beeld met inset: 0. Dat gaat alleen goed zolang het beeld géén width- en
   height-attributen draagt. Mét die attributen heeft het een intrinsieke
   verhouding, en dan wint height: auto van bottom: 0 — de box raakt
   overbepaald en bottom valt af. De hero-poster werd zo 802 px in een sectie
   van 760, en die 42 px stonden als een balk onder de video. Op 03-09
   gevonden; de eerste ronde had dit geval als "veilig" geclassificeerd. */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { border-radius: 0; }
figure { margin: 0; }
/* R3 · 2026-10-01 · het thema zet `figcaption { color:#333; font-size:16px; font-style:italic; font-weight:400;
   line-height:1.4 }`. De componenten zetten kleur, maat en regelhoogte zelf, maar niemand zette de stijl terug:
   elk bijschrift stond op de site cursief — in een lettertype zonder cursieve snede, dus door de browser
   scheefgetrokken. In de previews en het prototype staat het recht. Gemeten bij stap 2, ook op de homepage.

   ⚠️ MARGE OP EEN <figure>: Elementor levert `.elementor .elementor-widget:not(…):not(…) figure { margin: 0 }`
   (0,4,1). Een marge op een figure via één klasse wordt dus stil genegeerd. Zet de ruimte op het element
   ervóór of erna, of op een wrapper. */
figcaption { font-style: normal; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   4 · Formulierelementen — de kern van deze reset
   Het thema stijlt deze vier; hier gaan ze één keer op nul en krijgen ze
   hun eigen basis. Componenten bouwen hierop voort zonder !important.
   -------------------------------------------------------------------------- */

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-align: inherit;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  /* R3 · 2026-10-01 · de rest van de themaregel. Hello Elementor zet op `[type=button], [type=submit], button`
     (0,1,0) ook: font-size 1rem, font-weight 400, white-space nowrap, user-select none en `transition: all .3s`.
     `button { font: inherit }` hierboven weegt (0,0,1) en verloor daarvan: elke knop stond op 16 px in plaats van
     de 17 px van de pagina, en kon niet afbreken. Gemeten bij stap 1 (kamerstrook: 17 → 16 px). */
  font: inherit;
  letter-spacing: inherit;
  white-space: normal;
  -webkit-user-select: auto;
  user-select: auto;
  transition: none;
}
button:disabled { cursor: not-allowed; }

/* De typeselectoren staan er expliciet bij. Thema's schrijven
   `input[type="text"]` (specificiteit 0,1,1) en dat wint van een kale
   `input` (0,0,1) — ongeacht de volgorde. Bij de eerste meting stond het
   veld daardoor nog op de 2px-rand en de grijze grond van het thema.
   Dit is precies waarom de preview de themadruk moet dragen. */
input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="password"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: .75rem var(--ng-s-3);
  background: var(--ng-grond);
  color: var(--ng-tekst);
  border: 1px solid var(--ng-lijn-sterk);
  border-radius: var(--ng-radius);
  box-shadow: none;
  font-size: var(--ng-t-body);
  line-height: var(--ng-lh-body);
  transition: border-color var(--ng-duur-snel) var(--ng-easing);
}
input:hover, select:hover, textarea:hover { border-color: var(--ng-actie); }
textarea { min-height: 9rem; resize: vertical; }

/* Placeholders zijn géén label. Ze mogen bestaan als hint, maar elk veld
   krijgt een echte <label>; dat is de reden dat de placeholder hier
   bewust zacht staat. */
::placeholder { color: var(--ng-tekst); opacity: .55; }

/* 27-10-2026 · de regel voor velden hierboven zet ook op een vinkje `appearance: none` (kale `input`), en dan tekent
   de browser het vinkje niet meer: aanvinken werkte, maar was niet te zien (gemeld door Sven op de contactpagina).
   (0,1,0) wint van `input` (0,0,1); de veldopmaak (padding, grond, rand) gaat er hier ook weer af. */
[type="checkbox"], [type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  padding: 0;
  background: none;
  border: 0;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  accent-color: var(--ng-actie);
  border-radius: var(--ng-radius);
}
[type="radio"] { border-radius: var(--ng-radius-rond); }

label { display: block; font-size: var(--ng-t-klein); font-weight: var(--ng-w-half); margin-bottom: var(--ng-s-2); }

/* WordPress wikkelt via wpautop elk label/veld-paar in een eigen <p> met een
   <br>. Dat rekt formulieren op. Binnen een formulierwrapper worden die
   alinea's daarom neutraal gezet in plaats van per component gerepareerd. */
.ng-form p { margin: 0; }
.ng-form p br { display: none; }

/* --------------------------------------------------------------------------
   5 · Focus — zichtbaar, altijd, ook op elementen die het thema kaal maakt
   -------------------------------------------------------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: var(--ng-focus-breedte) solid var(--ng-focus-kleur);
  outline-offset: var(--ng-focus-offset);
  border-radius: var(--ng-radius);
}
/* Op een donker vlak moet de focusring van kleur wisselen, anders verdwijnt hij. */
.ng-op-diep :focus-visible { outline-color: var(--ng-wit); }

/* R3 · 2026-10-01 · de focusring van het thema.
   Hello Elementor levert `a:focus-visible, button:focus-visible, input:…, [tabindex]:not([tabindex="-1"]):focus-visible
   { box-shadow: 0 0 0 4px #fff; outline: 2px solid #000; outline-offset: 2px }`. Dat weegt (0,1,1) tot (0,3,0) en
   wint van de kale `:focus-visible` hierboven (0,1,0): op de site stond dus de zwarte ring van het thema met een
   witte halo, niet de ring uit de tokens. Dezelfde selectors, hier opnieuw, zetten de eigen ring terug.
   Knoppen die hun rand als box-shadow dragen (`a.ng-knop--tweede` en dergelijke) staan verderop en wegen even
   zwaar: die houden hun rand, ook bij focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--ng-focus-breedte) solid var(--ng-focus-kleur);
  outline-offset: var(--ng-focus-offset);
  box-shadow: none;
}
.ng-op-diep [tabindex]:not([tabindex="-1"]):focus-visible { outline-color: var(--ng-wit); }

/* --------------------------------------------------------------------------
   6 · Overslaan-naar-inhoud
   -------------------------------------------------------------------------- */

.ng-skip {
  position: absolute;
  left: var(--ng-s-3);
  top: var(--ng-s-3);
  z-index: var(--ng-z-overlay);
  padding: var(--ng-s-2) var(--ng-s-3);
  background: var(--ng-actie);
  color: var(--ng-op-actie);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  transform: translateY(-200%);
  transition: transform var(--ng-duur-snel) var(--ng-easing);
}
.ng-skip:focus-visible { transform: translateY(0); color: var(--ng-op-actie); }

/* --------------------------------------------------------------------------
   7 · Hulpmiddelen
   -------------------------------------------------------------------------- */

.ng-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* De enige !important in deze laag, en hij is functioneel: een element dat
   visueel verborgen hoort te zijn voor schermlezers mag door geen enkele
   themaregel teruggezet worden. */

.ng-wrap {
  width: 100%;
  max-width: var(--ng-breedte);
  margin-inline: auto;
  padding-inline: var(--ng-gutter);
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   8 · Beweging — de globale rem
   Componenten definiëren hun eigen overgangen; deze regel vangt af wat
   het thema en plugins meebrengen.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   R3 · 2026-10-01 · wijziging uit het goedgekeurde R2-prototype
   (prototype/r2/r2.css, blok 0), ongewijzigd overgenomen. Staat achteraan,
   zodat het net als in het prototype ná de regels hierboven telt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Gedeeld
   -------------------------------------------------------------------------- */

/* NIEUW. Eén knop in plaats van vijf kopieën (he__knop, db__actie, ws__actie,
   om__actie, ov__actie droegen dezelfde maten onder vijf namen). De maten zijn
   uitgelezen uit die vijf, niet opnieuw bedacht.

   `a.` staat er met opzet bij: Elementor levert `.elementor a { box-shadow:
   none }` (0,1,1) en dat nam op 03-09 de rand van elke omlijnde knop weg. Met
   `a.ng-knop--tweede` weegt de regel (0,1,1) en wint de bronvolgorde. */
a.ng-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;                       /* 44 px tikvlak */
  padding: .8125rem var(--ng-s-5);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--ng-duur-snel) var(--ng-easing),
    color            var(--ng-duur-snel) var(--ng-easing),
    box-shadow       var(--ng-duur-snel) var(--ng-easing),
    transform        var(--ng-duur-snel) var(--ng-easing);
}
/* Zichtbare reactie op pointer-down, niet pas bij loslaten. */
a.ng-knop:active { transform: translateY(1px); }

a.ng-knop--primair { background: var(--ng-actie); color: var(--ng-op-actie); }
a.ng-knop--primair:hover { background: var(--ng-actie-hover); color: var(--ng-op-actie); }

/* De tweede actie is een omtrek, geen tweede vlak: één accent per scherm. */
a.ng-knop--tweede { color: var(--ng-groen-900); box-shadow: inset 0 0 0 1px var(--ng-groen-900); }
a.ng-knop--tweede:hover { color: var(--ng-op-actie); background: var(--ng-groen-900); }

a.ng-knop--op-diep { background: var(--ng-op-actie); color: var(--ng-groen-900); }
a.ng-knop--op-diep:hover { background: var(--ng-munt-200); color: var(--ng-groen-900); }