/*

Theme Name: BCE Eenpitter Starter
Template: kadence
Author: Cloudwise
Version: 1.0.4
Text Domain: bce-theme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/**
 * ================================================================
 * TYPOGRAFIE-"SCHAKELAARS" — de tussenlaag die het !important-probleem
 * oplost
 * ================================================================
 * Elke h1-h6-regel verwijst naar een LOSSE variabele (--h1-size, enz.)
 * i.p.v. rechtstreeks naar variables.css — die kan daarna overal (een
 * sectie, een media query) herdefinieerd worden ZONDER ooit !important
 * nodig te hebben. CSS-variabelen "vechten" niet op specificiteit zoals
 * gewone eigenschappen — een dichterbij-gedefinieerde waarde wint
 * gewoon via normale overerving.
 *
 * ELK NIVEAU HEEFT NU VIER EIGEN SCHAKELAARS (size/line-height/
 * letter-spacing/font-weight) — dit ontwerp gebruikt namelijk per
 * kop-niveau een andere combinatie, niet meer overal dezelfde
 * letter-spacing/font-weight zoals in een eerdere versie van dit
 * bestand.
 *
 * Voorbeeld: de hero-titel op de homepage moet Display 1 zijn i.p.v.
 * een gewone H1. Dat regel je zo, GEEN !important nodig:
 *
 *   .hero-section {
 *       --h1-size: var(--bce-font-size-display1);
 *       --h1-line-height: var(--bce-line-height-display1);
 *       --h1-letter-spacing: var(--bce-letter-spacing-display1);
 *       --h1-weight: var(--bce-font-weight-display1);
 *   }
 */
:root {
    --h1-size: var(--bce-font-size-h1);
    --h1-line-height: var(--bce-line-height-h1);
    --h1-letter-spacing: var(--bce-letter-spacing-h1);
    --h1-weight: var(--bce-font-weight-h1);

    --h2-size: var(--bce-font-size-h2);
    --h2-line-height: var(--bce-line-height-h2);
    --h2-letter-spacing: var(--bce-letter-spacing-h2);
    --h2-weight: var(--bce-font-weight-h2);

    --h3-size: var(--bce-font-size-h3);
    --h3-line-height: var(--bce-line-height-h3);
    --h3-letter-spacing: var(--bce-letter-spacing-h3);
    --h3-weight: var(--bce-font-weight-h3);

    --h4-size: var(--bce-font-size-h4);
    --h4-line-height: var(--bce-line-height-h4);
    --h4-letter-spacing: var(--bce-letter-spacing-h4);
    --h4-weight: var(--bce-font-weight-h4);

    --h5-size: var(--bce-font-size-h5);
    --h5-line-height: var(--bce-line-height-h5);
    --h5-letter-spacing: var(--bce-letter-spacing-h5);
    --h5-weight: var(--bce-font-weight-h5);

    --h6-size: var(--bce-font-size-h6);
    --h6-line-height: var(--bce-line-height-h6);
    --h6-letter-spacing: var(--bce-letter-spacing-h6);
    --h6-weight: var(--bce-font-weight-h6);

    --display1-size: var(--bce-font-size-display1);
    --display1-line-height: var(--bce-line-height-display1);
    --display1-letter-spacing: var(--bce-letter-spacing-display1);
    --display1-weight: var(--bce-font-weight-display1);

    --display2-size: var(--bce-font-size-display2);
    --display2-line-height: var(--bce-line-height-display2);
    --display2-letter-spacing: var(--bce-letter-spacing-display2);
    --display2-weight: var(--bce-font-weight-display2);
}-regel.
 */
/**
 * SCOPE, BEWUST: :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper)
 * i.p.v. kaal "h1" — anders lekken deze stijlen door naar de WordPress-
 * beheeromgeving zelf (werkbalken/panelen zitten ook gewoon in een
 * <body>-tag). .editor-styles-wrapper is Gutenberg's eigen class rond
 * ALLEEN het content-bewerkgebied (waar we deze stijlen WEL willen),
 * wp-admin op de <body> identificeert altijd een beheerpagina (waar we
 * ze NIET willen). De Customizer heeft GEEN wp-admin-class (wel
 * wp-customizer) maar laadt dit bestand wel, via enqueue_block_editor_assets
 * voor de widgets-editor — vandaar ook :not(.wp-customizer), net als in CCS. :where() telt bewust niet mee in de specificiteit,
 * dus dit heeft geen invloed op de rest van onze !important-opzet.
 */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h1,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h2,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h3,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h4,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h5,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h6 {
    font-family: var(--bce-font-heading) !important;
}

/* Kleur en marge BEWUST zonder !important (en via :where() zonder
   specificiteit): elk component kan ze gewoon overschrijven, bv. een
   witte kop in een blauw blok of een eigen marge onder een kaarttitel. */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h1,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h2,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h3,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h4,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h5,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h6 {
    color: var(--bce-color-text);
    margin: 0 0 var(--bce-space-sm);
}

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h1 {
    font-size: var(--h1-size) !important;
    line-height: var(--h1-line-height) !important;
    letter-spacing: var(--h1-letter-spacing) !important;
    font-weight: var(--h1-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h2 {
    font-size: var(--h2-size) !important;
    line-height: var(--h2-line-height) !important;
    letter-spacing: var(--h2-letter-spacing) !important;
    font-weight: var(--h2-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h3 {
    font-size: var(--h3-size) !important;
    line-height: var(--h3-line-height) !important;
    letter-spacing: var(--h3-letter-spacing) !important;
    font-weight: var(--h3-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h4 {
    font-size: var(--h4-size) !important;
    line-height: var(--h4-line-height) !important;
    letter-spacing: var(--h4-letter-spacing) !important;
    font-weight: var(--h4-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h5 {
    font-size: var(--h5-size) !important;
    line-height: var(--h5-line-height) !important;
    letter-spacing: var(--h5-letter-spacing) !important;
    font-weight: var(--h5-weight) !important;
}
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) h6 {
    font-size: var(--h6-size) !important;
    line-height: var(--h6-line-height) !important;
    letter-spacing: var(--h6-letter-spacing) !important;
    font-weight: var(--h6-weight) !important;
}

input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=range]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus{
    box-shadow:none !important;
}

h1, h2, h3 {
    hyphens: auto;
    div{
        hyphens: auto;
    }
}

/**
 * KOP-SCHAKELAARS PER COMPONENT — waar een component een ander
 * kopniveau toont dan het HTML-element (bv. een h3 die er als H1 uitziet).
 * Via de schakelaar-variabelen i.p.v. losse font-sizes, zodat de
 * basisregel hierboven (met !important) ze gewoon oppikt en de mobiele
 * waarden automatisch meekomen.
 */
.bighero,
.ptrn-herobigimage {
    --h1-size: var(--display1-size);
    --h1-line-height: var(--display1-line-height);
    --h1-letter-spacing: var(--display1-letter-spacing);
    --h1-weight: var(--display1-weight);
}

/* CTA-kop is altijd H1, ook als het een h2/h3 is */
.cta-pattern,
.cta-pattern-wide {
    --h2-size: var(--h1-size);
    --h2-line-height: var(--h1-line-height);
    --h2-letter-spacing: var(--h1-letter-spacing);
    --h3-size: var(--h1-size);
    --h3-line-height: var(--h1-line-height);
    --h3-letter-spacing: var(--h1-letter-spacing);
}

/* "Het laatste nieuws" (h4) als H2 */
.newsslider {
    --h4-size: var(--h2-size);
    --h4-line-height: var(--h2-line-height);
    --h4-letter-spacing: var(--h2-letter-spacing);
}

/* Locatienamen in het locatiefilter (h3) als H5 */
.locatiefilter {
    --h3-size: var(--h5-size);
    --h3-line-height: var(--h5-line-height);
    --h3-letter-spacing: var(--h5-letter-spacing);
}

/* FAQ-blok (overal, niet alleen in .ptrn-faq): categoriekop (h5) als H3,
   vraag (h6) als H5 */
.carmel-faq-accordion__category-title {
    --h5-size: var(--h3-size);
    --h5-line-height: var(--h3-line-height);
    --h5-letter-spacing: var(--h3-letter-spacing);
}
.carmel-faq-accordion__question-text {
    --h6-size: var(--h5-size);
    --h6-line-height: var(--h5-line-height);
    --h6-letter-spacing: var(--h5-letter-spacing);
    --h6-weight: var(--h5-weight);
}

/* Infohub-categorietitels (h3) als H6, teamnamen (h3) als H4 */
.carmel-infohub__category-title {
    --h3-size: var(--h6-size);
    --h3-line-height: var(--h6-line-height);
    --h3-letter-spacing: var(--h6-letter-spacing);
    --h3-weight: var(--h6-weight);
}
.carmel-team-slider__name,
.carmel-team-grid__name {
    --h3-size: var(--h4-size);
    --h3-line-height: var(--h4-line-height);
    --h3-letter-spacing: var(--h4-letter-spacing);
}

/**
 * MOBIEL — bevestigde Figma-waarden (afgelezen op het TYPOGRAPHY-canvas
 * in Brand Guide, kolom "Mobile"/Figma's mobiele font-size-variabelen).
 * Line-height blijft procentueel gelijk aan desktop (Figma definieert
 * geen apart mobiel line-height); letter-spacing is herberekend met
 * dezelfde %-verhouding als desktop, tegen de kleinere mobiele
 * font-size (H4-H6 hebben sowieso altijd letter-spacing normal).
 */
@media (max-width: 782px) {
    :root {
        --h1-size: var(--bce-font-size-h1-mobile);
        --h1-line-height: var(--bce-line-height-h1);
        --h1-letter-spacing: var(--bce-letter-spacing-h1-mobile);
        --h2-size: var(--bce-font-size-h2-mobile);
        --h2-line-height: var(--bce-line-height-h2);
        --h2-letter-spacing: var(--bce-letter-spacing-h2-mobile);
        --h3-size: var(--bce-font-size-h3-mobile);
        --h3-line-height: var(--bce-line-height-h3);
        --h3-letter-spacing: var(--bce-letter-spacing-h3-mobile);
        --h4-size: var(--bce-font-size-h4-mobile);
        --h4-line-height: var(--bce-line-height-h4);
        --h5-size: var(--bce-font-size-h5-mobile);
        --h5-line-height: var(--bce-line-height-h5);
        --h6-size: var(--bce-font-size-h6-mobile);
        --h6-line-height: var(--bce-line-height-h6);
        --display1-size: var(--bce-font-size-display1-mobile);
        --display1-line-height: var(--bce-line-height-display1);
        --display1-letter-spacing: var(--bce-letter-spacing-display1-mobile);
        --display2-size: var(--bce-font-size-display2-mobile);
        --display2-line-height: var(--bce-line-height-display2);
        --display2-letter-spacing: var(--bce-letter-spacing-display2-mobile);
    }
}

.carmel-display-1 {
    font-family: var(--bce-font-heading) !important;
    font-size: var(--display1-size) !important;
    line-height: var(--display1-line-height) !important;
    letter-spacing: var(--display1-letter-spacing) !important;
    font-weight: var(--display1-weight) !important;
}

.carmel-display-2 {
    font-family: var(--bce-font-heading) !important;
    font-size: var(--display2-size) !important;
    line-height: var(--display2-line-height) !important;
    letter-spacing: var(--display2-letter-spacing) !important;
    font-weight: var(--display2-weight) !important;
}

/**
 * VOORBEELD — hoe je de hero-H1 op Display 1 zet i.p.v. gewone H1:
 * gewoon deze class op de hero-SECTIE (niet op de kop zelf).
 */
.carmel-hero-uses-display1 {
    --h1-size: var(--display1-size);
    --h1-line-height: var(--display1-line-height);
    --h1-letter-spacing: var(--display1-letter-spacing);
    --h1-weight: var(--display1-weight);
}

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper),
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) p,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) ul,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) ol,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) li {
    font-family: var(--bce-font-body) !important;
    font-weight: var(--bce-font-weight-regular) !important;
    font-size: var(--bce-font-size-body-large) !important;
    letter-spacing: var(--bce-letter-spacing-body-large) !important;
    line-height: var(--bce-line-height-body-large) !important;
    color: var(--bce-color-text) !important;
}

/* Kleinere tekst-varianten — ook hier weer eigen classes, want er
   bestaat geen apart HTML-element per formaat. */
.carmel-text-body-medium { font-size: var(--bce-font-size-body-medium) !important; }
.carmel-text-caption     { font-size: var(--bce-font-size-caption) !important; }
.carmel-text-eyebrow     { font-size: var(--bce-font-size-eyebrow) !important; }


.mobile-header-button-wrap .mobile-header-button {
    width: calc(100% - 32px);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 500!important;
    line-height: 18px !important;
    border-radius: 16px!important;
}


.site-header-item .mobile-header-button-wrap {
    width:100%;
    .mobile-header-button-inner-wrap {
        width: 100%;
    }
}


/**
 * ================================================================
 * KNOPPEN — leunt volledig op variables.css
 * ================================================================
 * Target Kadence's eigen, al-bekende knop-classes (bevestigd werkend
 * bij een eerder project) i.p.v. een generieke "button"-selector.
 */
.kb-button.wp-block-button__link,
.wp-block-search__button {
    font-family: var(--bce-font-heading) !important;
    font-size: var(--bce-font-size-button-large) !important;
    font-weight: var(--bce-font-weight-medium) !important;
    border-radius: var(--bce-btn-radius) !important;
    padding: var(--bce-btn-padding) !important;
}

.kb-button.wp-block-button__link {
    background-color: var(--bce-color-btn-primary-bg) !important;
    color: var(--bce-color-btn-primary-text) !important;
}

.kb-button.wp-block-button__link.button-style-secondary {
    background-color: var(--bce-color-btn-secondary-bg) !important;
    color: var(--bce-color-btn-secondary-text) !important;
    border: 1px solid var(--bce-color-btn-secondary-border) !important;
}

 #main-header .site-header-row-layout-contained{
    margin-top:20px;
}
.site-main-header-wrap .site-header-row-container-inner{
    border-radius:24px;
}

.site-main-header-wrap:has(.menu-item--toggled-on){
    > div{
        z-index:20;
        position: relative;
    }

    &:after{
        content:'';
        background-color:rgba(0,0,0,0.4);
        height:calc( 100vh + 130px);
        width:100vw;
        top:-130px;
        left:calc(0px - ((100vw - 1440px ) / 2 ));
        position: absolute;
        z-index:10
    }
}

.site-main-header-wrap ul.sub-menu{
    p{
        color: #1D1D1B !important;
        font-size:13px !important;
        font-weight:400 !important;
        line-height:100% !important;
        margin-bottom:24px !important;
    }
}


/**
 * ================================================================
 * HERO ONDER DE HEADER — één plek voor ALLE hero's
 * ================================================================
 * Elke hero schuift met een negatieve marge onder de menubalk door en
 * steekt er precies --bce-hero-overlap boven uit. Voorheen had elke
 * hero een eigen, in de editor ingestelde marge (-86/-101/-102/-104/
 * -105px), waardoor de ene hero verder uitstak dan de andere.
 * BEWUST met !important: wint zo van de rij-marges die in Kadence
 * per blok zijn ingevuld, die hoeven dus niet meer gelijk te staan.
 *
 * --bce-header-bar-height moet gelijk zijn aan de hoogte van de witte
 * menubalk (#main-header / #mobile-header .site-header-row-container-inner).
 */
:root {
    --bce-header-bar-height: 81px;
    --bce-hero-overlap: 20px;
    --bce-hero-pull: calc(-1 * (var(--bce-header-bar-height) + var(--bce-hero-overlap)));
}

@media (max-width: 782px) {
    :root {
        --bce-header-bar-height: 49px; /* zie de mobiele header onderaan dit bestand */
        --bce-hero-overlap: 8px;       /* Figma Home - Mobile: hero 8px van boven, header op 16px */
    }
}

/* Pagina-hero's: eerste rij in de content */
.entry-content > .bighero,
.entry-content > .herowrapper,
.entry-content > .ptrn-herobigimage,
/* Kadence Element-sjablonen (nieuwsbericht, infohub): de hero is de
   eerste gekleurde rij binnen een full-width wrapper-rij */
.entry-content > .kb-row-layout-wrap.alignfull:first-of-type:not(.bighero, .herowrapper, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap.kt-row-has-bg:first-of-type,
/* zoekresultaten: het witte vlak is #primary zelf */
body.search-results #inner-wrap #primary,
body.search-no-results #inner-wrap #primary {
    margin-top: var(--bce-hero-pull) !important;
}

/* Kadence zet op mobiel 32px boven de content van losse berichten —
   die zou de hero weer onder de header vandaan duwen. */
#primary.content-area:has(> .content-container .entry-content > .kb-row-layout-wrap.alignfull:first-of-type:not(.bighero, .herowrapper, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap.kt-row-has-bg:first-of-type) {
    margin-top: 0;
}

/* bighero  homepage */
.bighero {

    h1{
        font-size:var(--display1-size);
        font-weight:var(--display1-weight);
        letter-spacing:var(--display1-letter-spacing);
        line-height:var(--display1-line-height);
    }

    --bce-font-size-body-large:var(--bce-font-size-body-xlarge);
    --body-line-height:var(--bce-line-height-body-xlarge);
    --bce-font-weight-regular:var(--bce-weight-body-xlarge);



    .bigherocontentrow{
        padding-bottom:80px;
        width:100%;
        justify-content: space-between;
        > div{
            padding-left:0;
            padding-right:0;

        }
    }



    .zoekboxheader div.wp-block-search__inside-wrapper {
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(20px);
        will-change: backdrop-filter;
        display: flex;
        width: 462px;
        height: 64px;
        padding: 8px 8px 8px 24px;
        justify-content: space-between;
        align-items: center;
        width:100%;
        input[type=search] {
            color: #fff;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%;
            background-color: transparent;
            border: none;
            padding: 0;
        }
        .wp-block-search__button{
            background-color:#3FB498;
            background-image:url(images/search-button.svg);
            background-size: 100%;
            transition: 0.3s;
            &:hover{
                background-color:#3FB498;
            }
        }
    }

    .zoekboxheader:hover div.wp-block-search__inside-wrapper{
        .wp-block-search__button{
            background-size:120%
        }
    }

    .js-search-overlay{
        font-size:16px;
        line-height:17px;
        font-weight:500;
        color:#fff;
        margin-top: -41px;
        top:auto;
        transform: none;
        margin-left: 10px;
        .js-typed-suffix{
            height:17px;
        }
    }

    > div > div > .kt-inside-inner-col{
        overflow:hidden;
        border-radius:24px;
        &:before{
            content:'';
            background-image:url(images/bigherocornerimage.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 315px;
            height: 294px;
            aspect-ratio: 61/48;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
        }
    }
    .kt-row-layout-overlay {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0, 0.9) 101%);
    }

    


}



@media(min-width:1024px){
    .bighero {


        h1{
            margin-top:40px !important
        }

        .bigherocontentrow{
            > div{
                display: flex;
                justify-content: space-between;
                > div{

                    &:first-child{
                        width:40%;
                    }

                    &:nth-child(2){
                        width:32%;
                        > div{
                            width:100%;
                        }
                    }
                }
            }
        }

    }
}

@media(max-width:1400px) {
    .bighero {

        > div > div > .kt-inside-inner-col{
            overflow:hidden;
            &:before{
                width: 200px;
                height: 180px;
            }
        }
    }
}
@media(min-width:1024px){
    .bighero.herowrapper{
        > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap{
            min-height:900px;
        }

        h1{
            max-width:505px;
        }
    }
}

