/*
Theme Name: EHBO Software
Theme URI: https://ehbosoftware.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Het thema van ehbosoftware.nl, een child van Leflite.
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/*
 * Alleen algemene regels: elementen, componenten en tokens.
 * Kleuren, typografie en spacing komen uit custom-leftheme.json — voeg hier
 * niets toe wat daar als token kan. Niets per sectie of per pagina.
 *
 * Volgorde: tokens → basis → header → knoppen → kaarten → mockups →
 *           formulieren → footer → mobiel
 */

:root {
    --ehbo-line: #E1E6F5;              /* randen van kaarten en velden */
    --ehbo-line-soft: #E7EBF7;         /* zachtere scheidingslijnen */
    --ehbo-surface: #F7F9FE;           /* footer- en blokachtergrond */
    --ehbo-muted: #4C5378;             /* lopende tekst op licht */
    --ehbo-success: #14A66A;           /* groen van de vinkjes en bevestigingen */
    --ehbo-radius-lg: 20px;            /* kaarten */
    --ehbo-radius-header: 18px;
    --ehbo-shadow-card: 0 30px 60px -34px rgba(20, 18, 74, .35);
    --ehbo-shadow-header: 0 18px 40px -22px rgba(20, 18, 74, .35);
}

/* ---------------------------------------------------------------- basis -- */

body {
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    letter-spacing: -.02em;
    /* Het ontwerp balanceert elke kop; zonder dit blijft er een losse staartregel
       achter en wijkt de regelval overal af. */
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Het theme zet <small> op 80% van de omgeving; het ontwerp houdt 13px aan. */
small {
    font-size: var(--small-font-size);
}

h1 {
    letter-spacing: -.03em;
}

@media only screen and (min-width: 992px) {
    h1 {
        line-height: 1.1;
    }
}

/*
 * Het parent-thema zet op h2 t/m h5 onvoorwaardelijk de mobiele regelhoogte
 * (`--h-line-height-mobile`), ook op desktop. Hier weer rechtgezet; de mobiele
 * waarde blijft gelden onder 991px. Dit is een fout in het thema zelf.
 */
h2, h3, h4, h5 {
    line-height: var(--h-line-height);
}

@media only screen and (max-width: 991px) {
    h2, h3, h4, h5 {
        line-height: var(--h-line-height-mobile);
    }
}

/* Kaarttitels staan in het ontwerp iets ruimer dan de grote koppen. */
h4 {
    line-height: 1.3;
}

/*
 * Het ontwerp hanteert twee schalen: royaal op de landingspagina, compacter op
 * de binnenpagina's. De tokens staan op de binnenpagina-schaal; de home wijkt
 * hier af in plaats van elke sectie apart. Op mobiel vallen beide terug op
 * dezelfde maat, dus deze uitzonderingen gelden alleen op desktop.
 */
@media only screen and (min-width: 992px) {
    body.home h1 {
        font-size: 64px;
        line-height: 1.08;
    }

    body.home h2 {
        font-size: 40px;
    }

    /* De donkere banden (uitgelicht scherm, afsluitende CTA) hebben een kop die
       een slag groter is dan de rest van de pagina. */
    .bg-tertiary h2 {
        font-size: 44px;
        line-height: 1.12;
    }
}

/*
 * Accentwoord in een kop. Het ontwerp zet een deel van elke grote kop in
 * primary; in de editor is dat gewoon vetgedrukte tekst, zodat er geen
 * opmaakcode in de WYSIWYG hoeft.
 */
h1 strong,
h2 strong,
h3 strong {
    color: var(--primary);
    font-weight: inherit;
}

.bg-tertiary h2 strong,
.bg-primary h2 strong {
    color: #FF8A80;
}

/* h6 is in dit theme het kicker-element boven een kop. */
h6 {
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--darkgray);
    margin-bottom: 14px;
}

.bg-tertiary h6,
.bg-primary h6,
.col-card.bg-tertiary h6 {
    color: rgba(255, 255, 255, .62);
}

p {
    color: var(--ehbo-muted);
}

.bg-tertiary p,
.bg-primary p,
.col-card.bg-tertiary p {
    color: rgba(255, 255, 255, .78);
}

/* Hero: zacht verloop van lichtblauw naar wit, met het kruis-motief erover. */
.lef-section.ehbo-hero {
    background: linear-gradient(180deg, #F5F7FD, #FFFFFF);
    position: relative;
    overflow: hidden;
}

body.home .lef-section.ehbo-hero {
    background: linear-gradient(180deg, #F5F7FD 0%, #FFFFFF 78%);
}

/*
 * Het productscherm begint ruim onder de tekst en is smaller dan de rest van
 * de pagina: het ontwerp houdt daar 1180px container aan.
 */
.ehbo-hero .code-wrapper {
    margin-top: 92px;
}

.ehbo-hero .code-wrapper {
    max-width: 1132px;
    margin-left: auto;
    margin-right: auto;
}

/* Sectie met alleen een productscherm: smallere container dan de rest. */
.lef-section.ehbo-smal > .container {
    max-width: 1180px;
}

/*
 * Het ontwerp onderstreept geen enkele link; het theme doet dat binnen #main
 * wel. Die regel gebruikt een id, dus hier ook — anders wint het theme.
 */
#main a:not(.btn):not(.button) {
    text-decoration: none;
}

#main a:not(.btn):not(.button):hover {
    text-decoration: none;
    color: var(--primary);
}

/* Kruimelpad boven de kop. */
#breadcrumbs {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--darkgray);
    margin-bottom: 18px;
}

#breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

#breadcrumbs a:hover {
    color: var(--primary);
}

#breadcrumbs .breadcrumb_last {
    font-weight: 700;
    color: var(--black);
}

/*
 * Het kruis-motief uit het merk, links en rechts naast de hero.
 *
 * In het ontwerp drijven deze vormen mee met het scrollen. assets/parallax.js
 * zet daarvoor `--ehbo-parallax` op de sectie; de twee lagen gebruiken die met
 * een verschillende factor, zodat ze niet als één blok bewegen. Staat het
 * script uit of vraagt de bezoeker om minder beweging, dan valt de variabele
 * terug op 0 en staat alles stil op de ontworpen plek.
 */
.lef-section.ehbo-hero::before,
.lef-section.ehbo-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 400px;
    pointer-events: none;
    z-index: 0;
    opacity: .45;
    filter: blur(4px);
    background-repeat: no-repeat;
}

/* Eén kruis per zijde: zo staat het op de functiepagina's in het ontwerp. */
.lef-section.ehbo-hero::before {
    left: 0;
    transform: translate3d(0, var(--ehbo-parallax, 0px), 0);
    background-image: url("images/cross-a.svg");
    background-position: 43px 80px;
    background-size: 150px;
}

.lef-section.ehbo-hero::after {
    right: 0;
    /* Trager en tegengesteld aan de linkerlaag; dat geeft diepte. */
    transform: translate3d(0, calc(var(--ehbo-parallax, 0px) * -0.55), 0);
    background-image: url("images/cross-b.svg");
    background-position: right 58px top 50px;
    background-size: 110px;
}

/* De landingshero heeft er in het ontwerp drie per zijde, plus één middenin. */
.lef-section.ehbo-hero--rich::before {
    background-image: url("images/cross-a.svg"), url("images/cross-b.svg"), url("images/cross-c.svg"), url("images/cross-b.svg");
    background-position: 43px 70px, 130px 280px, 29px 460px, 316px 600px;
    background-size: 150px, 74px, 96px, 54px;
}

.lef-section.ehbo-hero--rich::after {
    background-image: url("images/cross-b.svg"), url("images/cross-c.svg"), url("images/cross-a.svg");
    background-position: right 58px top 110px, right 158px top 330px, right 29px top 520px;
    background-size: 170px, 66px, 110px;
}

/* De inhoud moet bóven het motief staan. */
.lef-section.ehbo-hero > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    /* Op smalle schermen is er geen ruimte naast de tekst. */
    .lef-section.ehbo-hero::before,
    .lef-section.ehbo-hero::after {
        display: none;
    }

    /*
     * The hero's top padding (196-216px, inline from the block) is sized for the
     * 120px desktop header. The mobile header card ends around 80px, which left
     * 150px+ of empty space above the breadcrumbs/badge. Same value as the
     * manual header (.ehbo-handleiding__kop). !important: the padding is inline.
     */
    .lef-section.ehbo-hero {
        padding-top: 132px !important;
    }

    .ehbo-hero .code-wrapper {
        margin-top: 56px;
    }
}

/* site-b mobile 2026-10-12: the first section of an inner page (hero, or the FAQ page's own
   section) clears the floating header. On a phone/tablet the header is much lower than on
   desktop, so the inline 196px left a big empty band above the breadcrumb: use the same 132px
   as the kennisbank header (.ehbo-handleiding__kop). !important beats the inline style the
   section block writes. The homepage hero is left alone. */
@media only screen and (max-width: 991px) {
    body:not(.home) .lef-section.transparent-top-section-padding {
        padding-top: 132px !important;
    }

    /* A hero without its own padding (/tarieven/, the legal pages) kept the theme default 76px
       below it, on top of the next section's 76px: a 150px hole. Use the 40px the function
       page heroes have. */
    body:not(.home) .lef-section.ehbo-hero:not([style*="padding-bottom"]) {
        padding-bottom: 40px;
    }
}

/* A first section that is not a hero (/veelgestelde-vragen/) had an inline 92px and slid under
   the header on desktop; give it the theme's own header clearance like every hero. */
@media only screen and (min-width: 992px) {
    body:not(.home) .lef-section.transparent-top-section-padding:not(.ehbo-hero) {
        padding-top: var(--transparent-top-section-padding) !important;
    }
}

/* Legal pages: the document is an embed (iframe) in the hero. The 92px above it is meant for the
   homepage product screen and left a gap between the title and the text on a phone. */
@media only screen and (max-width: 991px) {
    .ehbo-hero .code-wrapper:has(iframe[src*="/embed/juridisch/"]) {
        margin-top: 0;
    }
}

/*
 * Koppen op volle containerbreedte lezen slecht. Het ontwerp houdt de hero-kop
 * op 820px (960 op de landingspagina) en de inleiding op 660px; bij
 * gecentreerde tekst wordt het blok zelf ook gecentreerd.
 *
 * De inleiding is bovendien een slag groter dan de lopende tekst: 18px op de
 * binnenpagina's, 19px op de landingspagina.
 */
.ehbo-hero .content-wrapper {
    max-width: 820px;
}

body.home .ehbo-hero .content-wrapper {
    max-width: 960px;
}

.ehbo-hero .content-wrapper p {
    max-width: 660px;
    font-size: 18px;
    line-height: 1.65;
}

body.home .ehbo-hero .content-wrapper p {
    font-size: 19px;
}

.ehbo-hero .content-wrapper:has([style*="center"]) {
    margin-left: auto;
    margin-right: auto;
}

.ehbo-hero .content-wrapper:has([style*="center"]) p {
    margin-left: auto;
    margin-right: auto;
}

/* Het pilletje boven de hero-kop, met het groene stipje uit het design. */
.ehbo-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--ehbo-line);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    box-shadow: 0 6px 18px -12px rgba(20, 18, 74, .4);
}

.ehbo-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--succes);
    flex-shrink: 0;
}

/* On a 360px phone the hero pill wrapped to two lines with the dot left on its own. */
@media (max-width: 400px) {
    .ehbo-badge {
        gap: 7px;
        padding: 7px 13px;
        font-size: 12px;
    }
}

/*
 * Beoordelingsregel onder de heroknoppen: gouden sterren, vet cijfer, de rest
 * ingetogen.
 *
 * Cijfer, sterren en aantal komen uit de [review_information]-shortcode, dus
 * uit het reviews-posttype. Hiervoor stond de hele regel als vaste tekst in de
 * pagina ("4,7/5 uit 137 beoordelingen") met vijf sterren die uit CSS kwamen,
 * ongeacht de werkelijke score. De opmaak hieronder pakt de eigen markup van
 * de shortcode en legt die op één regel.
 */
/*
 * De opmaak van [review_information]. Het parent-thema levert voor dit
 * component geen enkele stijl, dus die staat hier — als één basis met twee
 * varianten, niet als twee losse kopieën per plek waar de shortcode staat.
 *
 * De shortcode staat kaal in het tekstveld: een eigen wrapper met een klasse
 * mag daar niet volgens de bouwafspraken.
 */
.review-information {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--darkgray);
}

.review-information-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.review-information .rating-value {
    color: var(--black);
    font-weight: 800;
}

.review-information .avarage-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--yellow);
    font-size: 15px;
}

/* Variant: op één regel gecentreerd onder de heroknoppen. */
.ehbo-hero .review-information {
    justify-content: center;
}

/* Sectiekoppen lopen niet over de volle containerbreedte door. */
.lef-section:not(.ehbo-hero) .content-wrapper > h2 {
    max-width: 720px;
}

.lef-section:not(.ehbo-hero) .content-wrapper > h2[style*="center"],
.lef-section:not(.ehbo-hero) .content-wrapper > p[style*="center"] {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------- header -- */

/*
 * Het design tekent de header als zwevende, afgeronde kaart in plaats van een
 * doorlopende balk. Het theme levert de sticky-logica; hier alleen de vorm.
 */
body header.navigation {
    background: transparent !important;
    border: 0;
    padding-top: 16px;
}

/* De kaart is de navigation-inner; het theme rendert daarboven nog
   .container-fluid > .row > .col-md-12, die alleen ruimte moeten geven. */
body header.navigation .container-fluid {
    padding-left: 18px;
    padding-right: 18px;
}

/* Row en kolom binnen de header mogen geen bootstrap-goot toevoegen; anders
   staat de kaart 8px van de rand in plaats van de 18px uit het ontwerp. */
body header.navigation .container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
}

body header.navigation .container-fluid > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

body header.navigation .navigation-inner.navigation-inner-main {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--ehbo-line-soft);
    border-radius: var(--ehbo-radius-header);
    box-shadow: var(--ehbo-shadow-header);
    /* 10px boven en onder het 84px logo maakt de kaart 104 hoog, zoals in het
       ontwerp; samen met de 16px boven de header is dat 120px totaal. */
    padding: 10px 26px;
    /* Het theme laat de balk 10px buiten de kolom uitsteken; als kaart moet hij
       juist binnen de kolom blijven. */
    margin-left: 0;
    margin-right: 0;
    transition: box-shadow .25s ease;
}

body header.navigation .navigation-inner.navigation-inner-main > * {
    margin-left: 0;
    margin-right: 0;
}

