/* Taxi Reijnders — sjablonen (QA-herstel 2026-09-28): gidsenoverzicht, redactionele inhoudskolom op
   landingspagina's en gewone inhoudspagina's, zakelijk aanvraagformulier, gids-afsluiter, gidsblok.
   Laadt na site.css (base.njk) zodat regels met gelijke specificiteit hier winnen; geen wijzigingen in
   site.css zelf, om samenvoegconflicten met andere agents te vermijden.
   Eigenaar: layouts/landing.njk (alleen het inhoudsdeel), layouts/pagina.njk, layouts/gids.njk,
   pages/gidsen.njk + en/guides.njk, partials/aanvraagformulier.njk, pages/over-ons.njk + en/about.njk,
   partials/gidsblok.njk. Bouwt op tokens.css; raakt .raster/.kaart (kaarten.njk) en de kop niet aan. */

/* 1. Redactionele inhoudskolom (bevinding 2 en 5): .landing__inhoud en .pagina zelf krijgen geen eigen
   max-width meer (die dubbele opvulling met de sectie-padding duwde de kolom naar rechts, ongecentreerd,
   en liet de secties eronder niet uitlijnen). De container blijft op volle --breedte-inhoud, gelijk aan
   FAQ en richtprijzen; alleen de tekstelementen zelf worden een smalle, gecentreerde kolom. Koppen die
   direct gevolgd worden door een raster (gidsenoverzicht, bevinding 1) blijven op volle breedte, zodat ze
   uitlijnen met het raster eronder. .raster, .gidsblok en secties (bv. richtprijzen) blijven ongemoeid. */
.landing__inhoud,
.pagina {
  max-width: none;
  margin-inline: 0;
}

.leestekst > :where(h1, h2, h3, p, ul, ol, dl, blockquote):not(.raster),
.pagina > :where(h1, h2, h3, p, ul, ol, dl, blockquote):not(.raster) {
  max-width: 44rem;
  margin-inline: auto;
}

.leestekst > :where(h2, h3):has(+ .raster),
.pagina > :where(h2, h3):has(+ .raster) {
  max-width: none;
  margin-inline: 0;
}

.leestekst > :where(figure, table, img):not(.raster),
.pagina > :where(figure, table, img):not(.raster) {
  max-width: min(64rem, 100%); /* nooit breder dan het scherm (op 360 px stak een 1024-img/tabel uit) */
  margin-inline: auto;
  display: block;
}
.leestekst > img, .pagina > img, .leestekst > figure img, .pagina > figure img { height: auto; }

.leestekst > .raster,
.pagina > .raster {
  max-width: none;
  margin-inline: 0;
}

.leestekst > :where(h1, h2, h3):not(:first-child),
.pagina > :where(h1, h2, h3):not(:first-child) {
  margin-top: var(--ruimte-12);
}
.leestekst > :where(h1, h2, h3):first-child,
.pagina > :where(h1, h2, h3):first-child {
  margin-top: 0;
}
.leestekst > :where(ul, ol, p),
.pagina > :where(ul, ol, p) {
  line-height: var(--regel-tekst);
}

/* 2. Gidsenoverzicht (bevinding 1): raster over de volle containerbreedte; 4 kolommen vanaf 1200 px,
   3 vanaf 900, 2 vanaf 600, 1 daaronder. kaarten.njk levert al data-kolommen="4"; deze media queries
   verruimen alleen de bestaande drempels (site.css gebruikt 640/768/1024 px) voor déze pagina specifiek,
   zonder .raster/.kaart elders te raken. Groepskoppen (h2) staan door regel 1 hierboven al op volle breedte,
   dus gelijk uitgelijnd met het raster. */
.pagina > .raster[data-kolommen="4"] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .pagina > .raster[data-kolommen="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pagina > .raster[data-kolommen="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .pagina > .raster[data-kolommen="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 3. Zakelijk aanvraagformulier (bevinding 3): kaart van max 48rem, gecentreerd; twee kolommen vanaf
   768 px voor datum/tijd/personen en naam/telefoon. Velden zelf erven hun donkere stijl al van site.css
   §9 (hoogte >= 48 px, gouden focusring); hier alleen de kaart en de indeling. */
.aanvraag {
  max-width: 48rem;
  margin-inline: auto;
  padding: var(--ruimte-8);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-groot);
}
@media (max-width: 480px) {
  .aanvraag { padding: var(--ruimte-6) var(--ruimte-4); }
}
.aanvraag__paar {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--ruimte-4);
}
@media (min-width: 768px) {
  .aanvraag__paar { grid-template-columns: 1fr 1fr; }
}

/* 4. Gidsartikel: afsluiter met kop + zin (bevinding 4), zodat de sectie tussen FAQ en de knoppen niet als
   een leeg donker vlak oogt. Beeld bovenaan: volle kolombreedte tot 64rem, afgeronde hoeken (spec §4). */