@media(max-width:1024px){
    .bighero{
        > div > div > .kt-inside-inner-col{
        overflow:hidden;
            &:before{
                width: 150px;
                height: 127px;
            }
        }

        h1{
            font-size:var(--bce-font-size-display1-mobile);
            letter-spacing:var(--bce-letter-spacing-display1-mobile);
        }

        > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap{
            height:auto;
        }
    }
    .hero-quick-links {
        margin-bottom:80px !important;
        h5{
            font-size:20px;
        }
    }
}

@media(max-width:768px){
    .bighero + .hero-quick-links {
        margin-top:-180px !important;
    }
}

@media(max-width:400px){
    .bighero + .hero-quick-links {
        margin-top:-140px !important;
    }
}
/* hero-quick-links */
.hero-quick-links {
    margin-bottom:120px  !important;
    .quick-link-content{
        --h5-color: #000;

        margin-bottom:24px;

        .kt-inside-inner-col{
            display:flex;
            position: relative;
            gap:16px;
            align-items: center;
        }

        h5{
            margin-bottom:0;
            --arrow-bg-x: 0px;
            &::after {
                content: '';
                background-image: url(images/arrow-white.svg);
                background-repeat: no-repeat;
                background-position: calc(50% + var(--arrow-bg-x)) center;
                background-color: rgba(49, 39, 131, 1);
                border-radius: 8px;
                padding: 10px;
                justify-content: center;
                align-items: center;
                display: flex;
                width: 32px;
                height: 32px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
    .quicklinkwrapper{
        background-color:#fff;
        padding: 24px;
        display: flex;
        border-radius:16px;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-24, 24px);
        flex: 1 0 0;
        > div{
            padding:0;
            width:100%;
        }

        &:hover{
            .quicklinkimage{
                img{
                    transform: scale(1.1);
                }
            }
        }
    }

    .quicklinkimage{
        height: 246px;
        width:100%;
        border-radius:8px;
        margin-bottom:0 !important;
        overflow: hidden;
        img{
            border-radius:8px;
            height: 246px;
            width:100%;
            object-fit: cover;
            transition: 0.3s;
        }
    }
}
.wp-block-kadence-rowlayout {
    margin-bottom: 7.5rem;
}

.site-top-header-inner-wrap nav.header-navigation ul .sub-menu{
    background-color:var(--bce-color-white) !important;
    border-radius: 0 0 8px 8px;
}
footer.site-footer{
    padding:0px;

    p, p a{
        letter-spacing:0.7px !important;
        font-weight:300 !important;
    }
    .wp-block-kadence-rowlayout{
        margin-bottom:34px;
    }

    .linklist{
        a{
            color: var(--bce-color-text-light);
            font-size:20px;

            &:after{
                border-radius: 8px;
                border: 1px solid var(--bce-color-border-on-dark);
                /* zelfde pijl als de knoppen en slider-pijlen (i.p.v. de pijl uit de plugin) */
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M16.9912 8.00003C12.5732 8.00003 8.99121 4.418 8.99121 0' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3Cpath d='M0 8H16.9964C12.5784 8 8.99638 11.582 8.99638 16' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3C/svg%3E");
                background-size: 17px 16px; /* zelfde maat als de slider-pijlen (ook een 32px-kader) */
            }        }    }

    #block-42{
        p{
            font-size:20px !important;
            line-height:120% !important;
                        &:last-child{
                margin-bottom:0;
            }
        }
    }

    .footer-html{
        margin-top:0;
    }

    .site-footer-middle-section-3{
        p.wp-block-paragraph{
            margin-top:0;

            a{
                color:#fff !important
            }
        }
    }

    .kb-button {
        padding:12px !important;
        border-radius:8px;
    }

}

@media(min-width:1024px){
    footer.site-footer{
        padding:0 16px 16px 16px;
    }
}

@media(max-width:1300px){
    footer.site-footer {
        & .linklist {
            a {
                font-size: 16px;
            }
        }
    }
}
@media(max-width:1166px){
    footer.site-footer {
        & .linklist {
            a {
                font-size: 14px;
            }
        }
    }
}


@media(max-width:1024px){
    footer.site-footer {
        p{
            font-size:16px;
        }

        #block-42{
            p{
                font-size:16px !important;
                &:last-child{
                    margin-bottom:0;
                }
            }
        }
        #block-44{
            svg{
                margin-top:10px;
            }

            .kb-row-layout-wrap{
                margin-bottom:0;
            }
        }
        .footer-html{
            margin-bottom:0;
        }
        section.widget_text{
            margin-bottom:0 !important;
        }
    }
    .site-top-footer-inner-wrap{
        grid-row-gap:15px !important;
    }

    .site-middle-footer-wrap{
        .footer-widget-area-inner > .widget_block.widget_text:first-child p{
            border-bottom:0;
        }
    }
}




@media(max-width:1024px){
    .wp-block-kadence-rowlayout {
        margin-bottom: 80px;
    }
}




#mobile-header{
    margin-top:16px;
}

@media(max-width:1024px){
    .footer-widget-area-inner > .widget_block.widget_text:first-child p{
        border-bottom:1px solid var(--bce-color-white);
        padding-bottom:16px;
    }

}


@media(max-width:1200px){
    .herowrapper p{
        font-size:18px;
        line-height: 130%;
        letter-spacing: -0.18px;
    }
}


nav#site-navigation{

    ul:not(.sub-menu) > li{
        border-left:0.5px solid var(--bce-color-border-light);
        padding-left:8px;
        padding-right:8px;

        &:last-child{
            border-right:0.5px solid var(--bce-color-border-light);
        }
    }
}
.carmel-menu-hover-link{
	margin-bottom:16px;
	font-size:20px;
	color:rgba(0, 0, 0, 1);}



@media(max-width:1025px) {
	.carmel-menu-hover-link{
		margin-bottom:16px;
		font-size:16px;

	}
    #mobile-secondary-site-navigation{
        padding: 0 24px;
    }

    .mobile-navigation ul li .sub-menu{
        border-bottom: 0px solid var(--bce-color-border-light);
        border-top: 0px solid var(--bce-color-border-light);
        padding:16px;

        a{
            font-weight:400;
            font-size:16px;
        }
    }

    .bighero{
        margin-bottom: 90px !important;
    }
}



@media(max-width:768px) {
    .bighero{
        margin-bottom: 90px !important;
    }}
.mobile-drawer-content > div:first-child{
	background-color:var(--bce-color-white);
	border-radius:0 0 16px 16px;
    padding:16px;
}


#mobile-drawer.popup-drawer .drawer-content{
    padding:0 16px ;
}
div#mobile-drawer .drawer-header{
    background-color:var(--bce-color-white);
    border-radius:16px 16px 0 0;
    /* Logo en kruisje blijven bovenin staan als het menu scrolt (de lade
       zelf is de scrollcontainer). De schaduw in de achtergrondkleur dekt
       de 16px-strook erboven af, zodat het menu daar niet doorheen schuift. */
    position: sticky;
    top: 0; /* = net onder de 16px padding van de lade */
    z-index: 3;
    flex-shrink: 0; /* de lade is een flex-kolom: bij een lang menu kromp de kop */
    box-shadow: 0 -16px 0 0 var(--bce-color-bg);
}
.drawer-inner{
    padding-top:16px;
}

/* Kop van het uitgeklapte menu (logo + kruisje) precies op de plek van de
   gewone menubalk. Kadence gaf 24px links/rechts; de balk heeft 16px links
   en 8px rechts (mobiel + 1px rand), 81px hoog (mobiel 48px). */
#mobile-drawer .drawer-header {
    padding: 0 8px 0 16px !important;
    height: 81px;
    min-height: 81px;
}
/* zelfde hoogte als het logo in de balk; de plugin begrenst het logo in de
   lade met --carmel-drawer-logo-height (standaard 32px) */
#mobile-drawer .drawer-header {
    --carmel-drawer-logo-height: 44.5px;
}
#mobile-drawer .drawer-header .carmel-drawer-logo {
    height: var(--carmel-drawer-logo-height) !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
}
@media (max-width: 782px) {
    #mobile-drawer .drawer-header {
        padding: 0 9px 0 17px !important; /* 8/16 + de 1px rand van de balk */
        height: 48px;
        min-height: 48px;
    }
    #mobile-drawer .drawer-header {
        --carmel-drawer-logo-height: 32px;
    }
}

/* Sluitknop (kruisje) in het mobiele menu: zelfde maat en rand als de
   hamburger-knop in de header (38×38, mobiel 32×32; rand 1px, radius 8). */
#mobile-drawer .drawer-header .menu-toggle-close {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    box-sizing: border-box; /* rand valt binnen de 38/32px, zoals bij de hamburger */
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    flex-shrink: 0;
}
@media (max-width: 782px) {
    #mobile-drawer .drawer-header .menu-toggle-close {
        width: 32px;
        height: 32px;
    }
}
/* het kruisje midden in het vak (Kadence zet de streepjes absoluut) */
#mobile-drawer .drawer-header .menu-toggle-close .toggle-close-bar {
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    margin: -1px 0 0 -8px !important;
    transform-origin: center !important;
}
#mobile-drawer .drawer-header .menu-toggle-close .toggle-close-bar:first-child {
    transform: rotate(45deg) !important;
}
#mobile-drawer .drawer-header .menu-toggle-close .toggle-close-bar:last-child {
    transform: rotate(-45deg) !important;
}

/* Zoekknop in het uitgeklapte menu (js/search-bar.js): zelfde maat en rand
   als het zoek-icoon in de balk (34×34), 10px links van het kruisje. */
#mobile-drawer .drawer-header .carmel-drawer-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 10px 0 auto;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--bce-color-text);
    cursor: pointer;
    flex-shrink: 0;

    .search-toggle-icon {
        display: flex;
        font-size: 20px;
    }
    svg {
        width: 20px;
        height: 20px;
    }
}

/* Contactknop binnen het witte vlak (zoals bij CCG): het hoofdmenu loopt
   door tot onder de knop, de knop-rij krijgt de ronde hoeken onder. */
.mobile-drawer-content > div:first-child:has(+ .site-header-item .mobile-header-button-wrap) {
    border-radius: 0;
    margin-bottom: 0;
}
.mobile-drawer-content > div:first-child + .site-header-item:has(.mobile-header-button-wrap) {
    margin-top: 0;
    margin-bottom: 0;
}
.mobile-drawer-content .site-header-item .mobile-header-button-wrap {
    background-color: var(--bce-color-white);
    border-radius: 0 0 16px 16px;
    padding: 0 0 16px !important;
    margin: 0 !important;
}
.mobile-drawer-content .mobile-header-button-wrap .mobile-header-button-inner-wrap {
    margin: 0 !important;
    padding: 0 !important;
}
/* boven: de 16px padding van het menu; onder: de 16px van de knop-rij */
.mobile-drawer-content .mobile-header-button-wrap .mobile-header-button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-singular .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button{
    border:0;
}

.wp-singular .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, .mobile-navigation ul li:not(.menu-item-has-children):last-child a{
    border:0;
}
#mobile-secondary-site-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap, #mobile-secondary-site-navigation ul li:not(.menu-item-has-children):last-child a{
    border:none;
}ul#mobile-menu >  li{
    border-bottom:1px solid var(--bce-color-border-light);
}

/* Tik op een hoofditem met submenu klapt uit: de toggle ligt over de hele rij
   (zelfde aanpak als theme-ccs) */
#mobile-menu .drawer-nav-drop-wrap,
#mobile-secondary-menu .drawer-nav-drop-wrap {
    position: relative;
}

#mobile-menu .drawer-nav-drop-wrap > .drawer-sub-toggle,
#mobile-secondary-menu .drawer-nav-drop-wrap > .drawer-sub-toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: transparent;
}

.mobile-navigation ul li a
header.site-header:has(.menu-item--toggled-on) + main#inner-wrap:before{
    content:'';
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0.6);
    top:0;
    left:0;
    position:absolute;
    z-index:3;
    position: fixed;
}

/* zoekresultaten */

.search-results .site-main, .search-no-results .site-main{
    padding:120px 0 100px;
    max-width:900px;
    margin:0 auto
}

.search-results .entry-taxonomies a{
    font-size:14px;
    text-transform: none;
}

.search-results .site-main h1{
    margin-bottom:40px;
}
.search-results .site-main .entry-list-item article{
    padding:40px;
    border-radius:24px;
    background-color:rgba(249, 247, 247, 1);
}.search-results .site-main .entry-list-item article h2{
    margin-bottom:24px;
}

.search-results .site-main .entry-list-item article .wp-element-button{
    border-radius:8px;
        background-color:var(--bce-color-btn-accent);
    color:var(--bce-color-white);
}

.search-no-results section.error{
    order:3;

    form{
        display:none
    }

}

#main-header .main-navigation .primary-menu-container > ul > li.menu-item > a{
    padding-left:16px;
    padding-right:16px;
}

#main-header .main-navigation ul#primary-menu > .menu-item--toggled-on > a{
    height: 75%;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    color:#020A0A;
}

.site-main-header-wrap .site-header-row-container-inner>.site-container{
    border-radius:24px;
}

@media(max-width:1304px){
    #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a{
        padding-left:8px;
        padding-right:8px;
    }
    nav#site-navigation {
        ul:not(.sub-menu) > li {
            padding-left:8px;
            padding-right:8px;

        }
    }
}

@media(max-width:1152px){
    #main-header .main-navigation .primary-menu-container > ul > li.menu-item > a{
        padding-left:4px;
        padding-right:4px;
    }
}


/* infohub */
.carmel-infohub__content section{
    padding:40px;
    background-color:var(--bce-color-white);
    border-radius:24px;
}

.carmel-infohub__nav{
    padding:40px;
    background-color:var(--bce-color-white);
    border-radius:24px;
}
.infohub-template-default p,
.infohub-template-default ul,
.infohub-template-default li,
.infohub-template-default a,
.infohub-template-default tr,
.infohub-template-default td{
    --bce-line-height-body-large: 120%;
    --bce-font-size-body-large: 20px;
}





@media(max-width:1025px){
    .iconmenu{
        padding:16px;

    }
    .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered,
    .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button,
    .mobile-toggle-open-container #mobile-toggle,
    .iconmenu{
        padding:6px;
        border-radius: 8px;
    }
    .mobile-toggle-open-container #mobile-toggle{
        padding:8px;
    }}

/* Mobiel menu al tot en met 1199px (Kadence wisselt pas onder 1025px):
   tussen ±1040 en 1199px paste het menu nog net, met 7–40px ruimte. De
   mobiele header heeft daar dezelfde balk en hetzelfde logo; alleen de
   knopmaten van hierboven moeten mee. */
@media (min-width: 1025px) and (max-width: 1199px) {
    #masthead #main-header {
        display: none !important;
    }
    #masthead #mobile-header {
        display: block !important;
    }
    #mobile-header .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered,
    #mobile-header .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button {
        padding: 6px;
        border-radius: 8px;
    }
    #mobile-header .mobile-toggle-open-container #mobile-toggle {
        padding: 8px;
        border-radius: 8px;
    }

    /* Uit het ≤1025px-blok van de plugin (assets/css/shared/site.css) */
    #mobile-header .search-toggle-open-container .search-toggle-open.search-toggle-style-bordered,
    #mobile-header .mobile-header-button-wrap .mobile-header-button-inner-wrap .mobile-header-button,
    #mobile-header .mobile-toggle-open-container #mobile-toggle {
        border: 0.5px solid rgba(0, 0, 0, 0.3);
    }
    #mobile-header .search-toggle-open-container .search-toggle-open .search-toggle-icon {
        font-size: 20px !important;
    }
    .mobile-navigation ul li .sub-menu a {
        line-height: 1.2;
        padding: 0 .5em;
    }
}

.knop-terug{    span{
        font-weight:400;
    }
}

