/* ─── Instellingen ──────────────────────────────────────────
   Kleuren, thema's en fonts komen uit site.md. script.js zet ze als CSS-variabelen:
     --kleur-primair, …                                 het palet uit [kleuren]
     --achtergrond, --tekst, --koppen, --accent, --knoptekst
                                                      de rollen uit het thema van de pagina,
                                                      per sectie of footer overschreven
     --font-koppen, --font-tekst
   Ontbreekt er één, dan meldt de pagina dat. */
:root {
    --breedte: 1200px;                          /* maximale breedte van de inhoud */
    --marge: 1.25rem;                           /* minimale ruimte tot de schermrand */
    --tussenruimte: clamp(1.5rem, 3vw, 2.5rem); /* ruimte tussen twee secties naast elkaar (per kant) */
    /* --ruimte, --rond, --rond-knop, --reveal-duration en --reveal-distance kun je per site
       kiezen in site.md (ruimte:, hoeken:, invagen:); dit zijn de standaardwaarden */
    --ruimte: clamp(2rem, 4.5vw, 3.25rem);      /* ruimte boven en onder een sectie */
    --menu-h: 72px;
    --rond: 12px;                               /* hoeken van kaarten en afbeeldingen */
    --rond-knop: 6px;                           /* hoeken van knoppen */

    /* Animatie bij het laden en scrollen */
    --reveal-duration: .5s;                 /* duur van de fade-in per blok */
    --reveal-distance: 32px;                /* afstand die een blok omhoog schuift */
    --reveal-stagger: .1s;                 /* tijd tussen het begin van twee blokken in een rij */
    --reveal-ease: cubic-bezier(.16, 1, .3, 1); /* snel op gang, rustig tot stilstand */
    --font-wait: 1000;                      /* max. ms wachten op fonts (gelezen door script.js) */
}

/* ─── Basis ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menu-h) + 1rem); }
body {
    font: 400 1.0625rem/1.7 var(--font-tekst), system-ui, sans-serif;
    color: var(--tekst);
    background: var(--achtergrond);
    -webkit-font-smoothing: antialiased;
}
/* Onzichtbaar tot het script klaar is (klasse .ready); als vangnet toch zichtbaar na 2s */
html:not(.ready) body { opacity: 0; animation: toon 0s 2s forwards; }
@keyframes toon { to { opacity: 1; } }

img { display: block; max-width: 100%; height: auto; border-radius: var(--rond); }
h1, h2, h3, h4 {
    font-family: var(--font-koppen), Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
    color: var(--koppen);
    text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
strong { font-weight: 600; }
mark { background: none; color: var(--accent); }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ─── Rijen en secties ──────────────────────────────────── */
main, .footer { overflow-x: clip; }   /* achtergronden lopen door tot de rand; niet verder */
.breedte, .rij { width: min(var(--breedte), 100% - 2 * var(--marge)); margin-inline: auto; }
.rij { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }   /* ankerpunt voor patronen, zie .patroon::before */
/* minmax(0, ...): een kolom mag smaller worden dan zijn inhoud. Met alleen 1fr groeit de kolom
   mee met het breedste stuk inhoud (zoals een ingesloten formulier) en steekt hij buiten de rij. */
.rij.twee { grid-template-columns: calc(var(--deel, .5) * 100%) minmax(0, 1fr); }

.sectie {
    isolation: isolate;
    padding-block: var(--ruimte);
    background: var(--achtergrond);
    color: var(--tekst);
    /* De achtergrond loopt door tot de schermrand: een schaduw van 100vmax breed in de
       sectiekleur, die clip-path boven en onder afknipt (en bij twee secties aan de binnenkant).
       Onder (en bij twee secties rechts) blijft 1px extra staan, zodat er tussen twee secties
       geen naadje door afronding ontstaat; de volgende sectie ligt daaroverheen. */
    box-shadow: 0 0 0 100vmax var(--achtergrond);
    clip-path: inset(0 -100vmax -1px);
    /* uitlijning= zet de tekst boven, in het midden of onder in de sectie */
    display: flex;
    flex-direction: column;
    justify-content: var(--uitlijning, start);
}
.twee > .sectie:first-child { padding-right: var(--tussenruimte); clip-path: inset(0 -1px -1px -100vmax); }
.twee > .sectie:last-child { padding-left: var(--tussenruimte); clip-path: inset(0 -100vmax -1px 0); }
main > .rij:first-child .sectie { padding-top: calc(var(--menu-h) + var(--ruimte) * 1.5); }

/* Patroon: het bestand dient als sjabloon (mask), de kleur komt uit --patroonkleur.
   Zonder patroonkleur= wordt de kleur afgeleid van de achtergrond: zelfde tint, iets donkerder
   op licht en iets lichter op donker. clamp(...) is −1 bij lichtheid boven 0.62 en +1 eronder;
   --patroonsterkte (sterkte=) vergroot of verkleint de stap.
   Voor schaal= wordt de laag kleiner gemaakt en daarna weer uitvergroot.
   De laag is geplaatst ten opzichte van de rij (niet de sectie), zodat hetzelfde patroon in
   twee secties naast of onder elkaar naadloos doorloopt; clip-path van de sectie knipt hem af.
   mask-position legt de eerste tegel op de linkerrand van de rij. Zonder dat begint het
   patroon bij left: -100vmax, en dan springt het mee met de schermhoogte (op een telefoon
   verandert die tijdens het scrollen, als de adresbalk in- of uitklapt). */
.patroon::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: -100vmax;
    width: calc((100% + 200vmax) / var(--schaal, 1));
    height: calc(100% / var(--schaal, 1));
    transform: scale(var(--schaal, 1));
    transform-origin: 0 0;
    background: var(--patroonkleur, oklch(from var(--achtergrond)
        calc(l + clamp(-1, (0.62 - l) * 1000, 1) * 0.045 * var(--patroonsterkte, 1)) c h));
    mask: var(--patroon);
    mask-position: calc(100vmax / var(--schaal, 1)) 0;
}

