/*
Sections — HZNG Base
Sectie-componenten (hero, en later USP, FAQ, CTA, testimonials, …).
Werkt samen met style.css — deelt :root variabelen.
*/

/* ==========================================================================
   .hero — volle-breedte, featured image als achtergrond + overlay
   ========================================================================== */



section {
    padding-top: calc(3 * var(--gutter));
    padding-bottom: calc(3 * var(--gutter));
}
    section.no-padding-top {
        padding-top: 0;
    }

    section.no-padding-bottom {
        padding-bottom: 0;
    }

.hero {
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: calc(6 * var(--gutter));
}

.hero-vlam {
    position: absolute;
    top: -375px;
    right: 0;
    height: 950px;      /* schaalt op de hoogte van de hero */
    width: auto;       /* breedte volgt de verhouding */
    max-width: 50%;
    z-index: -10;
    pointer-events: none;
}
.hero .row {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Zolang een CTA-dropdown openstaat, tilt alleen de hero-content boven de
   volgende sectie uit, zodat het menu er niet achter valt. De vlam is een
   broer van .hero .row (geen kind) en blijft dus op z-index -10 staan. */
.hero .row:has(.cta-dropdown[open]) {
    z-index: 50;
}


.cursus-hero .cursus-intro,
.hero-content .hero-text {
    margin: 20px 0 0;
    max-width: 52ch;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Split-CTA — knop klapt de twee haardtypes uit (native <details>).
   De <summary> houdt de bestaande .btn.ghost-stijl; het menu verschijnt
   eronder. Klik-buiten-sluiten wordt in js/jquery.js afgehandeld.
   -------------------------------------------------------------------------- */
.hero-buttons .cta-dropdown {
    position: relative;
}
.hero-buttons .cta-dropdown summary {
    list-style: none;
    cursor: pointer;
}
.hero-buttons .cta-dropdown summary::-webkit-details-marker {
    display: none;
}

/* Chevron als hint, draait bij openen */
.hero-buttons .cta-dropdown summary::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.hero-buttons .cta-dropdown-menu {
    position: absolute;
    top: 60px;
    left: 0;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-cta);
    border-radius: var(--radius-btn);
    overflow: hidden;
    z-index: 10;
}
.hero-buttons .cta-dropdown-menu a {
    padding: 10px 20px;
    color: var(--color-cta);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
    font-weight: 500;
    font-size: 0.9em;
}
.hero-buttons .cta-dropdown-menu a:not(:last-child) {
    border-bottom: 1px solid var(--color-cta);
}
.hero-buttons .cta-dropdown-menu a:hover {
    background: var(--color-gradient);
    color: var(--color-white);
}

.page-content {
    padding-top: calc(6 * var(--gutter));
}

/* ==========================================================================
   Mobiel — hero-content volle breedte
   ========================================================================== */

@media (max-width: 1279px) {
    .hero-content {
        text-align: left;
    }

    .hero-buttons {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   .usps — drie pijlers onder de hero
   ========================================================================== */

.usp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;                       /* gelijke hoogte via .container.flex-stretch */
    padding: 20px 10px 20px 20px;
    color: var(--color-secundary);
    border-radius: var(--radius);
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--menu-bg-scrolls);
    backdrop-filter: var(--blur);
}
    .hero-usps-row .usp {
        flex-direction: row;
    }
.usp-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: calc(var(--gutter) / 2);
    left: 20px;
    top: 20px;
}


.usp h4,
.usp .usp-titel {
    margin: 0 0 8px;
    width: 100%;
}

/* Label dat eruitziet als de oude h4, maar buiten de koppenhierarchie valt
   (het is een aanduiding, geen sectiekop). */
.usp .usp-titel {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.3rem);
    color: var(--color-secondary);
}

.usp p {
    margin: 0;
}

.with-icons img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: calc(var(--gutter) / 2);
    left: 20px;
    margin-top: 15px;
}
    .page-template-werkwijze .with-icons img {
        width: 50px;
        height: 50px;
    }
.with-icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.with-icons li {
    display: flex;
    flex-direction: row;
    padding: 10px 10px 10px 20px;
}
.with-icons h4 {
    margin-top: calc(var(--gutter) / 2);
}
    .sticky .with-icons li {
        padding: 0;
    }