/* kalender */
.simcal-calendar{

    .simcal-calendar-head{
        background-color:var(--bce-color-white);
    }

    .simcal-nav h3{
        color: var(--bce-color-text);
        text-align: center;
        font-family: Roboto;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .simcal-nav-button i{
        color: var(--bce-color-text);
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .simcal-week-day {
        color: var(--bce-color-text);
        text-align: center;
        font-family: Roboto;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding: 10px 0;
    }

    .simcal-day-label{
        color: var(--bce-color-text) !important;
        text-align: right;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        background-color:var(--bce-color-white) !important
    }

    .simcal-event-title{
        color: var(--bce-color-text);
        font-family: Roboto;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

}

.entry-content .simcal-default-calendar-grid .simcal-day{
    padding: 8px 8px 16px 8px !important;
    background-color:var(--bce-color-white) !important;}

.cta-pattern{
    .kt-inside-inner-col {
        align-items: flex-start !important;
        .line{
            text-align: left !important;
        }
    }
    > .kb-theme-content-width:first-child{
        padding-top:80px !important;
        padding-bottom:80px !important;
    }
}

.editor-styles-wrapper .cta-pattern:has(.kb-theme-content-width) .components-resizable-box__container{
    display: none;
}
.editor-styles-wrapper .cta-pattern:has(.kb-theme-content-width){
    p, h3{
        text-align: left;
    }
    .wp-block-kadence-advancedbtn .kt-btn-align-center{
        justify-content: flex-start;
    }
}

@media(min-width:1024px){
    .cta-pattern{
        .kt-inside-inner-col {
            padding-left:80px !important;
            pdading-right:80px !important;
        }
    }
}

.cta-pattern, .cta-wide{
    margin-top: 120px !important;
}

.cta-pattern, .cta-pattern-wide{
    h1, h2, h3{
        letter-spacing: -1.28px;
        text-align: center;
        font-weight: 500;
        line-height: 90%;
        font-size:64px;
        margin-bottom:40px;
        max-width:960px;
    }
    > div:first-child{
        padding-top:160px !important;
        padding-bottom:160px !important;
        p{
            letter-spacing: -0.72px;
            line-height: 120%;
            font-weight: 400;
            margin-bottom:16px !important;
            align-items: center;
            max-width:960px;
        }
    }

    .kt-inside-inner-col {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .kb-buttons-wrap{
        span.kb-button{
            border-width:1px;
        }
    }
    &:after{
        content:'';
        background-image:url('images/vertical-banner-left.svg');
        width:32px;
        height:100%;
        position: absolute;
        right:0;
        top:0;
        border-radius:0 24px 24px 0;
        animation: carmel-cta-bars-scroll 8s linear infinite;
    }
}

/**
 * ================================================================
 * BEWEGENDE BALKEN — naadloos oneindig doorlopen
 * ================================================================
 * De animatie schuift de achtergrond precies ÉÉN tegel op (de breedte
 * of hoogte van de SVG). Aan het eind staat het patroon dan exact
 * weer op dezelfde plek als aan het begin, dus geen sprong.
 *
 * De tegelmaat komt uit --bar-tile, zodat elke balk zijn eigen SVG-
 * maat kan doorgeven:
 *   hero-pattern.svg          1840px breed  (4 banen van 460px)
 *   cta-mobile(2).svg          390px breed
 *   mobile-top-banner.svg      342px breed
 *   vertical-banner-left.svg   661px hoog   (standaard verticaal)
 *
 * LET OP: wijzig je een SVG, pas dan ook de --bar-tile-waarde aan.
 * Definieer deze keyframes maar ÉÉN keer in dit bestand — een latere
 * @keyframes met dezelfde naam overschrijft deze.
 */
@keyframes carmel-cta-bars-scroll-horizontal {
    from { background-position-x: 0; }
    to   { background-position-x: var(--bar-tile, 1440px); }
}
@keyframes carmel-cta-bars-scroll {
    from { background-position-y: 0; }
    to   { background-position-y: var(--bar-tile, 661px); }
}

.cta-wide:last-child{
    margin-bottom:16px !important

}

/* editor style */
.cta-pattern-wide > .innerblocks-wrap{
    padding-top:160px;
    padding-bottom:160px;
}


:root div.cta-pattern, :root div.cta-pattern.blauw, :root div.cta-pattern-wide, :root div.cta-wide.blauw .cta-pattern-wide{
    --bce-color-text:#fff;
    background-color:#312783;
    border-radius:24px;

    h1, h2, h3, p{
        color:#fff;
    }
    .kb-buttons-wrap{
        span.kb-button:first-child{
            background-color:#fff !important;
            span.kt-btn-inner-text{
                color:#312783;
            }
            svg{
                path{
                    stroke:#312783;
                }
            }
        }
        span.kb-button:nth-child(2){
            background-color:#312783;
            border-color:rgba(249, 247, 247, 0.25) !important;
            span.kt-btn-inner-text{
                color:rgba(249, 247, 247, 1);
            }
            svg{
                path{
                    stroke:rgba(249, 247, 247, 1);
                }
            }

        }
    }
}

:root div.cta-wide{
    background-color:transparent !important;
}


div.cta-pattern.blauw{
    .kb-button.wp-block-button__link{
        --bce-color-btn-primary-bg:#F9F7F7;
        --bce-color-btn-primary-text:rgba(2, 10, 10, 1);

        svg path{
            stroke:rgba(2, 10, 10, 1);
        }

        + .kb-button.wp-block-button__link{
            color:rgba(245, 245, 244, 1) !important;
            border-color:rgba(245, 245, 244, 0.25) !important;

                svg path{
                    stroke:rgba(245, 245, 244, 1) ;
                }
        }
    }
}

:root div.cta-pattern.geel,:root div.cta-wide.geel .cta-pattern-wide{
    --bce-color-text:rgba(2, 10, 10, 1);
    background-color:#FDC300;

    h1, h2, h3, p{
        color:rgba(2, 10, 10, 1) !important;
    }
    .kb-buttons-wrap{
        span.kb-button:first-child{
            background-color:#312783 !important;
            span.kt-btn-inner-text{
                color:rgba(249, 247, 247, 1);
            }
            svg{
                path{
                    stroke:rgba(249, 247, 247, 1);
                }
            }
        }
        span.kb-button:nth-child(2){
            background-color:#FDC300;
            border-color:rgba(2, 10, 10, 0.25) !important;
            span.kt-btn-inner-text{
                color:rgba(2, 10, 10, 1)
            }
            svg{
                path{
                    stroke:rgba(2, 10, 10, 1)
                }
            }

        }
    }
}

:root div.cta-pattern.groen,:root div.cta-wide.groen .cta-pattern-wide{
    --bce-color-text:rgba(2, 10, 10, 1);
    background-color:rgba(63, 180, 152, 1);

    h1, h2, h3, p{
        color:rgba(2, 10, 10, 1) !important;
    }
    .kb-buttons-wrap{
        span.kb-button:first-child{
            background-color:#312783 !important;
            span.kt-btn-inner-text{
                color:rgba(249, 247, 247, 1) ;
            }
            svg{
                path{
                    stroke:rgba(249, 247, 247, 1);
                }
            }
        }
        span.kb-button:nth-child(2){
            background-color:#FDC300;
            border-color:rgba(2, 10, 10, 0.25)  !important;
            span.kt-btn-inner-text{
                color:rgba(2, 10, 10, 1)
            }
            svg{
                path{
                    stroke:rgba(2, 10, 10, 1)
                }
            }

        }
    }
}


:root div.cta-pattern.roze,:root div.cta-wide.roze .cta-pattern-wide{
    --bce-color-text:rgba(2, 10, 10, 1);
    background-color:rgba(242, 159, 197, 1);

    h1, h2, h3, p{
        color:rgba(2, 10, 10, 1) !important;
    }
    .kb-buttons-wrap{
        span.kb-button:first-child{
            background-color:#312783 !important;
            span.kt-btn-inner-text{
                color:rgba(249, 247, 247, 1) ;
            }
            svg{
                path{
                    stroke:rgba(249, 247, 247, 1);
                }
            }
        }
        span.kb-button:nth-child(2){
            background-color:#FDC300;
            border-color:rgba(2, 10, 10, 0.25)!important;
            span.kt-btn-inner-text{
                color:rgba(2, 10, 10, 1)
            }
            svg{
                path{
                    stroke:rgba(2, 10, 10, 1)
                }
            }

        }
    }
}

@media(max-width:1024px){
    .cta-pattern, .cta-pattern-wide{
        h1,h2,h3{
            letter-spacing: -0.8px;
            font-size:40px;
            text-align: left;
            max-width:inherit;
        }
        p{
            letter-spacing: -0.54px;
            font-size:18px;
            text-align: left;
            max-width:inherit;
            &.has-text-align-center{
                text-align: left;
            }
        }
        > div:first-child{
            padding-top:80px !important;
            padding-left:24px !important;
            padding-right:24px !important;
            padding-bottom:280px !important;

        }

        .kb-buttons-wrap {
            justify-content: flex-start !important;
        }
        &:after{
            --bar-tile: 390px; /* breedte cta-mobile.svg / cta-mobile2.svg */
            width:100%;
            height:63px;
            position: absolute;
            right:0;
            top:auto;
            bottom:0;
            border-radius:0 0 24px 24px;
            animation: carmel-cta-bars-scroll-horizontal 13.3s linear infinite;
            background-image:url('images/cta-mobile.svg');
        }

        &.groen, &.geel{
            &:after{
                background-image:url('images/cta-mobile2.svg');
            }
        }
    }
    :root .cta-wide .cta-pattern-wide{
        margin-left:0 !important;
        margin-right:0 !important;
        width: 100% !important;
        border-radius:0 !important;
         &:after{
            border-radius:0;
        }
    }
}

/**
 * Split-knop: standaard Kadence-knop, met een losse, ronde
 * icoon-cirkel als CSS-pseudo-element erachteraan — geen apart block,
 * geen twee losse knoppen die uit elkaar kunnen raken. Werkt op ELKE
 * gewone Kadence Advanced Button, gewoon deze class toevoegen via
 * "Additional CSS Class(es)".
 *
 * LET OP: dit "split button met cirkel-icoon"-patroon komt uit het
 * vorige (Carmel) thema — in de BFF/Bonhoeffer Figma-file is dit
 * component niet teruggevonden (de knoppen daar zijn simpele "Pill"-
 * knoppen met een inline pijl, geen losse cirkel erachteraan). Er is
 * dus ook geen bevestigde lichtere tint van het merk-blauw; hieronder
 * wordt voorlopig gewoon de normale accentkleur gebruikt. Check of dit
 * component überhaupt nodig is voor deze site, en zo ja, met welke
 * kleur/maat.
 */
.carmel-btn-split-icon {
    position: relative;
    padding-right: 56px !important; /* ruimte voor de cirkel rechts, zodat de knoptekst niet er overheen valt */
}

.carmel-btn-split-icon::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bce-color-btn-accent); /* TODO: geen bevestigde lichtere tint — zie toelichting hierboven */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M0.5 6.5H11.6429M6.5 0.5L11.7929 5.79289C12.1834 6.18342 12.1834 6.81658 11.7929 7.20711L6.5 12.5' stroke='%23F5F5F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Label-rozetje op een gele achtergrond (hero's en CTA's met .geel):
   in Figma de Label Pill-variant "Blauw" — anders valt het gele rozetje
   weg tegen het geel. */
.geel .carmel-label__dot {
    background-image: url('images/Rozet-blauw.svg') !important;
}

.carmel-label{
    .carmel-label__text{
        line-height:100%;
        font-weight:500;
    }
}


.homepageintro{
    h2{
        margin-top:24px;
        font-size:48px;
        line-height:100%;
    }
    p{
        font-size:24px;
    }
    img{
        height: 680px;
        align-self: stretch;
        object-fit: cover;
        object-position: bottom;
    }

    .button-style-secondary{
        svg path{
            stroke:#312783;
        }
    }
}

@media(min-width:1024px){
    .homepageintro{
        .text-image-pattern-textsection{
            max-width:600px;
        }
    }
}

@media(max-width:1024px){
    .homepageintro{

        h2{
            font-size:32px;
            letter-spacing: -0.64px;
        }
        p{
            font-size:20px !important;
        }
        img{
            height:342px;
        }
    }
}



/* quote-pattern */
.quote-pattern{
    margin-bottom:120px !important;
    > .kt-row-column-wrap > .wp-block-kadence-column{
        position: relative;
        > .kt-inside-inner-col{
            background-color:#fff;
            border-radius:24px;
        }
        &:after{
            content:'';
            background-image:url('images/vertical-banner-left.svg');
            width:32px;
            height:100%;
            position: absolute;
            left:0;
            top:0;
            border-radius:24px 0 0 24px;
            animation: carmel-cta-bars-scroll 8s linear infinite;
        }
        .kt-row-column-wrap{
            padding-top:160px;
            padding-bottom:160px;
        }
    }
    .carmel-label__dot{
        background-image:url('images/Rozet-blauw.svg') !important;
    }
}

/* Quote — versmald (Figma 20-10-2026): lage kaart, 24px binnenruimte
   (links 124px: daar staat de gekleurde balk), tekst max 582px links,
   liggende foto 561×240 rechts. Tablet/mobiel: zie de regels hieronder. */
@media (min-width: 1025px) {
    .quote-pattern > .kt-row-column-wrap > .wp-block-kadence-column .kt-row-column-wrap.kt-has-2-columns {
        padding: 24px 24px 24px 124px !important;
        grid-template-columns: minmax(0, 582px) minmax(0, 561px) !important;
        justify-content: space-between;
        align-items: center;
        column-gap: 32px !important;

        > .wp-block-kadence-column > .kt-inside-inner-col {
            padding: 0 !important;
        }

        /* Citaat = H3 (32px / 120%), 32px tot de naam eronder */
        h2 {
            font-size: 32px !important;
            line-height: 120% !important;
            letter-spacing: -0.64px !important;
            margin-bottom: 32px !important;
        }

        figure,
        figure img {
            width: 100%;
            max-width: none;
            margin: 0;
        }

        /* Kadence zet de foto in een vierkant vlak (padding-bottom 100%);
           hier een vaste hoogte, de foto vult het vlak. */
        .kb-is-ratio-image {
            padding-bottom: 0 !important;
            height: 240px;
        }

        figure img {
            height: 240px;
            object-fit: cover;
        }
    }
}

.quote-pattern {
    figure, figure img{
        border-radius: 16px;
    }

}

@media(max-width:1024px){
    .quote-pattern{
        margin-bottom:80px !important;

        > .kt-row-column-wrap > .wp-block-kadence-column{
            position: relative;
            &:after{
                --bar-tile: 342px; /* breedte mobile-top-banner.svg */
                background-image:url('images/mobile-top-banner.svg');
                width:100%;
                height:32px;
                border-radius:24px 24px 0 0;
                animation: carmel-cta-bars-scroll-horizontal 13.3s linear infinite;
            }

            .kt-row-column-wrap {
                padding-top: 120px;
                padding-bottom: 32px;
            }


        }

        h2{
            font-size:32px;
            letter-spacing:-0.64px;
            line-height:100%;
        }
    }

}

.locatiefilter{
    padding:64px 120px;
    .carmel-locatie-filter__name{
        position: relative;
        --arrow-bg-x: 0px;
        margin-bottom:16px !important;

        &:after{
            content: "";
            background-image: url(images/arrow-white.svg);
            background-repeat: no-repeat;
            background-color: rgb(49, 39, 131);
            justify-content: center;
            align-items: center;
            display: flex;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 0px;
            top: 0px;
            background-position: calc(50% + var(--arrow-bg-x)) center;
            border-radius: 8px;
            padding: 10px;
        }
    }
    .carmel-locatie-filter__card{
        .carmel-locatie-filter__image{
            img{
                transition:0.3s;
            }
        }
        &:hover{
            .carmel-locatie-filter__image{
                img{
                    transform: scale(1.1);
                }
            }
        }
    }

    &:after{
        content:'';
        background-image:url('images/vertical-banner-left.svg');
        width:32px;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        border-radius:0 ;
        animation: carmel-cta-bars-scroll 8s linear infinite;
    }
}

@media(max-width:1024px){
    .locatiefilter{
        padding:64px 24px 24px 24px;

        &:after{
            --bar-tile: 342px; /* breedte mobile-top-banner.svg */
            background-image:url('images/mobile-top-banner.svg');
            width:100%;
            height:32px;
            border-radius:24px 24px 0 0;
            animation: carmel-cta-bars-scroll-horizontal 13.3s linear infinite;
        }
    }
}


/* Breadcrumbs onder het menu (carmel-core, Carmel instellingen → Breadcrumbs):
   kleur op een lichte en op een donkere achtergrond — de plugin kiest zelf
   welke van de twee, op basis van de achtergrond eronder. */
:root {
    --carmel-breadcrumbs-color-on-light: var(--bce-color-secondary-blauw, #312783);
    --carmel-breadcrumbs-color-on-dark: #F5F5F4;
    /* gelijk met de koptekst in de headers (die staat 16px links van het
       logo, zoals in het design) i.p.v. met het logo */
    --carmel-breadcrumbs-offset-x: -16px;
}

@media (max-width: 782px) {
    :root {
        --carmel-breadcrumbs-offset-x: -9px; /* koptekst op 24px, logo op 33px */
    }
}

/* Desktop-menubalk en breadcrumbs altijd 16px binnen de gekleurde
   achtergrond van de hero (die staat zelf 16px van de schermrand). Kadence
   gaf de balk min(1440px, scherm − 32px): t/m ±1472px precies even breed
   als de achtergrond, dus er tegenaan. Nu min(1440px, scherm − 64px);
   de breadcrumbs beginnen op de linkerkant van de balk. */
@media (min-width: 1200px) {
    #main-header .site-main-header-wrap {
        max-width: calc(1440px + 64px) !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .carmel-header-breadcrumbs__inner {
        --carmel-bc-left: max(32px, calc((100% - 1440px) / 2));
        --carmel-breadcrumbs-offset-x: 0px;
    }
}

/* hero's */

.wp-block-breadcrumbs.wp-block-breadcrumbs{
    ol{
        padding-left:0;
    }
    li{
        font-size:14px !important;
        margin-bottom:24px  !important;
        color:#312783;
        &:after{
            color:#312783;
        }

        a{
            color:#312783;
        }
    }
}

.hero-text-reveal.ptrn-herobigimage{
    .wp-block-breadcrumbs.wp-block-breadcrumbs{
        li{
            color:#f5f5f4 !important;
            &:after{
                color:#f5f5f4;
            }

            a{
                color:#f5f5f4
            }
        }
    }
}



.ptrn-herobigimage, .ptrn-herobigimage.wit{
    h1{
        font-size:var(--bce-font-size-display1, 88px);
        line-height:var(--bce-line-height-display1);
        letter-spacing:var(--bce-letter-spacing-display1);
        font-weight:var(--bce-font-weight-display1);
        max-width:707px;
    }
    p{
        letter-spacing: -0.72px;
        font-size:24px;
        line-height:120%;
        padding-top:24px;
    }
    .kb-buttons-wrap{
        span.kb-button:first-child{
            background-color:#312783 !important;
            span.kt-btn-inner-text{
                color:#fff;
            }
            svg{
                path{
                    stroke:#fff;
                    fill:none;
                }
            }
        }
        span.kb-button:nth-child(2){
            background-color:#312783;
            border-color:rgba(2, 10, 10, 0.25) !important;
            span.kt-btn-inner-text{
                color:rgba(2, 10, 10, 1);
            }
            svg{
                path{
                    stroke:rgba(2, 10, 10, 1);
                    fill:none;
                }
            }

        }
    }

    .wp-block-carmel-core-label{
        margin-bottom:24px;
    }

    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col{
        background-color:#fff;
        border-radius: 24px;

        > div.kb-row-layout-wrap > div.kt-row-column-wrap{
            padding-top:160px;
            padding-bottom:300px;
        }
    }

    + .hero-text-centered-image{
        margin-top:-300px;
        figure{
            border-radius:24px;
            img{
                height:600px;
                width:100%;
                border-radius:24px;
                object-fit: cover;
                opacity:1;
            }
        }
        &:after{
            --bar-tile: 1840px; /* breedte hero-pattern.svg */
            content:'';
            background-image:url('images/hero-pattern.svg');
            width:100%;
            height:32px;
            border-radius:0 0 24px 24px;
            position: absolute;
            right:0;
            bottom:0;
            z-index:10;
            animation: carmel-cta-bars-scroll-horizontal 17s linear infinite; /* 13.3s bij de oude 1440px-tegel: zelfde snelheid */
        }

    }

    > div > div > .kt-inside-inner-col{
        overflow:hidden;
        &:before{
            content:'';
            background-image:url(images/hero-corner-right.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: 373px;
            height: 294px;
            flex-shrink: 0;
            aspect-ratio: 85/67;
            position: absolute;
            right: 0px;
            top: 0px;
            z-index: 2;
        }
    }
}

.ptrn-herobigimage.groen{
    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col{
        background-color:rgba(63, 180, 152, 1);
    }
    /* hoekpatroon zonder groen, anders valt dat vlak weg tegen de achtergrond */
    > div > div > .kt-inside-inner-col{
        &:before{
            background-image:url(images/hero-corner-right-groen.svg);
        }
    }

    .kb-button.wp-block-button__link.button-style-secondary{
        svg pah{
            stroke:currentColor
        }
    }
}

.ptrn-herobigimage.roze{
    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col{
        background-color:rgba(242, 159, 197, 1);
    }
    > div > div > .kt-inside-inner-col{
        &:before{
            background-image:url(images/hero-corner-right-yellow.svg);
        }
    }
}

.ptrn-herobigimage.geel{
    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col{
        background-color:rgba(253, 195, 0, 1);
    }
    /* hoekpatroon zonder geel, anders valt dat vlak weg tegen de achtergrond */
    > div > div > .kt-inside-inner-col{
        &:before{
            background-image:url(images/hero-corner-right-geel.svg);
        }
    }
}

@media(max-width:1024px){
    .ptrn-herobigimage, .ptrn-herobigimage.wit{
        h1{
        font-size:var(--bce-font-size-display1-mobile);
        line-height:90%;
        letter-spacing:var(--bce-letter-spacing-display1-mobile);
        max-width:100%;
    }
    p{
        letter-spacing: -0.54px;
        font-size:16px;
        padding-top:0;
    }

    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col .kt-inside-inner-col{


        > div.kb-row-layout-wrap > div.kt-row-column-wrap{
            padding:0px 16px 80px 16px;
        }
    }

    + .hero-text-centered-image{
        figure{
            img{
                height:480px;
            }
        }
        &:after{
            width:calc(100% - 32px);
        }
    }

    > div > div > .kt-inside-inner-col{
        overflow:hidden;
        &:before{
            width: 274px;
            height: 216px;
        }
    }

    }
}

/* hero-text-centered */

.hero-text-centered{
    .centercolumn{
        flex-direction: column;
        align-items: center;
    }
    h1,h2,h3,h4,h5, p{
        text-align: center;
    }
    p{
        padding-top:0 !important;
    }
}

@media(min-width:1024px){
    .hero-text-centered, .ptrn-herobigimage{
        .centercolumn{
            max-width:920px;
            margin:0 auto;
        }
    }
}

/* hero-gallery */
.hero-gallery{

    .centercolumn{
        flex-direction: column;
        align-items: center;
    }
    h1,h2,h3,h4,h5, p{
        text-align: center;
    }
    p{
        padding-top:0 !important;
    }
}
.hero-gallery-gallery{
     margin-top:-280px;
     margin-bottom:120px !important;
    .carmel-image-slider-editor__thumb{
        height:90px;
        width:120px;
    }
    .carmel-image-slider__slide img{
        border-radius:24px;
    }
}


@media(max-width:1024px){
    .hero-gallery-gallery{
        .carmel-image-slider__slide img{
            width:80%;
            img{
                width:100%;
            }
        }
    }
}

/* hero text reveal */
.hero-text-reveal.ptrn-herobigimage {
    > div.kt-row-column-wrap > div.wp-block-kadence-column  > .kt-inside-inner-col{
        background-color:#312783;
    }
    * {
        color:rgba(245, 245, 244, 1);
    }
    h1{
        margin-top:0px !important;
    }
    .wp-block-breadcrumbs{
        li{

            a{
                color:rgba(245, 245, 244, 1);
            }
        }

    }
}

.pattern-text-reveal{
    margin-bottom: 120px !important;
    > div{
        padding-bottom:0 !important;
    }
    p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        -line-clamp: 4;
        height:66px;
        overflow: hidden;
        font-size:16px !important;
        line-height:100% !important;
        font-weight:400 !important;
    }
    h5{
        margin-bottom:0;
        --arrow-bg-x: 0px;
        &::after {
            content: '';
            background-image: url(images/arrow-white.svg);
            background-repeat: no-repeat;
            background-position: calc(50% + var(--arrow-bg-x)) center;
            background-color: rgba(49, 39, 131, 1);
            border-radius: 8px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            display: flex;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 0;
            top: 0;
            transition: inherit;
        }
    }
    .js-card > div{
        background-color:#F29FC5;
        border-radius:16px;
    }

    .js-row-slider > .kt-row-column-wrap{
        padding-bottom:0;
    }

    &:not(:last-child){
        margin-bottom:120px !important;
    }
}
.hero-pattern-text-reveal.pattern-text-reveal{
    .js-card > div{
        background-color:#fff;

        .js-card-desc{
            line-height:120% !important;

        }
    }


}

.pattern-text-reveal{
    .kt-has-2-columns p{
        font-size:20px !important;
        display: block;
        -webkit-line-clamp: none;
        height: inherit;
        overflow: visible;
    }
}

@media(max-width:1024px){
    .pattern-text-reveal{
        &:not(:last-child){
            margin-bottom:80px !important;
        }
    }
}



/* tabs */

.tabsblock{
    .tabsblock-tab.tabsblock-tab{
        > div{
            border-radius:16px;
            background-color: #ffffff;
            transition:0.3s;
        }

        > .kt-inside-inner-col:first-child > .kb-vector-container svg{
            width:40px;
            height:40px;
        }

        &:hover{
            > div{
                background-color:#e8e6e6;
            }
        }

        > div :first-child {
            flex: 0 0 auto;
        }

        >  div :nth-child(2) {
            flex: 1 1 auto !important;
            justify-content: flex-start !important;
            text-align: left !important;
            > div{
                margin-left:0;
            }
        }

        > div  :last-child {
            flex: 0 0 auto;
            margin-left: auto;
        }

    }
    h2{
        margin-top:24px !important;
        margin-bottom:96px !important;
    }

    figure{
        overflow: hidden;
        border-radius:24px;
    }
}

@media(max-width:1024px){
    .tabsblock{
        /* tablet: tab-lijst en afbeelding onder elkaar (zoals mobiel),
           naast elkaar werden de kaarten te smal */
        > .kt-row-column-wrap {
            grid-template-columns: minmax(0, 1fr) !important;
            grid-auto-rows: auto !important; /* Kadence: 1fr = rijen even hoog → gat boven de foto */
        }
        h2 {
            margin-bottom: 40px !important;
        }

        .tabsblock-tab.tabsblock-tab{
            p{
                font-size:16px !important;
                line-height: 120% !important;
                margin-top:15px;
                margin-bottom:15px;
            }
        }
    }
}




/* Footer */
footer.site-footer {
    --bce-color-btn-secondary-bg::#f9f7f7 !important;
    p{
        font-size: 14px !important;
        line-height: 100% !important;
        font-weight: 400 !important;
        text-align: left !important;
        color:#fff !important;
    }
    .site-top-footer-wrap .site-footer-row-container-inner{
        border-radius:24px 24px 0 0;
    }

    .site-middle-footer-wrap .site-footer-row-container-inner{
        border-radius: 0 0 24px 24px;
    }

    .kt-button.kb-button{
        --bce-color-btn-secondary-bg:#f9f7f7 !important;
        path{
            stroke:#312783
        }
    }
}

/* Onderwijsaanbod */
.ptrn-onderwijsaanbod{
    .carmel-onderwijs-tabel__school-naam{
        font-size:28px;
        font-weight: 500;
        line-height: 120%;
        margin-right:16px;
    }
    svg{
        width: 12px;
        height: 12px;
    }

    .carmel-onderwijs-tabel__scholen {
        a{
            margin-bottom:8px;
        }
    }

    .carmel-onderwijs-tabel__niveau{
        font-size:20px;
        line-height:120%;
        font-weight:400;

    }

    .carmel-onderwijs-tabel__header-cell{
        font-size:16px;
        line-height:100%;
        font-weight:400;
    }
}

/* image text */
.ptrn-imagestext{
    figure img{
        border-radius:24px;
    }
}

/* video */
.ptrn-video{
    margin-bottom:120px !important;
}

/* image text */
.image-text-pattern, .text-image-pattern{
    p{
        font-size:20px !important;
        line-height:120% !important;
        font-weight:400 !important;

    }
    figure, figure img{
        border-radius:24px;
        overflow:hidden;
    }

}

.image-text-pattern{
    .wp-block-kadence-column figure::before{
        content:'';
        background-image:url(images/B.svg);
        background-size:contain;
        background-repeat: no-repeat;
        width: 194.982px;
        height: 256px;
        flex-shrink: 0;
        aspect-ratio: 131/172;
        position: absolute;
        left:0;
        top:0;
        z-index:10;
    }
}

.text-image-pattern:not(.homepageintro ){
    .wp-block-kadence-column figure::before{
        content:'';
        background-image:url(images/C2.svg);
        background-size:contain;
        background-repeat: no-repeat;
        background-position: right;
        width: 231.566px;
        height: 256px;
        aspect-ratio: 199/220;
        position: absolute;
        right:0;
        bottom:0;
        z-index:10;
    }
}

@media(max-width:1024px){
    .image-text-pattern, .text-image-pattern{
        figure, figure img{
            height: 320px;
        }
    }
    .image-text-pattern{
        .wp-block-kadence-column figure::before{
            width: 76.165px;
            height: 100px;
            aspect-ratio: 76.17/100.00;
        }
    }
    .text-image-pattern{
        .wp-block-kadence-column figure::before{
            width: 90.455px;
            height: 99.999px;
            aspect-ratio: 90.46/100.00;
        }
    }
}


/*text-header-left-image-right */
.text-header-left-image-right {
    figure, figure img{
        border-radius:24px;
    }
    figure{
        margin-bottom:48px !important;
    }
    p{
        margin-bottom:48px !important;
    }
}

/* newsslider */

.newsslider {
    h4{
        font-size:48px;
        letter-spacing:-0.96px;
        line-height:100%;
        font-weight:500;
        margin-bottom:0px !important;
    }
    .carmel-news-slider__slide{
        .carmel-news-slider__image{
            border-radius:24px;
            overflow:hidden;
            img{
                
                transition: 0.3s;
            }

        }
        .carmel-news-slider__badge{
            color:#020a0a !important;
        }
        &:hover, &:focus, &:active{
            .carmel-news-slider__image{
                img{
                    transform: scale(1.1);
                }
            }
            .carmel-news-slider__badge{
                color:#020a0a !important;
            }
        }
    }
    .carmel-news-slider__badge-dot{
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11.8468%2011.8555L10.8543%2011.8018C10.6011%2011.788%2010.3722%2011.9487%2010.3009%2012.1891L10.0224%2013.1325C9.92453%2013.4637%209.54152%2013.6202%209.23584%2013.4538L8.3653%2012.9796C8.14329%2012.8587%207.86631%2012.9049%207.69685%2013.091L7.03172%2013.8215C6.79853%2014.078%206.3847%2014.0547%206.18232%2013.7734L5.6057%2012.9727C5.4589%2012.7688%205.18886%2012.6914%204.95446%2012.7867L4.03469%2013.1594C3.71179%2013.2905%203.34932%2013.0919%203.29042%2012.7517L3.12248%2011.7833C3.07989%2011.5363%202.87055%2011.3508%202.61743%2011.3362L1.62517%2011.2774C1.27689%2011.2568%201.03736%2010.9223%201.13342%2010.5905L1.40708%209.64592C1.47686%209.40522%201.36963%209.14839%201.14822%209.02655L0.279798%208.54813C-0.0249796%208.3803%20-0.0938472%207.97624%200.138134%207.71852L0.799337%206.98477C0.967886%206.79782%200.983896%206.52069%200.838304%206.31582L0.265904%205.51249C0.064733%205.23058%200.180122%204.83668%200.502419%204.70438L1.42037%204.3269C1.65417%204.23074%201.79039%203.98795%201.74871%203.74068L1.5859%202.771C1.52851%202.43056%201.80489%202.12565%202.15347%202.14446L3.14603%202.19822C3.39916%202.21196%203.62812%202.05129%203.6991%201.81089L3.9779%200.867494C4.07577%200.536007%204.45878%200.37982%204.76446%200.546161L5.635%201.0204C5.85701%201.14134%206.134%201.09505%206.30345%200.909004L6.96859%200.178539C7.20177%20-0.0779903%207.6156%20-0.0546966%207.81798%200.226619L8.3946%201.02726C8.5414%201.23123%208.81145%201.30858%209.04554%201.21332L9.96531%200.840616C10.2882%200.709515%2010.6507%200.908108%2010.7096%201.24826L10.8775%202.21673C10.9201%202.46371%2011.1294%202.64886%2011.3826%202.66379L12.3748%202.72233C12.7231%202.74293%2012.9626%203.07741%2012.8666%203.40919L12.5929%204.35408C12.5231%204.59478%2012.6304%204.85161%2012.8518%204.97345L13.7202%205.45187C14.025%205.6197%2014.0938%206.02376%2013.8619%206.28148L13.2007%207.01523C13.0321%207.20218%2013.0161%207.47961%2013.1617%207.68418L13.7341%208.48781C13.935%208.76972%2013.8199%209.16333%2013.4976%209.29592L12.5796%209.6734C12.3458%209.76956%2012.2096%2010.0123%2012.251%2010.2596L12.4141%2011.229C12.4715%2011.5694%2012.1951%2011.8746%2011.8465%2011.8558%22%20fill%3D%22%23FFCC00%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E) !important;
        background-color: transparent !important;
    }
}

.carmel-news-slider__meta{
    .carmel-news-slider__badge-dot{
        line-height:100%;
        background-color:var(--bce-color-secondary-groen);
    }
}


@media(max-width:1024px){
    .newsslider {
        h4{
            font-size:32px;
            letter-spacing:-0.64px;
            margin-bottom:40px !important;
            &.wp-block-heading +  div{
                margin-top:0 !important
            }
        }
        .carmel-news-slider__image{
            height: 261px;
        }
    }
}

/* infohub */
.carmel-infohub__content section, .carmel-infohub__nav{
    background-color:#F9F7F7;
}

.carmel-infohub__nav a{
    font-size:20px;
    font-weight: 400;
    line-height: 120%;
}

.carmel-infohub__nav a.is-active{
    background-color:#fff;
}

#primary:has(.wp-block-carmel-core-infohub-overzicht):after, .notfound > div > div:after{
    content:'';
    width: 361.822px;
    height: 400px;
    aspect-ratio: 199/220;
    position: absolute;
    left:32px;
    bottom:30%;
    background-image:url(images/C.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

.notfound > div > div .kt-inside-inner-col .kb-row-layout-wrap{
    &:before {
        content: '';
        background-image: url(images/hero-corner-right.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 373px;
        height: 294px;
        flex-shrink: 0;
        aspect-ratio: 85 / 67;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;
    }
}

@media(max-width:1024px){
    #primary:has(.wp-block-carmel-core-infohub-overzicht):after, .notfound > div > div:after{
        display:none;
    }
}

/* Nieuws overzicht*/

/* (Hier stond een dubbele kopie van de .newsslider-regels van hierboven;
   omdat die NA de mobiele media query stond, bleef "Het laatste nieuws"
   op mobiel 48px i.p.v. 32px. Verwijderd.) */

.carmel-nieuws-overzicht__filters{
    background-color:#F9F7F7;
    border-radius:16px;

    .carmel-nieuws-overzicht__date.js-date-display{
        background-color:transparent
    }
}

.carmel-nieuws-overzicht__tabs{
    background-color:#fff;
    .carmel-nieuws-overzicht__tab{
        font-size:16px;
        font-weight:500;
        line-height:100%;
        color:rgba(2, 10, 10, 1);
        background-color:#fff;
        &.is-active{
            background-color:rgba(49, 39, 131, 1);
            color:#fff;
        }
    }

}

.carmel-nieuws-overzicht__secondary-filters{
    min-width:40%;
    display: flex;
    justify-content: space-between;

}
.carmel-nieuws-overzicht__school{
    width:40%;
    justify-content: center;

    label{
        font-size:14px;
        color:rgba(115, 115, 115, 1);
        line-height:100%;
        padding:0 8px;
    }
    select{
        border:none;
        font-size:16px;
        line-height:100%;
        font-weight:500;
        color:rgba(26, 26, 23, 1);
        background-color:transparent;
        padding:0 8px;
        &:focus{
            color:rgba(26, 26, 23, 1);
        }
    }

}

.carmel-nieuws-overzicht__date-text{
    display: flex;
    justify-content: space-between;

    .carmel-nieuws-overzicht__date-overlay-label{
        font-size:14px;
        color:rgba(115, 115, 115, 1);
        line-height:100%;
    }
}
.carmel-nieuws-overzicht .screen-reader-text {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
.carmel-nieuws-overzicht__date-input[type=date] {
    border: none;
    cursor: pointer;
    width:44px;
}

.carmel-nieuws-overzicht__grid{
    .carmel-nieuws-overzicht__badge-dot{
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11.8468%2011.8555L10.8543%2011.8018C10.6011%2011.788%2010.3722%2011.9487%2010.3009%2012.1891L10.0224%2013.1325C9.92453%2013.4637%209.54152%2013.6202%209.23584%2013.4538L8.3653%2012.9796C8.14329%2012.8587%207.86631%2012.9049%207.69685%2013.091L7.03172%2013.8215C6.79853%2014.078%206.3847%2014.0547%206.18232%2013.7734L5.6057%2012.9727C5.4589%2012.7688%205.18886%2012.6914%204.95446%2012.7867L4.03469%2013.1594C3.71179%2013.2905%203.34932%2013.0919%203.29042%2012.7517L3.12248%2011.7833C3.07989%2011.5363%202.87055%2011.3508%202.61743%2011.3362L1.62517%2011.2774C1.27689%2011.2568%201.03736%2010.9223%201.13342%2010.5905L1.40708%209.64592C1.47686%209.40522%201.36963%209.14839%201.14822%209.02655L0.279798%208.54813C-0.0249796%208.3803%20-0.0938472%207.97624%200.138134%207.71852L0.799337%206.98477C0.967886%206.79782%200.983896%206.52069%200.838304%206.31582L0.265904%205.51249C0.064733%205.23058%200.180122%204.83668%200.502419%204.70438L1.42037%204.3269C1.65417%204.23074%201.79039%203.98795%201.74871%203.74068L1.5859%202.771C1.52851%202.43056%201.80489%202.12565%202.15347%202.14446L3.14603%202.19822C3.39916%202.21196%203.62812%202.05129%203.6991%201.81089L3.9779%200.867494C4.07577%200.536007%204.45878%200.37982%204.76446%200.546161L5.635%201.0204C5.85701%201.14134%206.134%201.09505%206.30345%200.909004L6.96859%200.178539C7.20177%20-0.0779903%207.6156%20-0.0546966%207.81798%200.226619L8.3946%201.02726C8.5414%201.23123%208.81145%201.30858%209.04554%201.21332L9.96531%200.840616C10.2882%200.709515%2010.6507%200.908108%2010.7096%201.24826L10.8775%202.21673C10.9201%202.46371%2011.1294%202.64886%2011.3826%202.66379L12.3748%202.72233C12.7231%202.74293%2012.9626%203.07741%2012.8666%203.40919L12.5929%204.35408C12.5231%204.59478%2012.6304%204.85161%2012.8518%204.97345L13.7202%205.45187C14.025%205.6197%2014.0938%206.02376%2013.8619%206.28148L13.2007%207.01523C13.0321%207.20218%2013.0161%207.47961%2013.1617%207.68418L13.7341%208.48781C13.935%208.76972%2013.8199%209.16333%2013.4976%209.29592L12.5796%209.6734C12.3458%209.76956%2012.2096%2010.0123%2012.251%2010.2596L12.4141%2011.229C12.4715%2011.5694%2012.1951%2011.8746%2011.8465%2011.8558%22%20fill%3D%22%23FFCC00%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E) !important;
        background-color: transparent !important;
        width: 20px;
        height: 20px;
        aspect-ratio: 1/1;

        background-repeat: no-repeat;
    }

    h4.carmel-nieuws-overzicht__title{
        font-size:28px !important;
        line-height:120% !important;
        font-weight: 500 !important;
    }
}


.locatiecontent{
    p{
        font-size:20px !important
    }
}
.js-card .kt-inside-inner-col { display: flex; flex-direction: column; }
.js-card .js-card-media { flex-shrink: 0; }

.js-card h5 {
  padding-right: 48px !important; 
  box-sizing: border-box;
  margin-bottom: 8px !important;
}

/* Geen vaste kaarthoogte (cards.css: 420px) — die was te krap voor
   afbeelding + titel + tekst, waardoor de tekst bij hover onderaan werd
   afgeknipt. Nu bepaalt de rij de hoogte (align-items: stretch: alle
   kaarten even hoog als de hoogste) en vult het kaartvlak die hoogte,
   zoals in theme-ccs. Bij hover krimpt de afbeelding precies zoveel als
   de tekst groeit (cards.js), dus de kaart zelf verandert niet van hoogte.
   flex-shrink: 0 voorkomt dat Kadence de tekst alsnog inknijpt. */
.pattern-text-reveal .js-card {
  height: auto;
}
.pattern-text-reveal .js-card > .kt-inside-inner-col {
  height: 100%;
}
.pattern-text-reveal .js-card :is(.js-card-media, .js-card-desc) {
  flex-shrink: 0;
}

.js-card .js-card-desc {
  position: static !important;     
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
}
.editor-styles-wrapper .js-card .js-card-desc {
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.editor-styles-wrapper .js-card,
.editor-styles-wrapper .pattern-text-reveal .js-card > div {
  height: auto !important;
  overflow: visible !important;
}

.contactlocaties{

    .js-card{
        border-radius:16px;
        height:Auto;

        h5{
            margin-bottom:0 !important;
            --arrow-bg-x: 0px;
            &::after {
                content: '';
                background-image: url(images/arrow-white.svg);
                background-repeat: no-repeat;
                background-position: calc(50% + var(--arrow-bg-x)) center;
                background-color: rgba(49, 39, 131, 1);
                border-radius: 8px;
                padding: 10px;
                justify-content: center;
                align-items: center;
                display: flex;
                width: 32px;
                height: 32px;
                position: absolute;
                right: 0;
                top: 0;
                transition: inherit;
            }
        }

        figure{
            border-radius:8px;
            height:246px;
            img{
                height:246px;
                transition:0.3s;
            }
        }
        &:hover{
            figure{
                img{
                    transform: scale(1.1);
                }
            }
        }
    }

    > div{
        gap:64px;
    }
}

@media(max-width:1024px){
    .contactlocaties{
        > div{
             gap:24px;
        }
    }
}

.contactheading >  .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > div.wp-block-kadence-column{
    width:100%;

}

.left-column-contact{
    figure{
        border-radius:24px;
        img{
            border-radius:24px;
        }
    }
    .contactblok{
        background-color:#312783;
        color:#fff;
        padding:40px;
        border-radius:24px;

        h6{
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
            font-size:18px;
            color:#fff;
        }
        p{
            font-size:16px !important;
            color:#fff !important;
            line-height:150% !important;
            font-weight:400 !important;
        }
    }
}
.herowrapper.nieuwsheader{
    &:before {
        content: '';
        background-image: url(images/hero-corner-right.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 373px;
        height: 294px;
        flex-shrink: 0;
        aspect-ratio: 85 / 67;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;
    }

}

@media(max-width:1024px){
    .herowrapper.nieuwsheader{
        > div > div > .kt-inside-inner-col{
        overflow:hidden;
            &:before{
                width: 274px;
                height: 216px;
            }
        }
    }
}

.ptrn-introtext-fullwidth{
    margin-bottom:120px !important;
    > div{
        padding-top:0 !important;
        padding-bottom:0 !important;
    }
    &:after{
        content:'';
        width: 324px;
        height: 358.189px;
        aspect-ratio: 199/220;
        position: absolute;
        right:0px;
        background-image:url(images/C3.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }
     &:before{
        content:'';
        background-image:url(images/B2.svg);
        background-size:contain;
        background-repeat: no-repeat;
        width: 274.955px;
        height: 361.001px;
        aspect-ratio: 131/172;
        position: absolute;
        left:0;
    }
}

@media(max-width:1024px){
    .ptrn-introtext-fullwidth{
        margin-bottom:80px !important;
        padding-left:40px !important;
        padding-right:40px !important;
        &:after{
            width: 60.409px;
            height: 66.784px;
            aspect-ratio: 60.41/66.78;
        }
        &:before{
            width: 49.001px;
            height: 64.333px;
            aspect-ratio: 49.00/64.33;
        }
        h2{
            letter-spacing: -0.64px !important;
            font-size:32px !important;
            line-height:100% !important
        }

        p{
            letter-spacing: -0.54px !important;
            font-size:18px !important;
            line-height:120% !important;
        }
    }
}


/**
 * Pauze- en geluidsknop voor Kadence-achtergrondvideo's (zoals CCS).
 *
 * De knoppen zelf komen van Kadence: rij-blok → Achtergrond → Video →
 * afspeel/pauze-knop en dempknop aanzetten. Hier alleen de plek en het
 * tonen: rechts, verticaal in het midden, zichtbaar bij hover (zoals CCS);
 * op touchscreens (geen hover) altijd zichtbaar.
 *
 * GEEN position:relative op .kb-blocks-bg-video-container: Kadence zet
 * die container zelf al op position:absolute (over de hele rij). Een
 * eigen "relative" won in de editor (daar laadt dit bestand ná Kadence)
 * en haalde de video uit de achtergrond: de tekst schoof eronder.
 */
.kb-row-layout-wrap .kb-background-video-buttons-wrapper {
    top: 50%;
    transition: opacity 0.3s;
    opacity: 0;
}
.kb-row-layout-wrap:is(:hover, :focus-within) .kb-background-video-buttons-wrapper {
    opacity: 1;
}
@media (hover: none) {
    .kb-row-layout-wrap .kb-background-video-buttons-wrapper {
        opacity: 1;
    }
}


/**
 * Hero-carousel — afgestemd op Kadence's EIGEN, automatisch
 * gegenereerde class-structuur. Geen losse, handmatig toe te voegen
 * classes nodig in de editor — elk Afbeelding-blok binnen deze Row
 * krijgt door Kadence zelf al .wp-block-kadence-image, dat gebruiken
 * we rechtstreeks als "slide".
 */

.hero-text-centered-image-carousel {
	--carmel-hero-carousel-active-width: 972px;
	--carmel-hero-carousel-inactive-width: 449px;
	--carmel-hero-carousel-gap: 24px;
	--carmel-hero-carousel-height: 731px;
	--carmel-hero-carousel-duration: 0.7s; /* briefing: 0.7s power3.inOut (scripts.js gebruikt GSAP, dit is de terugval) */
	--carmel-hero-carousel-ease: cubic-bezier(0.76, 0, 0.24, 1);
}


/* Viewport — kapt alles af wat buiten de zichtbare rij valt, incl. de
   onzichtbare klonen aan weerszijden. */
.hero-text-centered-image-carousel {
	overflow: hidden;
	border-radius: 16px;
    width:calc(100vw - ((100vw - 100%)  / 2) );
    > div{
        margin-left:0 !important;
    }
    .hero-text-centered-image-section .wp-block-kadence-image:not(.is-active) img{
        opacity: 1;
    }
}

@media(min-width:1500px){
    .hero-text-centered-image-carousel {
        width:calc(100vw - ((100vw - 1471px)  / 2) );
    }
}

/* Track — Kadence's eigen kolom-wrapper wordt hier de flex-rij.
   BEWUST met !important: Kadence's eigen CSS voor .kt-inside-inner-col
   (een veelgebruikte, generieke class die overal in het thema
   voorkomt) bleek onze display:flex anders te overrulen.

   flex-wrap:nowrap BEWUST toegevoegd — zonder dit valt de rij, zodra
   de slides niet meer allemaal passen binnen de content-breedte, terug
   naar een nieuwe regel i.p.v. door te lopen buiten het zichtbare
   gebied.

   transition op transform — de track schuift heen en weer, de klonen
   aan weerszijden maken dat dit oneindig kan doorgaan (zie view.js). */
.hero-text-centered-image-section .kt-inside-inner-col {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--carmel-hero-carousel-gap);
	transition: transform var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);
	will-change: transform;
}

/* Slide — elk Kadence Afbeelding-blok binnen de rij.
   BEWUST met !important op flex/width: Kadence zet op een
   .wp-block-kadence-image standaard vaak zelf al een breedte-
   gerelateerde eigenschap, die anders zou blijven winnen. */
.hero-text-centered-image-section .wp-block-kadence-image {
	flex: 0 0 var(--carmel-hero-carousel-inactive-width) !important;
	width: var(--carmel-hero-carousel-inactive-width) !important;
	height: var(--carmel-hero-carousel-height);
	overflow: hidden;
	border-radius: 16px;
	cursor: grab; /* alleen swipen/slepen, geen klik */
	transition: flex-basis var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);
	margin: 0; /* Kadence zet soms een eigen margin op losse blokken, hier ongewenst */
}

.hero-text-centered-image-section .wp-block-kadence-image.is-active {
	flex-basis: var(--carmel-hero-carousel-active-width) !important;
	width: var(--carmel-hero-carousel-active-width) !important;
	cursor: default;
}

.hero-text-centered-image-section .wp-block-kadence-image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.hero-text-centered-image-section .wp-block-kadence-image img {
	width: 100%;
	height: 100%;
    max-height:var(--carmel-hero-carousel-height);
	object-fit: cover;
	display: block;
	pointer-events: none; /* klik gaat altijd naar het blok zelf, niet naar de losse img */
}

/* Niet-actieve slides iets gedimd — versterkt het "dit is de hoofdslide"-gevoel */
.hero-text-centered-image-section .wp-block-kadence-image:not(.is-active) img {
	opacity: 0.7;
	transition: opacity var(--carmel-hero-carousel-duration) var(--carmel-hero-carousel-ease);
}

.hero-text-centered-image-section .wp-block-kadence-image:not(.is-active):hover img {
	opacity: 1;
}
@media (max-width: 782px) {
	.hero-text-centered-image-carousel {
		--carmel-hero-carousel-active-width: 75vw;
		--carmel-hero-carousel-inactive-width: 90px;
		--carmel-hero-carousel-height: 400px;
	}
}


/* megamenucarmel */
@media(min-width:1200px){
    .megamenucarmel:has(.carmel-menu-highlight-card) {
        min-width:1080px;

        .carmel-menu-highlight-card__image{
            overflow:hidden;
        }

        .carmel-menu-highlight-card__image img{
            transition: 0.3s;
        }

        .wp-block-carmel-core-menu-highlight-card:hover{
            .carmel-menu-highlight-card__image img{
                transform: scale(1.1);
            }
            .carmel-menu-highlight-card__title, .wp-element-button.carmel-menu-highlight-card__arrow{
                color:#3fb498;
            }
        }
    }
}

.megamenucarmel a{
    &:hover{
        color:#3fb498;
    }
}

.carmel-menu-highlight-card__title{
    color: #000;
    font-family: Athletics;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.2px;
    transition: 0.3s;
}
.wp-element-button.carmel-menu-highlight-card__arrow{
    background-color:#fff;
    color:rgba(0, 0, 0, 1);
    transition: 0.3s;
}


.ptrn-tabs-vertical{
    .tab-number{
        border-radius:8px;
        margin-right:24px;
    }

    p{
        font-size:20px !important;
        line-height: 120% !important;
    }

    figure{
        img{
            mask-image:none !important;
            border-radius:24px;
        }

         div, div img{
            max-height:361px !important;
        }

        + div{
            --body-size:20px;
            --body-letter-spacing:-0.4px;
            --body-line-height:120%;
            --body-weight:400;
        }
    }
    .ptrn-tabs-vertical-tab{

        border-radius:24px;
        > div{
            background-color:#fff !important;
        }
    }
    .kb-section-dir-horizontal{
        margin-bottom:24px;
    }
    .kb-button{
        svg{
        path{
            fill:none;
            stroke:#fff;
        }}
    }
    h2{
        margin-top:24px !important
    }
}



@media(max-width:768px){
    .ptrn-tabs-vertical{

        .tab-content, p{
            --body-size:16px;
            --body-line-height:120%;
            --body-letter-spacing:-0.32px
        }

        figure{
            img{
                mask-image:none !important;
                border-radius:16px;
            }
        }
        .ptrn-tabs-vertical-tab{

            > div{
                border-radius:16px;
                padding:8px 16px;            }

            .accordion__toggle-icon{
                background-color:rgba(49, 39, 131, 1);
                right:8px;

                &::before, &::after {
                    background: #fff;
                }            }        }
    }
    .ptrn-tabs-vertical-tab > .kt-inside-inner-col{
        border-radius:16px;
    }
    .ptrn-tabs-vertical-tab {
        .kb-section-dir-horizontal{
            margin-bottom:16px !important;
        }
	}
}

.carmel-menu-hover-link--active{
    color:var(--bce-color-secondary-groen)
}

.two-images-textblock{
    > div{
        padding-bottom:0;
        padding-top:0;
    }
    .kb-button{
        svg{
        path{
            fill:none;
            stroke:#fff;
        }}

        &.button-style-secondary{
            svg path{
            stroke:#312783
            }
        }
    }

}

.two-images-textblock-images{
    img{
        object-fit: cover;
        border-radius:24px;
        width:100%;
    }

}


.steps-pattern{
    > div{
        padding-bottom:0;
        .kt-row-column-wrap{
            padding-bottom:0;
        }
    }
    .carmel-label__dot{
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11.8468%2011.8555L10.8543%2011.8018C10.6011%2011.788%2010.3722%2011.9487%2010.3009%2012.1891L10.0224%2013.1325C9.92453%2013.4637%209.54152%2013.6202%209.23584%2013.4538L8.3653%2012.9796C8.14329%2012.8587%207.86631%2012.9049%207.69685%2013.091L7.03172%2013.8215C6.79853%2014.078%206.3847%2014.0547%206.18232%2013.7734L5.6057%2012.9727C5.4589%2012.7688%205.18886%2012.6914%204.95446%2012.7867L4.03469%2013.1594C3.71179%2013.2905%203.34932%2013.0919%203.29042%2012.7517L3.12248%2011.7833C3.07989%2011.5363%202.87055%2011.3508%202.61743%2011.3362L1.62517%2011.2774C1.27689%2011.2568%201.03736%2010.9223%201.13342%2010.5905L1.40708%209.64592C1.47686%209.40522%201.36963%209.14839%201.14822%209.02655L0.279798%208.54813C-0.0249796%208.3803%20-0.0938472%207.97624%200.138134%207.71852L0.799337%206.98477C0.967886%206.79782%200.983896%206.52069%200.838304%206.31582L0.265904%205.51249C0.064733%205.23058%200.180122%204.83668%200.502419%204.70438L1.42037%204.3269C1.65417%204.23074%201.79039%203.98795%201.74871%203.74068L1.5859%202.771C1.52851%202.43056%201.80489%202.12565%202.15347%202.14446L3.14603%202.19822C3.39916%202.21196%203.62812%202.05129%203.6991%201.81089L3.9779%200.867494C4.07577%200.536007%204.45878%200.37982%204.76446%200.546161L5.635%201.0204C5.85701%201.14134%206.134%201.09505%206.30345%200.909004L6.96859%200.178539C7.20177%20-0.0779903%207.6156%20-0.0546966%207.81798%200.226619L8.3946%201.02726C8.5414%201.23123%208.81145%201.30858%209.04554%201.21332L9.96531%200.840616C10.2882%200.709515%2010.6507%200.908108%2010.7096%201.24826L10.8775%202.21673C10.9201%202.46371%2011.1294%202.64886%2011.3826%202.66379L12.3748%202.72233C12.7231%202.74293%2012.9626%203.07741%2012.8666%203.40919L12.5929%204.35408C12.5231%204.59478%2012.6304%204.85161%2012.8518%204.97345L13.7202%205.45187C14.025%205.6197%2014.0938%206.02376%2013.8619%206.28148L13.2007%207.01523C13.0321%207.20218%2013.0161%207.47961%2013.1617%207.68418L13.7341%208.48781C13.935%208.76972%2013.8199%209.16333%2013.4976%209.29592L12.5796%209.6734C12.3458%209.76956%2012.2096%2010.0123%2012.251%2010.2596L12.4141%2011.229C12.4715%2011.5694%2012.1951%2011.8746%2011.8465%2011.8558%22%20fill%3D%22%23FFCC00%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E) !important;
        background-color: transparent !important;
    }
    .steps-pattern-step > .kt-inside-inner-col{
        background-color:#fff;

        h5{
            font-weight: 500;
            line-height: 120%;
            font-size:24px;
        }
        p{
            font-weight: 400 !important;
            line-height: 120% !important;
            font-size:16px !important;
        }
    }
}

.steps-pattern .steps-pattern-step > .kt-inside-inner-col {
  flex-grow: 1;
}



/* zoekresultaten */

.search-results .site-main h1{
    margin-bottom:64px !important;
}

.search-results h2.entry-title{
    /* de algemene h2-regel (!important) leest deze variabelen: H4 28px/120% */
    --h2-size: 28px;
    --h2-line-height: 120%;
    --h2-letter-spacing: normal;
    --h2-weight: 500;
    font-size:28px;
    color:rgba(49, 39, 131, 1);
    font-weight:500;
    line-height:120%;
    margin-bottom:24px;

    a{
        color:rgba(49, 39, 131, 1);
    }
}

.search-results .excerpt_part{
    font-size:16px;
    font-weight:400;
}

.search-results .entry-summary p:last-child{
    margin-bottom:0;
}

.search-results .site-main .entry-list-item article{
    padding:40px;
    border-radius:24px;
}
.search-results .site-main article.type-attachment{
    border-radius:24px;
}.search-results .site-main .entry-list-item article h2{
    margin-bottom:24px;
}

.search-results .site-main .entry-list-item article .wp-element-button, .search-results .site-main article.type-attachment  .wp-element-button{
    border-radius:8px;
    background-color:#312783;
    color:#fff;
}
/* BCE-pijl (uit de plugin, zelfde als de knoppen) op Figma-maat: ±15×14 */
.search-results .carmel-search-arrow svg {
    width: 15px;
    height: 14px;
    flex-shrink: 0;
}

body.search-results #inner-wrap #primary, body.search-no-results #inner-wrap #primary{
    background-color: #fff;
    width:calc(100% - 32px);
    margin:0 auto;
    border-radius:24px;
    padding-top:140px;
    margin-top:-104px;
    position: relative;

    &:before {
        content: '';
        background-image: url(images/hero-corner-right.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 373px;
        height: 294px;
        flex-shrink: 0;
        aspect-ratio: 85 / 67;
        position: absolute;
        right: 0px;
        top: 0px;
        z-index: 2;
    }

    &:after{
        content:'';
        width: 361.822px;
        height: 400px;
        aspect-ratio: 199/220;
        position: absolute;
        left:0;
        bottom:30%;
        background-image:url(images/C.svg);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
    }

}

@media(max-width:1024px){
    body.search-results #inner-wrap #primary, body.search-no-results #inner-wrap #primary{
        &:after{
            display:none;
        }
    }
}

/* Zoekresultaten — zoekbalk, telling en kaarten (Figma: Pages →
   Zoekresultaten). Alles in één kolom van max. 704px, gecentreerd.
   Balk 120px hoog, 8/8/8/24 binnenruimte, radius 32, 1px rand, BC Grijs;
   groene knop vult de hoogte (104px), radius 23 (= 32 − 8 − 1, concentrisch). */
.carmel-search-results-searchbar,
.carmel-search-results-count,
body.search #archive-container,
body.search .pagination {
    width: 100%;
    max-width: 704px;
    margin-left: auto;
    margin-right: auto;
}

#main.site-main:has(.carmel-search-results-searchbar) .carmel-search-results-searchbar {
    margin-bottom: 40px;
}

.carmel-search-results-searchbar {
    background: var(--bce-color-bg);
    border: 1px solid #E5E5E5;
    border-radius: 32px;
    padding: 0;

    form {
        display: flex;
        align-items: center;
        gap: 16px;
        height: 120px;
        padding: 8px 8px 8px 24px;
    }
}

.carmel-search-results-searchbar input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--bce-font-body);
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.72px;
    color: var(--bce-color-text);

    &:focus {
        color: var(--bce-color-text);
        box-shadow: none;
        outline: none;
    }
    &::placeholder {
        color: var(--bce-color-text);
        opacity: 0.5;
    }
}