/* De kortste van twee secties blijft staan tijdens het scrollen (script.js zet .plakt) */
.plakt { position: sticky; top: calc(var(--menu-h) + 2rem); }

/* ─── Inhoud van een sectie ─────────────────────────────── */
.inhoud > * + * { margin-top: 1.25rem; }
.inhoud > .label + * { margin-top: .75rem; }
.inhoud > :is(p, ul, ol, blockquote) { max-width: 65ch; }
:is(h1, h2) + p { font-size: 1.15rem; color: color-mix(in srgb, var(--tekst) 78%, var(--achtergrond)); }

.inhoud ul { padding: 0; list-style: none; }
.inhoud ul li { position: relative; padding-left: 1.5rem; }
.inhoud ul li::before { content: ''; position: absolute; left: .2rem; top: .7em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); }
.inhoud ol { padding-left: 1.5rem; }
.inhoud li + li { margin-top: .4rem; }

blockquote { padding-left: 1.25rem; border-left: 2px solid var(--accent); font: 1.3rem/1.5 var(--font-koppen), Georgia, serif; }

.label {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}
.label::before { content: ''; width: 1.5rem; height: 2px; background: currentColor; }

/* Vorm van alle knoppen, en van de menu-items (die de vorm alleen bij hover laten zien).
   .knop werkt op een link uit de markdown én op een <button class="knop"> in een [html]-blok. */
.knop, .menubalk nav a { padding: .45rem .9rem; border-radius: var(--rond-knop); font-size: .95rem; text-decoration: none; }

/* Knoppen ([tekst](adres){.knop}). Knoppen op opeenvolgende regels staan samen in .knoppen:
   de eerste in accentkleur, de volgende rustiger. */
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.knop { display: inline-block; border: 0; cursor: pointer; background: var(--accent); color: var(--knoptekst); font-weight: 600; transition: filter .2s, background .2s; }
/* Hover alleen met een muis: op een touchscreen blijft hover na een tik hangen */
button.knop { font-family: inherit; line-height: inherit; }   /* een <button> erft die niet vanzelf */
@media (hover: hover) { .knop:hover { filter: brightness(.92); } }
/* De rand van een rustige knop is een schaduw aan de binnenkant, zodat de maat gelijk blijft */
.knoppen .knop + .knop { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tekst) 30%, transparent); }
@media (hover: hover) { .knoppen .knop + .knop:hover { background: color-mix(in srgb, var(--tekst) 8%, transparent); } }

.kaarten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.kaart {
    padding: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--tekst) 12%, transparent);
    border-radius: var(--rond);
    /* Een tint richting de tekstkleur: op licht iets donkerder, op donker iets lichter */
    background: color-mix(in srgb, var(--achtergrond), var(--tekst) 6%);
}
.kaart > * + * { margin-top: .6rem; }

