/* DataGrip · gedeelde opmaak voor de vervolgpagina's
   Wordt op elke vervolgpagina na de huisstijl geladen (in site-basis is dat style.css,
   in een optiemap de kopie basis.css). Die levert kleuren, letter, kop, menu, knoppen,
   voet, het lichte vlak, formuliervelden en het merkje bij voorbeelddata (.merkje).
   Dit bestand levert alleen wat een vervolgpagina extra nodig heeft: de paginakop,
   secties, lopende tekst en de afsluiter. Paginaspecifieke opmaak staat in een eigen
   bestand per pagina (p-*.css), zodat de pagina's elkaar niet in de weg zitten.

   ── Ronde 7 · de vaste maten van de site. Neem ze over, verzin er geen bij. ──

   1. De grote uitspraak (een band, de afsluiter): var(--uitspraak)
        clamp(1.8rem, .85rem + 3.53vw, 3.5rem)
        56 pixels vanaf 1200 breed, 40,7 op 768, 28,8 op 375. Altijd kleiner dan de paginakop
        (.h1: 70,4 op 1440, 33,6 op 375), nooit kleiner dan de sectiekop. De zin in var(--bright),
        geen teal. Lucht boven en onder: clamp(32px, 4.45vw, 64px). Een teal lijn erboven.

   2. Drie treden voor een tussenkop, geen maten daartussen:
        var(--kop-1)  clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem)    51,2 op 1440 · 28,8 op 375   de sectiekop (.h2)
        var(--kop-2)  clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem)  40 op 1440 · 26 op 375       een kop binnen een sectie (.kop-2)
        var(--kop-3)  clamp(1.45rem, 1.2rem + 1vw, 2rem)       32 op 1440 · 23,2 op 375     tussenkop in lopende tekst (.prose h2, .kop-3)

   3. Een pagina met een zijkolom (vragen, artikelen, privacy): één raster, vanaf 1000 breed.
        grid-template-columns: var(--zij) minmax(0, 1fr);  column-gap: var(--zij-gat);
        --zij      clamp(240px, 25vw, 320px)     320 vanaf 1280 breed
        --zij-gat  clamp(32px, 3.75vw, 48px)     48 vanaf 1280 breed
        Op 1440 breed begint de tekst dus op x 448 (80 marge + 320 + 48). De klasse .zijraster doet dit.
        Lopende tekst is hooguit var(--lees) breed: 40em, ongeveer 75 tekens. Een tabel mag tot 44em.

   4. De voet (in basis.css, en met dezelfde maten in style.css van de homepage): het rechterdeel begint
      op de lijn van de rechterkolom van het contact, x 672 op 1440, met twee gelijke kolommen. */

:root {
  --uitspraak: clamp(1.8rem, .85rem + 3.53vw, 3.5rem);
  --kop-1: clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem);
  --kop-2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --kop-3: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  --zij: clamp(240px, 25vw, 320px);
  --zij-gat: clamp(32px, 3.75vw, 48px);
  --lees: 40em;
}

/* ===== Paginakop ===== */
.pagina-kop { padding: clamp(36px, 6vw, 92px) 0 clamp(32px, 4.6vw, 64px); border-bottom: 1px solid var(--line); }
.pagina-kop--stil { border-bottom: 0; }

.kruimel { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(16px, 2vw, 24px); font-size: .875rem; line-height: 1.4; color: var(--muted); }
/* de link is een tikdoel van 44 pixels hoog; de regel zelf wordt er niet groter van */
.kruimel a { display: inline-block; margin-block: -12px; padding-block: 12px; color: var(--muted); text-decoration: none; }
/* R8:B02 hover alleen bij een muis */
@media (hover: hover) and (pointer: fine) { .kruimel a:hover { color: var(--bright); } }
.kruimel li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.kruimel [aria-current] { color: var(--text); }