/* Geen ×-wisknop van de browser (plat geschreven: genest negeert Chrome) */
.carmel-search-results-searchbar input[type=search]::-webkit-search-cancel-button,
#search-drawer .search-form .search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.carmel-search-results-searchbar .wp-block-search__button.wp-block-search__button {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    margin: 0;
    padding: 0;
    border: 0;
    /* concentrisch met de balk: 32 − 8 (padding) − 1 (rand) = 23px.
       !important: de algemene knopregel zet --bce-btn-radius !important. */
    border-radius: 23px !important;
    background-color: var(--bce-color-secondary-groen);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='14' cy='10' r='7'/%3E%3Cpath d='M9 15l-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px 36px;
    transition: background-color 0.2s ease;
}
.carmel-search-results-searchbar .wp-block-search__button.wp-block-search__button:is(:hover, :focus-visible) {
    background-color: var(--bce-color-text);
    box-shadow: none;
}

/* "Er zijn 8 zoekresultaten voor je zoekopdracht “vakantie”." — Body Medium */
.carmel-search-results-count {
    order: 2; /* #main is een flex-kolom met order: kop 1, zoekbalk 2, lijst 3 */
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 20px !important;
    line-height: 120% !important;
    letter-spacing: normal !important;

    strong {
        font-weight: 700;
    }
}