/* De regel hierboven zet alle marges op 0, waardoor het menu strak tegen het
   logo aan kwam te staan. Het logo houdt daarom zelf ruimte naar rechts. */
body header.navigation .navigation-inner.navigation-inner-main > .logo-outer {
    margin-right: 40px;
}

body header.navigation.scrolled .navigation-inner.navigation-inner-main {
    box-shadow: 0 22px 46px -24px rgba(20, 18, 74, .45);
}

/* Alleen achtergrond animeren: het theme zet ook een transitie op `top`, wat
   een zichtbare sprong geeft bij de wissel van absolute naar fixed. */
body header.navigation {
    transition-property: background-color, border-color;
}

body .main-nav-menu > li > a:hover {
    background: var(--gray);
    border-radius: 10px;
}

/* -------------------------------------------------------------- knoppen -- */

/* Het theme zet wel de klasse maar styleert de uitlijning niet. */

.buttons-holder:empty {
    display: none;
}

.buttons-holder.alignment-center,
.buttons-holder.alignment-middle {
    justify-content: center;
}

.buttons-holder.alignment-right,
.buttons-holder.alignment-end {
    justify-content: flex-end;
}

.buttons-holder .btn {
    margin: 0;
}

/*
 * Het ACF-veld van het theme biedt de maat `btn-big` aan, maar de stylesheet
 * kent alleen `btn-large`. Een grote knop kwam daardoor als medium binnen.
 * Dit is een fout in het thema zelf.
 */
.btn.btn-big,
.button.btn-big,
input[type="submit"].btn-big,
main button.btn-big {
    font-size: var(--btn-big-font-size);
    font-weight: var(--btn-big-font-weight);
    padding: var(--btn-big-padding);
}

/*
 * Een witte knop op een (bijna) witte sectie valt weg: het theme zet de rand
 * op de knopkleur zelf. Het ontwerp gebruikt daar een lichte lijn.
 */
.btn.bg-white {
    border: 1px solid var(--ehbo-line);
}

.btn.bg-white:hover {
    border-color: var(--black);
}

/* Transparante knop met rand op donkere secties leesbaar houden. */
.bg-tertiary .btn.bg-transparent,
.bg-primary .btn.bg-transparent {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.bg-tertiary .btn.bg-transparent:hover,
.bg-primary .btn.bg-transparent:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* ----------------------------------------------------------------- raster -- */

/*
 * Het ontwerp houdt 24px binnenmarge in de container en 20px tussen kolommen;
 * bootstrap doet standaard 15px en 30px. Zonder deze correctie staat alles
 * negen pixels te ver naar buiten en liggen de kaarten te ver uit elkaar.
 */
.lef-section > .container {
    padding-left: 24px;
    padding-right: 24px;
}

.lef-section > .container > .row {
    margin-left: -10px;
    margin-right: -10px;
}

.lef-section > .container > .row > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

/* -------------------------------------------------------------- kaarten -- */

/* Het ontwerp gebruikt 14-16px radius en de zachte lijnkleur, niet de harde. */
.card {
    border-radius: 16px;
    border: 1px solid var(--ehbo-line-soft);
    height: 100%;
}

.card.bg-gray,
.card.bg-white {
    border-color: var(--ehbo-line-soft);
}

.card.bg-tertiary {
    border-color: transparent;
}

/*
 * `--transparent-content` is bedoeld voor de doorzichtige header (witte tekst
 * over de hero). Een doorzichtige kaart staat echter in een sectie en moet de
 * tekstkleur van die sectie erven — anders is de kop wit op wit.
 */
.card.bg-transparent,
.col-card.bg-transparent {
    color: inherit;
}

.card.bg-transparent .btn.bg-transparent,
.col-card.bg-transparent .btn.bg-transparent {
    color: inherit;
}

/*
 * Icoon-badge in een kaart. Het theme rendert de titel vóór het excerpt, terwijl
 * het ontwerp het icoon bovenaan zet. De kaartinhoud wordt daarom een flex-kolom
 * en het badge krijgt de eerste plek; `display: contents` laat de excerpt-wrapper
 * daarbij buiten beschouwing.
 */
.card .content-outer {
    display: flex;
    flex-direction: column;
}

.card .excerpt-holder {
    display: contents;
}

.card .excerpt-holder > p:has(.ehbo-badge-icon) {
    order: -1;
    margin: 0 0 14px;
}

/* Zonder knop hoort er onder de laatste alinea geen ruimte meer te staan. */
.card .excerpt-holder > p:last-child {
    margin-bottom: 0;
}


.ehbo-badge-icon {
    display: block;
    width: 38px;
    height: 38px;
}

/* Kaarten zonder afbeelding hoeven geen leeg beeldvak. */
.card figure.image-outer:has(.no-image) {
    display: none;
}

/* In een tekstblok (voordelen, verwante kaarten) staat het badge los boven de kop. */
.content-wrapper > .ehbo-badge-icon,
.content-wrapper > p > .ehbo-badge-icon {
    margin-bottom: 16px;
}

/* De kolomkaart (col met isCard) volgt dezelfde vorm. */
.col-card {
    border-radius: 16px;
    padding: 26px;
    height: 100%;
}

.card ul,
.col-card ul {
    list-style: none;
    padding-left: 0;
    margin: 18px 0 0;
}

.card ul li,
.col-card ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    /* Zelfde reden als bij de stappen: het theme zet li's op 12px. */
    font-size: 14px;
    line-height: 1.5;
}

.card ul li::before,
.col-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 800;
    color: var(--succes);
}

.col-card.bg-tertiary ul li::before {
    color: var(--primary);
}

/*
 * Compacte tegels: het ontwerp gebruikt in het overzichtsraster een kleinere
 * kaart dan elders — kleinere kop, kleinere tekst, minder binnenruimte.
 */
.ehbo-tegels .card {
    border-radius: 14px;
}

/* De binnenruimte van een kaart zit op .content-outer, niet op de kaart zelf. */
.ehbo-tegels .card .content-outer {
    padding: 24px;
}

.ehbo-tegels .card h4 {
    font-size: 16px;
}

.ehbo-tegels .card p {
    font-size: 14px;
    line-height: 1.55;
}

/* Tablet: two tiles per row; one tile across 720px left the cards mostly empty. */
@media (min-width: 576px) and (max-width: 991px) {
    .lef-section.ehbo-tegels > .container > .row > .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/*
 * Verwante pagina's: het ontwerp zet het icoon en de groepsnaam op één regel
 * boven de titel, en sluit af met een tekstlink in plaats van een knop.
 */
.ehbo-related h3 {
    font-size: 24px;
    line-height: 1.25;
    margin-bottom: 22px;
}

.ehbo-related .content-wrapper > p:has(> .ehbo-badge-icon) {
    float: left;
    margin: 0 12px 0 0;
}

.ehbo-related .content-wrapper > h6 {
    line-height: 38px;
    margin-bottom: 6px;
    letter-spacing: normal;
    color: var(--secondary);
}

/* De kicker heeft in het ontwerp dezelfde accentkleur als het icoon ernaast. */
.ehbo-related .content-wrapper > p:has(.ehbo-accent-primary) + h6 {
    color: var(--primary);
}

.ehbo-related .content-wrapper > p:has(.ehbo-accent-secondary) + h6 {
    color: var(--secondary);
}

.ehbo-related .content-wrapper > p:has(.ehbo-accent-tertiary) + h6 {
    color: var(--tertiary);
}

.ehbo-related .content-wrapper > h4 {
    clear: both;
}

.ehbo-related .content-wrapper > p:last-child a {
    font-size: 13px;
    font-weight: 800;
    color: var(--secondary);
    text-decoration: none;
}

/*
 * Ingekaderde band: een donker vlak met afgeronde hoeken binnen een lichte
 * sectie, met de tekst links en de knop rechts.
 */
.lef-section.ehbo-band > .container > .row {
    background: var(--tertiary);
    color: var(--tertiary-content);
    border-radius: 22px;
    padding: 46px;
    margin-left: 0;
    margin-right: 0;
}

.lef-section.ehbo-band h2 {
    color: var(--white);
    max-width: 560px;
}

@media only screen and (min-width: 992px) {
    .lef-section.ehbo-band h2 {
        font-size: 32px;
    }
}

.lef-section.ehbo-band p {
    font-size: 16px;
    color: #C6CAE6;
    max-width: 560px;
}

/* --------------------------------------------------------------- stappen -- */

/*
 * De stappenlijst uit het design: een genummerd blokje voor elke regel.
 * Als <ol> geschreven zodat de content in de editor gewone tekst blijft.
 */
.ehbo-steps ol {
    list-style: none;
    counter-reset: ehbo-step;
    padding-left: 0;
    margin: 0;
}

/*
 * Geen eigen tekstkleur: de stappenlijst staat zowel op een lichte sectie als
 * op de navy CTA. Een vaste kleur maakte de tekst daar onzichtbaar; laat de
 * sectie zijn eigen contrastkleur doorgeven.
 */
.ehbo-steps ol li {
    counter-increment: ehbo-step;
    position: relative;
    padding-left: 45px;
    margin-bottom: 18px;
    /* Het theme zet lijstitems op 12px; het ontwerp gebruikt hier 16px. */
    font-size: 16px;
    line-height: 1.6;
}

.ehbo-steps ol li::before {
    content: counter(ehbo-step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-content);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Op de donkere CTA staat dezelfde lijst een slag kleiner dan op de
   functiepagina's; dat is de enige plek waar het ontwerp afwijkt. */
.ehbo-steps.bg-tertiary ol li {
    font-size: 15px;
    line-height: 1.5;
    padding-left: 39px;
    margin-bottom: 14px;
    color: #E6E8F5;
}

.ehbo-steps.bg-tertiary ol li::before {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 13px;
    top: 0;
}

.ehbo-steps .col-card.bg-tertiary ol li {
    color: rgba(255, 255, 255, .82);
}

.lef-section:not(.bg-tertiary):not(.bg-primary) .ehbo-steps ol li,
.ehbo-steps.bg-gray ol li,
.ehbo-steps.bg-white ol li {
    color: var(--black);
}

/* -------------------------------------------------------------- mockups -- */

/*
 * De product-mockups staan als losse bestanden in /mockups en komen via een
 * iframe binnen. De hoogte wordt door _embed.js bijgesteld op basis van de
 * hoogte die de mockup zelf doorgeeft.
 */
iframe.ehbo-mock {
    width: 100%;
    border: 0;
    display: block;
    border-radius: var(--ehbo-radius-lg);
    background: transparent;
    transition: height .2s ease;
}

/* -------------------------------------------------------------- cijfers -- */

/*
 * Het ontwerp geeft elk cijfer een eigen kleur: primair, secundair, navy en
 * groen. Het theme rendert alle counters gelijk, dus de volgorde bepaalt hier
 * de kleur.
 */
.counter-outer .top-layer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.counter-outer .counter,
.counter-outer .counter-prefix,
.counter-outer .counter-surfix {
    font-family: var(--heading-font);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.counter-outer > div:nth-child(1) .top-layer { color: var(--primary); }
.counter-outer > div:nth-child(2) .top-layer { color: var(--secondary); }
.counter-outer > div:nth-child(3) .top-layer { color: var(--black); }
.counter-outer > div:nth-child(4) .top-layer { color: var(--succes); }

.counter-outer .counter-ondertitle {
    text-align: center;
    font-size: 15px;
    color: var(--ehbo-muted);
    margin-top: 6px;
}

/*
 * Below 992px the four counters stack; without a row gap each label ran straight
 * into the next number. Tablets get them 2 x 2.
 */
@media (max-width: 991px) {
    .counter-outer {
        row-gap: 36px;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .counter-outer > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* --------------------------------------------------- blok: beoordelingen -- */

.ehbo-reviews {
    position: relative;
    /* Eigen stapelcontext, zodat de waas onder de tekst maar boven de
       lopende banden ligt. */
    isolation: isolate;
}

.ehbo-reviews__rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ehbo-reviews {
    /* Breedte die het cijferblok links inneemt; de banden vervagen daarachter. */
    --ehbo-reviews-gutter: min(320px, 36%);
}

.ehbo-reviews__row {
    overflow: hidden;
    /* De banden lopen in het ontwerp van rand tot rand, niet alleen binnen de
       container. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /*
     * Links uitvloeien tot voorbij het cijferblok, rechts bij de rand. Zonder
     * die fade schuiven de kaarten hard achter het cijfer langs.
     */
    mask-image: linear-gradient(90deg, transparent, #000 var(--ehbo-reviews-gutter), #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ehbo-reviews-gutter), #000 94%, transparent);
}

.ehbo-reviews__track {
    display: flex;
    /*
     * The seam between the two copies of a row. The keyframe moves a copy by
     * -100% minus --ehbo-band-naad, so the track needs that same gap; without it
     * the last and first card touched (visible on phones, where a row is wider
     * than the screen) and the band jumped 18px every loop.
     */
    --ehbo-band-naad: 18px;
    gap: var(--ehbo-band-naad);
}

/*
 * Eén reeks in een lopende band, gedeeld door het beoordelingenblok en de
 * logoband. `min-width: 100%` zorgt dat een reeks altijd minstens de hele
 * bandbreedte vult. Op ultrawide waren drie reviewkaarten samen ~1305px terwijl
 * de band 3440px is; de band schoof dan een gat van ruim 2000px voorbij. Is de
 * reeks smaller dan de band, dan verdeelt `space-around` de inhoud over de
 * volle breedte in plaats van hem links op te stapelen.
 *
 * --ehbo-band-naad is de ruimte tussen twee reeksen; de keyframe telt hem mee,
 * anders springt de band bij elke ronde een gap-breedte terug. Dezelfde
 * variabele stuurt de gap, zodat die twee niet uit elkaar kunnen lopen.
 */
.ehbo-reviews__reeks,
.ehbo-marquee__rij {
    display: flex;
    flex: 0 0 auto;
    min-width: 100%;
    justify-content: space-around;
    gap: var(--ehbo-band-naad);
}

.ehbo-reviews__reeks {
    --ehbo-band-naad: 18px;
    animation: ehbo-marquee var(--ehbo-marquee-duration, 60s) linear infinite;
}

/*
 * Canonieke keyframe voor beide lopende banden (beoordelingen en logo's).
 *
 * De band schuift precies een reeks op: -100% van de reeks zelf, plus de naad
 * die als flex-gap tussen twee reeksen staat. Daardoor staat reeks 2 aan het
 * eind van de cyclus exact waar reeks 1 begon, ongeacht de schermbreedte.
 * --ehbo-band-naad is 0 als er geen gap tussen de reeksen zit.
 */
@keyframes ehbo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--ehbo-band-naad, 0px))); }
}

.ehbo-reviews__row:nth-child(even) .ehbo-reviews__reeks {
    animation-direction: reverse;
}

/* Alleen pauzeren bij toetsenbordfocus; met de muis loopt de band door. */
.ehbo-reviews__row:focus-within .ehbo-reviews__reeks {
    animation-play-state: paused;
}

/*
 * Het ontwerp gebruikt op meerdere plekken #F7F9FE als sectievlak; dat is net
 * lichter dan het gray-token. Secties die dat nodig hebben krijgen deze klasse.
 */
.lef-section.ehbo-surface {
    background: var(--ehbo-surface);
}

.lef-section.ehbo-surface .ehbo-reviews {
    --ehbo-reviews-bg: var(--ehbo-surface);
}

.ehbo-review {
    /* Het ontwerp laat elke kaart meegroeien met zijn citaat, met een bovengrens. */
    flex: 0 0 auto;
    max-width: 420px;
    margin: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--ehbo-line-soft);
    border-radius: 16px;
}