/* USP-pijlers: op mobiel horizontaal scrollen, net als de monteurs.
   De .block-wrapper levert al de padding-inline (gutter), dus die hoeft
   hier niet apart toegevoegd te worden. */
@media (max-width: 767px) {

    .hero-usps-row .container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hero-usps-row .container::-webkit-scrollbar {
        display: none;
    }

    .hero-usps-row .container > [class*="col-"] {
        flex: 0 0 82%;                 /* smaller dan de viewport: volgende kaart peekt */
        max-width: 82%;
        scroll-snap-align: start;      /* snapt aan de linkerzijde */
    }

}

/* ==========================================================================
   .cta — opvallend blok in --color-cta
   ========================================================================== */

.cta .cta-inner {
    padding: 50px 30px;
    border-radius: var(--radius);
    background: var(--color-cta);
    border: 1px solid var(--color-cta);
    color: #FFF;
}

.cta-inner h2 {
    margin: 0;
}

.cta-inner .cta-text {
    margin: 16px auto 0;
    max-width: 60ch;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* ==========================================================================
   .text-image — tekst + title-cards naast het beeld van de parent
   ========================================================================== */

.text-image .image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-image-body h2 {
    margin: 0;
}

.text-image-excerpt {
    margin: 16px 0 24px;
}

.text-image-cards {
    display: flex;
    flex-direction: column;
}

/* Beeld links i.p.v. rechts: kolomvolgorde omdraaien.
   Media staat eerst in de DOM; default schuift 'm naar rechts. */
.text-image .text-image-media {
    order: 2;
}

.text-image .text-image-body {
    order: 1;
}

.text-image.image-left .text-image-media {
    order: 1;
}

.text-image.image-left .text-image-body {
    order: 2;
}
.reviews,
.co-vrij,
.text-image.werkwijze {
    background: var(--color-grey);
}
    .has-flame.before:before {
        display: block;
        content: "";
        width: 50px;
        height: 100px;
        background-image: url(../images/vlam-kleur.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        top: -50px;
        left: 50%;
        margin-left: -25px;
        z-index: 99;
    }
    .has-flame.after:after {
        display: block;
        content: "";
        width: 50px;
        height: 100px;
        background-image: url(../images/vlam-kleur.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        bottom: -50px;
        left: 50%;
        margin-left: -25px;
        z-index: 99;
    }
    .has-flame.bottom::after {
        display: block;
        content: "";
        width: 30px;
        height: 60px;
        background-image: url(../images/vlam-kleur.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -25px;
        z-index: 99;

    }
    .monteur-meta::before {
        display: inline-block;
        content: "";
        width: 30px;
        height: 60px;
        background-image: url(../images/vlam-kleur.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        z-index: 99;
        left: calc(var(--gutter) + 10px);
        position: absolute;
        top: 50%;
        margin-top: -30px;
    }

/* Mobiel: altijd beeld boven, tekst eronder */
@media (max-width: 1279px) {
    .text-image .text-image-media,
    .text-image.image-left .text-image-media {
        order: 1;
    }

    .text-image .text-image-body,
    .text-image.image-left .text-image-body {
        order: 2;
    }

    .text-image-media {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   .single-cursus — cursus-detailpagina
   ========================================================================== */

.content ul {
    margin: 30px 0 20px 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content ul li {
    position: relative;
    padding-left: 0px;

}

.content ul li:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 26px;
    left: 0;
}

/* Accordions ============================================================== */

.accordion {
    border-bottom: 1px solid var(--color-border);
}

    .accordion:last-of-type {
        border-bottom: 0;
    }

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--color-cta);
}

.accordion-trigger::after {
    content: "+";
    margin-left: 16px;
    font-size: 1.4em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.accordion-trigger[aria-expanded="true"]::after {
    content: "\2212"; /* minteken */
}

.accordion-panel {
    padding: 0 0 24px;
}

.accordion-panel > *:first-child {
    margin-top: 0;
}

.accordion-panel > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   .partners — auto-scroll logo-marquee
   ========================================================================== */

.partners-marquee {
    overflow: hidden;
    margin-top: 30px;
    /* Fade-out aan de zijkanten zodat logos elegant in/uit beeld komen */
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
    animation: partners-scroll 40s linear infinite;
}

.partner-logo {
    height: 100px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Op desktop pauzeren bij hover */
@media (hover: hover) {
    .partners-track:hover {
        animation-play-state: paused;
    }
}

/* Mensen met reduced-motion krijgen een statische rij */
@media (prefers-reduced-motion: reduce) {
    .partners-marquee {
        mask-image: none;
        -webkit-mask-image: none;
    }
    .partners-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}



/* ==========================================================================
   News
   ========================================================================== */


.cursus-accordions {
    background: var(--color-white);
    border-radius: var(--radius);
}
    .cursus-faq .accordion {
        padding: 0 20px;
    }
        .cursus-faq .accordion h4 {
            margin:0;
        }
 
/* ==========================================================================
   CF7-formulier — floating labels
   --------------------------------------------------------------------------
   Werkt samen met de filter hzng_cf7_floating_labels (functions.php sectie
   12) die placeholder=" " toevoegt en label-tekst in een .floating-label
   span wrapt. Gebruikt :has() voor de focus/filled-state — alle moderne
   browsers (Chrome 105+, Safari 15.4+, Firefox 121+).

   Werkt op elk CF7-formulier op de site — sticky aside op cursus-detail,
   centrale /inschrijven/-pagina, contactpagina, etc.
   ========================================================================== */
.wpcf7-form * {
    font-family: var(--font-body);
}
.wpcf7-form p {
    margin: 0 0 12px;
}

.wpcf7-form label {
    position: relative;
    display: block;
    font-size: 15px;
    font-weight: 500;

}

/* De <br> uit CF7's markup is hier overbodig */
.wpcf7-form label + br,
.wpcf7-form label br {
    display: none;
}

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-secondary);
    line-height: 1.4;
    outline: none;
    font-size: 16px;
    transition: border-color var(--transition);
}

/* Readonly-velden (cursus/datum/locatie op inschrijfpagina) iets
   gedempter zodat duidelijk is dat ze niet bewerkbaar zijn */
.wpcf7-form input[readonly],
.wpcf7-form textarea[readonly] {
    background: var(--color-oat, #F5F1EA);
    cursor: default;
}

/* De floating label: standaard in het midden van het input */
.wpcf7-form .floating-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-secondary);
    pointer-events: none;
    padding: 0 4px;
    font-size: 16px;
    transition: 0.2s ease-out;
    z-index: 1;
}

/* Verschoven naar linksboven bij focus of als het veld gevuld is */
.wpcf7-form label:has(input:focus) .floating-label,
.wpcf7-form label:has(input:not(:placeholder-shown)) .floating-label,
.wpcf7-form label:has(textarea:focus) .floating-label,
.wpcf7-form label:has(textarea:not(:placeholder-shown)) .floating-label {
    top: 15px;
    transform: translateY(-50%) scale(0.85);
    transform-origin: left center;
}

.wpcf7-form textarea {
    height: 120px;
}
/* Submit-knop — net zo hoog als de inputs, oranje achtergrond */
.wpcf7-submit {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 15px 24px;
    background: var(--color-cta);
    color: #FFF;
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity var(--transition);
}

@media (hover: hover) {
    .wpcf7-submit:hover {
        opacity: 0.85;
    }
}
 

/* .cursus-titel — kleine eyebrow-tekst boven het icoon in de cursus-hero */

.cursus-titel {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cta);
    opacity: 0.95;
}
.cursus-pill {
    background: var(--color-cta);
    color: var(--color-white);
    border-radius: var(--gutter);
    font-size: var(--font-small);
    text-transform: uppercase;
    margin: calc(var(--gutter) / 2);
    margin-left: 0;
    padding: 2px 12px;
    font-weight: 600;
    display: inline-flex;
    text-decoration: none;
}
    .cursus-card .cursus-pill {
        margin-top: 0;
    }
    .cursus-list .cursus-pill {
        margin-bottom: 0;
        margin-top: 0;
    }

/* Scroll-target voor de "Open inschrijvingen"-pill — ruimte vrij houden
   onder het sticky menu zodat de h2 niet erachter verdwijnt */
#open-inschrijvingen {
    scroll-margin-top: 0;
}


/* ==========================================================================
   Inschrijving-modal — native <dialog> met CF7-inschrijfformulier
   --------------------------------------------------------------------------
   Visueel patroon volgt .review-modal (witte modal, primary tekst,
   blurred backdrop, sluit-knop top-right). Verschillen:
     - Breder (700px) — formulier heeft meer ruimte nodig dan een quote
     - max-height met overflow:auto zodat lange formulieren scrollen
   ========================================================================== */

.inschrijving-modal {
    width: min(700px, 90vw);
    max-height: 90vh;
    padding: var(--card-padding);
    background: #FFF;
    color: var(--color-primary);
    border: 0;
    border-radius: var(--radius);
    overflow: auto;
}

.inschrijving-modal::backdrop {
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(4px);
}

.inschrijving-modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-right: calc(var(--card-padding) * -1);
    margin-top: calc(var(--card-padding) * -1);
    margin-bottom: 8px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--color-secondary);
    border: 0;
    color: var(--color-white);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    border-bottom-left-radius: var(--radius);
    z-index: 1;
}