.search-archive .excerpt_part strong{
    font-weight:400;
    text-decoration: underline; /* zoekterm onderstreept, zoals in Figma */
}

/* Kop "Zoek en vind": Display D-1, gecentreerd */
body.search .site-main h1 {
    font-size: 88px !important;
    line-height: 90%;
    letter-spacing: -2.64px;
    font-weight: 500;
    text-align: center;
}
@media (max-width: 1024px) {
    body.search .site-main h1 {
        font-size: 48px !important;
        letter-spacing: -1.44px;
    }
    .search-results h2.entry-title {
        --h2-size: 22px;
        font-size: 22px;
        line-height: 120%;
    }
}

@media(max-width:1024px){
    /* Mobiel (Figma 390): balk 88px, knop 72px, invoer 18px */
    .carmel-search-results-searchbar {
        border-radius: 24px;

        form {
            height: 88px;
            padding: 8px 8px 8px 16px;
        }
    }
    .carmel-search-results-searchbar input[type=search] {
        font-size: 18px;
        letter-spacing: -0.54px;
    }
    .carmel-search-results-searchbar .wp-block-search__button.wp-block-search__button {
        width: 72px;
        height: 72px;
        border-radius: 15px !important; /* 24 − 8 − 1 */
        background-size: 28px 28px;
    }
    .carmel-search-results-count {
        font-size: 16px !important;
        margin-bottom: 24px;
    }
    .search-results .site-main h1{
        margin-bottom:32px !important;
    }

    body.search-results #inner-wrap #primary{
        background-color: #fff;
        width:calc(100% - 32px);
        margin:0 auto;
        border-radius:24px;
        padding-top:80px;
        margin-top:-104px;
    }

    .search-results .site-main .entry-list-item article{
        padding:24px;
    }
}