.ehbo-review__rating {
    color: var(--yellow);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/*
 * Het thema geeft elke blockquote een streep links
 * (`border-left: 3px solid rgba(0,0,0,.2); padding-left: 10px`) en zette hier
 * ook aanhalingstekens om het citaat. Op een reviewkaart hoort geen van beide:
 * de kaart is al de omlijsting.
 */
.ehbo-review blockquote {
    margin: 0;
    padding-left: 0;
    border-left: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--black);
}

.ehbo-review figcaption {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    font-size: 13px;
}

.ehbo-review figcaption {
    font-size: 12px;
    line-height: 1.35;
}

.ehbo-review figcaption strong {
    display: block;
    color: var(--black);
    font-weight: 700;
}

.ehbo-review figcaption small {
    display: block;
    font-size: inherit;
    color: var(--darkgray);
    font-weight: 500;
}

/* De initialen krijgen om en om de indigo- en de rode tint uit het ontwerp. */
.ehbo-review:nth-child(even) .ehbo-review__avatar {
    background: #FDECEB;
    color: var(--primary);
}

.ehbo-review__avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ECEBFB;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Het cijfer staat als vast blok over de banden heen. */
.ehbo-reviews__summary {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: min(400px, 40%);
    isolation: isolate;
    padding: 0 40px 0 0;
}

/*
 * Waas onder het cijferblok: de banden vervagen er al naartoe, maar zonder
 * deze laag schijnt de resterende kaarttekst door de eigen tekst heen.
 * De kleur volgt de sectie; overschrijf --ehbo-reviews-bg als het blok op een
 * andere achtergrond komt te staan.
 */
.ehbo-reviews__summary::before {
    content: "";
    position: absolute;
    inset: -30px auto -30px -40px;
    /* Dekkend tot voorbij de tekst, daarna 140px uitvloeien. */
    width: calc(100% + 180px);
    z-index: -1;
    background: linear-gradient(90deg,
        var(--ehbo-reviews-bg, var(--quaternary)) 0,
        var(--ehbo-reviews-bg, var(--quaternary)) calc(100% - 140px),
        transparent 100%);
}

/*
 * Variant: het cijferblok naast de banden, met het grote getal uit het
 * ontwerp. Alles wat het met de heroregel deelt staat in .review-information.
 */
.ehbo-reviews__summary .review-information {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 10px;
}

.ehbo-reviews__summary .rating-value {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--darkgray);
}

.ehbo-reviews__summary [itemprop="ratingValue"] {
    font-family: var(--heading-font);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--black);
}

.ehbo-reviews__summary .avarage-stars {
    font-size: 17px;
    margin: 8px 0 10px;
}

.ehbo-reviews__summary p {
    max-width: 280px;
}

.ehbo-reviews__summary a {
    font-size: 15px;
    font-weight: 700;
    color: var(--secondary);
}

/* ----------------------------------------------------- blok: lopende band -- */

/*
 * De band loopt van rand tot rand, dus breekt hij bewust uit de container.
 * De rij staat er twee keer in; de animatie verschuift precies de helft,
 * waardoor de herhaling naadloos is.
 */
.ehbo-marquee__kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--darkgray);
    text-align: center;
    margin: 0 0 22px;
}

.ehbo-marquee__venster {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ehbo-marquee__spoor {
    display: flex;
}

/*
 * De logoband. De geometrie deelt hij met .ehbo-reviews__reeks hierboven; hier
 * staat alleen wat een <ul> extra nodig heeft. De logo's hebben hun eigen
 * padding, dus de naad tussen twee reeksen is 0.
 *
 * Met de muis loopt de band bewust door; er is geen hover-pauze.
 */
.ehbo-marquee__rij {
    --ehbo-band-naad: 0px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: ehbo-marquee var(--ehbo-marquee-tijd, 38s) linear infinite;
}

.ehbo-marquee__rij li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 34px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #8E96B4;
    white-space: nowrap;
}

.ehbo-marquee__rij li::before {
    content: none;
}

/*
 * De logo's zelf. Ze worden op hoogte gelijkgetrokken en niet uitgerekt; de
 * breedte volgt de verhouding van het bestand.
 */
.ehbo-marquee__logo {
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    flex-shrink: 0;
}



/* De keyframe `ehbo-marquee` staat bij het beoordelingenblok hierboven; hij
   stond hier een tweede keer en overschreef die stilzwijgend. */

/* ------------------------------------------------ blok: prijscalculator -- */

.ehbo-calc {
    background: #fff;
    border: 1px solid var(--ehbo-line);
    border-radius: var(--ehbo-radius-lg);
    padding: 34px;
}

.ehbo-calc__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}

/* Het ontwerp houdt de labels licht; het cijfer eronder doet het werk. */
.ehbo-calc__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}

.ehbo-calc__totals {
    text-align: right;
}

.ehbo-calc__users,
.ehbo-calc__total {
    font-family: var(--heading-font);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--black);
    margin: 4px 0 0;
}

.ehbo-calc__total {
    color: var(--primary);
}

.ehbo-calc__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 20px 0 0;
    border-radius: 3px;
    /* Gevulde helft volgt de waarde; --ehbo-fill wordt door het script gezet. */
    background: linear-gradient(90deg, var(--primary) var(--ehbo-fill, 0%), var(--gray) var(--ehbo-fill, 0%));
    cursor: pointer;
}

.ehbo-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(20, 18, 74, .3);
}

.ehbo-calc__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--primary);
}

.ehbo-calc__range:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 4px;
}

.ehbo-calc__scale {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin: 8px 0 0;
}

/* In de navy kaart staan de knoppen onder elkaar op volle breedte. */
.col-card.bg-tertiary .buttons-holder {
    flex-direction: column;
    align-items: stretch;
}

.col-card.bg-tertiary .buttons-holder .btn {
    width: 100%;
}

.ehbo-calc__addon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ehbo-line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ehbo-muted);
}

.ehbo-calc__addon input {
    width: 18px;
    height: 18px;
    accent-color: var(--secondary);
    flex-shrink: 0;
}

.ehbo-calc__addon strong {
    color: var(--black);
}

.ehbo-calc__breakdown {
    font-size: 13px;
    margin-top: 14px;
}

/* Wie beweging liever niet ziet, krijgt stilstaande banden. */
@media (prefers-reduced-motion: reduce) {
    .ehbo-reviews__reeks,
    .ehbo-marquee__rij {
        animation: none;
    }
}


/* ------------------------------------------------------------ mega menu -- */

/*
 * Het parent-thema levert de structuur (klasse `mega-menu`, elke kolom is een
 * item op het eerste subniveau). De vormgeving staat hier: het paneel, de
 * kolomkoppen, de links met icoon en ondertitel, en de afsluitende kaart.
 */
body .main-nav-menu > li.mega-menu {
    position: static;
}

body .main-nav-menu > li.mega-menu > a::after {
    content: "▾";
    font-size: 10px;
    color: var(--darkgray);
    margin-left: 7px;
    /* Het theme kantelt zijn eigen pijltje 90°; dat moet hier recht staan. */
    transform: none;
    position: static;
    line-height: 1;
}

/*
 * Het paneel hangt onder de zwevende headerkaart en is even breed. De kolom
 * waarin het staat is de positioneringscontext, dus links en rechts op 0; de
 * binnenruimte houdt de inhoud op dezelfde 1252px als de rest van de site.
 */
body .main-nav-menu li.mega-menu > .mega-menu-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 330px;
    gap: 40px;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    width: auto;
    max-width: none;
    padding: 38px 76px 34px;
    background: #fff;
    border: 1px solid var(--ehbo-line-soft);
    border-radius: 20px;
    box-shadow: 0 40px 60px -30px rgba(20, 18, 74, .28);
}

/*
 * Tussen het menu-item en het paneel zit lucht. Zonder deze onzichtbare bruggen
 * verliest de muis daar de hover en klapt het paneel dicht voordat je er bent:
 * één brug boven het paneel, één onder de menuknop.
 */
body .main-nav-menu li.mega-menu > .mega-menu-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

body .main-nav-menu > li.mega-menu > a {
    position: relative;
}

body .main-nav-menu > li.mega-menu > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
}

/*
 * Het Website-paneel heeft drie kolommen in plaats van vier, maar is verder net
 * zo breed als het Functies-paneel: het erft links/rechts en de padding van de
 * regel hierboven. (Het stond eerder op max-width 1300px, waardoor het smaller
 * was dan de headerkaart.)
 */
body .main-nav-menu li.ehbo-mega-website > .mega-menu-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px;
}

/*
 * De tweede kolom van dat paneel heeft in het ontwerp geen zichtbare kop. De
 * selector is zo lang omdat het theme de kolomlinks met vier klassen aanspreekt.
 */
body .main-nav-menu li.mega-menu > .sub-menu .sub-menu-column > li.ehbo-mega-kop--verborgen > a {
    display: none;
}

/* Het theme zet submenu's op `nowrap`; in het paneel moet tekst gewoon lopen. */
body .main-nav-menu li.mega-menu > .sub-menu,
body .main-nav-menu li.mega-menu > .sub-menu .sub-menu {
    white-space: normal;
}

body .mega-menu-wrapper .sub-menu-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Kolomkop: geen link-uiterlijk, wel de kicker-stijl. */
body .mega-menu-wrapper .ehbo-mega-kop > a {
    /* Een inline <a> negeert margin-bottom, vandaar block. */
    display: block;
    margin-bottom: 25px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--darkgray);
    padding: 0 !important;
    pointer-events: none;
}

/* Het theme geeft `.sub-menu.wrap-text` een vaste breedte van 250px en een
   max-width; in een kolom van het paneel moet de lijst juist meeschalen. */
body .main-nav-menu li .mega-menu-wrapper .sub-menu-column .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: auto;
    max-width: none;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
}

/* Het theme zet een ›-pijltje op elk item met kinderen; in het paneel niet. */
body .main-nav-menu .mega-menu-wrapper a::after {
    content: none !important;
}

body .main-nav-menu li.mega-menu .mega-menu-wrapper .sub-menu-column .sub-menu li > a {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 9px !important;
    margin: -9px;
    border-radius: 12px;
    color: var(--black);
}

body .main-nav-menu li.mega-menu .mega-menu-wrapper .sub-menu-column .sub-menu li > a:hover {
    background: var(--gray);
}

/*
 * Icoon vóór de link. Dit was een achtergrond-SVG per CSS-klasse
 * (.ehbo-icon-*), met voor elk icoon een eigen regel hier en een los bestand in
 * images/badges/. Nu is het een icomoon-glyph die per menu-item in WordPress
 * gekozen wordt, zodat er voor een nieuw item niets meer in de CSS hoeft.
 */
/*
 * Het icoonvlak. De achtergrond is een lichte tint van de icoonkleur zelf
 * (color-mix op currentColor), zoals in het ontwerp: rood icoon op roze vlak,
 * indigo op lila. Zo hoeft er per kleur maar één regel te zijn in plaats van
 * een vaste achtergrond per variant. De platte var(--gray) ervoor is de
 * terugval voor browsers zonder color-mix.
 */
.ehbo-mega-icoon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--secondary);
    background: var(--gray);
    background: color-mix(in srgb, currentColor 12%, #fff);
    font-size: 15px;
    /* .icon van het thema zet een rechtermarge uit deze variabele; hier bepaalt
       de flex-gap de ruimte, dus die op 0 zetten in plaats van de marge
       overschrijven. */
    --icon-text-spacing: 0;
}

/* Accentkleuren, te kiezen bij het menu-item zelf. */
.ehbo-mega-icoon--primary   { color: var(--primary); }
.ehbo-mega-icoon--secondary { color: var(--secondary); }
.ehbo-mega-icoon--tertiary  { color: var(--tertiary); }
.ehbo-mega-icoon--yellow    { color: var(--yellow); }

/* Titel en ondertitel als één stapel naast het icoon. */
.ehbo-mega-tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ehbo-mega-titel {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
}

.ehbo-mega-sub {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--darkgray);
    font-weight: 400;
}

/* "Alle functies bekijken" en de plus-lijst van het Website-paneel. */
body .mega-menu-wrapper .ehbo-mega-meer > a {
    font-size: 13px;
    font-weight: 700;
    color: var(--secondary);
}

/* De plus-lijst: geen icoonvlak maar een rood plusteken vóór de regel. */
body .main-nav-menu li.mega-menu > .sub-menu .sub-menu-column .sub-menu li.ehbo-mega-plus > a::before {
    content: "+";
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--primary);
    background: none;
}

body .main-nav-menu li.mega-menu > .sub-menu .sub-menu-column .sub-menu li.ehbo-mega-plus > a {
    gap: 9px;
    font-size: 14px;
    line-height: 1.5;
    padding: 0 !important;
    margin: 0;
}

body .mega-menu-wrapper .ehbo-mega-intro > a {
    padding: 0 !important;
    margin: 0;
    flex-direction: column;
    gap: 8px;
}

body .mega-menu-wrapper .ehbo-mega-intro .ehbo-mega-titel {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

body .mega-menu-wrapper .ehbo-mega-intro .ehbo-mega-sub {
    font-size: 14px;
    line-height: 1.6;
}

/* De afsluitende kaart per paneel. */
.ehbo-mega-kaart {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    padding: 28px;
}

.ehbo-mega-kaart--demo {
    background: var(--tertiary);
    color: #fff;
}

.ehbo-mega-kaart--prijs {
    background: var(--gray);
    border: 1px solid var(--ehbo-line);
    padding: 26px;
}

.ehbo-mega-kaart__kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8E93C6;
}

.ehbo-mega-kaart__kop {
    font-family: var(--heading-font);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 12px;
    color: #fff;
}

