/* ============================================================================
TYPOGRAFIE — ROLLEN  (stap 4, 16-07-2026)
============================================================================
De maat van een sectiekop hoort bij de LAAG waarin hij staat, niet bij de tag
die de redacteur in ACF koos.

Wat hiervoor mis ging: de CSS zette de maat per laag EN per tag. Dezelfde
sectiekop was daardoor 28px als je 'H3' koos en 48px als je 'H1' koos --
zonder dat iemand dat bedoelde. Vandaar de wildgroei van 56/48/40/32.

.title-element is altijd de sectiekop van een pagebuilder-laag (ACF-veld
heading_titel). Kaarttitels zijn andere classes (.dienst-title, .project-content h3)
en vallen hier dus buiten.

BEWUST BUITEN DIT BLOK
  .volle-afb-tekst-laag   statement   64 / 80   -- accent, blijft groot
  dienst-item (home)      blok-titel  56        -- accent, blijft groot
  h1.title-element                              -- afspraak John 16-07: ongemoeid

De maat komt uit de tokens in base/variables.css en verschilt per band
(mobiel 28 / 1180+ 40 / 1480+ 48). Dit bestand wordt in functions.php als
laatste ge-enqueued (main.css wordt door dit thema niet geladen).

WAAROM !important
  Het thema heeft regels als
    .content-box.Titel.knoppen.links.en.tekst.rechts .title-element { font-size: 32px }
  met zeven classes. Die specificiteit (0,7,0) is met een nette rol-selector niet
  te verslaan zonder net zo'n onleesbare selector te schrijven. Dit blok is de
  enige plek die de sectiekop-maat hoort te zetten, dus is !important hier de
  bedoeling en geen noodgreep. Het thema gebruikt het in dezelfde regels al.
============================================================================ */

.content-laag .title-element:not(h1),
.afb-tekst-laag .title-element:not(h1),
.cijfers-tekst-laag .title-element:not(h1),
.cta-laag .title-element:not(h1),
.overzicht-laag .title-element:not(h1),
.post-type-slider .title-element:not(h1),
.diensten-overzicht .title-element:not(h1),
.vestigingen-laag .title-element:not(h1),
.contact-content-laag .title-element:not(h1),
.faq-laag .title-element:not(h1),
.gap-box .title-element:not(h1) {
    font-size: var(--fs-sectietitel) !important;
    line-height: var(--lh-sectietitel) !important;
}

/* De rode KBK-streep stond in 39 losse regels met vaste pixelmaten per tag.
   In em schaalt hij automatisch mee met de kop. Ratio's zijn afgeleid uit de
   gemeten nulmeting (342 strepen), niet uit de CSS-broncode:
     hoogte  0.750em  -- exact uniform: 25e en 75e percentiel allebei 0.750
     top     0.19em   -- strak: 0.188 tot 0.200
   BREEDTE ZETTEN WE BEWUST NIET. Die varieert echt per laag (0.64 tot 0.97em):
   de schuinte van de streep is een ontwerpkeuze per context, geen afgeleide van
   de fontgrootte. Uniformeren maakte hem overal tot 14px smaller. */
.content-laag .title-element:not(h1):before,
.afb-tekst-laag .title-element:not(h1):before,
.cijfers-tekst-laag .title-element:not(h1):before,
.cta-laag .title-element:not(h1):before,
.overzicht-laag .title-element:not(h1):before,
.post-type-slider .title-element:not(h1):before,
.diensten-overzicht .title-element:not(h1):before,
.vestigingen-laag .title-element:not(h1):before,
.contact-content-laag .title-element:not(h1):before,
.faq-laag .title-element:not(h1):before,
.gap-box .title-element:not(h1):before {
    height: 0.75em !important;
    top: 0.1875em !important;
}