.js-slider-arrow {
    display: block;
    width: 17px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M0.00516991 8.00003C4.42317 8.00003 8.00519 4.418 8.00519 0' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3Cpath d='M16.9964 8H4.77694e-07C4.418 8 8.00002 11.582 8.00002 16' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    svg{
        opacity:0;
    }
}


.carmel-news-slider__nav button,
.carmel-row-slider__nav button,
.carmel-team-slider__nav button {

    + button{
        .js-slider-arrow{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M16.9912 8.00003C12.5732 8.00003 8.99121 4.418 8.99121 0' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3Cpath d='M0 8H16.9964C12.5784 8 8.99638 11.582 8.99638 16' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3C/svg%3E");

        }
    }
}

.carmel-row-slider__nav button{
    display: block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M0.00516991 8.00003C4.42317 8.00003 8.00519 4.418 8.00519 0' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3Cpath d='M16.9964 8H4.77694e-07C4.418 8 8.00002 11.582 8.00002 16' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size:17px 16px;

        + button{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M16.9912 8.00003C12.5732 8.00003 8.99121 4.418 8.99121 0' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3Cpath d='M0 8H16.9964C12.5784 8 8.99638 11.582 8.99638 16' stroke='%23F9F7F7' stroke-width='1.75627' stroke-miterlimit='10'/%3E%3C/svg%3E");

    }
    svg{
        opacity:0;
    }

}

.ptrn-textgallery {
    margin-bottom:120px !important;

    .text-gallery-gallery{
        padding-bottom:120px;
        &:after{
            content:'';
            background-image:url(images/Pattern-B.svg);
            width: 254px;
            height: 200px;
            aspect-ratio: 127/100;
            position: absolute;
            right: 0;
            bottom: 20px;
            z-index:999;
            background-size: contain;

        }
    }

}

@media(max-width:1024px){
    .ptrn-textgallery{
        margin-bottom:80px !important;
        .text-gallery-gallery{
            padding-bottom:50px;
            &:after{
                width: 127px;
                height: 100px;
                aspect-ratio: 127/100;
                position: absolute;
                right: 0;
                bottom: 0;

            }

            .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure img,
            .kb-gallery-id-1700_33a5e4-76.kb-gallery-ul.kb-gallery-type-fluidcarousel .kt-blocks-carousel figure .kb-gal-image-radius{
                height:345px !important;
            }

        }
        h2{
            font-size:32px !important;
            letter-spacing: -0.64px !important;
            line-height:100% !important
        }
        p{
            line-height:120% !important;;
            font-size:16px !important;
        }
    }
}

.ptrn-gallery{
    margin-bottom:120px !important;
    padding-bottom:120px;
    &:after{
        content:'';
        background-image:url(images/Pattern-B.svg);
        width: 254px;
        height: 200px;
        aspect-ratio: 127/100;
        position: absolute;
        right: 0;
        bottom: 20px;
        z-index:999;
        background-size: contain;
    }
    .splide__pagination {
        bottom:-65px !important;
        li{
            margin-right:24px;

            button{
                border-color:rgba(49, 39, 131, 0.25);

                width: 16px;
                height: 16px;
                aspect-ratio: 1/1;

                &.is-active, &:hover{
                    background-color:rgba(49, 39, 131, 1);
                    border-color:rgba(49, 39, 131, 1);
                }
            }

            &:last-child{
                margin-right:0;
            }
        }
    }
}

@media(max-width:1024px){
    .ptrn-gallery{
        padding-bottom:0;
         &:after{
            content:'';
            background-image:url(images/Pattern-B.svg);
            width: 127px;
            height: 100px;
            aspect-ratio: 127/100;
            position: absolute;
            right: 0;
            bottom: 22px;
            z-index:999;
            background-size: contain;
        }

        .splide__pagination {
            bottom:-49px !important;
            left:40px !important;
            right:auto !important;
            li{
                margin-right:8px;

                button{
                    width:8px;
                    height:8px;
                }
            }
        }

    }
}

.ptrn-video{
    margin-bottom:120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    > .kt-row-column-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        > div{
            align-self: center !important;
        }
    }

    &:before{
        content:'';
        background-image:url(images/B.svg);
        background-size:contain;
        background-repeat: no-repeat;
        width: 194.982px;
        height: 256px;
        aspect-ratio: 131/172;
        position: absolute;
        left: -62px;
        top: -53px;
        z-index:10;
    }

    &:after{
        content:'';
        width: 231.566px;
        height: 256px;
        aspect-ratio: 199/220;
        position: absolute;
        right: -72.566px;
        bottom: -53px;
        background-image:url(images/C2.svg);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
    }
    &.js-video-preview:hover a {
        transform: none !important;
        &:hover{
            transform: scale(1.71) !important;;
        }
    }
    h1,h2{
        font-size:64px !important;
        font-weight: 500 !important;
        line-height: 90% !important;
        letter-spacing: -1.28px !important;
    }
}

@media(max-width:1024px){
    .ptrn-video{
        margin-bottom:80px !important;
        height: 720px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        &:before{
            width: 106.63px;
            height: 140px;
            aspect-ratio: 106.63/140.00;
            position: absolute;
            left: -29px;
            top: -29px;
        }

        &:after{
            position: absolute;
            right: -21px;
            top: 609px;
            width: 126.637px;
            height: 140px;
            aspect-ratio: 126.64/140.00;
        }

        h1,h2{
            font-size:40px !important;
            letter-spacing: -0.8px !important;
        }
    }
}


.ptrn-heading-text{
    margin-bottom:120px !important;
    &:after{
        content:'';
        width: 108.288px;
        height: 217px;
        aspect-ratio: 196.29/217.00;
        position: absolute;
        right: calc(0px - ((100vw - 1454px) / 2));
        bottom:-80px;
        background-image:url(images/C3.svg);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
    }

    p{
        font-weight: 400 !important;
        line-height: 120% !important;
        font-size:32px !important;
    }

    &.heading-only{
        p{
            font-size:24px !important;
        }
    }

}


@media(max-width:1024px){
    .ptrn-heading-text{
        margin-bottom:80px !important;
        &:after{
            width: 99.501px;
            height: 110px;
            aspect-ratio: 99.50/110.00;
            position: absolute;
            bottom:-40px;
            right:0;
            background-image:url(images/c-vol.svg);
            z-index:0;
        }

        h2{
            letter-spacing: -0.64px !important;
            font-size:32px !important;
            line-height:100% !important
        }

        p{
            letter-spacing: normal !important;
            font-size:20px !important;
        }
    }
}

.two-images-textblock{
    margin-bottom:120px !important;

    &:after{
        content:'';
        width: 196.288px;
        height: 217px;
        aspect-ratio: 196.29/217.00;
        position: absolute;
        bottom:-80px;
        left: calc(0px - ((100vw - 1454px) / 2) - 80px);
        background-image:url(images/c-vol.svg);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 10;
    }

}

@media(max-width:1024px){
    .two-images-textblock{
        margin-bottom:80px !important;

        &:after{

            width: 99.501px;
            height: 110px;
            aspect-ratio: 99.50/110.00;
            position: absolute;
            bottom:-40px;
            right:-30px;
            left:auto;
            background-image:url(images/c-vol.svg);
            z-index:0;
        }
        h2{
            letter-spacing: -0.64px !important;
            font-size:32px !important;
            line-height:100% !important
        }

        p{
            letter-spacing: -0.54px !important;
            font-size:18px !important;
            line-height:120% !important;
        }
    }
}
/* team */


/* team */
.single-content .carmel-team-slider__name{
    font-weight:500;
    font-size:28px;
    line-height: 120%;
    margin-bottom:8px;
    margin-top:40px;
}
.single-content h3.carmel-infohub__category-title{
    font-style: normal;
    font-weight: 700;
    line-height: 120%; 
    font-family:  var(--bce-font-heading);
    font-size:18px;
}
.carmel-infohub__links a{
    font-size:16px;
    line-height:100%;
}
.carmel-infohub__links li{
    margin-bottom:0;
}
.entry-content > .kb-row-layout-wrap:has(.carmel-team-slider){
    --team-gap: var(--bce-space-lg); /* titel → slider */
    margin-bottom:120px !important;

    /* 80px boven het label (Kadence zet 24px via de rij-id) */
    > .kt-row-column-wrap{
        padding-top:var(--bce-space-xl) !important;
    }
    /* Label als blok, anders komt er door de regelhoogte 7px extra boven */
    .wp-block-carmel-core-label{
        display:flex;
    }
    h2.wp-block-heading{
        margin-top:24px;
    }
    .carmel-team-slider{
        margin-top:var(--team-gap);
    }

    .carmel-team-slider__role{
        font-size:20px !important;
        line-height:120% !important;
        font-weight: 400 !important;
        opacity:0.5;
        margin-bottom:8px;
    }
    .carmel-team-slider__contact{
        a{
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
            color:rgba(49, 39, 131, 1);
            font-size:20px !important;
            line-height:120% !important;
            font-weight: 400 !important;
        }
    }
    /* Geen vaste breedte: het blok verdeelt zelf (4 naast elkaar op desktop),
       alleen de Figma-verhouding 465×565 blijft. */
    .carmel-team-slider__image{
        aspect-ratio: 465 / 565;
        border-radius:24px;
        .carmel-team-slider__image-placeholder{
            height:100%;
            border-radius:24px;
        }
    }
    > div{
        gap:0;
    }
}

/* Desktop: pijlen rechts op de hoogte van de titel i.p.v. op een eigen regel */
@media(min-width:1025px) {
    .carmel-team-slider{
        position:relative;
    }
    .carmel-team-slider__nav{
        position:absolute;
        right:0;
        bottom:calc(100% + var(--team-gap, 0px));
        margin-bottom:0;
    }
}

@media(max-width:1024px) {
    .entry-content > .kb-row-layout-wrap:has(.carmel-team-slider){
        --team-gap: var(--bce-space-md);
        margin-bottom:80px !important;

        > .kt-row-column-wrap{
            padding-top:var(--bce-space-lg) !important;
        }
        h2.wp-block-heading{
            margin-top:16px;
            font-size:32px !important;
            letter-spacing: -0.64px !important;
        }

        .carmel-team-slider__role{
            font-size:16px !important;
        }
        .carmel-team-slider__contact{
            a{
                font-size:16px !important;
            }
        }
        .carmel-team-slider__image{
            aspect-ratio: 345 / 383;
        }
    }
    .single-content .carmel-team-slider__name{
        font-size:22px;
        margin-top:32px;
    }
}

.single-content .carmel-team-grid__name{
    font-weight:500 !important;
    font-size:28px !important;
    line-height: 120% !important;
    margin-bottom:8px !important;
    margin-top:40px !important;
}

.entry-content > .kb-row-layout-wrap:has(.carmel-team-grid){
    margin-bottom:120px !important;
    h2.wp-block-heading{
        margin-top:24px;
    }

    .carmel-team-grid__role{
        font-size:20px !important;
        line-height:120% !important;
        font-weight: 400 !important;
        opacity:0.5;
        margin-bottom:8px;
    }
    .carmel-team-grid__image{
        height:383px;
        width:100%;
        .carmel-team-grid__image-placeholder{
            height:383px;
            border-radius:24px;
        }
    }
    > div{
        gap:0;

        > :first-child{
            margin-bottom:80px !important;
        }
    }
}