@media (hover: hover) {
    .inschrijving-modal-close:hover {
        opacity: 1;
    }
}

/* Het CF7-form binnen de modal — geen extra padding nodig, dialog
   regelt al de buitenmarge */
.inschrijving-modal .wpcf7 {
    margin: 0;
}



/* ==========================================================================
   Vind uw regio — postcodechecker (+ slot voor de klikbare kaart)
   ========================================================================== */

.vind-uw-regio {
    position: relative;
}
    .vind-uw-regio:after {
        width: 100%;
        height: calc(100% - 120px);
        position: absolute;
        top: 60px;
        content: "";
        display: block;
        background: var(--color-grey);
        z-index: -1;
    }

/* Tijdelijke placeholder voor de kaart; wordt in de volgende stap de SVG. */
.vind-uw-regio .regio-map {
    position: relative;
    width: 100%;
}

.regio-map svg {
    display: block;
    width: 100%;
    height: 500px;
}

/* Kaartvlakken: donker uit de SVG, oranje bij hover (alleen op apparaten
   met een echte pointer). Klik wordt afgehandeld in js/regio-checker.js. */

.regio-vlak {
    transition: fill 0.15s ease;
    cursor: pointer;
}

/* Highlight wordt via JS gezet (is-active), gekoppeld aan de pil, zodat
   hover op de pil het vlak kleurt en er geen flikker zit tussen beide. */