.gids__afsluiter {
  max-width: none;
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.gids__afsluiter-binnen {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.gids__afsluiter h2 { margin: 0 0 var(--ruimte-3); }
.gids__afsluiter p { margin: 0 0 var(--ruimte-6); color: var(--tekst-zacht); }
.gids__afsluiter .knoppen { justify-content: center; }
.gids__verwant { margin-top: var(--ruimte-3); }
.gids__beeld { max-width: 64rem; margin-inline: auto; }

/* 5. Gidsblok "Gidsen over …" (bevinding 6): normale sectie op containerbreedte, gelijk uitgelijnd met
   FAQ en richtprijzen (geen eigen max-width meer). */
.gidsblok {
  max-width: none;
  margin-inline: 0;
}
.gidsblok__lijst {
  max-width: 44rem;
}

/* Paginakop op inhoudspagina's zonder calculator lijnt uit met de leeskolom (44rem) eronder; op de
   calculatorpagina's blijft de 48rem-kolom uit calculator.css staan (de kaart breekt daar uit de kop). */
.pagina-kop:not(:has(+ .calculator)) { padding-inline: max(var(--gutter), calc((100% - 44rem) / 2)); }

/* WCAG 2.2 doelgrootte (2.5.8): losse tekstknoppen minimaal 24 px hoog (links in lopende tekst vallen onder de
   uitzondering). QA 2026-09-28. */
.knop--tekst, .plaatsen-uitklap summary, .calc-modus__wissel { min-height: 24px; }
:where(a).knop--tekst, .calc-modus__wissel { display: inline-flex; align-items: center; }
.plaatsen-uitklap summary { display: flex; align-items: center; }
@media (min-width: 768px) { .plaatsen-uitklap summary { display: none; } }

/* 4. Leesvlak en zijkaart (eigenaar 2026-09-29: "gitzwart zonder opmaak"; spec 2026-09-29-leesvlak-zijkaart).
   .leesvlak herdefinieert binnen zijn bereik de kleurtokens: lange tekst op warm gebroken wit, onderdelen die
   tokens gebruiken (kaarten, tabellen, velden, omlijnde knoppen) passen zich vanzelf aan. De FAQ direct na een
   leesvlak wordt ook licht, zodat donker (kop, richtprijzen, afsluiter, voet) en licht elkaar afwisselen. */
.leesvlak,
.leesvlak ~ .faq {
  --tekst: #14181D;
  --tekst-zacht: #4B5159;
  --lijn: #E4E1DA;
  --vlak: #FFFFFF;
  --vlak-hoog: #FFFFFF;
  --veldrand: #8C9199;
  --accent-tekst: var(--goud-op-licht);
  --prijs: var(--goud-op-licht);
  background: var(--papier);
  color: var(--tekst);
}
.leesvlak ~ .faq { background: var(--papier-2); }
:is(.leesvlak, .leesvlak ~ .faq) :is(.eyebrow, .goud, .kaart__link, .kaart .icoon, .plaatsen-uitklap summary) { color: var(--goud-op-licht); }
:is(.leesvlak, .leesvlak ~ .faq) .concept-label { color: var(--goud-op-licht); border-color: var(--goud-op-licht); }
:is(.leesvlak, .leesvlak ~ .faq) .faq__item summary::after { color: var(--goud-op-licht); }
:is(.leesvlak, .leesvlak ~ .faq) a:not(.knop) { text-decoration-color: var(--goud); }
:is(.leesvlak, .leesvlak ~ .faq) a:not(.knop):hover { color: var(--goud-op-licht-hover); }
:is(.leesvlak, .leesvlak ~ .faq) :is(.knop-bel, .knop-stil):hover { color: var(--goud-op-licht); border-color: var(--goud-op-licht); }
/* goudstreepje boven elke tussenkop in de leestekst */
.leesvlak :is(.leestekst, .pagina) > h2::before,
.pagina.leesvlak > h2::before {
  content: ''; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--ruimte-4);
  border-radius: 2px; background: var(--goud);
}

/* Leesraster: tekstkolom (44rem) met rechts de zijkaart vanaf 1100 px; daaronder staat de kaart onder de tekst. */
.leesraster { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .leesraster--zij { grid-template-columns: minmax(0, 44rem) 20rem; justify-content: center; column-gap: var(--ruimte-16); }
  .leesraster--zij > .leestekst > * { margin-inline: 0; }
  .leesraster--zij > .leestekst > :where(figure, table, img) { max-width: 100%; }
}
.zijkaart { width: 100%; max-width: 44rem; margin: var(--ruimte-12) auto 0; }
@media (min-width: 1100px) { .zijkaart { max-width: none; margin: 0; } }
.zijkaart__kaart {
  position: sticky; top: calc(var(--kop-hoogte) + var(--ruimte-6));
  padding: var(--ruimte-6); background: #FFFFFF; color: #14181D;
  border: 1px solid #E4E1DA; border-top: 3px solid var(--goud-donker); border-radius: var(--radius-groot);
  box-shadow: 0 12px 32px rgb(20 24 29 / 0.08);
}
.zijkaart__label {
  margin: 0 0 var(--ruimte-3); font-family: var(--font-kop); font-weight: 800; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #4B5159;
}
.zijkaart__feiten { display: grid; gap: var(--ruimte-2); margin: 0; font-size: 0.9375rem; }
.zijkaart__feiten > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ruimte-3); padding-bottom: var(--ruimte-2); border-bottom: 1px solid #E4E1DA; }
.zijkaart__feiten dt { min-width: 0; color: #4B5159; }
.zijkaart__feiten dd { margin: 0; flex: none; font-weight: 600; text-align: right; white-space: nowrap; }
.zijkaart__knoppen { display: grid; gap: var(--ruimte-2); margin-top: var(--ruimte-6); }
.zijkaart__knoppen .knop { width: 100%; }
.zijkaart__knoppen .knop-bel { color: #14181D; border-color: #6B737D; }
.zijkaart__noot { margin: var(--ruimte-4) 0 0; font-size: 0.8125rem; line-height: 1.5; color: #4B5159; }