.ehbo-mega-kaart--demo .ehbo-mega-kaart__tekst {
    font-size: 14px;
    line-height: 1.55;
    color: #C6CAE6;
    margin-top: 10px;
}

.ehbo-mega-kaart--prijs .ehbo-mega-kaart__tekst {
    font-size: 13px;
    color: var(--darkgray);
    margin-top: 6px;
}

.ehbo-mega-kaart__acties {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ehbo-mega-kaart__acties .btn {
    width: 100%;
}

.ehbo-mega-kaart__link {
    font-size: 12px;
    font-weight: 600;
    color: #C6CAE6;
    text-align: center;
}

.ehbo-mega-kaart--prijs .ehbo-mega-kaart__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary);
    text-align: left;
    margin-top: 18px;
    display: inline-block;
}

.ehbo-mega-prijs {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ehbo-mega-prijs strong {
    font-family: var(--heading-font);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--black);
}

.ehbo-mega-prijs span {
    font-size: 14px;
    font-weight: 600;
    color: var(--darkgray);
}

/*
 * De iconen per menu-item stonden hier als losse SVG-regels. Ze worden nu bij
 * het menu-item zelf gekozen uit de icomoon-set; zie functions/mega-menu.php.
 */

@media (max-width: 991px) {
    body .main-nav-menu li.mega-menu > .mega-menu-wrapper {
        display: block;
        padding: 20px;
    }
}

/* ---------------------------------------------------------------- persoon -- */

/*
 * Foto met naam en een regel eronder. Stond eerder als losse HTML met een eigen
 * klasse in het tekstveld; dat is nu een eigen blok.
 */
.ehbo-persoon {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding-top: 26px;
    /* Scheidingslijn in de kleur van de sectie, niet in een vaste tint. */
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.ehbo-persoon__foto,
.ehbo-persoon__initialen {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ehbo-persoon__foto {
    object-fit: cover;
}

/* Zonder foto de initialen in een rondje, net als bij de beoordelingskaarten. */
.ehbo-persoon__initialen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, currentColor 16%, transparent);
    font-size: 16px;
    font-weight: 800;
}

.ehbo-persoon__tekst {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/*
 * Geen vaste tekstkleur: dit blok staat zowel op een witte als op de donkere
 * demo-sectie. Een vastgezette kleur maakt het op een van de twee onleesbaar,
 * dus de kleur van de sectie cascadeert door.
 */
.ehbo-persoon__naam {
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.ehbo-persoon__notitie {
    font-size: 14px;
    opacity: .75;
}

/* ------------------------------------------------------------ mobiel menu -- */

/*
 * Het mobiele menu is een eigen menulocatie ('mobile') met een eigen, kortere
 * menustructuur; het mega menu zelf staat op mobiel op display:none. Zonder de
 * regels hieronder was het een kale opsomming links. De items krijgen dezelfde
 * kaartvorm, hetzelfde icoonvlak en dezelfde ondertitel als in het mega menu.
 *
 * De demo- en prijskaart komen bewust niet mee: die zijn breed en zouden de
 * rest van het menu ver naar beneden duwen.
 */
.mobile-navigation .menu-mobile-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-navigation .menu-mobile-container li {
    margin: 0;
}

.mobile-navigation .menu-mobile-container li > a {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--black);
    text-decoration: none;
}

.mobile-navigation .menu-mobile-container li > a:hover,
.mobile-navigation .menu-mobile-container li > a:focus-visible {
    background: var(--gray);
}

/* Het theme zet een ›-pijltje achter elk item met kinderen; in de kaartvorm
   staat dat scheef naast het icoon. */
.mobile-navigation .menu-mobile-container li > a::after {
    content: none !important;
}

/* Subniveau iets laten inspringen, zonder de kaartvorm te verliezen. */
.mobile-navigation .menu-mobile-container .sub-menu {
    margin: 4px 0 4px 16px;
    padding-left: 12px;
    border-left: 1px solid var(--ehbo-line-soft);
    /* Het theme verbergt submenu's tot hover; mobiel horen ze gewoon open. */
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    width: auto;
    max-width: none;
    min-width: 0;
}


/* ------------------------------------------------------- veelgestelde vragen -- */

/*
 * Het ontwerp toont elke vraag als losse kaart met een lijntje eromheen en een
 * rode plus rechts. Het theme rendert een doorlopende lijst, dus de kaartvorm
 * komt hier.
 */
.ehbo-faq .accordions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ehbo-faq .accordion {
    border: 1px solid var(--ehbo-line-soft);
    border-radius: 13px;
    overflow: hidden;
    /* Wit, ook als het blok op een getinte sectie staat. */
    background: var(--white);
    margin: 0;
}

/*
 * Het ontwerp houdt het plusteken ook staan als de vraag openstaat; het theme
 * wisselt het normaal om naar een kruisje.
 */
.ehbo-faq .accordion.opened .accordion-title .accordion-toggle .icon-plus {
    display: inline-block;
}

.ehbo-faq .accordion.opened .accordion-title .accordion-toggle .icon-x {
    display: none;
}

/* Het theme houdt hier 24px rondom aan; het ontwerp 20 boven en 22 opzij. */
.ehbo-faq .accordions .accordion .accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
}

.ehbo-faq .accordion-toggle {
    display: flex;
    align-items: center;
    line-height: 1;
}

.ehbo-faq .accordion-title .title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--black);
}

.ehbo-faq .accordion-title:hover {
    background: #FBFCFF;
}

.ehbo-faq .accordion-toggle .icon {
    color: var(--primary);
    font-size: 14px;
}

.ehbo-faq .accordions .accordion .accordion-content {
    padding: 0;
}

.ehbo-faq .accordion-content .content-wrapper {
    padding: 0 22px 20px;
}

.ehbo-faq .accordion-content p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ehbo-muted);
}

/* ---------------------------------------------------------- formulieren -- */

/*
 * Gravity Forms levert hier alleen markup: de eigen stylesheet van de plugin
 * staat uit en het theme dekt de veldenlijst niet af. Zonder deze regels staan
 * de velden als opsomming onder elkaar, met bolletjes ervoor.
 */
.gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--form-elements-gap-y) var(--form-elements-gap-x);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gform_wrapper .gfield {
    grid-column: span 12;
    margin: 0;
}

.gform_wrapper .gfield::before,
.gform_wrapper .gfield::marker {
    content: none;
}

/*
 * Twee velden naast elkaar: de oude klassen, en de breedte "Half" die Gravity Forms zelf zet
 * (gfield--width-half, bijvoorbeeld voornaam/achternaam op "Gratis proberen", 2026-10-06). Op een
 * smal scherm weer onder elkaar.
 */
.gform_wrapper .gfield.gf_left_half,
.gform_wrapper .gfield.gf_right_half,
.gform_wrapper .gfield.gfield--width-half {
    grid-column: span 6;
}

@media (max-width: 575px) {
    .gform_wrapper .gfield.gf_left_half,
    .gform_wrapper .gfield.gf_right_half,
    .gform_wrapper .gfield.gfield--width-half {
        grid-column: span 12;
    }
}

.gform_wrapper .gfield_label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 7px;
}

/*
 * Het ontwerp zet geen sterretje of "(Vereist)" bij verplichte velden. De
 * aanduiding blijft wel in de pagina staan, alleen onzichtbaar, zodat een
 * schermlezer hem nog voorleest.
 */
.gform_wrapper .gfield_required {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
    width: 100%;
    border: 1px solid var(--ehbo-line);
    border-radius: var(--form-elements-border-radius);
    padding: var(--form-elements-padding-y) var(--form-elements-padding-x);
    font-family: inherit;
    font-size: 14px;
    color: var(--black);
    background: var(--white);
}

/* Het theme geeft `textarea.medium` binnen een form een vaste hoogte van
   200px; het ontwerp houdt 98px aan. */
.gform_wrapper form textarea,
.gform_wrapper textarea.medium,
.gform_wrapper textarea.large {
    height: 98px;
    resize: vertical;
}

.gform_wrapper ::placeholder {
    color: var(--darkgray);
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: var(--secondary);
    outline: 0;
}

.gform_wrapper .gform_footer {
    margin: 18px 0 0;
    padding: 0;
}

.gform_wrapper .gform_footer input[type="submit"] {
    width: auto;
    font-size: 15px;
    font-weight: 800;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_required_legend {
    font-size: 13px;
    color: var(--darkgray);
}

.gform_wrapper .gform_required_legend {
    display: none;
}

/*
 * Een uitleg onder het label in plaats van onder het veld (eigenaar 2026-10-06, "Gratis
 * proberen"): direct onder het label, met dezelfde ruimte tot het veld als het label zelf.
 */
.gform_wrapper .field_description_above .gfield_description:not(.validation_message) {
    margin: -3px 0 10px;
    padding: 0;
    line-height: 1.5;
}

/*
 * Keuzerondjes en vinkjes zijn in het ontwerp chips: het bolletje zelf is weg,
 * het label is de knop. Het invoerveld blijft in de DOM staan zodat toetsenbord
 * en schermlezer gewoon werken.
 */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gform_wrapper .gchoice {
    position: relative;
    list-style: none;
    margin: 0;
}

.gform_wrapper .gchoice::marker {
    content: none;
}

.gform_wrapper .gfield_radio input,
.gform_wrapper .gfield_checkbox input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
    display: block;
    border: 1px solid var(--ehbo-line);
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ehbo-muted);
    cursor: pointer;
}

.gform_wrapper .gfield_radio input:checked + label,
.gform_wrapper .gfield_checkbox input:checked + label {
    background: #ECEBFB;
    border-color: var(--secondary);
    color: var(--secondary);
}

.gform_wrapper .gfield_radio input:focus-visible + label,
.gform_wrapper .gfield_checkbox input:focus-visible + label {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/* De datumkiezer van Gravity Forms zet er een los icoontje naast. */
/*
 * De datumkiezer.
 *
 * Gravity Forms zet naast het invoerveld een knop met een dashicons-glyph. Die
 * lettertypeset is een beheerderstylesheet en wordt op de site niet ingeladen,
 * dus het icoon bleef leeg. Hier komt de kalender uit de icomoon-set die de
 * site toch al laadt.
 *
 * (Hiervoor stond hier een regel die `.ui-datepicker-trigger` verborg; dat was
 * de oude markup van Gravity Forms en die bestaat niet meer.)
 */
.gform_wrapper .ginput_container_date {
    position: relative;
}

/* Ruimte voor de knop, zodat de datum er niet onder doorloopt. */
.gform_wrapper .ginput_container_date input.datepicker {
    padding-right: 44px;
}

.gform_wrapper .gform-datepicker-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ehbo-muted);
    cursor: pointer;
}

.gform_wrapper .gform-datepicker-toggle:hover,
.gform_wrapper .gform-datepicker-toggle[aria-expanded="true"] {
    background: var(--gray);
    color: var(--secondary);
}

.gform_wrapper .gform-datepicker-toggle:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

/*
 * De glyph zelf. `.dashicons` zet een eigen lettertype en een vaste maat; die
 * worden hier vervangen door de icomoon-kalender.
 */
.gform_wrapper .gform-datepicker-toggle-icon {
    width: auto;
    height: auto;
    font-size: 17px;
    line-height: 1;
}

.gform_wrapper .gform-datepicker-toggle-icon::before {
    font-family: "icomoon" !important;
    font-weight: normal;
    font-style: normal;
    content: "\ee43";
}

/*
 * Het kalenderpaneel van Gravity Forms.
 *
 * Het thema zet alle stylesheets van Gravity Forms uit (`gform_disable_css` in
 * leflite/functions/base/theme.php), dus dit paneel komt volledig kaal binnen.
 * GF's eigen opmaak los overnemen kan niet: die hangt aan het variabelensysteem
 * van het theme-framework en zit verweven met honderden kilobytes aan andere
 * regels. Vandaar dat het hier staat, in de tokens van deze site.
 *
 * Let goed op de selectors — een eerdere versie zat er op de meeste naast en
 * kwam daardoor maar half aan:
 *   dagcel  = `td.day span`           (niet `td span`)
 *   vorige  = `.nav.btn.month.prev`   (niet `.nav.prev`; er is ook een .year)
 *   vandaag = `td[aria-current=date]` (niet `.dayToday`)
 *   keuze   = `td.dayMarked`          (niet `.selected`)
 *
 * De pijltjes komen uit icomoon: GF's eigen icoonfont hoort bij die uitgezette
 * stylesheets en zou leeg blijven.
 */
.gform-datepicker-calendar {
    background: var(--white);
    border: 1px solid var(--ehbo-line);
    border-radius: var(--ehbo-radius-lg);
    box-shadow: var(--ehbo-shadow-card);
    padding: 14px;
    color: var(--ehbo-muted);
    font-size: 13px;
    z-index: 100;
}

/* ---------------------------------------------------------------- kop -- */

.gform-datepicker-calendar .monthSelector,
.gform-datepicker-calendar .yearSelector {
    position: relative;
}

/* De maand- en jaarknop tonen tekst; die mag niet verdwijnen. */
.gform-datepicker-calendar .nav.btn.month.current,
.gform-datepicker-calendar .nav.btn.year.current {
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    cursor: pointer;
}

.gform-datepicker-calendar .nav.btn.month.prev,
.gform-datepicker-calendar .nav.btn.month.next,
.gform-datepicker-calendar .nav.btn.year.prev,
.gform-datepicker-calendar .nav.btn.year.next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ehbo-muted);
    cursor: pointer;
    /* Het label in de knop is voor schermlezers; het pijltje komt uit ::before. */
    font-size: 0;
}

.gform-datepicker-calendar .nav.btn.month.prev:hover,
.gform-datepicker-calendar .nav.btn.month.next:hover,
.gform-datepicker-calendar .nav.btn.year.prev:hover,
.gform-datepicker-calendar .nav.btn.year.next:hover,
.gform-datepicker-calendar .nav.btn.month.prev:focus-visible,
.gform-datepicker-calendar .nav.btn.month.next:focus-visible,
.gform-datepicker-calendar .nav.btn.year.prev:focus-visible,
.gform-datepicker-calendar .nav.btn.year.next:focus-visible {
    background: var(--gray);
    color: var(--secondary);
}

.gform-datepicker-calendar .nav.btn.month.prev::before,
.gform-datepicker-calendar .nav.btn.month.next::before,
.gform-datepicker-calendar .nav.btn.year.prev::before,
.gform-datepicker-calendar .nav.btn.year.next::before {
    font-family: "icomoon" !important;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
}

.gform-datepicker-calendar .nav.btn.month.prev::before,
.gform-datepicker-calendar .nav.btn.year.prev::before {
    content: "\edff";
}