.regio-vlak.is-active {
    fill: var(--color-cta);
}

/* Labels als pillen over de kaart. Posities in procenten over de viewBox;
   eenvoudig bij te stellen. */
.regio-pil {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    background: var(--color-white);
    border: 2px solid var(--color-cta);
    border-radius: var(--radius-btn);
    color: var(--color-cta);
    font-weight: 600;
    font-size: 0.8em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.regio-pil::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-cta);;
    border-radius: 50%;
    border: 1.5px solid var(--color-cta);
    line-height: 1;
}


.regio-pil:focus-visible {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}

.regio-pil--noord     { top: 16%; left: 80%; }
.regio-pil--west      { top: 32%; left: 38%; }
.regio-pil--oost      { top: 45%; left: 79%; }
.regio-pil--zuid-west { top: 63%; left: 25%; }
.regio-pil--zuid-oost { top: 70%; left: 65%; }
.regio-pil--zuid      { top: 93%; left: 68%; }

.regio-checker {
    margin-top: var(--gutter);
    background: var(--color-white);
    padding: calc(var(--gutter) / 2);
    border-radius:  calc(var(--radius) * 2);
}

.regio-checker-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    align-items: stretch;
}

.regio-checker-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: var(--radius-btn);
    background: #EFEFEF;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1em;
}

.regio-checker-input::placeholder {
    color: #9a948f;
}

.regio-checker-input:focus-visible {
    outline: 2px solid var(--color-cta);
    outline-offset: 1px;
    border-color: var(--color-cta);
}

/* Input en knop elk ongeveer de helft, met de theme-gutter ertussen. */
.regio-checker .btn {
    margin-top: 0;
    flex: 1 1 0;
}

.regio-checker-message {
    margin-top: 10px;
    color: var(--color-cta);
    font-size: 0.95em;
}

.regio-checker-message[hidden] {
    display: none;
}

