/* ================================================================= */
/* B&R VITAAL - HUISSTIJL                                             */
/* Laadt als laatste op elke pagina (build.sh) en brengt de gedeelde  */
/* onderdelen terug tot één rustige, zakelijke stijl: normale koppen, */
/* labels zonder pil, vlakke knoppen, geen decoratie. Kleuren blijven */
/* die van het palet.                                                 */
/* ================================================================= */

/* ---------- koppen ---------- */
h1, h2, h3, h4 { font-weight: 700; }
h1 { letter-spacing: -0.01em; }
.highlight-yellow { background: none !important; padding: 0 !important; border-radius: 0 !important; }

/* ---------- labels boven koppen: korte lijn + kleine hoofdletters ---------- */
.br-pill-badge, .br-eyebrow, .closing-badge {
  display: inline-flex !important; align-items: center; gap: 12px;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase; color: inherit !important; opacity: 0.78;
}
.br-pill-badge .badge-dot, .br-pill-badge .badge-dot-white, .closing-badge .badge-dot {
  width: 24px !important; height: 2px !important; border-radius: 0 !important;
  background: currentColor !important; opacity: 0.55;
}
.br-eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: currentColor; opacity: 0.55; }

/* ---------- kleine labels in kaarten: gewone tekst ---------- */
.tag-chip, .route-tag, .pillar-tag, .p-tag, .traject-tag, .fase-tag, .hv-chip, .quick-chip, .section-tag, .edition-tag {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.1em !important;
  text-transform: uppercase; color: inherit !important; opacity: 0.7;
}