.gform-datepicker-calendar .nav.btn.month.next::before,
.gform-datepicker-calendar .nav.btn.year.next::before {
    content: "\ee00";
}

.gform-datepicker-calendar select {
    border: 1px solid var(--ehbo-line);
    border-radius: 9px;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
    cursor: pointer;
}

/* --------------------------------------------------------------- dagen -- */

.gform-datepicker-calendar table.calendar {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 6px 0 0;
}

.gform-datepicker-calendar table.calendar th,
.gform-datepicker-calendar table.calendar td {
    padding: 0;
    border: 0;
}

.gform-datepicker-calendar table.calendar th {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ehbo-muted);
    padding-bottom: 4px;
}

/* De dagen zijn spans, geen links; zonder deze regel is er geen klikvlak. */
.gform-datepicker-calendar table.calendar td.day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--black);
    cursor: pointer;
}

.gform-datepicker-calendar table.calendar td.day:not(.dayMarked):not(.disabled) span:hover {
    background: var(--gray);
    color: var(--secondary);
}

.gform-datepicker-calendar table.calendar td.day span:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 1px;
}

/* Vandaag: alleen een rand, zodat de keuze het sterkste signaal blijft. */
.gform-datepicker-calendar table.calendar td[aria-current="date"] span {
    border-color: var(--ehbo-line);
    font-weight: 800;
}

/* De gekozen dag. */
.gform-datepicker-calendar table.calendar td.dayMarked span {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

/* Dagen vóór vandaag zijn geblokkeerd (zie assets/datum.js). */
.gform-datepicker-calendar table.calendar td.disabled span {
    background: none;
    border-color: transparent;
    color: var(--ehbo-muted);
    opacity: .4;
    cursor: default;
}

.gform-datepicker-calendar .monthMessage p {
    margin: 12px 0 0;
    font-size: 12px;
}

/* Op het aanvraagformulier loopt de knop over de volle breedte. */
.ehbo-form--breed .gform_footer input[type="submit"] {
    width: 100%;
}

/* ---------------------------------------------------------------- footer -- */

/*
 * Het ontwerp zet de footer op vier kolommen (merk breder dan de rest), met een
 * afsluitende regel onder een lijntje. Het theme levert de widgetgebieden; de
 * verhoudingen en de typografie staan hier.
 */
body footer.footer,
body footer[class*="bg-"] {
    background: var(--quaternary);
    border-top: 1px solid var(--ehbo-line-soft);
}

body footer .footer-inner {
    padding: 96px 0 0;
}

body footer .footer-inner > .container > .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 56px;
    margin: 0;
}

body footer .footer-inner > .container > .row > [class*="col-"] {
    flex: 1 1 0;
    max-width: none;
    padding: 0;
}

/* De merkkolom is in het ontwerp anderhalve kolom breed. */
body footer .footer-inner > .container > .row > [class*="col-"]:first-child {
    flex-grow: 1.4;
}

/*
 * Het logo stond op een vaste hoogte van 64px, maar de ingevoegde variant is
 * maar 49px hoog. Die werd dus opgerekt en oogde wazig en te breed. Nu houdt
 * hij zijn eigen verhouding, met een bovengrens.
 */
body footer .widget img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 40px;
}

body footer .widget p {
    font-size: 15px;
    line-height: 1.7;
    max-width: 340px;
}

/*
 * Ruimte onder een widgetkop. Staat los van de typografie hieronder, want die
 * geldt alleen in de footer: elders is h6 juist de kicker (11px, uppercase).
 *
 * De tweede selector is er niet voor de sier. Het thema zet
 * `.content-wrapper > :last-child { margin-bottom: 0 }` (specificiteit 0,2,0),
 * en in de footer is elke kolomkop een eigen widget met alleen die kop erin —
 * dus altijd het laatste kind. Die reset won van een selector met één klasse,
 * waardoor "Functies" en "Organisatie" strak tegen hun menu aan plakten. Deze
 * variant heeft twee klassen en wint wel.
 */
body .widget h6,
body .widget .content-wrapper > h6 {
    margin-bottom: 20px;
}

/* De kolomkop is in de footer een gewone vette regel, niet die kicker. */
body footer .widget h6 {
    color: var(--black);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

body footer .widget-menu ul {
    display: flex;
    flex-direction: column;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body footer .widget-menu li::before {
    content: none;
}

body footer .widget-menu a {
    display: block;
    font-size: 15px;
    line-height: 1.25;
}

body footer a {
    color: var(--ehbo-muted);
    text-decoration: none;
}

body footer a:hover {
    color: var(--primary);
}

/* De afsluitende regel: copyright links, de juridische links rechts. */
body .socket {
    background: var(--quaternary);
    padding: 0;
}

body .socket > .container {
    border-top: 1px solid var(--ehbo-line);
    padding-top: 28px;
    padding-bottom: 28px;
    margin-top: 70px;
}

body .socket .socket-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 14px;
}

body .socket .socket-half:first-child {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

/* Het theme rendert het socket-menu als opsomming; hier als rij links. */
.socket ul {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.socket li::before {
    content: none;
}

/*
 * Footer below 992px. The row is nowrap (four columns side by side), which on
 * phones pushed the Organisatie and Contact columns off the right edge of the
 * screen (hidden by the body's overflow) and squeezed the brand column to a few
 * words per line. Now: brand on its own row, then the menus (three across on a
 * tablet, two on a phone with Contact underneath). Menu links get a 44px tap
 * height instead of the 13px gap.
 */
@media only screen and (max-width: 991px) {
    body footer .footer-inner {
        padding-top: 64px;
    }

    body footer .footer-inner > .container > .row {
        flex-wrap: wrap;
        gap: 40px 32px;
    }

    body footer .footer-inner > .container > .row > [class*="col-"] {
        min-width: 0;
    }

    body footer .footer-inner > .container > .row > [class*="col-"]:first-child {
        flex-basis: 100%;
    }

    body footer .widget-menu ul {
        gap: 0;
    }

    body footer .widget-menu a {
        padding: 11px 0;
    }

    /* The link padding already adds space under the column heading. */
    body footer .widget h6 {
        margin-bottom: 9px;
    }

    body .socket > .container {
        margin-top: 48px;
    }
}

@media only screen and (max-width: 575px) {
    body footer .footer-inner > .container > .row > [class*="col-"] {
        flex: 1 1 calc(50% - 16px);
    }

    /* Copyright on its own line, the legal links below it as tappable links. */
    body .socket .socket-half:first-child {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .socket ul {
        gap: 0 22px;
    }

    .socket a {
        display: inline-block;
        padding: 11px 0;
    }
}

/* ---------------------------------------------------------------- mobiel -- */

/*
 * Het ontwerp laat het mobiele menu als kaart onder de header uitklappen, niet
 * als volledig scherm dat vanaf links inschuift. Het theme levert de logica
 * (body.menu-open); de vorm staat hier.
 */
@media only screen and (max-width: 991px) {
    /*
     * Het paneel hing op --fake-menu-height (120px) + 10. Dat is de hoogte die
     * het thema voor de desktopheader aanhoudt, niet die van de mobiele kaart.
     * Voor een uitgelogde bezoeker eindigde de kaart rond 68–80px en zweefde het
     * paneel er 50 tot 60px onder. Ingelogd viel het mee, omdat de beheerbalk de
     * kaart naar beneden duwt maar het paneel niet — vandaar dat het er in de
     * beheeromgeving goed uitzag.
     *
     * De 54px is de gemeten afstand van de bovenkant van het venster tot net
     * onder de kaart, minus de logohoogte: header-offset, padding, randen en
     * de bootstrap-goot van de row eromheen. Uitgerekend komt dat op minder uit,
     * dus dit is opgemeten in plaats van afgeleid; het levert 8 tot 10px lucht
     * onder de kaart over het hele bereik. Boven 768px geldt de variabele niet
     * meer en pakt de terugval de 44px van het ontwerp.
     */
    body nav.mobile-navigation {
        position: fixed;
        top: calc(54px + var(--ehbo-mobiel-logo, 44px));
        left: 18px;
        right: 18px;
        width: auto;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--white);
        border: 1px solid var(--ehbo-line-soft);
        border-radius: 18px;
        box-shadow: var(--ehbo-shadow-header);
        padding: 14px 22px 22px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }

    /* De beheerbalk duwt de header omlaag maar het paneel niet: dat staat fixed
       ten opzichte van het venster. Voor ingelogde gebruikers dus meeschuiven,
       anders klapt het paneel over de header heen. WordPress zet de balk op
       46px tot 782px breed en daarboven op 32px. */
    body.admin-bar nav.mobile-navigation {
        top: calc(92px + var(--ehbo-mobiel-logo, 44px));
    }

    body.menu-open nav.mobile-navigation {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    body nav.mobile-navigation .menu-mobile-container {
        height: auto;
        padding: 0;
    }

    /* Het theme zet het menu-item op flex; de sublijst hoort eronder, niet ernaast. */
    body nav.mobile-navigation .menu > li.menu-item {
        display: block;
    }

    /*
     * display:block stond hier om de sublijst ónder het item te krijgen, maar
     * dat hoort op de li (die regel staat hierboven) en niet op de link. Op de
     * link zette het de <i> en de tekst onder elkaar, waardoor elk item op
     * hoofdniveau twee regels hoog werd met het icoon los erboven. De subitems
     * bleven wel goed staan, want die worden door deze selector niet geraakt.
     */
    body nav.mobile-navigation .menu > li > a {
        display: flex;
        align-items: center;
        gap: 13px;
        font-size: 17px;
        font-weight: 700;
        color: var(--black);
        padding: 14px 0;
        border-bottom: 1px solid var(--gray);
    }

    body nav.mobile-navigation .menu .sub-menu a {
        font-size: 15px;
        font-weight: 500;
        color: var(--ehbo-muted);
        padding: 12px 0 12px 14px;
        border-bottom: 1px solid var(--gray);
    }

    body nav.mobile-navigation .menu li.menu-item-has-button > a {
        border-bottom: 0;
        padding-top: 18px;
    }

    /*
     * Het ontwerp toont de drie functielinks meteen; er is geen uitklapknop.
     * De lijst is kort genoeg om hem niet nog eens te laten vouwen.
     */
    body nav.mobile-navigation .menu ul.sub-menu {
        display: block;
        max-height: none;
        opacity: 1;
        visibility: visible;
        position: static;
        width: auto;
        max-width: none;
        border: 0;
        box-shadow: none;
        background: none;
        padding: 0;
        margin: 0;
        transform: none;
    }

    body nav.mobile-navigation button.sub-menu-toggle {
        display: none;
    }

    /* Boven 782px is de beheerbalk 32px in plaats van 46px. */
    @media (min-width: 783px) {
        body.admin-bar nav.mobile-navigation {
            top: calc(78px + var(--ehbo-mobiel-logo, 44px));
        }
    }

    /* De sluitknop hoort in het ontwerp niet in het paneel zelf. */
    body nav.mobile-navigation .mobile-menu-toggle-position {
        display: none;
    }

    /* De 40px uit de desktopregel houdt het menu van het logo af. Op mobiel
       staat daar de hamburger, die de flexbox toch al naar rechts duwt; die
       marge is dan alleen maar ruimte die het logo tekortkomt. */
    body header.navigation .navigation-inner.navigation-inner-main > .logo-outer {
        margin-right: 16px;
    }

    /*
     * The theme's toggle is a 30 x 25px button. Grow the tap area to 44px and
     * take the extra back with negative margins, so the icon (absolutely
     * centred inside) stays exactly where it was.
     */
    body header.navigation .mobile-menu-toggle {
        position: relative;
        width: 44px;
        height: 44px;
        margin: -10px -7px;
        -webkit-tap-highlight-color: transparent;
    }
}


@media (max-width: 768px) {
    /* De logohoogte staat als variabele omdat het uitklappaneel er ook op moet
       uitkomen; zie de top-berekening bij nav.mobile-navigation. */
    :root {
        --ehbo-mobiel-logo: clamp(32px, 8.5vw, 44px);
    }

    body header.navigation {
        padding-top: 10px;
    }

    /* De row binnen de header heeft -15px gutters: met minder padding steekt
       hij buiten het scherm en krijgt de pagina horizontale scroll. */
    body header.navigation .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    body header.navigation .navigation-inner.navigation-inner-main {
        padding: 12px 16px;
        border-radius: 14px;
    }

    /*
     * Het thema geeft de <img> een vaste hoogte van 44px plus max-width:100%.
     * Op een smal scherm past die breedte niet, waarna object-fit het beeld
     * terugbrengt tot 35px terwijl de box 44px hoog blijft: het logo staat dan
     * in een te grote doos en drukt de hamburger weg. Met auto-maten houdt hij
     * zijn eigen verhouding.
     *
     * De hoogte schaalt mee in plaats van vast te staan. Een harde 32px is goed
     * op een telefoon, maar liet het logo op een 700px-tablet als een postzegel
     * in een brede balk staan. Deze ramp geeft 32px rond 375px en loopt vanaf
     * ongeveer 520px weer vol naar de 44px van het ontwerp.
     */
    /*
     * Let op: hier moet een echte height staan, geen max-height met height:auto.
     * Bij een <img> met srcset en sizes leidt de browser de intrinsieke maat af
     * uit sizes, en met height:auto wordt dat de layoutmaat — het logo bleef dan
     * op 197px hangen en de clamp kon alleen nog krimpen.
     */
    body header.navigation img.logo {
        height: var(--ehbo-mobiel-logo);
        width: auto;
        max-width: 100%;
    }

    .col-card {
        padding: 24px;
    }

    .ehbo-steps ol li {
        padding-left: 40px;
    }

    /* De mockups scrollen horizontaal binnen hun eigen kader. */
    iframe.ehbo-mock {
        border-radius: 14px;
    }

    .socket ul {
        gap: 14px;
    }

    /* Het cijfer past niet meer náást de banden; zet het erboven. */
    .ehbo-reviews {
        --ehbo-reviews-gutter: 4%;
    }

    .ehbo-reviews__summary {
        position: static;
        transform: none;
        width: auto;
        padding: 0;
        margin-bottom: 22px;
    }

    .ehbo-review {
        width: 280px;
        padding: 20px;
    }

    .ehbo-calc {
        padding: 22px;
    }

    .ehbo-calc__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ehbo-calc__totals {
        text-align: left;
    }

    .ehbo-calc__users,
    .ehbo-calc__total {
        font-size: 30px;
    }
}

/* ---------------------------------------------------------- paginaovergang -- */

/*
 * Gordijn tussen twee pagina's: een lichtgrijs vlak schuift van
 * rechts in, met het EHBO-kruis in het midden. Bij aankomst vertrekt het vlak
 * naar links. Zie functions/paginaovergang.php voor waarom de klasse op <html>
 * al vóór de eerste schilderbeurt gezet wordt.
 *
 * z-index 9000: de header van het theme zit op 3 en de mobiele navigatie op
 * 1000, dus dit dekt alles af. De beheerbalk (99999) blijft er bewust boven.
 */
.paginagordijn {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    visibility: hidden;

    /* Lichtgrijs vlak, dus het kruis kan in de echte merkkleuren staan. */
    --gordijn-vlak: var(--gray);
    --gordijn-balk-koel: var(--secondary);
    --gordijn-balk-warm: var(--primary);
}

.paginagordijn.is-actief {
    visibility: visible;
}

/* Gezet door het script in de <head>, dus vóór de eerste schilderbeurt: bij
   aankomst dekt het vlak het scherm meteen. Zonder dit zie je de nieuwe pagina
   eerst kaal en komt het vlak daarna alsnog voorbij. */
.ehbo-overgang .paginagordijn {
    visibility: visible;
}

.ehbo-overgang .paginagordijn__vlak {
    transform: translateX(0);
}

.ehbo-overgang .paginagordijn__merk {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--merk-draai-eind, 0deg));
}

/* 101% i.p.v. 100%: een subpixelrand liet op sommige schermen een streepje zien. */
.paginagordijn__vlak {
    position: absolute;
    inset: 0;
    background: var(--gordijn-vlak);
    transform: translateX(101%);
    transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.paginagordijn.is-in .paginagordijn__vlak {
    transform: translateX(0);
}

/* Vertrek versnelt weg in plaats van af te remmen; dat leest als wegschieten
   in plaats van als afgekapt. */
.paginagordijn.is-uit .paginagordijn__vlak {
    transform: translateX(-101%);
    transition-timing-function: cubic-bezier(0.4, 0, 0.9, 0.6);
}

/* Het kruis komt binnen met een kleine tegenslag, zodat het in het vlak lijkt
   te landen in plaats van mee te schuiven. */
.paginagordijn__merk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9) rotate(var(--merk-draai-start, 0deg));
    opacity: 0;
    transition: opacity 260ms ease, transform 450ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Het volledige logo: breed en liggend, dus ruimer opgezet dan het losse kruis.
   De ondertitel in het logo is bij deze maat klein maar leesbaar; in de header
   staat hij op 44px hoogte nog een slag kleiner. Geen draai: een scheefstaand
   woordmerk leest als krom, terwijl het kruis zelf al gedraaid is. */
.paginagordijn__merk--logo {
    width: min(440px, 72vw);
}

/* Terugval zonder logo: het merkteken alleen, dat mag wel binnendraaien. */
.paginagordijn__merk--kruis {
    width: min(156px, 26vw);
    --merk-draai-start: -8deg;
    --merk-draai-uit: 4deg;
}

.paginagordijn__merk svg,
.paginagordijn__logo {
    display: block;
    width: 100%;
    height: auto;
}

.paginagordijn__balk--1,
.paginagordijn__balk--2 {
    fill: var(--gordijn-balk-koel);
}

.paginagordijn__balk--3,
.paginagordijn__balk--4 {
    fill: var(--gordijn-balk-warm);
}

/* De balken zetten iets na elkaar aan: eerst de koele, dan de rode. Dat is net
   genoeg om het kruis zich te laten "vormen" zonder de overgang te vertragen. */
.paginagordijn__balk {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.86);
    transition: opacity 200ms ease, transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.paginagordijn.is-in .paginagordijn__balk,
.ehbo-overgang .paginagordijn__balk {
    opacity: 1;
    transform: scale(1);
}

.paginagordijn.is-in .paginagordijn__balk--1 { transition-delay: 170ms; }
.paginagordijn.is-in .paginagordijn__balk--2 { transition-delay: 205ms; }
.paginagordijn.is-in .paginagordijn__balk--3 { transition-delay: 240ms; }
.paginagordijn.is-in .paginagordijn__balk--4 { transition-delay: 275ms; }

/* Iets later dan het vlak, zodat het merkteken erin lijkt te landen. */
.paginagordijn.is-in .paginagordijn__merk {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--merk-draai-eind, 0deg));
    transition-delay: 140ms;
}