/* Visueel verborgen label, wel leesbaar voor schermlezers. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pre-menu{
    background: var(--color-primary);
    padding: 0;
    height: var(--topmenu-height);
    z-index: 10;
}
    ul.checks,
    .pre-menu ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
        ul.checks.vertical {
            flex-direction: column;
        }
        ul.checks li,
        .pre-menu ul li,
        .pre-menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }
        .pre-menu ul li .review-google-value,
        .pre-menu ul li {
            color: var(--color-border);
            font-size: var(--font-small);
        }
            ul.checks li {
                padding: 10px 0 10px 30px;
            }
            
            .vind-uw-regio ul.checks li {
                flex: 0 0 50%;
                max-width: 50%;
                padding: 0 20px;
            }  
                .vind-uw-regio ul.checks li {
                    font-size: var(--font-small);
                }
            .pre-menu ul li {
                margin-left: 10px;
            }
            ul.checks li,
            .pre-menu ul li {
                padding-left: 30px;
            }
            ul.checks li:before {
                content: "";
                display: inline-block;
                width: 16px;
                height: 7px;
                left: 5px;
                top: 17px;
                border-left: 3px solid var(--color-cta);
                border-bottom: 3px solid var(--color-cta);
                transform: rotate(-45deg);
                position: absolute;
            }
            .vind-uw-regio ul li.check:before,
            .pre-menu ul li.check:before {
                content: "";
                display: inline-block;
                width: 12px;
                height: 6px;
                left: 0;
                top: 5px;
                border-left: 2px solid var(--color-cta);
                border-bottom: 2px solid var(--color-cta);
                transform: rotate(-45deg);
                position: absolute;
            }

        .pre-menu .review-google-score {
            padding: 0;
            border: 0;
        }
        .pre-menu .google-star-value {
            flex-direction: row;
            align-items: center;
        }
        .pre-menu .review-google-value {
            margin: 0 0 0 10px;
        }
.wat-wij-doen .container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* is de default, maar expliciet is duidelijk */
}
.wat-wij-doen .col-6.block {
    display: flex;
    margin-bottom: calc(var(--gutter) * 1.25);
}
.wat-wij-doen .block > .block{
    background: var(--color-green);
    padding: calc(var(--gutter) * 1.25);
    border-radius: var(--radius);
    height: 100%;
    align-items: stretch;
}
.wat-wij-doen .block > .block h3{
    color: var(--color-gradient);
}
.co-badge {
    position: relative;
    background: linear-gradient(180deg, #85B7D0 0%, #0E689B 100%);
    padding: 40px 30px 2px;
    color: #fff;
    text-align: center;
}
    .co-badge img {
        width: 80px;
        margin: 0 auto 20px;
    }
    .co-badge p {
        font-size: var(--font-small);
    }
.co-badge::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 80px;
    margin-top: -1px;
    background: #0E689B;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.eyebrow {
    color: var(--color-cta);
    font-weight: 600;
    font-size: var(--font-small);
    text-transform: uppercase;
}
    .hero .eyebrow {
        font-size: var(--font-medium);
    }
ul.erkend {
    display: flex;
    flex-direction: row;
    margin: var(--gutter) 0;
}
    .vind-uw-regio ul.erkend {
        justify-content: center;
    }
    ul.erkend li {
        margin: calc(var(--gutter) / 2) calc(var(--gutter) / 2) 0 calc(var(--gutter) / 2);
        padding: 0;
        list-style: none;
    }
        ul.erkend li img {
            max-height: 80px;
        }
        .vind-uw-regio ul.erkend li img {
            max-height: 60px;
            filter: grayscale(1);
            opacity: 0.75;
        }
            .vind-uw-regio ul.erkend li img:hover{
                filter: grayscale(0);
            }

ul.usp-pills {
    display: flex;
    flex-direction: row;
    margin: -10px 0 var(--gutter) auto;
    justify-content: center;
}
    ul.usp-pills li {
        margin: calc(var(--gutter) / 2);
        padding: 5px 20px 5px 35px;
        list-style: none;
        background: var(--color-cta-transparent);
        position: relative;
        color: var(--color-cta);
        text-transform: uppercase;
        font-weight: 600;
        font-size: var(--font-small);
        border-radius: var(--radius);
    }
        ul.usp-pills li:before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 6px;
            left: 15px;
            top: 10px;
            border-left: 2px solid var(--color-cta);
            border-bottom: 2px solid var(--color-cta);
            transform: rotate(-45deg);
            position: absolute;
        }