@media(max-width:1500px){
    .entry-content > .kb-row-layout-wrap:has(.carmel-team-grid){
        .carmel-team-grid{
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media(max-width:1226px){
    .entry-content > .kb-row-layout-wrap:has(.carmel-team-grid){
        .carmel-team-grid{
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media(max-width:1024px) {
    .entry-content > .kb-row-layout-wrap:has(.carmel-team-grid){
        margin-bottom:80px !important;
        h2.wp-block-heading{
            margin-top:16px;
            font-size:32px !important;
            letter-spacing: -0.64px !important;
        }

        .carmel-team-grid__role{
            font-size:16px !important;
        }
        .carmel-team-grid__image{
            height:383px;
            width:345px;
            .carmel-team-grid__image-placeholder{
                height:383px;
            }
        }
    }
    .single-content .carmel-team-grid__name{
        font-size:22px !important;
        margin-top:32px !important;
    }
}

.nieuwspagina{
    p, ul, li, ol{
        font-size:20px !important;
        font-weight: 400 !important;
        line-height: 120% !important;
    }
    figure, figure img{
        border-radius:24px;
    }

}


@media(max-width:1024px){
    .nieuwspagina{
        p, ul, li, ol{
            font-size:16px !important;
        }
        figure, figure img{
            border-radius:24px;
        }
        h1{
            font-size:48px !important;
            letter-spacing: -1.44px !important;
            line-height: 90% !important;
        }

    }
}

.nieuwswrapper{
    > div > .wp-block-kadence-column{
        &:after {
            content: '';
            width: 361.822px;
            height: 400px;
            aspect-ratio: 199 / 220;
            position: absolute;
            left: 16px;
            bottom: 30%;
            background-image: url(images/C.svg);
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 10;
        }
        > div > div{
            &:before {
                content: '';
                background-image: url(images/hero-corner-right.svg);
                background-repeat: no-repeat;
                background-size: contain;
                width: 373px;
                height: 294px;
                flex-shrink: 0;
                aspect-ratio: 85 / 67;
                position: absolute;
                right: 0px;
                top: 0px;
                z-index: 2;
            }
        }
    }
}

.nieuwsdteailslider{
    .carmel-news-slider__badge-dot{
        background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11.8468%2011.8555L10.8543%2011.8018C10.6011%2011.788%2010.3722%2011.9487%2010.3009%2012.1891L10.0224%2013.1325C9.92453%2013.4637%209.54152%2013.6202%209.23584%2013.4538L8.3653%2012.9796C8.14329%2012.8587%207.86631%2012.9049%207.69685%2013.091L7.03172%2013.8215C6.79853%2014.078%206.3847%2014.0547%206.18232%2013.7734L5.6057%2012.9727C5.4589%2012.7688%205.18886%2012.6914%204.95446%2012.7867L4.03469%2013.1594C3.71179%2013.2905%203.34932%2013.0919%203.29042%2012.7517L3.12248%2011.7833C3.07989%2011.5363%202.87055%2011.3508%202.61743%2011.3362L1.62517%2011.2774C1.27689%2011.2568%201.03736%2010.9223%201.13342%2010.5905L1.40708%209.64592C1.47686%209.40522%201.36963%209.14839%201.14822%209.02655L0.279798%208.54813C-0.0249796%208.3803%20-0.0938472%207.97624%200.138134%207.71852L0.799337%206.98477C0.967886%206.79782%200.983896%206.52069%200.838304%206.31582L0.265904%205.51249C0.064733%205.23058%200.180122%204.83668%200.502419%204.70438L1.42037%204.3269C1.65417%204.23074%201.79039%203.98795%201.74871%203.74068L1.5859%202.771C1.52851%202.43056%201.80489%202.12565%202.15347%202.14446L3.14603%202.19822C3.39916%202.21196%203.62812%202.05129%203.6991%201.81089L3.9779%200.867494C4.07577%200.536007%204.45878%200.37982%204.76446%200.546161L5.635%201.0204C5.85701%201.14134%206.134%201.09505%206.30345%200.909004L6.96859%200.178539C7.20177%20-0.0779903%207.6156%20-0.0546966%207.81798%200.226619L8.3946%201.02726C8.5414%201.23123%208.81145%201.30858%209.04554%201.21332L9.96531%200.840616C10.2882%200.709515%2010.6507%200.908108%2010.7096%201.24826L10.8775%202.21673C10.9201%202.46371%2011.1294%202.64886%2011.3826%202.66379L12.3748%202.72233C12.7231%202.74293%2012.9626%203.07741%2012.8666%203.40919L12.5929%204.35408C12.5231%204.59478%2012.6304%204.85161%2012.8518%204.97345L13.7202%205.45187C14.025%205.6197%2014.0938%206.02376%2013.8619%206.28148L13.2007%207.01523C13.0321%207.20218%2013.0161%207.47961%2013.1617%207.68418L13.7341%208.48781C13.935%208.76972%2013.8199%209.16333%2013.4976%209.29592L12.5796%209.6734C12.3458%209.76956%2012.2096%2010.0123%2012.251%2010.2596L12.4141%2011.229C12.4715%2011.5694%2012.1951%2011.8746%2011.8465%2011.8558%22%20fill%3D%22%23FFCC00%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E) !important;
        background-color: transparent !important;
    }
    .carmel-news-slider__image{
        border-radius:24px;
    }
}

@media(max-width:1024px){
    .nieuwswrapper{
        > div > .wp-block-kadence-column{
            &:after {
                display:none;
            }
            > div > div{
                &:before {
                    content: '';
                    width: 274px;
                    height: 216px;
                    aspect-ratio: 137/108;
                    right: -120px;
                    top: 0px;

                }
            }
        }
    }

}

/* faq */

/**
 * FAQ-blok (carmel-faq) — volgens Figma SECTIONS > FAQ ("FAQ - Large").
 * BEWUST niet meer gescoped op .ptrn-faq: hetzelfde blok staat ook los
 * op bv. /veelgestelde-vragen/ en moet er overal hetzelfde uitzien.
 * Kopgroottes lopen via de schakelaars bovenaan dit bestand
 * (categorie = H3, vraag = H5), mobiel komt dus vanzelf mee.
 */
.carmel-faq-accordion__category {
    margin-bottom: 80px;

    &:last-child {
        margin-bottom: 0;
    }
}

.carmel-faq-accordion__category-title {
    margin: 0 0 48px !important;
}

/* vragen: gestippelde lijn erboven, 16px eronder, 24px tussen de vragen */
.carmel-faq-accordion__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.carmel-faq-accordion__item,
.carmel-faq-accordion__item:first-child {
    border-top: 1px dashed #D4D4D4; /* Neutral/300 */
    border-bottom: 0;
    padding-top: 16px;
}

.carmel-faq-accordion__question {
    padding: 0;
    align-items: flex-start;
}

.carmel-faq-accordion__question-text {
    color: #000; /* Neutral/1000 */
}

/* blauw rondje met witte plus/min, uitgelijnd op de eerste regel */
.carmel-faq-accordion__toggle-icon {
    background-color: var(--bce-color-secondary-blauw);
    color: var(--bce-color-white);
    margin-top: 2px;
}

/* antwoord: 24px onder de vraag (als marge, zodat het ingeklapt wegvalt),
   Body Medium */
.carmel-faq-accordion__item.is-open .carmel-faq-accordion__answer {
    padding-bottom: 0;
}
.carmel-faq-accordion__answer-inner {
    padding-right: 16px;

    > :first-child {
        margin-top: 24px !important;
    }
    p, ul, li, ol {
        font-size: var(--bce-font-size-body-medium) !important;
        line-height: 120% !important;
        font-weight: 400 !important;
    }
}

.ptrn-faq {
    margin-bottom: 120px !important;
}

@media (max-width: 1024px) {
    .ptrn-faq {
        margin-bottom: 80px !important;

        h2 {
            margin-top: 24px !important;
            margin-bottom: 64px !important;
        }
    }
}

@media (max-width: 782px) {
    .carmel-faq-accordion__category {
        margin-bottom: 64px;
    }
    .carmel-faq-accordion__category-title {
        margin-bottom: 24px !important;
    }
}

/* /veelgestelde-vragen/: kop en vragen staan daar onder elkaar in één
   kolom — dan 64px tussen kop en eerste categorie (zoals mobiel in Figma) */
.veelgesteldevragen > .kt-inside-inner-col > h2 {
    margin-bottom: 64px !important;
}

/* ================================================================
   Infohub-pagina's met terugknop (FAQ-pagina + infohub-subpagina's)
   Figma: Pages → "Locatie - Infohub - Veelgestelde vragen" en
   "Infohub - Subpagina": inhoud in één kolom van 704px, gecentreerd;
   terug naar de infohub als kleine tekstlink ("‹ Infohub") linksboven.
   ================================================================ */
@media (min-width: 1025px) {
    /* .kt-has-2-columns: anders past dit ook op de buitenste rij (waar de
       knop dieper genest in zit) */
    .kt-row-column-wrap.kt-has-2-columns:has(> .wp-block-kadence-column .knop-terug) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 704px) minmax(0, 1fr) !important;

        > .wp-block-kadence-column:has(.knop-terug) {
            grid-column: 1;
        }
        > .wp-block-kadence-column:has(.knop-terug) + .wp-block-kadence-column {
            grid-column: 2;
        }
    }
}

/* "‹ Infohub": tekstlink i.p.v. knop */
.kb-button.wp-block-button__link.knop-terug {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bce-color-secondary-blauw) !important;
    font-size: 16px !important;
    line-height: 120% !important;
    gap: 8px !important;

    .kt-btn-inner-text {
        color: inherit !important;
        font-size: inherit !important;
    }
    svg {
        width: 12px;
        height: 12px;
    }
    svg path {
        stroke: currentColor !important;
    }
    &:is(:hover, :focus-visible) .kt-btn-inner-text {
        text-decoration: underline;
    }
}

/* FAQ op de FAQ-pagina: de kleine variant uit Figma — titel Display,
   categorie H5 (24px), vraag H6 (18px). Elders blijft "FAQ - Large". */
.veelgesteldevragen > .kt-inside-inner-col > h2 {
    font-size: var(--bce-font-size-display1, 88px) !important;
    line-height: 90% !important;
    letter-spacing: var(--bce-letter-spacing-display1) !important;
}
.veelgesteldevragen .carmel-faq-accordion__category-title {
    --h5-size: 24px;
    --h5-line-height: 120%;
    margin-bottom: 24px !important;
}
.veelgesteldevragen .carmel-faq-accordion__question-text {
    --h6-size: 18px;
    --h6-line-height: 120%;
}
.veelgesteldevragen .carmel-faq-accordion__category {
    margin-bottom: 48px;
}
.veelgesteldevragen .carmel-faq-accordion__list {
    gap: 16px;
}
/* antwoord kleiner dan de vraag: Body Small (16px, mobiel 14px) */
.veelgesteldevragen .carmel-faq-accordion__answer-inner :is(p, ul, li, ol) {
    font-size: var(--bce-font-size-body-small) !important;
}
@media (max-width: 782px) {
    .veelgesteldevragen > .kt-inside-inner-col > h2 {
        font-size: var(--bce-font-size-display1-mobile, 48px) !important;
        letter-spacing: -1.44px !important; /* -3% van 48px */
    }
    .veelgesteldevragen .carmel-faq-accordion__category-title {
        --h5-size: 20px;
    }
    .veelgesteldevragen .carmel-faq-accordion__question-text {
        --h6-size: 16px;
    }
    .veelgesteldevragen .carmel-faq-accordion__answer-inner :is(p, ul, li, ol) {
        font-size: var(--bce-font-size-body-small-mobile) !important;
    }
}
/**
 * ================================================================
 * MOBIEL — afgestemd op Figma "Home (Bonhoeffer College) - Mobile"
 * ================================================================
 * Bron: DESIGNS > Pages, frame van 390px breed, afgelezen in Dev Mode
 * op 2026-10-13. Bewust ALLEEN <= 782px (zelfde breekpunt als de
 * typografie-schakelaars bovenaan dit bestand), zodat tablet en
 * desktop ongemoeid blijven.
 */
@media (max-width: 782px) {

    /* Body-tokens naar de mobiele Figma-waarden — de basisregel voor
       body/p/li leunt op deze variabelen, dus dit werkt overal door
       (voorheen bleef alle lopende tekst op mobiel 24px). */
    :root {
        --bce-font-size-body-xlarge: var(--bce-font-size-body-xlarge-mobile);
        --bce-font-size-body-large: var(--bce-font-size-body-large-mobile);
        --bce-line-height-body-large: var(--bce-line-height-body-large-mobile);
        --bce-font-size-body-medium: var(--bce-font-size-body-medium-mobile);
        --bce-font-size-body-small: var(--bce-font-size-body-small-mobile);
        --bce-btn-padding: 0 16px;
    }

    /* Secties staan in Figma op 24px van de rand (de header en hero
       op 16px/8px, die vallen buiten #inner-wrap of zijn alignfull). */
    #inner-wrap {
        --global-content-edge-padding: 24px;
    }

    /* Header — Figma "Top": 48px hoog, padding 8/8/8/16, radius 16,
       witte balk met 1px rand, logo en icoonknoppen 32px. */
    #mobile-header .site-header-row-container-inner {
        background-color: var(--bce-color-white);
        border: 1px solid var(--bce-color-border-light);
        border-radius: 16px;
    }
    #mobile-header .site-main-header-wrap .site-container {
        /* De balk heeft hierboven al een eigen rand (radius 16); de
           onderrand uit de plugin (kadence-fixes.css) met radius 24 gaf
           in de hoeken een tweede, afwijkende ronding. */
        border-bottom: 0;
        border-radius: 16px;
        padding: 0 8px 0 16px;
    }
    #mobile-header .site-main-header-inner-wrap {
        min-height: 46px;
    }
    #mobile-header .site-branding {
        padding-right: 0;
    }
    #mobile-header .custom-logo {
        height: 32px;
        width: auto;
        max-height: 32px;
    }
    .mobile-toggle-open-container #mobile-toggle {
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    /* Knoppen — Figma "Button Pill" Large (mobiel): 48px hoog,
       16px zij-padding (via --bce-btn-padding), 14px Medium. */
    .kb-button.wp-block-button__link {
        font-size: var(--bce-font-size-button-large-mobile) !important;
        line-height: 100% !important;
        min-height: 48px;
    }

    /* Hero-snelkoppelingen — kaarten 24px van de rand, 24px ertussen,
       kaart 260px hoog (afbeelding 156px), 112px tot de volgende sectie. */
    .kb-row-layout-wrap.hero-quick-links {
        margin-bottom: 80px !important;

        > .kt-row-column-wrap {
            padding: 24px 24px 32px;
            row-gap: 24px;
        }

        .quicklinkimage,
        .quicklinkimage img {
            display: none;
        }

        .quick-link-content{
            margin-bottom:0;
        }

        /* ruimte voor de absoluut gepositioneerde pijlknop (32px + 8px) */
        .quick-link-content h5 {
            flex: 1 1 0;
            min-width: 0;
            padding-right: 40px;
        }
    }

    /* Sectie-labels zijn Label Small (14px); alleen het hero-label is
       Label Large (16px). */
    .entry-content .wp-block-carmel-core-label:not(.js-hero-eyebrow) .carmel-label__text {
        font-size: var(--bce-font-size-label-small);
    }

    /* Homepage-intro — lopende tekst 16px / 140% */
    .homepageintro p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 140% !important;
    }

    /* Locatiefilter — intro is Body Small, locatienaam is H5 (zonder
       de negatieve letter-spacing uit de plugin). */
    .carmel-locatie-filter__intro {
        font-size: var(--bce-font-size-body-small-mobile) !important;
        line-height: 100% !important;
    }
    .locatiefilter .carmel-locatie-filter__name {
        letter-spacing: var(--bce-letter-spacing-h5);
    }

    /* Rij-slider ("Alles wat je wilt weten") — intro als Body Medium */
    .pattern-text-reveal .kt-has-2-columns p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 120% !important;
    }

    /* CTA — Figma "CTA - Medium": 56px boven, padding 56/24, radius 40,
       32px tussen kop en knoppen; eyebrow is Body Large (-3%). */
    :root div.cta-pattern, :root div.cta-pattern-wide {
        margin-top: 56px !important;
        border-radius: 40px !important; /* wint van :root div.cta-pattern.blauw e.d. */

        &:after {
            border-radius: 0 0 40px 40px;
        }
        > div:first-child {
            padding-top: 56px !important;
        }
        /* specifieker dan ".cta-pattern > div h3" uit patterns.css */
        > div.kt-row-column-wrap :is(h1, h2, h3) {
            margin-bottom: 32px !important;
        }
        p {
            letter-spacing: -0.54px !important;
        }
    }

    /* Footer — links Body Medium (16px/120%), groepstitels Label Small
       (14px/100%), geen extra letter-spacing in Figma. */
    footer.site-footer {
        p, p a {
            letter-spacing: normal !important;
        }
        .linklist p,
        .linklist a {
            font-size: var(--bce-font-size-body-medium-mobile) !important;
            line-height: 120% !important;
        }
    }
}


/**
 * ================================================================
 * PATRONEN MOBIEL — afgestemd op Figma SECTIONS (mobiele varianten)
 * ================================================================
 * Vergeleken met de mobiele opmaak van theme-ccs en per patroon
 * gecontroleerd tegen de mobiele frames op de Figma-pagina's Intro &
 * Text, Image & Text, Image & Gallery, FAQ, Tabs en Sliders
 * (2026-10-13). Waar CCS en het BCE-design verschillen, volgt dit het
 * BCE-design.
 */
@media (max-width: 782px) {

    /* Hero — subtitel is Body Large: 18px met -3% letter-spacing */
    .ptrn-herobigimage p {
        letter-spacing: -0.54px !important;
    }

    /* Intro & Text (01 t/m 05) — lopende tekst is Body xLarge, 20px/120% */
    .ptrn-introtext p,
    .ptrn-introtext-fullwidth p,
    .ptrn-heading-text.heading-only p {
        font-size: var(--bce-font-size-body-xlarge-mobile) !important;
        line-height: 120% !important;
        letter-spacing: normal !important;
    }

    /* Image & Text 01/03 — tekst Body Medium, 24px tussen tekst en beeld,
       afbeelding 320px hoog met radius 16 (de homepage-intro, Image &
       Text 02, heeft een vierkante afbeelding en blijft zoals hij is) */
    .image-text-pattern,
    .text-image-pattern:not(.homepageintro) {
        > .kt-row-column-wrap {
            row-gap: 24px !important;
        }
        p {
            font-size: var(--bce-font-size-body-medium-mobile) !important;
            line-height: 120% !important;
        }
        figure,
        figure img {
            height: 320px !important;
            border-radius: 16px;
            object-fit: cover;
        }
    }

    /* Image & Text 04 (twee afbeeldingen) — tekst Body Medium,
       afbeeldingen 320px hoog met radius 16 */
    .two-images-textblock p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 120% !important;
        letter-spacing: normal !important;
    }
    .two-images-textblock-images img {
        height: 320px;
        border-radius: 16px;
    }

    /* Quote — witte kaart 24px van de rand, radius 40, padding 80/24/24;
       naam/locatie onder het citaat is Label Large (16px) */
    .quote-pattern {
        > .kt-row-column-wrap > .wp-block-kadence-column {
            margin-left: 24px !important;
            margin-right: 24px !important;

            > .kt-inside-inner-col {
                border-radius: 40px;
            }
            &:after {
                border-radius: 40px 40px 0 0;
            }
            .kt-row-column-wrap {
                padding-top: 80px;
                padding-bottom: 24px;
            }
        }
    }
    .entry-content .quote-pattern .wp-block-carmel-core-label .carmel-label__text {
        font-size: var(--bce-font-size-label-large);
    }

    /* Image & Gallery — Masonry-tekst is Body Medium; carrousel 400px hoog */
    .ptrn-imagestext p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 120% !important;
    }
    .ptrn-textgallery .text-gallery-gallery .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure img {
        height: 400px !important;
    }

    /* Tabs Horizontal — 40px tussen kop en tab-lijst */
    .tabsblock h2 {
        margin-bottom: 40px !important;
    }

    /* Tabs Vertical — menu-items en tab-tekst zijn Body Medium */
    .ptrn-tabs-vertical p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 120% !important;
    }

    /* Slider - Steps — intro Body Medium, staptitel H5, staptekst Body Small */
    .steps-pattern p {
        font-size: var(--bce-font-size-body-medium-mobile) !important;
        line-height: 120% !important;
    }
    .steps-pattern .steps-pattern-step > .kt-inside-inner-col {
        h5 {
            font-size: var(--bce-font-size-h5-mobile);
            line-height: var(--bce-line-height-h5);
        }
        p {
            font-size: var(--bce-font-size-body-small-mobile) !important;
            line-height: 100% !important;
        }
    }
}

/**
 * MOBIEL — aanvullende correcties na review (2026-10-13)
 */
@media (max-width: 782px) {

    /* Hoekpatroon rechtsboven in de hero's van vervolgpagina's kleiner
       (:is() met .wit erbij: even specifiek als de bestaande geneste regel) */
    :is(.ptrn-herobigimage, .ptrn-herobigimage.wit) > div > div > .kt-inside-inner-col:before,
    .herowrapper.nieuwsheader > div > div > .kt-inside-inner-col:before {
        width: 150px;
        height: 118px; /* 85/67, zelfde verhouding als desktop */
    }

    /* Galerij onder de hero: bredere afbeeldingen (de slide was 220px en
       de afbeelding daarin maar 80% breed) */
    .hero-gallery-gallery .carmel-image-slider__slide {
        flex-basis: 280px !important;
        width: 280px !important;

        img {
            width: 100% !important;
            object-fit: cover;
        }
    }

    /* Decoratieve B/C over de afbeelding van image-text/text-image kleiner */
    .image-text-pattern .wp-block-kadence-column figure::before {
        width: 50px;
        height: 66px;
    }
    .text-image-pattern:not(.homepageintro) .wp-block-kadence-column figure::before {
        width: 60px;
        height: 66px;
    }

    /* Slider-pijlen (nieuws én kaart-sliders) gelijk: 32px rond, en niet
       tegen de schermrand bij een full-width slider */
    .carmel-news-slider__nav button,
    .carmel-row-slider__nav button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
    }
    .carmel-news-slider__nav {
        gap: 8px;
    }
    .kb-row-layout-wrap.alignfull > .carmel-row-slider__nav {
        padding: 0 24px;
    }

    /* Text-reveal-slider: op mobiel bestaat er geen hover, dus de
       kaarttekst altijd tonen (zoals in theme-ccs) en de afbeelding
       lager (246px, gelijk aan de stappen-slider) */
    .pattern-text-reveal .js-card {
        height: auto !important;

        /* kaartvlak vult de kolom; de rij (align-items: stretch) maakt alle
           kolommen even hoog als de hoogste kaart, zoals in theme-ccs */
        > .kt-inside-inner-col {
            height: 100% !important;
        }
        .js-card-desc {
            height: auto !important;
            max-height: none !important;
            opacity: 1 !important;
            overflow: visible !important;
            -webkit-line-clamp: unset;
            line-clamp: unset;
        }
        figure,
        figure img {
            height: 246px !important;
        }
    }
}

/**
 * MOBIEL — Tabs Vertical (ptrn-tabs-vertical) als accordion
 */
@media (max-width: 782px) {

    /* In carmel-core/patterns.css staat ná de mobiele media query nog een
       ongescopete regel die de kopregel van een dichte tab (desktop:
       smalle verticale strook) met translateX(-50%) verschuift — op
       mobiel schoof daardoor de titel half buiten beeld. */
    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
        position: static;
        transform: none;
    }

    /* Kopregel: icoon | titel (mag over 2 regels) | ruimte voor de knop */
    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab .kb-section-dir-horizontal > .kt-inside-inner-col {
        flex-wrap: nowrap;
        align-items: center;
        padding-right: 48px; /* plus/min-knop: 40px + 8px */

        > .wp-block-kadence-column.tab-number {
            flex: 0 0 40px !important;
        }
        > .wp-block-kadence-column.tab-content {
            flex: 1 1 auto !important;
            min-width: 0;
        }
    }

    /* Knop onder de tekst links uitgelijnd, zoals in Figma */
    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab .kb-buttons-wrap {
        justify-content: flex-start !important;
    }
}

/**
 * MOBIEL/TABLET — hero's op vervolgpagina's gelijk aan de homepage:
 * gekleurd vlak 8px van de schermrand, tekst 16px binnen het vlak.
 * De marges en paddings staan per blok in de Kadence-editor (en
 * stapelden zich op tot 32-64px); hier één keer centraal vastgezet.
 */