.paginagordijn.is-uit .paginagordijn__merk {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08) rotate(var(--merk-draai-uit, 0deg));
    transition-delay: 0ms;
}

.paginagordijn.is-uit .paginagordijn__balk {
    transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    .paginagordijn {
        display: none;
    }
}

/* ---------------------------------------------------------- handleiding -- */

/*
 * Het kennisbankartikel (single-handleiding.php): vaste kop, de inhoud links en
 * een zijbalk rechts. De inhoud komt uit EHBO Software en bestaat uit de gewone
 * secties van het thema (één per stap); binnen de tekstkolom horen die geen
 * eigen container en geen sectiepadding te hebben.
 *
 * Alles leunt op bestaande onderdelen: #breadcrumbs, .ehbo-badge, .col-card,
 * .card en de tokens uit custom-leftheme.json.
 */
/*
 * De kop is de hero van de binnenpagina's (.ehbo-hero: verloop + kruis-motief). Dezelfde maten
 * als daar: de header zweeft als kaart over de pagina, dus de kop begint er ruim onder.
 */
.lef-section.ehbo-handleiding__kop {
    padding-top: 196px;
    padding-bottom: 40px;
}

@media only screen and (max-width: 991px) {
    .lef-section.ehbo-handleiding__kop {
        padding-top: 132px;
        padding-bottom: 24px;
    }
}

.ehbo-handleiding__termen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* Het pilletje is hier een link naar de categorie, geen statusmelding: geen stipje. */
.ehbo-handleiding__termen .ehbo-badge::before {
    content: none;
}

#main .ehbo-handleiding__termen a.ehbo-badge:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.ehbo-handleiding__titel {
    margin: 0 0 16px;
}

.ehbo-handleiding__meta {
    margin: 0;
    font-size: var(--small-font-size);
    font-weight: 600;
    color: var(--darkgray);
}

.ehbo-handleiding__body {
    padding-top: 24px;
}

.ehbo-handleiding__intro {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--black);
    margin: 0 0 32px;
}

/* De secties uit de plugin: geen tweede container, geen sectiepadding. */
.ehbo-handleiding__content .lef-section {
    padding: 0;
    background: none;
}

.ehbo-handleiding__content .lef-section > .container {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.ehbo-handleiding__content .lef-section + .lef-section {
    margin-top: 36px;
}

/* Elke stap begint met een zachte lijn, zodat je ziet waar de volgende begint. */
.ehbo-handleiding__content .lef-section[id^="stap-"] {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--ehbo-line-soft);
}

.ehbo-handleiding__content h2 {
    font-size: 26px;
    margin: 0 0 12px;
}

.ehbo-handleiding__content h3 {
    font-size: 20px;
    margin: 24px 0 8px;
}

.ehbo-handleiding__content p,
.ehbo-handleiding__content li {
    /* Het theme zet lijstitems op 12px; een handleiding lees je op 16px. */
    font-size: 16px;
    line-height: 1.65;
    color: var(--ehbo-muted);
}

.ehbo-handleiding__content strong {
    color: var(--black);
}

.ehbo-handleiding__content ul,
.ehbo-handleiding__content ol {
    padding-left: 22px;
    margin: 0 0 16px;
}

.ehbo-handleiding__content li {
    margin-bottom: 6px;
}

/* A screenshot opens full size in the lightbox (single-handleiding.php wraps it in a link): on a
   phone a desktop screenshot is too small to read in the text column (site-b mobile 2026-10-12).
   Same cursor and tap behaviour as the images on Wat is er nieuw. */
.ehbo-handleiding__beeld-link {
    display: block;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}

.ehbo-handleiding__beeld-link:focus:not(:focus-visible) {
    outline: none;
}

/* De schermafbeelding van een stap: als een kaart, nooit groter dan het origineel. */
.ehbo-handleiding__content .wp-block-custom-section-block-col {
    margin-bottom: 0;
}

.ehbo-handleiding__content img {
    display: block;
    width: 100%;
    height: auto;
    margin: 18px 0 0;
    border: 1px solid var(--ehbo-line);
    border-radius: var(--general-border-radius);
    box-shadow: var(--ehbo-shadow-card);
}

/* De tip onder een stap. */
.ehbo-handleiding__content .block-notice {
    margin-top: 18px;
    padding: 16px 20px;
    border: 1px solid var(--ehbo-line);
    border-left: 4px solid var(--secondary);
    border-radius: var(--general-border-radius);
    background: var(--ehbo-surface);
}

.ehbo-handleiding__content .block-notice p {
    font-size: 15px;
    margin: 0;
    color: var(--black);
}

/* De vaste header zweeft over de pagina: een sprong naar een stap landt eronder. */
.ehbo-handleiding__content h2[id],
.ehbo-handleiding__content .lef-section[id] {
    scroll-margin-top: calc(var(--fake-menu-height) + 16px);
}

/* Zijbalk. */
.ehbo-handleiding__zijbalk {
    display: grid;
    gap: 16px;
}

.ehbo-handleiding__blok.col-card {
    height: auto;
}

.ehbo-handleiding__blok-kop,
.bg-tertiary .ehbo-handleiding__blok-kop {
    /* Ook in het donkere blok "Meer over …": het thema maakt daar elke h2 44px (eigenaar 2026-09-22). */
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 14px;
}

.col-card .ehbo-handleiding__links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.col-card .ehbo-handleiding__links li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.45;
}

.col-card .ehbo-handleiding__links li:last-child {
    margin-bottom: 0;
}

/* De kaartlijst van het thema zet hier een vinkje; een lijst met links krijgt een pijl. */
.col-card .ehbo-handleiding__links li::before {
    content: "→";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--secondary);
}

.col-card.bg-tertiary .ehbo-handleiding__links li::before {
    color: var(--primary);
}

#main .ehbo-handleiding__links a {
    color: inherit;
    font-weight: 600;
}

#main .col-card.bg-tertiary .ehbo-handleiding__links a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Lees ook. */
.ehbo-handleiding__lees-ook-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 28px;
}

.ehbo-handleiding__lees-ook-kop h2,
.ehbo-handleiding__lees-ook-kop .btn {
    margin: 0;
}

.ehbo-handleiding__lees-ook-raster > [class*="col-"] {
    margin-bottom: var(--spacing-around-loop-items);
}

#main a.ehbo-handleiding__kaart {
    display: block;
    /* The theme's .card margin (15px 0) together with height: 100% made the card 30px taller
       than its column: an empty band under the text (site-b mobile 2026-10-12). The column's
       margin-bottom already spaces the cards. */
    margin: 0;
    color: var(--black);
    transition: transform .2s ease, box-shadow .2s ease;
}

#main a.ehbo-handleiding__kaart:hover {
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: var(--ehbo-shadow-card);
}

.ehbo-handleiding__kaart .content-outer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--card-content-padding);
}

.ehbo-handleiding__kaart-term {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--secondary);
}

.ehbo-handleiding__kaart-titel {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.ehbo-handleiding__kaart-tekst {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ehbo-muted);
}

@media only screen and (min-width: 992px) {
    .ehbo-handleiding__raster > .col-lg-8 {
        padding-right: 48px;
    }

    /* De inhoudsopgave loopt mee tijdens het lezen. De rij lijnt bovenaan uit, dus de
       kolom moet zelf de volle hoogte krijgen, anders heeft sticky geen ruimte. */
    .ehbo-handleiding__raster > .col-lg-4 {
        align-self: stretch;
    }

    /* Het thema zet overflow-x: hidden op html en body; dat maakt er scrollcontainers van en
       dan blijft sticky nergens aan hangen. `clip` knipt net zo goed af, zonder dat bijeffect. */
    html:has(body.ehbo-handleiding-pagina),
    body.ehbo-handleiding-pagina {
        overflow-x: clip;
    }

    .ehbo-handleiding__zijbalk {
        position: sticky;
        top: calc(var(--fake-menu-height) + 16px);
    }
}

@media only screen and (max-width: 991px) {
    /* Op een telefoon staat de inhoudsopgave bóven de stappen; de andere lijstjes
       komen terug in "Lees ook". */
    .ehbo-handleiding__raster > .col-lg-4 {
        order: -1;
        margin-bottom: 28px;
    }

    .ehbo-handleiding__zijbalk > :not(nav) {
        display: none;
    }

    .ehbo-handleiding__intro {
        font-size: 17px;
    }

    .ehbo-handleiding__content h2 {
        font-size: 22px;
    }
}

/* ------------------------------------------- handleidingen: het overzicht -- */

/*
 * archive-handleiding.php: de kop van de binnenpagina's met een zoekveld, daaronder het donkere
 * vlak "Onderwerpen" met per categorie een kaart met al haar handleidingen. Geen afbeeldingen:
 * handleidingen hebben geen uitgelichte afbeelding.
 */
.ehbo-kennisbank__kop .ehbo-handleiding__intro {
    margin-bottom: 24px;
    max-width: 660px;
}

.ehbo-kennisbank__zoek {
    max-width: 560px;
}

.ehbo-kennisbank__zoek input[type="search"] {
    width: 100%;
    padding: 15px 18px 15px 48px;
    font-family: inherit;
    font-size: 16px;
    color: var(--black);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236B7392'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.2-5.2M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z'/%3E%3C/svg%3E") no-repeat 16px center / 20px;
    border: 1px solid var(--ehbo-line);
    border-radius: var(--form-elements-border-radius);
    box-shadow: var(--ehbo-shadow-header);
    -webkit-appearance: none;
    appearance: none;
}

.ehbo-kennisbank__zoek input[type="search"]:focus {
    border-color: var(--secondary);
    outline: none;
}

/* Alleen met de muis geen ring; wie met het toetsenbord komt houdt hem. */
.ehbo-kennisbank__zoek input[type="search"]:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.ehbo-kennisbank__onderwerpen-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 28px;
}

.ehbo-kennisbank__onderwerpen-kop h2,
.ehbo-kennisbank__onderwerpen-kop .btn {
    margin: 0;
}

.ehbo-kennisbank__raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    /* Kaarten in een rij even hoog, zoals op de Support-pagina in de app (eigenaar 2026-09-22). */
    align-items: stretch;
}

/* De kaarten: een lichter vlak op het donkere, in de vorm van de andere kaarten. */
.ehbo-kennisbank__kaart {
    padding: 26px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

.ehbo-kennisbank__kaart[hidden],
.ehbo-kennisbank__kaart li[hidden] {
    display: none;
}

.ehbo-kennisbank__kaart-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: var(--white);
}