.columns {
    columns: 2;
    column-gap: var(--gutter);
}
/* ==========================================================================
   Merken-ticker — logo's lopen continu van rechts naar links (tickertape)
   --------------------------------------------------------------------------
   De track bevat twee identieke sets logo's. De animatie verschuift de track
   exact -50% (een hele set), waardoor het rondje naadloos doorloopt. Elke
   logo heeft margin-right voor de tussenruimte, zodat de afstand ook op de
   naad tussen set 1 en set 2 gelijk blijft.
   ========================================================================== */

.single-merk .reviews {
    background: var(--color-grey);
}


.merken-ticker {
    margin: calc(var(--gutter) * 2) 0;
    overflow: hidden;
    width: 100%;
    /* Zachte fade aan de linker- en rechterrand */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.merken-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: merken-scroll 90s linear infinite;
}

/* Pauzeren bij hover, zodat een bezoeker een logo kan bekijken */

.merk-logo {
    flex: 0 0 auto;
    max-height: 70px;
    width: auto;
    margin-right: calc(var(--gutter) * 4);
}

.merk-logo.Barbas { max-height: 60px; }
.merk-logo.Faber  { max-height: 80px; }

@keyframes merken-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Respecteer de voorkeur voor minder beweging: dan een nette stilstaande
   rij in plaats van een lopende ticker. */
@media (prefers-reduced-motion: reduce) {
    .merken-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: calc(var(--gutter) * 2);
    }

    .merk-logo {
        margin-right: 0;
    }
}


/* ==========================================================================
   FAQ — accordion-lijst (knop + panel, zoals Sonon)
   --------------------------------------------------------------------------
   Werkt met de accordion-JS in js/jquery.js: klik op .accordion-trigger
   togglet aria-expanded en verbergt/toont .accordion-panel via het
   hidden-attribuut. Witte lijst met afronding en rand, items gescheiden door
   lijntjes; de vraag is vet met rechts een +/- teken. Onder .faq-list
   gescoped zodat het de generieke .accordion-regels netjes overschrijft.
   ========================================================================== */

.faq {
    background: var(--color-secondary);
    background-image: url(../images/vlam-swart.svg);
    background-repeat: no-repeat;
    background-position: top -100px left 5%;
    background-size: 700px;
}
    .faq p.text,
    .faq h2 {
        color: var(--color-white);
        text-shadow: 0 10px 20px rgba(0,0,0,0.65);
    }
.faq-list {
    overflow: hidden;
    gap: var(--gutter);
    display: flex;
    flex-direction: column;
    margin-top: var(--gutter);
}

.faq-list .accordion {
    padding: 0 20px;
    background: var(--color-white);
    border-radius: var(--radius);
    border: 0;
}


.faq-list .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--color-secondary);
    cursor: pointer;
}

.faq-list .accordion-trigger::after {
    flex-shrink: 0;
    line-height: 1;

    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-weight: 300;
    font-size: 1.4em;
    line-height: 24px;
    color: var(--color-cta);
    border-radius: 50%;
    border: 1.5px solid var(--color-cta);
    line-height: 1;
    margin-left: calc(var(--gutter) /2);
}

.faq-list .accordion-trigger[aria-expanded="true"]::after {
    content: "\2212";                      /* minteken */
}

.faq-list .accordion-panel {
    padding: 0 0 24px;
}

    .faq-list .accordion-panel > *:first-child { margin-top: 0; }
    .faq-list .accordion-panel > *:last-child  { margin-bottom: 0; }


/* ==========================================================================
   Monteurs — rij met kaarten (col-3), tekst eronder
   --------------------------------------------------------------------------
   Desktop: kaarten in kolommen (col-3), de tekst in een blok eronder.
   Mobiel: de kaarten scrollen horizontaal met scroll-snap; elke kaart is iets
   smaller dan de viewport zodat de volgende net zichtbaar is (visuele
   wachtrij) en netjes aan de linkerkant 'snapt'.
   ========================================================================== */