.h1 {
  font-size: clamp(2.1rem, 1.05rem + 4.4vw, 4.4rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  color: var(--bright); text-wrap: balance;
  max-width: 17em;
}
.h1 .regel { display: block; }
.lede { margin-top: clamp(16px, 2vw, 26px); max-width: 38em; font-size: clamp(1.1rem, 1rem + .55vw, 1.375rem); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.pagina-kop .acties { margin-top: clamp(22px, 2.6vw, 34px); }

.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ===== Secties ===== */
.pagina-sectie { padding-block: var(--sec); }
.pagina-sectie + .pagina-sectie { border-top: 1px solid var(--line); }
.pagina-sectie--verhoogd { background: var(--bg-raised); }
.pagina-sectie--smal { padding-block: clamp(28px, 5vw, 72px); }
.sectie-kop { display: grid; gap: 14px; margin-bottom: clamp(24px, 3.4vw, 48px); }
.sectie-kop p { max-width: 40em; }

.h3 { font-size: clamp(1.15rem, 1.02rem + .65vw, 1.5rem); font-weight: 700; letter-spacing: -0.016em; line-height: 1.25; color: var(--bright); text-wrap: balance; }
.klein { font-size: .9375rem; line-height: 1.55; color: var(--muted); }

/* twee kolommen: links een smalle kop, rechts de inhoud. Stapelt onder 900px. */
.tweeluik { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .tweeluik { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } }

/* ===== Lopende tekst (artikelen, privacy, uitleg) ===== */
.prose { max-width: 42em; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: var(--kop-3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--bright); text-wrap: balance; }
.prose h3 { margin-top: 1.8em; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); font-weight: 700; letter-spacing: -0.014em; line-height: 1.3; color: var(--bright); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--bright); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .prose a:hover { color: var(--teal); } }
.prose ul, .prose ol { display: grid; gap: .5em; padding-left: 1.5em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.2em; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--teal); font-weight: 600; }
.prose strong { color: var(--bright); }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--line-teal); font-size: 1.15em; line-height: 1.45; color: var(--bright); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.prose th, .prose td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--bright); font-weight: 600; }
.prose .tabel-scroll { overflow-x: auto; }

/* ===== Afsluiter: de laatste band boven de voet ===== */
.afsluiter { padding-block: clamp(56px, 9vw, 132px); border-top: 1px solid var(--line); }
.afsluiter-kop {
  font-size: clamp(2rem, 1rem + 4.6vw, 4.6rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  color: var(--bright); text-wrap: balance;
}
.afsluiter-kop .regel { display: block; }
/* "jou." zoals op de visitekaartjes: Playfair cursief, in teal. De staartletter krijgt ruimte. */
.afsluiter-kop em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.12em; letter-spacing: -0.01em; color: var(--teal); padding-right: .04em; }
.afsluiter p { margin-top: clamp(16px, 2vw, 24px); max-width: 36em; }
.afsluiter .acties { margin-top: clamp(22px, 2.8vw, 36px); }

/* ===== Afspraken uit de eindcontrole (ronde 5), zie reviews/brief-ronde5-herstel.md ===== */

