/* ================================================================= */
/* B&R VITAAL - KLEINE PAGINA'S IN DE HOMEPAGESTIJL                    */
/* (06-10-2026, aanvulling op css/geheel.css)                          */
/*                                                                    */
/* Voor de pagina's zonder eigen stylesheet: /plannen, /afspraak,      */
/* /nieuwsbrief, /bedankt, /404 en de vijf juridische pagina's. De     */
/* gedeelde laag (geheel.css) regelt hero, blokkop, kaarten en de      */
/* afsluiter; hier staat wat deze pagina's daar nog bij nodig hebben:  */
/*  - de statuspagina's (bedankt, 404, nieuwsbrief) staan links, zoals */
/*    de hero op home, in plaats van gecentreerd;                      */
/*  - de planner is een rustige kaart zonder rand;                     */
/*  - juridische tekst met een prettige leesbreedte.                   */
/* Laadt voor huisstijl.css en geheel.css; daarom overal               */
/* ":root body.geheel", zoals geheel.css zelf.                         */
/* Geen beweging, geen schaduw, geen transform op div/li/a/button.     */
/* ================================================================= */

/* alles wat de grote afronding van de planner en de kaarten volgt, volgt nu de 24 px van de homepage */
:root body.geheel { --r-groot: var(--kader-r); }

/* ---------- STATUSPAGINA'S: de hero links, zoals op home ---------- */
:root body.geheel .hero-status { max-width: 1280px; text-align: left; }
:root body.geheel .hero-status > h1 { max-width: 16em; }
:root body.geheel .hero-status > p { max-width: 54ch; }
:root body.geheel .hero-status .bedankt-mark { margin: 0 0 22px; width: 56px; height: 56px; font-size: 26px; }
:root body.geheel .hero-status .hero-zoek { max-width: 560px; margin: 28px 0 0; text-align: left; }
/* nieuwsbrief: de bestaande regel zet de container op 640 px en centreert; in de statusstijl links en op containerbreedte */
:root body.geheel .nb-beheer { max-width: 1280px; text-align: left; }
:root body.geheel .nb-beheer .nb-actie { margin-top: 28px; }
:root body.geheel .nb-status { margin-top: 18px; }
:root body.geheel .nb-terug { margin-top: 32px; font-size: 14px; opacity: 0.85; }

/* ---------- BEDANKT ---------- */
:root body.geheel .bedankt-stappen { max-width: 820px; margin: 0 0 28px; }
:root body.geheel .bedankt-plan { justify-content: flex-start; margin: 0 0 20px; }
:root body.geheel .bedankt-klein { margin: 0; font-size: 14px; opacity: 0.85; }
:root body.geheel .bedankt-links { margin-top: 0; }

/* ---------- PLANNER (/plannen en /afspraak) ---------- */
/* de planner is een formulier: wit, zonder rand, grote afronding; de uitleg ernaast is een kaart in kaartkleur */
:root body.geheel .pl-pagina .pl-inline { border: 0; background: #fff; }
:root body.geheel .pl-uitleg { background: var(--br-kaart); }
:root body.geheel .pl-uitleg-kop { font-size: 22px; }
:root body.geheel .pl-uitleg-noot { border-top-color: rgba(74, 43, 33, 0.12); }

/* ---------- JURIDISCHE PAGINA'S ---------- */
/* typografische hero (label, grote kop, korte inleiding) staat in geheel.css; hier de tekst eronder:
   een leesbare regelbreedte (720 px, zo'n 75 tekens), iets grotere letter en lucht tussen de artikelen */
:root body.geheel .legal-body { font-size: 17px; line-height: 1.7; }
:root body.geheel .legal-body > * { max-width: 720px; }
:root body.geheel .legal-body > p:first-child { font-size: 15px; line-height: 1.6; opacity: 0.8; margin: 0 0 8px; }
:root body.geheel .legal-body h2 {
  margin: 52px 0 14px; padding-top: 28px; border-top: 1px solid rgba(74, 43, 33, 0.14);
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2;
}
:root body.geheel .legal-body > p:first-child + h2 { margin-top: 36px; }
:root body.geheel .legal-body h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.3; }
:root body.geheel .legal-body :is(ol, ul) { margin: 0 0 18px; padding-left: 1.5em; }
:root body.geheel .legal-body li { margin: 0 0 10px; padding-left: 4px; }
:root body.geheel .legal-body li::marker { color: var(--br-ink); font-weight: 800; }
:root body.geheel .legal-body p { margin: 0 0 16px; }
:root body.geheel .legal-body a { text-underline-offset: 3px; }

@media (max-width: 700px) {
  :root body.geheel .hero-status .bedankt-mark { width: 48px; height: 48px; font-size: 22px; margin-bottom: 18px; }
  :root body.geheel .legal-body { font-size: 16px; }
  :root body.geheel .legal-body h2 { margin-top: 40px; padding-top: 22px; }
}

/* de afsluiter schuift 32 px over het blok erboven; staat hij direct onder de hero (planner, afspraak, nieuwsbrief),
   dan krijgt die hero genoeg lucht onderaan zodat er niets onder het espresso vlak verdwijnt */
:root body.geheel .page-hero:has(+ section .br-afsluiter) { padding-bottom: calc(var(--blok-y) + 8px); }