/* Gutter tussen de kaarten, uitgelijnd met het tekstblok eronder */

.monteurs {
    background: var(--color-grey-transparent);
    margin-top: -60px;
    backdrop-filter: var(--blur);
}
.monteurs-row > [class*="col-"] {
    padding-inline: var(--gutter);
}

@media (max-width: 767px) {

    .monteurs-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .monteurs-row::-webkit-scrollbar {
        display: none;
    }

    .monteurs-row > [class*="col-"] {
        flex: 0 0 82%;                 /* smaller dan de viewport: 2e kaart peekt */
        max-width: 82%;
        scroll-snap-align: start;      /* snapt aan de linkerzijde */
    }
}

/* Basis-styling van de kaart zelf, zodat de foto echt zichtbaar is */
.monteur-card {
    display: flex;
    flex-direction: column;
    background: var(--color-secondary);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--gutter);
    background-image: url(../images/vlam-swart.svg);
    background-repeat: no-repeat;
    background-position: top -70px right 5%;
    background-size: 200px;
}
    .monteur-card:before {
        position: absolute;
        display: block;
        content: "";
        width: 60px;
        height: 8px;
        background: var(--color-grey);
        border-radius: var(--radius);
        z-index: 1;
        left: 50%;
        top: 15px;
        margin-left: -30px;
    }

.monteur-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
}

.monteur-meta {
    display: flex;
    flex-direction: column;
    padding: calc(var(--gutter) * 2);
    padding-right: calc(var(--gutter) * 1);
    padding-left: 90px;
}

.monteur-naam {
    font-weight: 400;
    color: var(--color-white);
    margin: 0;
}

.monteur-functie {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-cta);
}


.contact-blok {
    background: var(--color-gradient);
    padding: 30px 0;
}

.contact-blok * {
    color: var(--color-white);
}



@media (max-width: 767px) {
 
    /* Zwarte USP-balk bovenaan: nette horizontale scroll i.p.v. samenpersen */
    .pre-menu ul {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
 
        .pre-menu ul::-webkit-scrollbar {
            display: none;
        }
 
        .pre-menu ul li {
            flex: 0 0 auto;
            white-space: nowrap;
        }
 
    /* De 3 USP-pills: horizontaal scrollen i.p.v. onder elkaar */
    ul.usp-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        width: 100%;
    }
 
        ul.usp-pills::-webkit-scrollbar {
            display: none;
        }
 
        ul.usp-pills li {
            flex: 0 0 auto;
            white-space: nowrap;
        }
}


/* ==========================================================================
   Mobiele fixes — flame als volle-breedte banner bovenaan, 1-koloms tekst
   ========================================================================== */

@media (max-width: 767px) {

    /* Flame in de flow zetten: volle breedte bovenaan de hero, tekst eronder.
       Niet meer absoluut/vervormd zoals op desktop. */
    .hero-vlam,
    .home .hero-vlam {
        position: relative;
        order: -1;
        top: -500px;
        right: -10%;
        width: 80%;
        max-width: 80%;
        height: auto;
        z-index: 0;
        margin-bottom: calc(var(--gutter) - 460px);
        display: none;
    }

    /* Tweekoloms tekst is te smal op mobiel */
    .columns {
        columns: 1;
    }
    .hero {
        padding-top: calc(5 * var(--gutter));
    }
}
/* ==========================================================================
   Regio-links — data-driven cross-links naar de regiopagina's
   Provincie als ankertekst, basale pill-stijl in lijn met de footer.
   ========================================================================== */
.regio-links-lijst {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
}

.regio-links-lijst a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-secondary);
    text-decoration: none;
}

.regio-links-lijst a:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
}
/* Logo van het merk in de hero van de merkpagina */
.merk-hero-logo {
    max-height: 60px;
    width: auto;
    margin-bottom: var(--gutter);
}

/* Genummerde cirkels voor de zes h2's op pagina 30 */
/* Genummerde tijdlijn op pagina 30: cirkel met nummer voor elke h2,
   verbonden door een verticale stippellijn. */

body.page-id-30 {
    counter-reset: stap;
}

/* De contentkolom draagt de doorlopende stippellijn */
.page-id-30 .content .block {
    position: relative;
}