#main .ehbo-kennisbank__kaart-kop a {
    color: inherit;
}

#main .ehbo-kennisbank__kaart-kop a:hover {
    color: var(--white);
    text-decoration: underline;
}

.ehbo-kennisbank__aantal {
    flex-shrink: 0;
    min-width: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Dezelfde lijst met pijlen als in de zijbalk van een handleiding. */
.ehbo-kennisbank__kaart .ehbo-handleiding__links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ehbo-kennisbank__kaart .ehbo-handleiding__links li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
}

.ehbo-kennisbank__kaart .ehbo-handleiding__links li:last-child {
    margin-bottom: 0;
}

.ehbo-kennisbank__kaart .ehbo-handleiding__links li::before {
    content: "→";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--primary);
}

#main .ehbo-kennisbank__kaart .ehbo-handleiding__links a:hover {
    color: var(--white);
    text-decoration: underline;
}

.ehbo-kennisbank__leeg {
    margin: 0;
    color: rgba(255, 255, 255, .86);
}

@media only screen and (max-width: 991px) {
    .ehbo-kennisbank__raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 640px) {
    .ehbo-kennisbank__raster {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Functiepagina's: ruimte, modulemelding, lijstjes en beeld (eigenaar 2026-09-24) ──────── */

/* In de hero plakten de knoppen tegen de introtekst aan. */
.ehbo-hero .buttons-holder {
    margin-top: 28px;
}

/* Een gekleurd stappenblok begon direct onder de kaarten erboven; dat mag lucht hebben. */
.lef-section.bg-white + .lef-section.bg-quaternary.ehbo-steps {
    margin-top: 48px;
}

/* Links in de tekst dik en onderstreept, zodat ze niet te verwarren zijn met gewone tekst.
   Knoppen en kaarten die zelf één grote link zijn (de kennisbank-kaarten) blijven zoals ze zijn.
   Het id #main moet mee: het thema haalt onderstrepingen weg met een id-regel, en die wint anders. */
#main .lef-section .content-wrapper a:not(.btn):not(.button):not([class*="btn-"]):not(.ehbo-handleiding__kaart) {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Modulemelding: facturatie, externe aanvragen, de WordPress-koppeling en de overstap zijn
   optionele modules. Zelfde blok op elke modulepagina; het icoontje staat links naast de tekst. */
.ehbo-module-melding .content-wrapper {
    position: relative;
    background: #F1F4FB;
    border-radius: 16px;
    padding: 24px 28px 24px 82px;
}

.ehbo-module-melding .content-wrapper > p:first-child {
    position: absolute;
    top: 26px;
    left: 28px;
    margin: 0;
}

.ehbo-module-melding h4 {
    margin: 0 0 6px;
}

.ehbo-module-melding p:last-child {
    margin: 0;
}

/* On a phone the 82px icon gutter squeezed the text into a narrow column: put the icon above the
   text, like the badge above the title in the cards (site-b mobile 2026-10-12). */
@media only screen and (max-width: 575px) {
    .ehbo-module-melding .content-wrapper {
        padding: 22px 22px 24px;
    }

    .ehbo-module-melding .content-wrapper > p:first-child {
        position: static;
        margin: 0 0 12px;
    }
}

/* Opsomming met een groen vinkje in plaats van een bolletje, op de tekstgrootte van een gewone
   alinea (die week af van de rest). Gebruikt de lijstopmaak van het thema. */
.ehbo-vinkjes {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-size: inherit;
}

.ehbo-vinkjes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: inherit;
    line-height: inherit;
}

.ehbo-vinkjes li + li {
    margin-top: 12px;
}

.ehbo-vinkjes .icon {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 15px;
    color: var(--ehbo-success);
}

.ehbo-vinkjes .li-content {
    font-size: inherit;
    line-height: inherit;
}

/* Lucht tussen een schermafbeelding en de tekst ernaast. */
@media (min-width: 992px) {
    .ehbo-beeld {
        padding-inline: 32px;
    }
}

/* The explanation blocks alternate image left/right. Stacked on a phone or tablet the mirrored
   ones started with the image, so the page went text-image, image-text, ... Keep text first,
   image (with its caption) second in every block (site-b mobile 2026-10-12). */
@media only screen and (max-width: 991px) {
    .lef-section > .container > .row > .ehbo-beeld:first-child {
        order: 1;
    }

    /* Two light (quaternary) sections in a row - the last mirrored block and "Zo werkt het" -
       read as one band with a 140px hole in it; drop the second one's top padding. */
    body:not(.home) .lef-section.bg-quaternary + .lef-section.bg-quaternary {
        padding-top: 8px !important;
    }
}

/* Onderschrift onder een schermafbeelding: dezelfde opmaak als een tip in de kennisbank
   (eigenaar 2026-09-24), zodat site en kennisbank één geheel vormen. */
.lef-section figure.image-outer.has-caption figcaption {
    margin-top: 18px;
    padding: 16px 20px;
    border: 1px solid var(--ehbo-line);
    border-left: 4px solid var(--secondary);
    border-radius: var(--general-border-radius);
    background: var(--ehbo-surface);
    font-size: 15px;
    line-height: 1.6;
    color: var(--black);
}

/* Kennisbank-kaarten onder een functiepagina staan in drie kolommen; op een kennisbank-item zijn
   het er vier. Alleen de tussenruimte hoeft mee te bewegen. */
.ehbo-handleiding__lees-ook-raster > [class*="col-"] {
    margin-bottom: 24px;
}

/* Twee knoppen naast elkaar stonden bijna tegen elkaar aan (eigenaar 2026-09-24). Het thema hield
   ze uit elkaar met marges op de knop zelf; die zijn hierboven op 0 gezet. Eén tussenruimte op de
   houder geeft ze overal op de site dezelfde lucht, ook als ze op een smal scherm onder elkaar
   vallen. */
.buttons-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Een staande schermafbeelding (een telefoon) werd in een halve kolom torenhoog (eigenaar
   2026-09-24). De kolom blijft even breed, de afbeelding zelf niet. */
.ehbo-beeld--staand figure,
.ehbo-beeld--staand .image-outer {
    max-width: 320px;
    margin-inline: auto;
}

/* ── Kennisbank: eerst vijf items per onderwerp, de rest achter "Bekijk alle" (eigenaar 2026-09-28) ── */

/* Ingekort: alles vanaf het zesde item blijft staan in de HTML, maar is nog niet te zien.
   Het zoekveld klapt de kaarten open, zodat een treffer nooit verborgen blijft. */
[data-ehbo-kennisbank-ingekort] .ehbo-kennisbank__extra {
    display: none;
}

.ehbo-kennisbank__meer {
    margin-top: 16px;
}

.ehbo-kennisbank__meer[hidden] {
    display: none;
}

/* De knop onderaan de kaart, zodat hij in een rij kaarten op één lijn staat. */
.ehbo-kennisbank__kaart {
    display: flex;
    flex-direction: column;
}

.ehbo-kennisbank__kaart:has(.ehbo-kennisbank__meer) .ehbo-handleiding__links {
    margin-bottom: 16px;
}

.ehbo-kennisbank__meer {
    margin-top: auto;
    align-self: flex-start;
}

/* Geen zwarte omlijning na een muisklik; met de Tab-toets blijft hij wel staan. */
.ehbo-kennisbank__meer:focus:not(:focus-visible) {
    outline: none;
}

.ehbo-kennisbank__meer {
    -webkit-tap-highlight-color: transparent;
}

/* De knop mag alleen van achtergrondkleur veranderen, net als de andere knoppen: geen krimp,
   geen beweging (eigenaar 2026-09-28). Het thema zet `transition: all` op .btn, waardoor elke
   andere wijziging mee zou animeren. */
.ehbo-kennisbank__meer,
.ehbo-kennisbank__meer:hover,
.ehbo-kennisbank__meer:focus,
.ehbo-kennisbank__meer:active {
    transform: none;
    scale: none;
    animation: none;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
}

/* Bij hover veranderde ook de rand mee (van de lichte lijn naar bijna zwart). Op de witte knop
   leest die donkere ring als een "krimp". Alleen de achtergrond verandert nu (eigenaar 2026-09-28). */
.ehbo-kennisbank__meer,
.ehbo-kennisbank__meer:hover,
.ehbo-kennisbank__meer:focus,
.ehbo-kennisbank__meer:active {
    border-color: var(--ehbo-line);
    color: var(--primary);
}

/* `.btn.bg-white:hover` van het thema weegt zwaarder dan de klasse alleen; daarom hier dezelfde
   klassen erbij, zodat de rand ook echt zijn kleur houdt. */
.btn.bg-white.ehbo-kennisbank__meer:hover,
.btn.bg-white.ehbo-kennisbank__meer:focus,
.btn.bg-white.ehbo-kennisbank__meer:active {
    border-color: var(--ehbo-line);
    color: var(--primary);
}

/* De tekstkleur van een witte knop is `--white-content` (het donkerblauw), niet `--primary`
   (dat is op deze site het rood). Ook die blijft nu gelijk; alleen de achtergrond verandert. */
.ehbo-kennisbank__meer,
.btn.bg-white.ehbo-kennisbank__meer:hover,
.btn.bg-white.ehbo-kennisbank__meer:focus,
.btn.bg-white.ehbo-kennisbank__meer:active {
    color: var(--white-content);
}

/* ── Mega menu: passend houden en rustiger hoveren (eigenaar 2026-09-28) ───────────────────── */

/*
 * Op een lager scherm (1280×720, of 125% zoom op een laptop) viel het paneel van Functies onder
 * de onderkant van het venster. Daar wordt alles krapper en schuift het paneel desnoods van
 * binnen. Het paneel sluit dan aan op de knop, zodat de onzichtbare "brug" van hierboven — die
 * door het schuiven wordt weggeknipt — niet meer nodig is.
 */
@media only screen and (max-height: 900px) {
    body .main-nav-menu li.mega-menu > .mega-menu-wrapper {
        top: 100%;
        padding: 26px 48px 24px;
        gap: 28px;
        max-height: calc(100vh - 125px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body .mega-menu-wrapper .sub-menu-column,
    body .main-nav-menu li .mega-menu-wrapper .sub-menu-column .sub-menu {
        gap: 12px;
    }

    body .mega-menu-wrapper .ehbo-mega-kop > a {
        margin-bottom: 14px;
    }

    body .mega-menu-wrapper .ehbo-mega-kaart {
        padding: 22px;
    }
}

/*
 * In het paneel van Website hoort alleen de eerste regel als link te voelen; de opsomming
 * eronder ("Wat je krijgt") is een lijstje, geen keuzemenu. Klikken blijft wel werken.
 */
body .main-nav-menu li.ehbo-mega-website .mega-menu-wrapper .sub-menu-column .sub-menu li.ehbo-mega-plus > a:hover {
    background: none;
}

/* De knop in de menubalk had twee hovers over elkaar: die van de knop zelf en het grijze vlak
   van het menu-item eromheen. Dat vlak gaat weg. */
body .main-nav-menu li.menu-item-has-button > a:hover,
body nav.mobile-navigation .menu li.menu-item-has-button > a:hover {
    background: none;
}

/* ── Vergelijkingstabel op de vergelijkingspagina's (eigenaar 2026-09-28) ─────────────────── */

.ehbo-vergelijk {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0 12px;
    font-size: 15px;
    background: #fff;
    border: 1px solid var(--ehbo-line);
    border-radius: 14px;
    overflow: hidden;
}

.ehbo-vergelijk th,
.ehbo-vergelijk td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ehbo-line-soft, var(--ehbo-line));
}

.ehbo-vergelijk thead th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--darkgray);
    background: var(--gray);
}

.ehbo-vergelijk tbody tr:last-child th,
.ehbo-vergelijk tbody tr:last-child td {
    border-bottom: 0;
}

.ehbo-vergelijk td:first-child {
    font-weight: 600;
    color: var(--black);
}

/* Ja/nee krijgen een teken vóór de tekst, zodat de tabel ook in zwart-wit te lezen is. */
.ehbo-vergelijk .is-ja::before,
.ehbo-vergelijk .is-nee::before {
    font-weight: 800;
    margin-right: 8px;
}