@media (max-width: 1024px) {

    /* het vlak: 8px van de rand (homepage-waarde vanaf 1024px) */
    .entry-content > :is(.bighero, .herowrapper, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* pagina-hero's: alleen de buitenste inhoudsrij houdt zijpadding
       (= rand-padding, 24px vanaf de schermrand), geneste rijen/kolommen niet */
    .ptrn-herobigimage .ptrn-bighero > .kt-row-column-wrap :is(.kt-row-column-wrap, .kt-inside-inner-col) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* contact- en nieuwsoverzicht-hero */
    .entry-content > .herowrapper:not(.bighero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Kadence Element-sjablonen (nieuwsbericht, infohub): het vlak is
       hier de rij zelf, dus 16px binnen die rij */
    .nieuwswrapper .nieuwspagina > .kt-row-column-wrap,
    .entry-content > .kb-row-layout-wrap.alignfull:first-of-type:not(.bighero, .herowrapper, .ptrn-herobigimage) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap.kt-row-has-bg:first-of-type > .kt-row-column-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* =================================================================
   Designer-feedback BCE (oktober 2026) — zie FEEDBACK-DESIGNER.md.
   Nummers verwijzen naar de afvinklijst.
   ================================================================= */

/* 2a — Knop-hover: de pijl verschijnt na het wegschieten meteen weer aan
   de andere kant (geen fade-in). Leest de plugin uit (buttons.js). */
:root {
    --carmel-btn-arrow-fade-in: none;
}

/* 2b — Geen schaduw bij hover/focus op knoppen (komt van het
   Kadence-thema zelf en van de Contact-knop in de Customizer). */
button,
.button,
.wp-block-button__link,
.wp-element-button,
.kb-button,
input[type="button"],
input[type="submit"],
input[type="reset"],
#main-header .header-button2,
.mobile-header-button2 {
    &:hover,
    &:focus,
    &:active {
        box-shadow: none !important;
    }
}

/* 11 — Pijl in een knop met tekst altijd in de tekstkleur (ook bij hover).
   De per-site pijl-SVG uit de plugin heeft een vaste stroke-kleur. */
.kb-button:has(.kt-btn-inner-text) .kb-svg-icon-wrap svg [stroke] {
    stroke: currentColor !important;
}

/* 5 — Homepage-intro: vanaf tablet wordt de staande foto een lage strook;
   bovenkant vasthouden zodat het hoofd in beeld blijft. */
@media (max-width: 1024px) {
    .homepageintro img {
        object-position: 50% 0;
    }
}

/* 13 — Afbeelding in een kaart: afronding binnen = kleiner dan de kaart
   (Figma: kaart 16px, binnenruimte 24px, afbeelding 8px). */
.js-card .wp-block-kadence-image,
.js-card .wp-block-kadence-image img,
.js-card .wp-block-image img {
    border-radius: 8px !important;
}

/* 15 — "Méér te ontdekken": B- en C-visual verticaal gecentreerd naast
   het tekstblok (het tekstblok heeft boven en onder dezelfde ruimte,
   dus het midden van de rij is het midden van de tekst). */
.ptrn-introtext-fullwidth {
    &::before,
    &::after {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

/* 6 + 10 — Slider-pijlen rechts op de regel van de kop (positie uit
   js/slider-nav-heading.js). */
.bce-slider-intro > .kt-row-column-wrap > .carmel-row-slider__nav,
.bce-news-slider--nav-on-heading > .carmel-news-slider__nav {
    position: absolute;
    top: var(--bce-nav-top, 0);
    right: var(--bce-nav-right, 0);
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
}

.bce-slider-intro > .kt-row-column-wrap > .carmel-row-slider__nav {
    display: flex;
    gap: 8px;
}

/* Ruimte kop → nieuws komt alleen uit de marge hieronder (80/40px), niet
   ook nog uit een eigen marge van de kop (verschilt per blok). */
:is(h1, h2, h3, h4, h5, h6).bce-news-slider-heading.bce-news-slider-heading {
    margin-bottom: 0 !important; /* wint van .newsslider h4 (40px) op mobiel */
}

.bce-news-slider--nav-on-heading {
    position: relative;

    > .carmel-news-slider__viewport {
        margin-top: 80px;
    }
}

/* Kop die doorloopt tot onder de pijlen: ruimte vrijhouden (2 x 44px + 8px) */
.bce-slider-heading--has-nav {
    padding-right: 104px !important;
}

/* Introtekst naast de kop: rechts alleen ruimte als daar pijlen staan,
   anders eindigt de tekst gelijk met de kaarten. */
/* (Kadence-kolommen hebben een transitie; zonder dit schuift de tekst
   zichtbaar op zodra het script de klassen zet.) */
.bce-slider-intro > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    transition: none !important;
}

.bce-slider-intro:not(.bce-slider-intro--has-nav) > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    padding-right: 0 !important;
}

@media (max-width: 1024px) {
    .bce-news-slider--nav-on-heading > .carmel-news-slider__viewport {
        margin-top: 40px;
    }

    .bce-slider-intro > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
        padding-left: 24px !important;
    }

    .bce-slider-heading--has-nav {
        padding-right: 88px !important; /* 2 x 32px + 8px + 16px */
    }
}

@media (max-width: 767px) {
    .bce-slider-intro > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 9 — Tabs op tablet en mobiel.
   - De foto vult precies zijn kader. Kadence's verhoudings-vak (bv. 4:3)
     werd hoger dan het kader dat de plugin instelt, waardoor de foto
     onder de tekst en knop doorliep.
   - Tekst en knop onder elkaar in plaats van naast elkaar. */
.ptrn-tabs-vertical figure {
    overflow: hidden;
    border-radius: 24px;

    .kb-is-ratio-image {
        height: 100% !important;
        max-height: none !important;
        padding-bottom: 0 !important;
    }

    img,
    .kb-is-ratio-image img {
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
    }
}

@media (max-width: 1024px) {
    .ptrn-tabs-vertical-tab .kb-row-layout-wrap > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
    }

    .ptrn-tabs-vertical-tab .kb-buttons-wrap {
        justify-content: flex-start !important;
    }
}

@media (max-width: 768px) {
    .ptrn-tabs-vertical figure {
        border-radius: 16px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .ptrn-tabs-vertical figure {
        height: 320px;
    }
}


/* Figuur rechtsboven in de headers (hero-corner-right*.svg).
   - Schaalt mee met de schermbreedte: 373px pas vanaf ±1920px, op een
     laptop (±1500px) ±290px, minimaal 180px — anders valt de tekst
     rechts er op kleinere schermen achter.
   - aspect-ratio = die van de SVG zelf (248×147), zodat het vak precies
     om de tekening past (was 373×294 met lege ruimte eronder).
   - Tekst en knoppen in de header liggen erboven (z-index), mocht er
     toch iets overlappen. */
.ptrn-herobigimage > div > div > .kt-inside-inner-col::before,
.notfound > div > div .kt-inside-inner-col .kb-row-layout-wrap::before,
.herowrapper.nieuwsheader::before,
body.search-results #inner-wrap #primary::before,
body.search-no-results #inner-wrap #primary::before,
.nieuwswrapper > div > .wp-block-kadence-column > div > div::before {
    width: clamp(180px, 19.5vw, 373px) !important;
    height: auto !important;
    aspect-ratio: 248 / 147 !important;
}

.ptrn-herobigimage > div > div > .kt-inside-inner-col > .kb-row-layout-wrap {
    position: relative;
    z-index: 3;
}

/* Nieuwsoverzicht: de header is hier full-width, het witte vlak niet —
   het figuur in de hoek van het witte vlak zetten (16px van de rand,
   afgeronde hoek zoals het vlak), net als bij de andere headers. */
.herowrapper.nieuwsheader::before {
    right: 16px !important;
    border-top-right-radius: 24px;
}

/* Nieuwsoverzicht: zelfde hover als de nieuws-slider (afbeelding zoomt
   licht in binnen het afgeronde kader, label houdt zijn kleur). */
.carmel-nieuws-overzicht__item {
    .carmel-nieuws-overzicht__image {
        overflow: hidden;

        img {
            transition: transform 0.3s;
        }
    }

    &:is(:hover, :focus-visible) .carmel-nieuws-overzicht__image img {
        transform: scale(1.1);
    }

    .carmel-nieuws-overzicht__badge,
    &:is(:hover, :focus, :active) .carmel-nieuws-overzicht__badge {
        color: #020a0a !important;
    }
}

/* Infohub: de "C" onderaan in de lege linkerkolom (onder het menu).
   Voorheen hing hij aan #primary, maar die is niet gepositioneerd: de C
   rekende daardoor vanaf het eerste scherm (plek afhankelijk van de
   hoogte van het browservenster) en lag over het menu en de titel.
   Nu hangt hij aan het infohub-blok zelf, in dezelfde laag als het
   sticky menu: schuift het menu bij scrollen over de C, dan ligt het
   menu erboven. Op tablet/mobiel blijft hij verborgen (zoals voorheen). */
#primary:has(.wp-block-carmel-core-infohub-overzicht)::after {
    display: none !important;
}

@media (min-width: 1025px) {
    .carmel-infohub {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: -125px;
            bottom: 0;
            z-index: 0;
            width: 361.822px;
            height: 400px;
            background-image: url(images/c-vol.svg);
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: none;
        }
    }

    .carmel-infohub__nav {
        z-index: 1;
    }
}


/* =================================================================
   Figuren (B/C) naast tekst — volgens Figma ("Intro & Text"):
   een figuur staat aan de rand of in een hoek, nooit in het tekstvlak.
   Tablet staat niet in Figma: die volgt mobiel (< 1280px).
   Regel (afgesproken 20-10): geen knop in de sectie = geen figuur.
   De kleine hoekfiguren hangen daarom aan het knoppenblok zelf: ze
   staan naast de knop, met de bovenkant gelijk aan de knop (Figma),
   en komen zo nooit naast de tekst erboven. "Knop" = er staat echt een
   link in het knoppenblok (er staan ook lege knoppenblokken in pagina's).
   ================================================================= */

/* Intro & Text 03/04 (.ptrn-heading-text): op desktop géén figuur. */
.ptrn-heading-text::after {
    display: none !important;
}

@media (max-width: 1279px) {
    /* Intro & Text 01 (.ptrn-introtext-fullwidth): de grote B/C naast de
       tekst (desktop) maken plaats voor kleine hoekfiguren bij de knop. */
    .ptrn-introtext-fullwidth::before,
    .ptrn-introtext-fullwidth::after {
        display: none !important;
    }

    .ptrn-introtext-fullwidth .kb-buttons-wrap:has(a),
    .ptrn-heading-text .kb-buttons-wrap:has(a) {
        position: relative;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            height: 110px;
            background-repeat: no-repeat;
            pointer-events: none;
            z-index: 0;
        }
    }

    /* 01: B linksonder en C rechtsonder (halve vormen tegen de rand) */
    .ptrn-introtext-fullwidth .kb-buttons-wrap:has(a) {
        &::before {
            content: '';
            left: 0;
            width: 84px; /* B2.svg: 131/172 */
            background-image: url(images/B2.svg);
            background-size: contain;
            background-position: left top;
        }

        &::after {
            content: '';
            right: 0;
            width: 99.5px; /* C3.svg: 199/220 */
            background-image: url(images/C3.svg);
            background-size: contain;
            background-position: right top;
        }
    }

    /* 03/04: kleine C rechts (Figma: 99,5×110, 20px voorbij de rand) —
       het "voorbij de rand" via de achtergrondpositie, zodat er niets
       buiten het scherm steekt (anders horizontaal scrollen op mobiel). */
    .ptrn-heading-text .kb-buttons-wrap:has(a)::after {
        content: '';
        right: 0;
        width: 79.5px;
        background-image: url(images/c-vol.svg);
        background-size: 99.5px 110px;
        background-position: left top;
    }
}


/* Figuren (B/C) op of om foto's en video: weg (besluit 20-10). In Figma
   staan ze bij Image & Text deels óver de foto's, maar op de site komt
   dat niet goed uit (bv. /locaties/, "Eén school, vijf locaties") en
   ze lijken willekeurig. Op alle breedtes. */
.image-text-pattern .wp-block-kadence-column figure::before,
.text-image-pattern .wp-block-kadence-column figure::before,
.two-images-textblock::after,
.ptrn-video::before,
.ptrn-video::after {
    display: none !important;
}


/* ================================================================
   Zoeken (Figma: SECTIONS → Search, "search-active")
   De Kadence-zoeklade (#search-drawer) wordt een grijze balk direct
   onder de header, even breed als de header (positie: js/search-bar.js).
   De header blijft erboven en klikbaar; de zoekknop wordt een kruisje en
   sluit de balk weer. Klik naast de balk of Escape sluit hem ook.
   ================================================================ */
#search-drawer.popup-drawer {
    z-index: 99990;

    .drawer-overlay {
        background: transparent !important;
    }

    .drawer-inner {
        position: fixed;
        top: var(--bce-search-top, 112px) !important;
        left: var(--bce-search-left, 16px) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--bce-search-width, calc(100% - 32px)) !important;
        max-width: none;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    &.active .drawer-inner {
        opacity: 1;
        transform: none;
    }

    /* Eigen kruisje van Kadence niet nodig: de zoekknop in de header sluit */
    .drawer-header {
        display: none;
    }

    /* Kadence centreert de inhoud verticaal in een schermhoge lade; hier
       gewoon bovenaan, zo hoog als de balk. */
    .drawer-content {
        position: static !important;
        padding: 0 !important;
        display: block !important;
        width: 100%;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .search-form {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: none;
        height: 80px;
        margin: 0;
        padding: 8px 8px 8px 24px;
        background: var(--bce-color-bg);
        border-radius: 24px;
    }

    .search-form label {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    .search-form .search-field {
        width: 100%;
        height: 64px;
        padding: 0 88px 0 0;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
        font-family: var(--bce-font-body);
        font-size: 24px;
        line-height: 120%;
        letter-spacing: -0.72px;
        /* Kadence geeft de lade witte tekst; getypte tekst moet donker */
        color: var(--bce-color-text) !important;
        -webkit-text-fill-color: var(--bce-color-text);
        caret-color: var(--bce-color-text);

        &::placeholder {
            color: var(--bce-color-text);
            opacity: 0.5;
        }
    }

    /* Groene zoekknop: het icoon is de knop, de echte submit ligt erover */
    .kadence-search-icon-wrap,
    .search-form .search-submit {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: auto;
        width: 64px;
        height: auto;
        border-radius: 16px;
    }

    .kadence-search-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bce-color-secondary-groen);
        color: #fff;
        pointer-events: none;
        transition: background-color 0.2s ease;

        svg {
            width: 20px;
            height: 20px;
        }
    }

    .search-form .search-submit {
        z-index: 1;
        padding: 0;
        border: 0;
        opacity: 0;
        cursor: pointer;
    }

    .search-form .search-submit:is(:hover, :focus-visible) + .kadence-search-icon-wrap {
        background: var(--bce-color-text);
    }
}

/* Header boven de lade, zodat de zoekknop (nu een kruisje) bereikbaar blijft */
body.showing-popup-drawer-from-full #masthead {
    position: relative;
    z-index: 99995;
}

/* Zoekknop wordt een kruisje zolang de balk open is */
.search-toggle-open[aria-expanded="true"] {
    .kadence-svg-iconset {
        visibility: hidden;
    }

    position: relative;

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 1.5px;
        background: var(--bce-color-text);
        border-radius: 1px;
    }

    &::before { transform: translate(-50%, -50%) rotate(45deg); }
    &::after  { transform: translate(-50%, -50%) rotate(-45deg); }
}

@media (max-width: 1024px) {
    #search-drawer.popup-drawer {
        .search-form {
            height: 56px;
            padding: 4px 4px 4px 16px;
            border-radius: 16px;
        }

        .search-form .search-field {
            height: 48px;
            padding-right: 64px;
            font-size: 18px;
            letter-spacing: -0.54px;
        }

        .kadence-search-icon-wrap,
        .search-form .search-submit {
            top: 4px;
            right: 4px;
            bottom: 4px;
            width: 48px;
            border-radius: 12px;
        }
    }
}


/* ================================================================
   Infohub — "Gerelateerde pagina's" (Figma: Pages → Infohub - Subpagina)
   Kaart met radius 24 en 40px binnenruimte; titel H6 (18px, 700) in
   BC Blauw zonder lijn eronder; links Body Small (16px / 100%), zwart.
   Achtergrond BC Grijs (#F9F7F7) op de witte inhoud, zoals in Figma.
   ================================================================ */
div.carmel-gerelateerde-artikelen {
    background: var(--bce-color-bg);
    border-radius: 24px;
    padding: 40px;
}

/* De algemene tekstregel (p/ul/li met !important) leest deze variabelen,
   en .infohub-template-default zet ze op elk li/a apart (20px); hier op
   dezelfde elementen, zodat de links 16px / 100% worden. */
.infohub-template-default .carmel-gerelateerde-artikelen :is(ul, li, a),
.carmel-gerelateerde-artikelen :is(ul, li, a) {
    --bce-font-size-body-large: 16px;
    --bce-line-height-body-large: 100%;
    --bce-letter-spacing-body-large: 0;
}

.carmel-gerelateerde-artikelen .carmel-gerelateerde-artikelen__title {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    font-family: var(--bce-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
    color: var(--bce-color-secondary-blauw);
}

.carmel-gerelateerde-artikelen .carmel-gerelateerde-artikelen__list li {
    margin-bottom: 10px;
}

.carmel-gerelateerde-artikelen .carmel-gerelateerde-artikelen__list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 782px) {
    div.carmel-gerelateerde-artikelen {
        padding: 24px;
    }
}

/* Infohub-detail: locatie-label(s) boven de titel — het gewone BCE-label
   (geel rozetje, zoals bij Intro & Text); tekst Label (16px, 500). */
.carmel-infohub-locaties .carmel-label__text {
    color: var(--bce-color-text);
    font-weight: 500;
    line-height: 100%;
}


/* ================================================================
   Editor: hero met grote foto (.ptrn-herobigimage + .hero-text-centered-image)
   zoals op de voorkant. Op de voorkant krijgt de binnenste rij 160px boven
   en 300px onder (kind-selectors, die in de editor niet passen door de
   extra editor-wrappers) en schuift de foto 300px omhoog. In de editor
   ging de foto dus 300px omhoog zonder die ruimte → over de tekst heen.
   Kadence tekent de padding in de editor als sleepvakken; die krijgen
   hier de hoogtes van de voorkant. De foto vult de breedte, 600px hoog.
   ================================================================ */
.editor-styles-wrapper .ptrn-herobigimage .ptrn-bighero > .kt-top-padding-resize {
    height: 160px !important;
}
.editor-styles-wrapper .ptrn-herobigimage .ptrn-bighero > .kt-bottom-padding-resize {
    height: 300px !important;
}
.editor-styles-wrapper .ptrn-herobigimage + .hero-text-centered-image .components-resizable-box__container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.editor-styles-wrapper .ptrn-herobigimage + .hero-text-centered-image figure {
    width: 100% !important; /* Kadence zet de breedte inline op de figure */
    max-width: none !important;
}
.editor-styles-wrapper .ptrn-herobigimage + .hero-text-centered-image figure img {
    width: 100% !important;
    height: 600px !important;
    object-fit: cover;
    border-radius: 24px;
}

@media (max-width: 1024px) {
    .editor-styles-wrapper .ptrn-herobigimage .ptrn-bighero > .kt-top-padding-resize {
        height: 0 !important;
    }
    .editor-styles-wrapper .ptrn-herobigimage .ptrn-bighero > .kt-bottom-padding-resize {
        height: 80px !important;
    }
    .editor-styles-wrapper .ptrn-herobigimage + .hero-text-centered-image figure img {
        height: 480px !important;
    }
}