.page-id-30 .content .block h3 {
    counter-increment: stap;
    position: relative;
    margin-left: 60px;           /* ruimte tussen de stappen */
}


/* Cirkel met nummer; dekt de lijn af zodat het een tijdlijn wordt */
.page-id-30 .content .block h3 {
    border-top: 1px solid #DDD;
    padding-top: var(--gutter);
}
.page-id-30 .content .block h3::before {
    content: counter(stap);
    position: absolute;
    left: -60px;                   /* terug naar de lijn (= -padding-left) */
    top: calc(var(--gutter) -15px);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gradient);
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
}
.page-id-30 .content .block h3 + p {
    padding-left: 60px;
}

/* Mobiel: kleiner en minder inspringing */
@media (max-width: 767px) {
 

}

.right .block,
.form .block {
    padding: calc(var(--gutter)) calc(var(--gutter) * 1.25) calc(var(--gutter) * 0.5);
    color: var(--color-secundary);
    border-radius: var(--radius);
    position: relative;
    border: 1px solid var(--color-border);
}

.form .block {
    background: var(--menu-bg-scrolls);
    backdrop-filter: var(--blur);
}

.bg-dark {
    background-color: var(--color-secondary);
    background-image: url(../images/vlam-swart.svg);
    background-repeat: no-repeat;
    background-position: top -70px right 5%;
    background-size: 200px;
    padding: calc(var(--gutter) / 2) calc(var(--gutter) * 1.25) calc(var(--gutter)) ;
    margin-top: calc(var(--gutter) * 2);
    border-radius: var(--radius);
    border: 0!important;
}
    .bg-dark * {
        color: var(--color-white);
    }

.bg-grey {
    background-color: var(--color-grey-transparent);5%;
    padding: calc(var(--gutter) / 2) calc(var(--gutter) * 1.25) calc(var(--gutter)) ;
    margin-top: calc(var(--gutter) * 2);
    border-radius: var(--radius);
    border: 0!important;
}

/* Mobiel */

@media (max-width: 1279px) {
    .vind-uw-regio ul.checks {
        display: none;
    }
    .vind-uw-regio:after {
        height: calc(100% - 80px);
        top: 40px;
    }
    .wat-wij-doen .container > .block {
        margin-bottom: calc(var(--gutter) * 2);
    }
}


/* ==========================================================================
   Formulier-modal - extern aanvraagformulier in een iframe binnen <dialog>
   --------------------------------------------------------------------------
   Gevuld door js/jquery.js: klik op een externe formulierlink (sonn.jbnet.nl)
   zet de URL in het iframe en opent de modal. Sluiten via de knop of Escape;
   backdrop-klik sluit bewust niet. Gecentreerd via margin:auto (native dialog).
   ========================================================================== */
.form-modal {
    width: min(700px, 100% - 40px);
    height: calc(100vh - 80px);
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: #FFF;
    overflow: hidden;
}

.form-modal::backdrop {
    background: rgb(0 0 0 / 0.6);
}

.form-modal-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.form-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    z-index: 1;
}

@media (hover: hover) {
    .form-modal-close:hover {
        opacity: 1;
    }
}

/* Mobiel: kleinere marge (10px), vrijwel fullscreen. 100dvh houdt rekening
   met de browserbalk zodat de onderkant niet wegvalt. */
@media (max-width: 767px) {
    .form-modal {
        width: calc(100% - 20px);
        height: calc(100dvh - 20px);
    }
}


/* Wat wij doen: knoprij per dienst. position/z-index tillen de knoppen boven
   de .whole-link (z-index 2), zodat de aanvraagknop de modal opent i.p.v. dat
   de overlay de klik opvangt en naar de interne pagina gaat. */
.wat-wij-doen .dienst-acties {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: var(--gutter);
}


/* FAQ-overzichtpagina: ruimte boven elke volgende categorie-kop, zodat de
   groepen duidelijk gescheiden zijn. De kop is al wit via .faq h2. */
.faq-overzicht-page .faq-list + .faq-categorie-titel {
    margin-top: calc(var(--gutter) * 2.5);
}
.page-template-faq-overzicht .accordion {
    background: var(--color-grey-transparent);

}
.page-template-faq-overzicht .faq-categorie-titel{
    margin-top: calc(var(--gutter)*2);
}