/* ---------- vertrouwenspunten onder de hero: lijst in plaats van pillen ---------- */
.trust-chip { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

/* ---------- knoppen ---------- */
.btn-home, .btn-br, .btn-wandel, .btn-primary, .btn-secondary, .btn-ghost {
  border-radius: 8px !important; box-shadow: none !important; letter-spacing: 0 !important;
  font-weight: 700 !important;
}
/* gekleurde knoppen worden rustige omlijnde knoppen; de hoofdknop blijft donker */
.btn-green, .btn-blue, .btn-secondary {
  background: transparent !important; color: var(--br-ink) !important;
  border: 1.5px solid rgba(74, 43, 33, 0.3) !important;
}
.btn-green:hover, .btn-blue:hover, .btn-secondary:hover { border-color: var(--br-ink) !important; background: rgba(74, 43, 33, 0.04) !important; }
.btn-arrow { display: none !important; }

/* ---------- foto's ---------- */
.strip-caption, .slide-caption, .gallery-caption {
  border-radius: 0 !important; border-left: 0 !important; backdrop-filter: none !important;
  background: rgba(241, 230, 200, 0.94) !important; color: var(--br-ink) !important;
  font-weight: 700 !important;
}

/* ---------- menu ---------- */
.br-nav-link { border-radius: 0 !important; }
.br-nav-link:hover { background: none !important; color: var(--br-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.br-nav-link.actief { background: none !important; box-shadow: inset 0 -2px 0 var(--br-ink); }

/* ---------- decoratie die niet meer bij de stijl hoort ---------- */
.float-shape, .br-progress-bar, .br-side-nav { display: none !important; }

/* ---------- gekleurde streep links op kaarten: weg (citaten en notities houden een dunne lijn) ---------- */
.pillar-card, .pijler-deep, .profiel-taken, .bron-signals, .rij-doel, .tc-target {
  border-left: 1px solid rgba(74, 43, 33, 0.12) !important;
}
.consult-note, .duo-note, .pane-note, .empty-note, .nutrition-highlight-box {
  border-left: 2px solid rgba(74, 43, 33, 0.3) !important;
}
.band-label, .zz-badge, .consult-badge, .bron-photo-badge, .hv-small figcaption { border-left: 0 !important; }
.br-footer .contact-row { border-left-width: 1px !important; }

/* ---------- vergelijkingsblok homepage ---------- */
.contrast-block { grid-template-columns: 1fr 1fr !important; }
.contrast-divider { display: none !important; }
.contrast-label { background: none !important; padding: 0 !important; border-radius: 0 !important; letter-spacing: 0.14em !important; font-size: 12px !important; opacity: 0.75; }

/* ---------- afsluitend blok: vlak, zonder gloed of gele rand ---------- */
.closing-banner { border: 0 !important; }
.closing-glow { display: none !important; }

/* ---------- footer: gewone lijsten in plaats van knoppen ---------- */
.br-footer .link-list { gap: 0 !important; }
.br-footer .link-list a {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 6px 0 !important; opacity: 0.8; font-weight: 600 !important;
}
.br-footer .link-list a:hover, .br-footer .link-list a.actief { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.br-footer .link-streep { display: none !important; }
.br-footer .social-link { border: 0 !important; background: none !important; padding: 4px 0 !important; }
.br-footer .social-icon { border-radius: 6px !important; }
.br-footer .contact-cta { border-radius: var(--r-knop) !important; }
.route-indicator, .rt-indicator { display: none !important; }
.btn-submit { text-transform: none !important; letter-spacing: 0 !important; }

/* ================================================================= */
/* NAAR HET VOORBEELD VAN FUNCTION HEALTH (26-09-2026)                */
/* Grotere koppen, meer lucht, één actiekleur, vlakke kaarten.        */
/* De Latin Living Room en de fotogalerij volgen hun eigen opmaak;   */
/* alleen de algemene afspraken (geen schaduw, geen optillen) gelden */
/* daar ook. De wandelpagina's doen sinds 28-09-2026 gewoon mee.     */
/* ================================================================= */

/* V2: meer ruimte tussen secties */
:root { --sp-sectie: 112px; --sp-sectie-mob: 64px; }

/* V2: grote koppen met krappe regelafstand */
.section-heading, .br-section-title { font-size: clamp(30px, 4vw, 46px) !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }

/* V1: de oude markeerstift wordt het schuine accentwoord (niet op de
   Latin Living Room en de fotogalerij, die houden hun eigen koppen) */
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .highlight-yellow { font-style: italic; }

/* Geen zachte schaduwen en niets dat optilt bij aanwijzen. */
main :where(*) { box-shadow: none !important; }
main :where(a, button, article, div, li, figure, img, label):hover { transform: none !important; }

/* V5: kaarten vlak in de kaartkleur (merkboek 1.0: lichter dan Warm Ivoor), 12px ronding, geen rand. Op een gekleurde
   sectie blijven ze dezelfde kaartkleur, anders vallen ze weg. Wit blijft voor formulieren. */
.br-card, .kb-kaart, .route-item, .traject-card, .traject-rij, .zigzag-row, .consult-card, .profiel-card, .visie-card, .stappen li,
.aside-card:not(.aside-card-dark), .bedankt-stappen li, .betekenis-card, .waarde-kaart, .profiel-kaart, .pijler-deep {
  background: var(--br-kaart) !important; border-color: transparent !important; border-radius: var(--r-kaart) !important;
}
:is(.bg-sage, .bg-tint-yellow, .bg-tint-green, .bg-zand, .br-section--sand)
  :is(.br-card, .kb-kaart, .route-item, .traject-card, .traject-rij, .zigzag-row, .consult-card, .profiel-card, .visie-card, .stappen li, .aside-card:not(.aside-card-dark), .betekenis-card, .waarde-kaart, .profiel-kaart, .pijler-deep) {
  background: var(--br-kaart) !important;
}
.traject-card.featured, .traject-rij.featured { border-color: var(--br-ink) !important; }

/* Veelgestelde vragen: lijnen in plaats van losse kaartjes */
.br-faq-lijst { gap: 0 !important; border-top: 1px solid rgba(74, 43, 33, 0.25); }
.faq-item { background: none !important; border: 0 !important; border-bottom: 1px solid var(--br-line) !important; border-radius: 0 !important; }
.faq-summary { padding: 20px 2px !important; font-size: 17px !important; }
.faq-body { padding: 0 2px 22px !important; font-size: 15.5px !important; }

/* V11: header effen crème, na scrollen alleen een dunne onderlijn */
.br-header { background: var(--br-cream) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }
.br-header.is-scrolled { border-bottom-color: var(--br-line) !important; }
.br-header-right { gap: 16px; }

/* F1: de hoofdknop staat nu in de header; de zwevende knop onderaan
   (die over foto's en tekst viel) is daarmee overbodig. */
.br-mobile-cta { display: none !important; }
@media (max-width: 768px) {
  body { padding-bottom: 0 !important; }
}

/* De laatste sectie van een pagina heeft zelf al ruimte onderaan; een
   extra marge boven de footer gaf een los crème streepje. */
.br-footer { margin-top: 0 !important; }

/* Eén zandtint voor gekleurde secties (was per pagina net anders) */
body:not([data-page="latin"]):not([data-page="fotogalerij"])
  :is(.bg-sage, .bg-tint-yellow, .bg-tint-green) { background: var(--br-sand) !important; border-top: 0 !important; border-bottom: 0 !important; }

/* ================================================================= */
/* ALLES ZOALS DE HOMEPAGE (26-09-2026, verzoek van Boris)            */
/* Eén knopstijl, één breedte, dezelfde koppen op elke pagina. De     */
/* Latin Living Room en fotogalerij houden hun eigen koppen.          */
/* ================================================================= */

/* Knoppen: gevuld = bruin, tweede knop = omlijnd. Overal dezelfde maat. */
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn, .btn-br, .btn-home) {
  padding: 13px 22px !important; font-size: 14.5px !important; font-weight: 700 !important;
  border-radius: var(--r-knop) !important; line-height: 1.2 !important;
}
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn-primary, .btn-brown) { background: var(--br-ink) !important; color: var(--br-cream) !important; border: 1.5px solid var(--br-ink) !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn-primary, .btn-brown):hover { background: #301b15 !important; border-color: #301b15 !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn-ghost, .btn-outline-brown, .btn-green, .btn-blue, .btn-secondary) {
  background: transparent !important; color: var(--br-ink) !important; border: 1.5px solid var(--br-ink) !important;
}
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn-ghost, .btn-outline-brown, .btn-green, .btn-blue, .btn-secondary):hover { background: rgba(74, 43, 33, 0.06) !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .btn-submit { border-radius: var(--r-knop) !important; font-size: 14.5px !important; font-weight: 700 !important; padding: 14px 22px !important; }

/* Eén inhoudsbreedte */
.br-p-container, .br-c-container, .br-f-container, .br-o-container, .br-r-container, .br-home-container { max-width: 1240px !important; }

/* Koppen en intro in de hero: overal gelijk aan de homepage */
body:not([data-page="latin"]):not([data-page="fotogalerij"])
  :is(.hero-title, .br-hero-title) { font-size: clamp(36px, 4.8vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"])
  :is(.hero-lead, .br-hero-subtitle) { font-size: clamp(16px, 1.7vw, 19px) !important; line-height: 1.55 !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .section-lead { font-size: 17px; line-height: 1.6; }

/* Losse blokken op de trajectpagina's: vlak zoals op de homepage.
   Formulieren blijven wit (wit = invullen), de rest crème of zand. */
.aanmeld-banner { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.aanmeld-banner .ab-body { padding: 0 !important; }
.aanmeld-direct { background: var(--br-kaart) !important; border: 0 !important; border-radius: var(--r-kaart) !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .form-card { border-radius: var(--r-kaart) !important; border: 0 !important; }
.consult-note, .duo-note, .pane-note, .empty-note { background: var(--br-kaart) !important; border: 0 !important; border-radius: var(--r-kaart) !important; }
.zz-badge, .consult-badge { background: rgba(241, 230, 200, 0.94) !important; color: var(--br-ink) !important; border-radius: 6px !important; }
.zz-nummer { display: none !important; }
/* Het model op Over ons: de laatste stap in bruin, net als de actiekleur */
.stappen li:last-child { background: var(--br-ink) !important; color: var(--br-cream) !important; }
.visie-card { border-top: 0 !important; }
.leeg-blok { background: var(--br-kaart) !important; border: 0 !important; border-radius: var(--r-kaart) !important; }
.leeg-icoon { background: var(--br-sand) !important; }

/* Eenvoudige pagina's (kennisbank, juridisch, bedankt, energiecheck) op
   dezelfde linkerlijn als de rest: 1240 px inhoud. */
.br-container { max-width: 1280px; }

/* ================================================================= */
/* SECTIES IN KLEUR (26-09-2026)                                      */
/* Vaste rollen op elke pagina: groen = het belangrijkste inhoudsblok, */
/* (zelfde body:not-keten als de zandregel, anders wint die regel)     */
/* blauw = het tweede, geel = de afsluiter onderaan. Kaarten in een   */
/* gekleurde sectie worden crème. Wint van de zandregel hierboven.    */
/* ================================================================= */
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .sectie-groen { background: var(--tint-lichaam) !important; border-top: 0 !important; border-bottom: 0 !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .sectie-blauw { background: var(--tint-hoofd) !important; border-top: 0 !important; border-bottom: 0 !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .sectie-geel { background: var(--tint-gevoel) !important; border-top: 0 !important; border-bottom: 0 !important; }
:is(.sectie-groen, .sectie-blauw, .sectie-geel)
  :is(.br-card, .kb-kaart, .route-item, .traject-card, .traject-rij, .zigzag-row, .consult-card, .profiel-card, .visie-card, .stappen li, .aside-card:not(.aside-card-dark), .betekenis-card, .waarde-kaart, .profiel-kaart, .pijler-deep, .br-prijskaart, .team-kaart, .stap-kaart, .roi-panel, .aanmeld-direct, .consult-note, .duo-note, .empty-note, .leeg-blok) {
  background: var(--br-kaart) !important;
}
.sectie-groen .br-prijskaart.is-aanbevolen { background: #fff !important; }
/* Lijnen en rasters iets donkerder op een tint, anders verdwijnen ze */
:is(.sectie-groen, .sectie-blauw, .sectie-geel) { --br-line: rgba(74, 43, 33, 0.16); }

/* Kennisbank en energiecheck: het afsluitblok warm geel */
.kb-cta-blok { background: var(--tint-gevoel) !important; }
.ec-cta { background: var(--tint-gevoel) !important; }

/* Methode: de pijlerkaarten krijgen hun kleur terug als lijn bovenaan */
.pijler-deep.border-green, .pijler-deep.border-blue, .pijler-deep.border-yellow { border-top: 3px solid var(--kleur-lichaam) !important; }
.pijler-deep.border-blue { border-top-color: var(--kleur-hoofd) !important; }
.pijler-deep.border-yellow { border-top-color: var(--kleur-gevoel) !important; }

/* ---------- LEESBARE LABELS (sinds 27-09-2026) ----------
   Kleine hoofdletterlabels stonden op 9,5-10 px en 55-65% dekking: een
   contrast van ongeveer 3:1, onder de WCAG-norm van 4,5:1 voor kleine
   tekst. Nu minimaal 11 px en 80% dekking (ongeveer 6:1 op crème).
   Niet op de Latin Living Room en de fotogalerij. */
body:not([data-page="latin"]):not([data-page="fotogalerij"])
  :is(.aside-kicker, .dr-label, .routes-kicker, .rc-kicker, .pt-label, .wf-label, .tt-label, .rd-label,
      .es-label, .ad-label, .term-label, .deep-block-label, .koppel-label, .roi-field label, .roc-label, .rij-meta span) {
  font-size: 11px !important; opacity: 0.8 !important;
}
body:not([data-page="latin"]):not([data-page="fotogalerij"])
  :is(.roi-scale) { font-size: 11px !important; opacity: 0.75 !important; }

/* ---------- KNOPPEN VOLGENS HET MERKBOEK 1.0 (sinds 06-10-2026) ----------
   Rechthoek met kleine afronding (4 px, --r-knop; gemeten op het merkboek: ongeveer 0,11 x de knophoogte),
   hoofdletters met wat ruimte tussen de letters, Nunito Sans vet. Badges, fotolabels en chips blijven pil.
   Gevuld = espresso, de tweede knop omlijnd. Wint van de regels hierboven
   (8 px ronding). Niet op de Latin Living Room en de fotogalerij. */
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn, .btn-br, .btn-home, .btn-wandel, .btn-submit, .br-kop-knop, .contact-cta) {
  border-radius: var(--r-knop) !important; text-transform: uppercase !important; letter-spacing: 0.09em !important;
  font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: center;
}
body:not([data-page="latin"]):not([data-page="fotogalerij"]) :is(.btn, .btn-br, .btn-home, .btn-wandel, .btn-submit) { padding: 15px 26px !important; }
body:not([data-page="latin"]):not([data-page="fotogalerij"]) .br-kop-knop { padding: 11px 18px !important; font-size: 11.5px !important; }