.ehbo-vergelijk .is-ja::before {
    content: "\2713";
    color: var(--succes, #22B339);
}

.ehbo-vergelijk .is-nee::before {
    content: "\2013";
    color: var(--darkgray);
}

.ehbo-vergelijk .is-nee {
    color: var(--darkgray);
}

/* A long answer wrapped back under the tick/dash; hang the sign in front so the text lines up
   (site-b mobile 2026-10-12). */
.ehbo-vergelijk td.is-ja,
.ehbo-vergelijk td.is-nee {
    padding-left: calc(16px + 1.3em);
    text-indent: -1.3em;
}

.ehbo-vergelijk .is-ja::before,
.ehbo-vergelijk .is-nee::before {
    display: inline-block;
    width: 1.3em;
    margin-right: 0;
    text-indent: 0;
}

@media only screen and (max-width: 640px) {
    .ehbo-vergelijk,
    .ehbo-vergelijk tbody,
    .ehbo-vergelijk tr,
    .ehbo-vergelijk td {
        display: block;
    }

    .ehbo-vergelijk thead {
        display: none;
    }

    .ehbo-vergelijk tr {
        border-bottom: 1px solid var(--ehbo-line);
        padding: 6px 0;
    }

    .ehbo-vergelijk td {
        border: 0;
        padding: 4px 16px;
    }

    .ehbo-vergelijk td.is-ja,
    .ehbo-vergelijk td.is-nee {
        padding-left: calc(16px + 1.3em);
    }

    .ehbo-vergelijk td:first-child {
        padding-top: 12px;
    }
}

/*
 * De lucht tussen de menubalk en het paneel hoort er te blijven (eigenaar 2026-09-28). Op een
 * lager scherm schuift het paneel van binnen, en dan knipt `overflow` de onzichtbare brug van
 * hierboven weg. Daarom is die strook hier een doorzichtige bovenrand van het paneel zelf: die
 * hoort bij het element (dus de muis verliest de hover niet) en wordt nooit weggeknipt. De
 * achtergrond begint pas ná die rand, en een inset-lijntje houdt de bovenrand zichtbaar.
 */
@media only screen and (max-height: 900px) {
    body .main-nav-menu li.mega-menu > .mega-menu-wrapper {
        top: 100%;
        border-top: 9px solid transparent;
        background-clip: padding-box;
        box-shadow: 0 40px 60px -30px rgba(20, 18, 74, .28), inset 0 1px 0 var(--ehbo-line);
    }
}

/* Op smalle schermen valt de kolomkop van de vergelijkingstabel weg; dan noemt de cel zelf
   om welk systeem het gaat. */
@media only screen and (max-width: 640px) {
    .ehbo-vergelijk td[data-kolom]::after {
        content: "\00a0\2014\00a0" attr(data-kolom);
        color: var(--darkgray);
        font-weight: 400;
    }
}

/* Knoppen die direct op een tekstblok volgen kregen buiten de hero geen lucht mee; de laatste
   alinea heeft namelijk geen ondermarge. Dezelfde 28px als in de hero (eigenaar 2026-09-29). */
.content-wrapper + .buttons-holder {
    margin-top: 28px;
}

/* Het kopje boven een kaart (PLANNING, MENSEN, BONDSSYSTEEM, …) hoort dezelfde kleur te hebben als
   het pictogram erboven. Dat gold alleen binnen .ehbo-related; op /vergelijken/ bleef het kopje
   daardoor grijs (eigenaar 2026-09-29). */
.col-card .content-wrapper > p:has(.ehbo-accent-primary) + h6 {
    color: var(--primary);
}

.col-card .content-wrapper > p:has(.ehbo-accent-secondary) + h6 {
    color: var(--secondary);
}

.col-card .content-wrapper > p:has(.ehbo-accent-tertiary) + h6 {
    color: var(--tertiary);
}

/*
 * Foutmeldingen van Gravity Forms (eigenaar 2026-10-05). Het moederthema geeft
 * `.validation_message` en `.gform_submission_error` een volle rode balk met
 * witte tekst; onze `.gfield_description` maakt die tekst daarbinnen grijs, zodat
 * hij bijna onleesbaar werd. Hier: een rustige melding bovenaan in de opbouw van
 * de tip onder een stap (`.block-notice`), een rode rand om het veld en een korte
 * rode regel eronder — allemaal in `--error`.
 */
.gform_wrapper .gform_validation_errors {
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 1px solid rgba(var(--error-rgb), .25);
    border-left: 4px solid var(--error);
    border-radius: var(--general-border-radius);
    background: rgba(var(--error-rgb), .06);
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
    margin: 0;
    padding: 0;
    background: none;
    color: var(--error);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

/* GF's icoonfont hoort bij de uitgezette stylesheets en zou een leeg vakje tonen. */
.gform_wrapper .gform_validation_errors .gform-icon {
    display: none;
}

/* Sommige versies zetten de fouten ook als lijstje met links in de melding. */
.gform_wrapper .gform_validation_errors ol {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

.gform_wrapper .gform_validation_errors ol a {
    color: var(--error);
}

.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="number"],
.gform_wrapper .gfield_error input[type="date"],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error .gfield_radio label,
.gform_wrapper .gfield_error .gfield_checkbox label {
    border-color: var(--error);
}

.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error select:focus,
.gform_wrapper .gfield_error textarea:focus {
    border-color: var(--secondary);
}

.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .validation_message {
    margin: 6px 0 0;
    padding: 0;
    background: none;
    color: var(--error);
    font-size: 13px;
    font-weight: 600;
}

/*
 * De bevestiging na een geslaagde inzending: groen, in het groen van de vinkjes in lijsten
 * (--ehbo-success), zonder lege ruimte onderaan. Op elk formulier (eigenaar 2026-10-06); het
 * aanmeldformulier "Gratis proberen" zet zijn tekst in .ehbo-signup-thanks en deelt deze regel.
 */
.gform_confirmation_wrapper .gform_confirmation_message,
.ehbo-signup-thanks {
    padding: 16px 20px;
    border: 1px solid rgba(20, 166, 106, .3);
    border-left: 4px solid var(--ehbo-success);
    border-radius: var(--general-border-radius);
    background: rgba(20, 166, 106, .07);
    color: var(--black);
    font-size: 15px;
}

.gform_confirmation_wrapper .gform_confirmation_message > :last-child,
.ehbo-signup-thanks > :last-child {
    margin-bottom: 0;
}

/*
 * De witte kaart "Gratis proberen" in het donkere blok (2026-10-05): het thema maakt elke p en h6
 * in een donkere sectie wit, ook in een witte kaart daarin. Deze kaart krijgt de gewone kleuren
 * terug: dezelfde tokens als de basisregels voor h6 en p bovenaan dit bestand.
 */
.bg-tertiary .ehbo-proberen-kaart h6,
.bg-primary .ehbo-proberen-kaart h6 {
    color: var(--darkgray);
}

.bg-tertiary .ehbo-proberen-kaart p,
.bg-primary .ehbo-proberen-kaart p {
    color: var(--ehbo-muted);
}

/*
 * Het aanmeldformulier "Gratis proberen" (2026-10-05, feedback eigenaar). Alleen op dit formulier:
 * de klassen komen uit de plugin Website sync.
 * - De pakketten als kaarten, zoals de pakketkaarten in EHBO Software zelf: een afgeronde kaart met
 *   rand, de aanbevolen kaart met een accentrand, de gekozen kaart in de kleuren van de gekozen
 *   chips hierboven (#ECEBFB en --secondary).
 * - Ja/nee-vragen als echte vinkjes (de chips hierboven zijn voor een keuze uit meerdere).
 * - De tijden in een gelijk raster.
 * - De bedankmelding in het groen van de vinkjes in lijsten (--ehbo-success), zonder lege ruimte
 *   onderaan.
 */
.gform_wrapper .ehbo-signup-plans .gfield_radio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.gform_wrapper .ehbo-signup-plans .gchoice {
    display: flex;
}

.gform_wrapper .ehbo-signup-plans .gfield_radio label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: var(--general-border-radius);
    background: #fff;
    color: var(--black);
    font-size: 16px;
    font-weight: 800;
}

.gform_wrapper .ehbo-signup-plans .ehbo-plan__seats {
    font-size: 13px;
    font-weight: 600;
    color: var(--darkgray);
}

.gform_wrapper .ehbo-signup-plans .ehbo-plan__price {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--black);
}

.gform_wrapper .ehbo-signup-plans .ehbo-plan__price small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--darkgray);
}

.gform_wrapper .ehbo-signup-plans .ehbo-plan__badge {
    order: -1;
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ECEBFB;
    color: var(--secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.gform_wrapper .ehbo-signup-plans .gchoice:has(.ehbo-plan__badge) label {
    border-color: rgba(var(--secondary-rgb), .45);
}

.gform_wrapper .ehbo-signup-plans .gfield_radio input:checked + label {
    background: #ECEBFB;
    border-color: var(--secondary);
    box-shadow: 0 0 0 1px var(--secondary);
    color: var(--black);
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox label {
    position: relative;
    padding: 0 0 0 32px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--black);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox label::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 21px;
    height: 21px;
    border: 1.5px solid var(--darkgray);
    border-radius: 6px;
    background: #fff;
    transition: background-color .15s, border-color .15s;
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox input:checked + label {
    background: none;
    color: var(--black);
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox input:checked + label::before {
    border-color: var(--secondary);
    background: var(--secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox input:focus-visible + label {
    outline: none;
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox input:focus-visible + label::before {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.gform_wrapper .ehbo-signup-check .gfield_checkbox label a {
    position: relative;
    z-index: 1;
    color: var(--secondary);
    text-decoration: underline;
}

.gform_wrapper .ehbo-signup-check.gfield_error .gfield_checkbox label::before {
    border-color: var(--error);
}

.gform_wrapper .ehbo-signup-times .gfield_radio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
}

.gform_wrapper .ehbo-signup-times .gfield_radio label {
    padding: 10px 6px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.gform_wrapper .ehbo-signup-day select {
    font-weight: 600;
    color: var(--black);
}

.gform_confirmation_wrapper .gform_confirmation_message:has(.ehbo-signup-thanks) {
    padding: 0;
    border: 0;
    background: none;
}

/* ------------------------------------------------------------------ Foutpagina's (404, 403) */

/*
 * Dezelfde eerste hulp als in de app: de code groot in beeld, de nul als kloppend hart en een
 * hartfilmpje eronder. De beweging zet `functions/foutpagina.php` erop; zonder script (of met
 * "minder beweging") blijft dit stilstaande beeld over, dus het moet op zichzelf al kloppen.
 */
.ehbo-fout {
    text-align: center;
}

.ehbo-fout .container {
    position: relative;
    z-index: 1;
}

.ehbo-fout__code {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .05em;
    margin: 0;
    color: var(--quaternary-content);
}

.ehbo-fout__hart {
    display: inline-block;
    color: var(--primary);
}

.ehbo-fout__ecg {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: 3.5rem;
    margin: .75rem auto 1.5rem;
}

.ehbo-fout__ecg path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* De hele lijn staat er; het script tekent hem van links naar rechts opnieuw. */
    stroke-dasharray: 480;
    stroke-dashoffset: 0;
}

.ehbo-fout__tekst {
    max-width: 34rem;
    margin: .75rem auto 2rem;
    color: var(--ehbo-muted);
}

.ehbo-fout__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/*
 * Veelgestelde vragen per categorie (/veelgestelde-vragen/, blok acf/featured-faqs in de stand
 * "faq-categories", 2026-10-14). Het thema zet elke categorie als h3 neer; die staat vlak onder de
 * h2 van de sectie en vlak op de eerste vraag. Alleen de maten bijgesteld, de rest blijft van het
 * thema.
 */
.ehbo-faq .content-wrapper > h2 {
    margin-bottom: 28px;
}

.ehbo-faq .category-intro h3 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 14px;
}

.ehbo-faq .featured-faqs .faq-categories-row {
    grid-row-gap: 44px;
    row-gap: 44px;
}

/* ------------------------------------------------- Inloggen + mobiel menu -- */

/*
 * De knop "Inloggen" naast "Demo aanvragen" (eigenaar 2026-10-15), zodat een lid
 * dat op de website belandt meteen door kan naar app.ehbosoftware.nl. Het thema
 * maakt er een knop van (menu-item met weergave "button"); de lichte variant
 * krijgt dezelfde rand en tekstkleur als `.btn.bg-white` hierboven (regel 580),
 * anders is wit op een witte header onzichtbaar.
 */
.menu-item-has-button .menu-item-button.bg-white {
    border: 1px solid var(--ehbo-line);
    color: var(--white-content);
}

.menu-item-has-button .menu-item-button.bg-white:hover,
.menu-item-has-button > a:hover .menu-item-button.bg-white {
    background-color: var(--white);
    border-color: var(--black);
    color: var(--white-content);
}

/* De twee knoppen staan naast elkaar; het thema zet er alleen marge tussen bij
   meerdere items in deze menubalk. */
@media only screen and (min-width: 992px) {
    .nav-holder-primary-2 .main-nav-menu {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

@media only screen and (max-width: 991px) {
    /*
     * Het paneel mocht tot 70vh hoog worden; met dertien regels paste het er
     * niet in en leek het af te breken na "Vergelijken". Nu loopt het door tot
     * net boven de onderkant van het scherm, met een eigen schuifbalk.
     */
    body nav.mobile-navigation {
        max-height: calc(100vh - 54px - var(--ehbo-mobiel-logo, 44px) - 20px);
    }

    /*
     * Functies klapt open en dicht. Met de vijf functielinks er altijd onder was
     * de lijst te lang voor één scherm; dichtgeklapt staan alle acht onderwerpen
     * plus de twee knoppen meteen in beeld. Het thema levert de knop en de
     * .open-klasse (mobile-navigation.js); hier staat alleen de vorm.
     */
    body nav.mobile-navigation .menu > li.menu-item-has-children {
        position: relative;
    }

    body nav.mobile-navigation button.sub-menu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: -10px;
        width: 44px;
        height: 53px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body nav.mobile-navigation button.sub-menu-toggle:focus:not(:focus-visible) {
        outline: none;
    }

    body nav.mobile-navigation button.sub-menu-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--ehbo-muted);
        border-bottom: 2px solid var(--ehbo-muted);
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform .2s ease;
    }

    body nav.mobile-navigation button.sub-menu-toggle.open::after {
        transform: translate(-50%, -30%) rotate(-135deg);
    }

    body nav.mobile-navigation .menu ul.sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    body nav.mobile-navigation .menu ul.sub-menu.open {
        max-height: 420px;
    }

    /* De twee knoppen onderaan: Inloggen naast Demo aanvragen, samen de volle breedte. */
    body nav.mobile-navigation .menu {
        display: flex;
        /* Het thema zet deze lijst op een kolom; voor de twee knoppen naast elkaar
           moet hij op een rij staan die afbreekt. */
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 12px;
    }

    body nav.mobile-navigation .menu > li.menu-item {
        flex: 1 1 100%;
    }

    body nav.mobile-navigation .menu > li.menu-item-has-button {
        flex: 1 1 calc(50% - 14px);
        margin-top: 18px;
    }

    body nav.mobile-navigation .menu > li.menu-item-has-button > a {
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    body nav.mobile-navigation .menu > li.menu-item-has-button .menu-item-button {
        display: block;
        width: 100%;
        padding: 13px 8px;
        font-size: 16px;
        text-align: center;
    }
}

/* Naslepertjes van de twee knoppen in het mobiele paneel (2026-10-15). */
@media only screen and (max-width: 991px) {
    /* De lijst staat op een rij die afbreekt; zonder deze regel zet de
       rij-tussenruimte van het thema een gat onder "Functies". */
    body nav.mobile-navigation .menu {
        row-gap: 0;
    }

    /* Het icoontje van "Demo aanvragen" duwt de tekst naar een tweede regel in
       een halve kolom; in het mega menu heeft het wel ruimte. */
    body nav.mobile-navigation .menu > li.menu-item-has-button .menu-item-button .icon {
        display: none;
    }

    body nav.mobile-navigation .menu > li.menu-item-has-button .menu-item-button {
        font-size: 15px;
        padding: 14px 6px;
    }
}

/* --------------------------------------- Ruimte tussen de knoppen rechts -- */
/* Het thema geeft elke menulink 14px padding links én rechts, dus tussen
   "Inloggen" en "Demo aanvragen" stond 28px. Voor twee knoppen naast elkaar is
   dat te veel (eigenaar 2026-10-19). Nu 6px per kant = 12px ertussen; de
   negatieve marge van de lijst loopt mee, anders schuift de rechterknop uit de
   rand van de header. */
@media only screen and (min-width: 992px) {
    .main-navigation-alt .main-nav-menu {
        margin-right: -6px;
        margin-left: -6px;
    }

    .main-navigation-alt .main-nav-menu > li.menu-item > a {
        padding-left: 6px;
        padding-right: 6px;
    }
}