/* De hoofdknop op het lichte vlak is altijd donkergroen met wit: fel teal valt daar weg (1,65 op 1). */
.licht .btn-primair { background: #0a6f69; color: #fff; }
/* R8:B02 */
@media (hover: hover) and (pointer: fine) { .licht .btn-primair:hover { background: #085a55; } }

/* Een tabel buiten lopende tekst: cellen zo groot als de tekst eromheen, kolomkop klein en gedempt,
   geen gekleurde vlakken. In lopende tekst doet .prose table hetzelfde. */
.tabel { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.tabel th, .tabel td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabel thead th { font-size: .875rem; font-weight: 600; color: var(--muted); }
.tabel tbody th { font-weight: 600; color: var(--bright); }
.prose table { font-size: 1em; }
.prose thead th { font-size: .875em; font-weight: 600; color: var(--muted); }

/* Afdrukken of bewaren als pdf: wat nog op inschuiven wacht is gewoon zichtbaar,
   en de vaste kop staat alleen bovenaan de eerste pagina. */
@media print {
  .js [data-reveal].is-wacht { opacity: 1 !important; transform: none !important; }
  .kop { position: static !important; }
}

/* Het invoerveld waar een foutmelding naartoe springt, valt niet onder de vaste kop. */
.veld input, .veld textarea { scroll-margin-top: calc(var(--kop-h) + 56px); }

/* Een anker in lopende tekst (een tussenkop in een artikel, een alinea met een id) landt 8 pixels lager dan
   de standaard, dus op dezelfde plek als toen de ruimte voor de kop nog op de pagina stond. De regel weegt
   bewust iets zwaarder dan ".blog-prose [id] { scroll-margin-top: 8px; }" in p-blog.css, dat op die oude
   ruimte rekende. */
main .prose [id] { scroll-margin-top: calc(var(--anker) + 8px); }

/* ── Ronde 7 · de afsluiter als band: de uitnodiging links, de knop rechts op dezelfde regel.
   Eén vorm voor elke grote uitspraak op de site (zie de maten bovenaan dit bestand).
   Op 1440 is hij ongeveer 190 hoog. Past de knop niet meer naast de zin, dan valt hij eronder. ── */
.afsluiter--band { padding-block: clamp(32px, 4.45vw, 64px); border-top: 1.5px solid var(--line-teal); }
.afsluiter--band .afsluiter-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.afsluiter--band .afsluiter-kop { margin: 0; font-size: var(--uitspraak); line-height: 1.08; }
.afsluiter--band .btn { flex: none; }
@media (max-width: 519px) { .afsluiter--band .btn { flex: 1 1 100%; } }

/* ── Ronde 7 · de treden voor een tussenkop, als klasse ── */
.kop-2, .kop-3 { font-weight: 800; color: var(--bright); text-wrap: balance; }
.kop-2 { font-size: var(--kop-2); letter-spacing: -0.028em; line-height: 1.1; }
.kop-3 { font-size: var(--kop-3); letter-spacing: -0.025em; line-height: 1.15; }

/* ── Ronde 7 · het raster voor een pagina met een zijkolom ── */
.zijraster { display: grid; grid-template-columns: minmax(0, 1fr); }
.zijraster > * { min-width: 0; }
@media (min-width: 1000px) {
  .zijraster { grid-template-columns: var(--zij) minmax(0, 1fr); column-gap: var(--zij-gat); align-items: start; }
}

/* ── Ronde 7 · weesregels: ook in lijsten, rijen en cellen eindigt een alinea niet op één los woord.
   Alinea's (p) en koppen regelt de huisstijl al. ── */
li, dd, td, figcaption, blockquote { text-wrap: pretty; }

/* R8:A01 · Eén maatschaal voor koppen op de telefoon, op alle pagina's (zie ook basis.css).
   Tot 760 breed vier treden, gelijk aan de homepage:
     paginakop (.h1)                         clamp(1.75rem, 7.8vw, 3rem)    30,4 op 390
     band en afsluiter (var(--uitspraak))    clamp(1.55rem, 6.8vw, 2.2rem)  26,5 op 390
     sectiekop (.h2, var(--kop-1))           clamp(1.45rem, 6.2vw, 2rem)    24,2 op 390
     tussenkop (var(--kop-3))                21 px: groepstitel op de vragenpagina, tussenkop in een artikel
   var(--kop-2) gaat op de telefoon mee naar 21: op de vervolgpagina's gebruiken alleen de uitgelichte blogkop
   en "Veelgestelde vragen" onder een artikel die maat, en volgens het voorstel horen die allebei op 21. */
@media (max-width: 759px) {
  :root {
    --uitspraak: clamp(1.55rem, 6.8vw, 2.2rem);
    --kop-1: clamp(1.45rem, 6.2vw, 2rem);
    --kop-2: 1.3125rem;
    --kop-3: 1.3125rem;
  }
  .h1 { font-size: clamp(1.75rem, 7.8vw, 3rem); }
  .afsluiter-kop { font-size: var(--uitspraak); }
}