.tijdlijn { padding: 0; list-style: none; }
.tijdlijn > li { position: relative; padding: 0 0 2.5rem 2rem; }
.tijdlijn > li:last-child { padding-bottom: 0; }
.tijdlijn > li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: .35rem;
    width: 12px;
    height: 12px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--achtergrond);
}
/* Lijn van de onderkant van een stip tot de bovenkant van de volgende */
.tijdlijn > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: -2px;
    top: calc(.35rem + 12px);
    bottom: -.35rem;
    width: 2px;
    background: color-mix(in srgb, var(--tekst) 15%, transparent);
}
.tijdlijn > li > * + * { margin-top: .4rem; }
.periode { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Formulier in een [html]-blok: <form class="formulier"> (zie index.md) */
.formulier { display: grid; gap: 1rem; }
.formulier > * { margin: 0; }
.formulier label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; }
.formulier :is(input, textarea, select) {
    font: inherit; font-weight: 400; font-size: 16px; color: var(--tekst);
    padding: .7rem .85rem; border-radius: calc(var(--rond) / 2);
    border: 1.5px solid color-mix(in srgb, var(--tekst) 25%, transparent);
    background: color-mix(in srgb, var(--achtergrond), var(--tekst) 6%);
}
.formulier :is(input, textarea, select):focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulier textarea { min-height: 8rem; resize: vertical; }
.formulier button { justify-self: start; }

/* ─── Menubalk ──────────────────────────────────────────── */
.menubalk {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--menu-h);
    background: var(--achtergrond);
    border-bottom: 1px solid color-mix(in srgb, var(--tekst) 10%, transparent);
}
.menubalk .breedte { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.merk { display: flex; align-items: center; gap: .75rem; font: 1.3rem var(--font-koppen), Georgia, serif; color: var(--koppen); text-decoration: none; }
.merk img { height: 44px; width: auto; border-radius: 0; }
.menubalk ul { display: flex; gap: .25rem; padding: 0; list-style: none; }
.menubalk nav a { display: block; font-weight: 500; }
@media (hover: hover) { .menubalk nav a:not(.knop):hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } }
.menubalk nav a.knop { margin-left: .5rem; font-weight: 600; }
.menuknop { display: none; padding: .5rem; border: 0; background: none; cursor: pointer; }
.menuknop span { display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--tekst); transition: .3s; }
.open .menuknop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.open .menuknop span:nth-child(2) { opacity: 0; }
.open .menuknop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Footer ────────────────────────────────────────────── */
.footer { font-size: .95rem; }
.footer .sectie { padding-block: 2.5rem; }
.footer .inhoud > * + * { margin-top: .5rem; }
/* Dunne scheiding boven de footer, ook als de sectie erboven dezelfde kleur heeft.
   Net als de achtergrond loopt de lijn door tot de schermrand. */
.footer > .rij:first-child .sectie::after {
    content: '';
    position: absolute;
    inset: 0 -100vmax auto;
    height: 1px;
    background: color-mix(in srgb, var(--tekst) 15%, transparent);
}

/* Foutmelding uit script.js (toonFout): boven alles, ook boven de menubalk.
   Vaste kleuren, zodat de melding ook leesbaar is als de kleuren in site.md niet kloppen. */
.fout { position: relative; z-index: 1000; padding: .75rem var(--marge); background: #b00020; color: #fff; font: 600 1rem/1.4 system-ui, sans-serif; }

/* ─── Animatie ──────────────────────────────────────────── */
.js .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: calc(var(--volgorde, 0) * var(--reveal-stagger)); /* --volgorde: zie activeerInvagen in script.js */
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body *, *::before { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ─── Printen: hetzelfde als op het scherm ───────────────── */
@media print {
    /* Browsers laten achtergrondkleuren standaard weg; lichte tekst wordt dan onleesbaar */
    * { print-color-adjust: exact; }
    /* Blokken die nog niet in beeld zijn geweest, zijn nog niet ingevaagd */
    .js .reveal { opacity: 1; transform: none; transition: none; }
    /* fixed herhaalt de menubalk op elke pagina, over de tekst heen; nu staat hij alleen bovenaan */
    .menubalk { position: absolute; }
}

/* ─── Mobiel: secties onder elkaar, menu achter een knop ── */
@media (max-width: 800px) {
    .rij.twee { grid-template-columns: minmax(0, 1fr); }
    .twee > .sectie:is(:first-child, :last-child) { padding-inline: 0; clip-path: inset(0 -100vmax -1px); }
    main > .rij:first-child .sectie + .sectie { padding-top: var(--ruimte); }
    .footer > .rij:first-child .sectie + .sectie::after { content: none; }
    .plakt { position: static; }
    .menuknop { display: block; }
    .menubalk nav { display: none; position: absolute; top: var(--menu-h); inset-inline: 0; padding: 1rem var(--marge); background: var(--achtergrond); border-bottom: 1px solid color-mix(in srgb, var(--tekst) 10%, transparent); }
    .menubalk.open nav { display: block; }
    .menubalk ul { flex-direction: column; }
    .menubalk nav a.knop { display: inline-block; margin: .5rem 0 0; }
}