/*

Theme Name: Carmel Eenpitter Starter
Template: kadence
Author: Cloudwise
Version: 1.0.0
Text Domain: carmel-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 OOK EEN EIGEN --h{n}-color-SCHAKELAAR — dat was
 * hier eerder vergeten (color stond nog rechtstreeks hardgecodeerd in
 * de basisregel), waardoor het instellen van een eigen koptekst-kleur
 * (zoals bij .ptrn-heading-text) alsnog een nieuwe !important nodig
 * had. Zelfde geldt voor de --body-*-schakelaars: die waren er ook nog
 * niet voor p-tekst.
 *
 * BEWUST body/.editor-styles-wrapper i.p.v. :root — WordPress'
 * add_editor_style()-mechanisme (nodig om deze stijlen in Gutenberg's
 * content-iframe te krijgen, zie functions.php) behandelt :root-
 * selectors niet altijd betrouwbaar, een restant van hoe de OUDE,
 * niet-iframe-editor destijds CSS herschreef. body/
 * .editor-styles-wrapper zijn de selectors die we toch al bewezen
 * betrouwbaar gebruiken voor de daadwerkelijke h1-h6/p-regels hieronder
 * — dezelfde scope hier ook voor de variabelen zelf toepassen lost dit
 * op.
 *
 * 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(--carmel-font-size-display1);
 *       --h1-line-height: var(--carmel-line-height-display1);
 *       --h1-letter-spacing: var(--carmel-letter-spacing-display1);
 *       --h1-weight: var(--carmel-font-weight-display1);
 *   }
 */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
    --h1-size: var(--carmel-font-size-h1);
    --h1-line-height: var(--carmel-line-height-h1);
    --h1-letter-spacing: var(--carmel-letter-spacing-h1);
    --h1-weight: var(--carmel-font-weight-h1);
    --h1-color: var(--carmel-color-secondary-donkerblauw);

    --h2-size: var(--carmel-font-size-h2);
    --h2-line-height: var(--carmel-line-height-h2);
    --h2-letter-spacing: var(--carmel-letter-spacing-h2);
    --h2-weight: var(--carmel-font-weight-h2);
    --h2-color: var(--carmel-color-secondary-donkerblauw);

    --h3-size: var(--carmel-font-size-h3);
    --h3-line-height: var(--carmel-line-height-h3);
    --h3-letter-spacing: var(--carmel-letter-spacing-h3);
    --h3-weight: var(--carmel-font-weight-h3);
    --h3-color: var(--carmel-color-secondary-donkerblauw);

    --h4-size: var(--carmel-font-size-h4);
    --h4-line-height: var(--carmel-line-height-h4);
    --h4-letter-spacing: var(--carmel-letter-spacing-h4);
    --h4-weight: var(--carmel-font-weight-h4);
    --h4-color: var(--carmel-color-secondary-donkerblauw);

    --h5-size: var(--carmel-font-size-h5);
    --h5-line-height: var(--carmel-line-height-h5);
    --h5-letter-spacing: var(--carmel-letter-spacing-h5);
    --h5-weight: var(--carmel-font-weight-h5);
    --h5-color: var(--carmel-color-secondary-donkerblauw);

    --h6-size: var(--carmel-font-size-h6);
    --h6-line-height: var(--carmel-line-height-h6);
    --h6-letter-spacing: var(--carmel-letter-spacing-h6);
    --h6-weight: var(--carmel-font-weight-h6);
    --h6-color: var(--carmel-color-secondary-donkerblauw);

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

    --display2-size: var(--carmel-font-size-display2);
    --display2-line-height: var(--carmel-line-height-display2);
    --display2-letter-spacing: var(--carmel-letter-spacing-display2);
    --display2-weight: var(--carmel-font-weight-display2);

    /* Zelfde schakelaar-principe, nu ook voor lichaamstekst (p) — was
       hier eerder ook vergeten, vandaar dat .ptrn-heading-text
       genoodzaakt was zelf weer !important te gebruiken. */
    --body-size: var(--carmel-font-size-body-large);
    --body-line-height: var(--carmel-line-spacing-body-large);
    --body-letter-spacing: var(--carmel-letter-spacing-body-large);
    --body-weight: var(--carmel-font-weight-regular);
    --body-color: var(--carmel-color-text);
}

/**
 * ================================================================
 * BASIS-TYPOGRAFIE — leunt volledig op variables.css
 * ================================================================
 * BEWUST met !important, maar nu ALLEEN hier, op deze ene, fundamentele
 * plek — niet meer nodig bij elke latere uitzondering (zie de
 * schakelaar-toelichting hierboven). Kadence's eigen CSS gebruikt vaak
 * specifiekere selectors (bv. .entry-content h1) die anders zouden
 * winnen van een simpele h1{}-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, en
 * wp-customizer specifiek het Customizer-bedieningspaneel (Uiterlijk →
 * Aanpassen) — allebei NIET gewenst. :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(--carmel-font-heading) !important;
    margin: 0 0 var(--carmel-space-sm) !important;
}

: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;
    color: var(--h1-color) !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;
    color: var(--h2-color) !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;
    color: var(--h3-color) !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;
    color: var(--h4-color) !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;
    color: var(--h5-color) !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;
    color: var(--h6-color) !important;
}

/**
 * MOBIEL — TIJDELIJKE PLACEHOLDER, NOG TE BEVESTIGEN
 * ================================================================
 * Nog steeds geen bevestigde Figma-mobiel-waarden gezien — onderstaande
 * blijven een REDELIJKE, ONBEVESTIGDE schatting.
 */
@media (max-width: 782px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --h1-size: 40px;
        --h1-line-height: 1.1;
        --h2-size: 32px;
        --h2-line-height: 1.1;
        --h3-size: 28px;
        --h3-line-height: 1.1;
        --h4-size: 24px;
        --h4-line-height: 1.1;
        --h5-size: 20px;
        --h5-line-height: 1.2;
        --h6-size: 18px;
        --h6-line-height: 1.2;
        --display1-size: 48px;
        --display1-line-height: 1;
        --display2-size: 40px;
        --display2-line-height: 1;
    }
}

/**
 * ================================================================
 * AFSTANDEN-"SCHAKELAARS" — zelfde principe als de typografie
 * ================================================================
 * Eén plek voor de verticale ruimte tussen secties, i.p.v. losse 120px /
 * 80px / 7.5rem / 150px door het hele bestand. Waarden volgen Figma:
 *   - wit → wit:                    120 (desktop) / 80 (tablet + mobiel)
 *   - rond een gekleurd blok (CTA,
 *     quote) op mobiel:             56
 */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
    --section-gap: 120px;
    --section-gap-color: 120px;

    /* Hoeveel de eerste sectie (hero) omhoog schuift, achter de menubalk.
       Desktop: achtergrond begint direct onder de bovenste balk, 24px
       boven het menu (Figma). Mobiel/tablet (Kadence mobiele header,
       ≤1024): achtergrond steekt 8px boven én 8px naast de menubalk uit
       (Figma: BG y8, menu y16). */
    --hero-overlap: -105px;
}
@media (max-width: 1024px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --section-gap: 80px;
        --section-gap-color: 80px;
        --hero-overlap: -109px;
    }
}
/* Precies 1024px (bv. iPad liggend): mobiele header, maar het logo krijgt al
   de desktop-positionering (min-width:1024px) → header 20px lager. */
@media (min-width: 1024px) and (max-width: 1024px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --hero-overlap: -89px;
    }
}
@media (max-width: 768px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --section-gap-color: 56px;
    }
}

/* Lange woorden (bv. "Veelgestelde") breken netjes af i.p.v. buiten
   beeld te lopen of midden in het woord te knippen. */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) :is(h1,h2,h3,h4,h5,h6) {
    overflow-wrap: break-word;
    hyphens: auto;
}

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

@media(max-width:1024px){
    h1.display1{
        --h1-letter-spacing:  -2.8px;
        --h1-size: 56px;
    }

}

/* Mobiel: dezelfde h1-maat als de hero's (44px) — 56px liep op 390px
   breed tegen de rand (contact, open huis, infohub). */
@media(max-width:768px){
    h1.display1{
        --h1-letter-spacing: -1.32px;
        --h1-size: 44px;
    }
}

.carmel-display-1 {
    font-family: var(--carmel-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(--carmel-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) li,
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) td  {
    font-family: var(--carmel-font-body) !important;
    font-weight: var(--body-weight) !important;
    font-size: var(--body-size) !important;
    letter-spacing: var(--body-letter-spacing) !important;
    line-height: var(--body-line-height) !important;
    color: var(--body-color) !important;
}

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


td{
    border-color:#000 !important
}
/**
 * ================================================================
 * 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{
    overflow:visible !important;
 }
.kb-button.wp-block-button__link,
.wp-block-search__button {
    font-family: var(--carmel-font-heading) !important;
    font-size: var(--carmel-font-size-button-large) !important;
    font-weight: var(--carmel-font-weight-medium) !important;
    border-radius: var(--carmel-btn-radius) !important;
    padding: var(--carmel-btn-padding) !important;
}

.kb-button.wp-block-button__link {
    background-color: var(--carmel-color-btn-primary-bg) !important;
    color: var(--carmel-color-btn-primary-text) !important;
    padding:32px !important;
    border-radius:16px !important;
    height:64px !important;
    box-sizing: border-box;
}

.kb-button.wp-block-button__link:not(.button-style-secondary) {
    margin-right: 64px;
    --btn-x: 0px;
    --btn-arrow-opacity: 1;
    transform: translateX(var(--btn-x));
    min-width:160px;
}

.kb-button.wp-block-button__link:not(.button-style-secondary)::after {
    content: '';
    position: absolute;
    right: -64px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--carmel-color-btn-accent-light);
    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;
    opacity: var(--btn-arrow-opacity);
}

#wrapper #masthead{
    z-index:200;
}

.kb-button.wp-block-button__link:not(.button-style-secondary).js-btn-hover-active::after {
    right: auto;
    left: -64px;
}

/* Mobiel: knoppen 48px hoog, zoals in Figma (desktop blijft 64px).
   Pijl-cirkel schaalt mee via --btn-size. */
@media(max-width:768px){
    .kb-button.wp-block-button__link{
        height:48px !important;
        padding:0 24px !important;
        border-radius:12px !important;
    }
    .kb-button.wp-block-button__link:not(.button-style-secondary){
        margin-right:48px;
        min-width:0;
    }
    .kb-button.wp-block-button__link:not(.button-style-secondary)::after{
        width:48px;
        height:48px;
        right:-48px;
    }
    .kb-button.wp-block-button__link:not(.button-style-secondary).js-btn-hover-active::after{
        left:-48px;
    }
}

@media(max-width:1024px){
    .site-container, .site-header-row-layout-contained, .site-footer-row-layout-contained, .entry-hero-layout-contained, .alignfull>.wp-block-cover__inner-container, .alignwide>.wp-block-cover__inner-container{
        padding-left:24px !important;
        padding-right:24px !important;
    }
}

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

 #main-header .site-header-row-layout-contained{
    margin-top:24px;
}



.wp-block-kadence-rowlayout {
    margin-bottom: var(--section-gap);
}

.wp-block-kadence-rowlayout .wp-block-kadence-rowlayout {
    margin-bottom: 0;
}

.wp-block-kadence-rowlayout.no-row-margin {
    margin-bottom: 0;
}

.site-top-header-inner-wrap nav.header-navigation ul .sub-menu{
    background-color:#fff !important;
    border-radius: 0 0 8px 8px;
}



.colorbackgroundrow > div{
    padding: 0 !important

}

/* (eerste, dubbele footer-blok verwijderd — staat verderop compleet) */



@media(max-width:1024px){
    .zoekboxheader .wp-block-search__inside-wrapper{
        width: 75% !important
    }
}


@media(max-width:700px){

    .zoekboxheader .wp-block-search__inside-wrapper{
        width: 100% !important
    }
}


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

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

}

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


nav#site-navigation{
    height:100%;

    ul:not(.sub-menu) > li{
        height:100%;
        border-left:0.5px solid rgba(0, 0, 0, 0.10);
        display: flex;
        align-items: center;
        padding-left:8px;
        padding-right:8px;

        &:last-child{
            border-right:0.5px solid rgba(0, 0, 0, 0.10);
        }
    }
}

.header-navigation ul ul.sub-menu, .header-navigation ul ul.submenu{
    box-shadow: none !important;
}

.carmel-menu-hover-link{
	margin-bottom:16px;
	font-size:20px;
	line-height: 24px;
	text-decoration: none;
	color:rgba(0, 0, 0, 1);

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

.bighero{
    margin-top: -103px;
    margin-bottom: 90px !important;
    --h1-size: var(--carmel-font-size-display2, 88px);
    --h1-weight: 800;
    --h1-line-height: 90%;
    --h1-letter-spacing: -2.64px;
    --h1-color:#fff;
    --body-weight: 400;
    --body-size: 24px;
    --body-letter-spacing: -0.72px;
    --body-line-height: 130%;
    --body-color: #fff;
    .carmel-label{
        margin-bottom:24px;
    }

    h1{
        font-family: var(--carmel-font-heading, Interstate);
        margin-bottom:16px;
    }
    > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap{
        min-height:900px !important;
    }

    .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper{
        border-radius:16px;
        input{
            border:0px solid #fff;
            color:rgba(0, 117, 156, 1);
        }


    }
    input::placeholder, .js-search-overlay, .js-typed-suffix {
        letter-spacing: -0.16px;
        line-height:1;
        font-weight:700;
        font-size:16px;
        font-family: var(--carmel-font-heading);
        color:rgba(0, 117, 156, 1);
    }
    .js-typed-suffix{
        height:16px;
    }

    .wp-block-search .wp-block-search__button{
        background-color:rgba(0, 176, 219, 1);
        width:48px;
        height:48px;
        display:flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px !important;
        background-image:url(images/magnifier-white.svg);
        background-size:30px;
        transition:0.3s;

        &:hover{
            transform: scale(1.1);
            background-size:25px;
        }
    }

    .zoekbalkrij {
        >div {
            padding:0px;
        }
    }

    .js-search-typewriter{
        .kt-inside-inner-col{
            gap:24px;
        }
        .searchwrapper{
            min-width:300px;
        }
        form{
            width:calc(100% - 295px);
            > div{
                padding:8px !important;
                box-sizing: border-box;
                height:64px;
                width:100%
            }
        }
    }

    .wezienelkaarechtlogo{
        position: absolute;
        right:0;
        bottom:-85px;
    }
    
}

@media(min-width:1500px){
    .big-hero-left-column{
        max-width:737px;
    }
    .searchwrapper{
        width:473px;
    }
}


@media(max-width:1024px){
    .bighero{
        --h1-size: 44px;
        --h1-letter-spacing: -1.32px;
        --body-size: 18px;
        --body-letter-spacing: -0.54px;
    }
}


@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(--colors-dark-black-10, rgba(0, 0, 0, 0.10));
        border-top: 0px solid var(--colors-dark-black-10, rgba(0, 0, 0, 0.10));
        padding:16px 0px;

        a{
            font-weight:400;
            font-size:16px;
            line-height:1.2;
            padding:0 .5em;
        }
    }

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

@media(max-width:768px) {
    .bighero{
        margin-top: -54px;
        margin-bottom: 90px !important;
    }

    .hide-on-mobile{
        display:none;
    }
}

ul.sub-menu.show-drawer{
	padding-left:0 !important; 
} 

.header-menu-container  a{
    text-decoration: none;
}
.mobile-drawer-content > div:first-child{
	background-color:#fff;
	border-radius:0 0 16px 16px;
    padding:16px;
}


#mobile-drawer.popup-drawer .drawer-content{
    padding:0 16px ;
}
div#mobile-drawer .drawer-header{
    background-color:#fff;
    width:calc(100% - 32px);
    margin:0 auto;
    border-radius:16px 16px 0 0;
}
.drawer-inner{
    padding-top:16px;
}

.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;
}
header.site-header:has(.menu-item--toggled-on){
    z-index:4;
    
}
ul#mobile-menu >  li{
    border-bottom:1px solid rgba(0, 0, 0, 0.10);
}
/* Opengeklapt hoofditem (bv. "Groep 7/8"): zelfde lijn onder de kop als
   tussen de andere items, zodat het submenu visueel bij de kop hoort en de
   witruimte minder groot oogt. !important omdat Kadence/onze eigen regel
   de border op .drawer-nav-drop-wrap op 0 zet. */
#mobile-menu > li:has(> .sub-menu.show-drawer) > .drawer-nav-drop-wrap,
#mobile-secondary-menu > li:has(> .sub-menu.show-drawer) > .drawer-nav-drop-wrap{
    border-bottom:1px solid rgba(0, 0, 0, 0.10) !important;
}

/* Mobiel menu: tik op een hoofditem met submenu (bv. "Groep 7/8") klapt
   het submenu uit i.p.v. naar de pagina te gaan. De uitklap-knop wordt
   over de hele rij gelegd (pijltje blijft rechts staan). */
#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;
}

/*
.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;
}
*/

/* infohub */
.carmel-infohub__content section{
    padding:40px;
    background-color:#fff;
    border-radius:24px;
}

.carmel-infohub__nav{
    padding:40px;
    background-color:#fff;
    border-radius:24px;
}
.carmel-infohub__nav ul{
    padding-left:0 !important;
}


@media(max-width:1025px){
    .iconmenu{
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        background-image: url('/wp-content/themes/ccg/images/loginicon.svg');
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        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;
        border-radius: 8px;
        border: 0.5px solid rgba(0, 0, 0, 0.3);
    }
    .mobile-toggle-open-container #mobile-toggle{
        padding:8px;
    }
    .search-toggle-open-container .search-toggle-open .search-toggle-icon{
        font-size:20px !important;
    }
}
@media(max-width:1024px){
    #mobile-header .search-toggle-open-container .search-toggle-open.search-toggle-open{
        width:38px;
        height:38px;
        padding:8px !important;
        border:1px solid rgba(0, 0, 0, 0.3) !important;
        border-radius:8px !important;
        color:#000000 !important;
        background:transparent;
        display:flex;
        align-items:center;
        justify-content:center;
        box-sizing:border-box;

        .search-toggle-icon{
            font-size:20px !important;
            display:flex;
        }
        .search-toggle-icon svg{
            width:20px;
            height:20px;
        }
    }
    #mobile-header [data-section="kadence_customizer_header_search"]{
        margin-right:8px;
    }
}

.knop-terug{
    svg{
        path{
            fill:currentColor
        }
    }
    span{
        font-weight:400;
    }
}

/* team */
.single-content .carmel-team-slider__name{
    font-weight:500;
    font-size:32px;
}
.entry-content .simcal-default-calendar-grid .simcal-day{
    height: 118px;
    min-height: 118px;
    padding: 8px 8px 16px 8px !important;
    gap: 4px;
    flex: 1 0 0;
    background-color:#fff !important;
    
    > div{
        min-height:118px !important
    }
}

.entry-content  .simcal-default-calendar-grid .simcal-event,
.entry-content  .simcal-default-calendar-grid.simcal-default-calendar-light .simcal-event{
    border-bottom:0;
}


/* nieuws slider */
.carmel-news-slider__slide{
    --h2-size:24px;
    --h2-line-height:100%;
    --h2-letter-spacing: -0.48px;
    --h2-weight:700;
}

.carmel-news-slider__image{
    border-radius:16px;
    width: 100%;
}

a.carmel-news-slider__link .carmel-news-slider__image img{
    transition:0.3s;
}

a.carmel-news-slider__link:hover .carmel-news-slider__image img{
    transform: scale(1.1);
}
.carmel-news-slider__meta{
    .carmel-news-slider__badge{
    background-color:rgba(232, 247, 253, 1);
    }
    .carmel-news-slider__badge-dot{
        background-color:rgba(0, 176, 219, 1)
    }
}



@media(max-width:1024px){
    .carmel-news-slider__slide{
        --h2-size:20px;
        --h2-letter-spacing: -0.4px;
    }

    .carmel-news-slider__nav button{
        width:32px;
        height:32px;
        svg{
            width:13px !important;
        }
    }
}

.cta-pattern, .cta-pattern-wide{
    h2{
        letter-spacing: -3.2px;
        font-weight: 700;
        line-height: 100%;
        font-size:64px;
    }
    h3{
        letter-spacing: -3.2px;
        font-weight: 700;
        line-height: 100%;
        font-size:64px;
    }
    > div{
        p{
            letter-spacing: -0.24px;
            line-height: 130%;
            font-weight: 400;
            margin-bottom:24px !important;
        }
    }
}

@media(max-width:1024px){
    .cta-pattern{
        h3{
            letter-spacing: -2px;
            font-size:40px;
        }
        h2{
            letter-spacing: -2px;
            font-size:40px;
        }
        > div{
            p{
                letter-spacing: -0.18px;
                font-size:18px;
            }
        }
    }
}


.ptrn-heading-text {
    --h2-color: var(--carmel-color-secondary-donkerblauw);
    --body-size: var(--carmel-font-size-body-xlarge, 32px);
    --body-line-height: 120%;
    --body-letter-spacing: -1.28px;

    .carmel-label{
        background-color: rgba(232, 247, 253, 1);
        margin-bottom:16px;
    }
    
}

@media(min-width:1024px){
    .ptrn-heading-text{
       
        .kt-row-column-wrap{
            display:flex;
            justify-content: space-between;
            > div:first-child{
                width: 564px;
            }
            > div:nth-of-type(2){
                width:100%;
                max-width:708px;
            }
        }
    }
}

@media(max-width:1024px){
    .ptrn-heading-text {
        --body-size:20px;
        --body-letter-spacing:  -0.8px;
    }
}

.carmel-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius:8px;
    background-color: #fff;
    margin-bottom:16px;
}

.carmel-label__dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: rgba(0, 176, 219, 1);
}

.carmel-label__text {
    font-family: var(--carmel-font-heading);
    font-size: var(--carmel-font-size-label-large);
    color: var(--carmel-color-secondary-donkerblauw);
    font-weight:var(--carmel-font-weight-bold);
    letter-spacing: -0.28px;
}

@media(min-width:1024px){
    .site-branding a.brand{
        width: 124px;
        height: 100%;
        img{
            position: absolute;
        display: block;
        top: 0;
        }
    }
}

.site-header-row-layout-contained .site-header-row-container-inner {
    border-radius: 8px;
}

.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue{
        margin-top:-103px;
    > .kt-row-column-wrap {

        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:url(images/header-background.svg);
            background-size:cover;
            background-color:#E8F7FD;

            > div > div{
                padding-bottom:80px;
            }
        }

        .kt-inside-inner-col{
            
            border-radius:24px;
            --h2-color: var(--carmel-color-secondary-donkerblauw);
            

            .carmel-label__dot{
                background-color: rgba(0, 176, 219, 1);
            }
        }
    }
}
.hero-center-blue{
     > .kt-row-column-wrap {

        > .wp-block-kadence-column > .kt-inside-inner-col{
            > div > div{
                padding-bottom:0px;
            }
        }
    }
}

/**
 * HEADER-OVERLAP — één waarde voor ALLE hero-varianten
 * ----------------------------------------------------------------
 * Eerder had elke hero zijn eigen margin-top (-103 in dit bestand,
 * -105/-86 per blok in Kadence, -102 bij infohub/FAQ, -104 bij #primary),
 * waardoor de achtergrond op mobiel soms 2px, soms 1px en soms zelfs 15px
 * ONDER de bovenkant van de menubalk begon. Nu overal --hero-overlap.
 * BEWUST !important: Kadence zet per blok een eigen margin-top met een
 * id-selector (kb-row-layout-id…).
 */
.entry-content > :is(.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue, .hero-center-green, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero):first-child{
    margin-top:var(--hero-overlap) !important;
}

/* Infohub / FAQ: daar zit de gekleurde achtergrond op de eerste geneste
   rij (zonder eigen pattern-class) — zelfde overlap, en op mobiel dezelfde
   8px-kantlijn als de andere hero's (was 8px vanaf de schermrand). */
.entry-content > .alignfull:first-child:not(.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue, .hero-center-green, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap.alignnone:first-child{
    margin-top:var(--hero-overlap) !important;
}
/* Nieuwsberichten en infohub-artikelen (single): Kadence geeft #primary
   daar op mobiel/tablet nog 32px margin-top, waardoor de achtergrond 24px
   ONDER de menubalk begon i.p.v. 8px erboven. */
@media(max-width:1024px){
    .single #inner-wrap > #primary.content-area{
        margin-top:0;
    }
}
@media(max-width:1024px){
    .entry-content > .alignfull:first-child:not(.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue, .hero-center-green, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap.alignnone:first-child{
        margin-left:8px !important;
        margin-right:8px !important;
    }
}

.ptrn-herobigimage:has(+ .superbanner){
    > .kt-row-column-wrap {

        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:none;
        }
    }

}

.ptrn-herobigimage:has( + .video){
    > .kt-row-column-wrap {
        > .wp-block-kadence-column > .kt-inside-inner-col{
            > div > div{
                padding-bottom:200px;
            }
        }
    }
}

@media(max-width:1521px){
 .ptrn-bighero  > div{
    padding-left:32px !important;
    padding-right:32px !important;
 }
}

.ptrn-herobigimage:has(+ .video){
    z-index:1;
}
.ptrn-herobigimage + .video{
    z-index:2;
    margin-top:-425px !important;
}

.ptrn-herochoices{
    > .kt-row-column-wrap {
        padding:0 !important;

        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:url(images/green-background.svg);
            background-size:cover;
            background-color:rgba(243, 248, 236, 1);
        }
    }



    h1,h2,h3,h4,h5,h6{
        --h2-letter-spacing:-2.64px;
        --h2-size: 88px;
        --h2-line-height: 90%;
        --h2-weight: 800;
        --h2-color: rgba(79, 131, 0, 1);
        margin-bottom:24px !important;
        
    }
    .ptrn-herochoices-contentrow{
        text-align:center;
        max-width:706px;
        margin-left:auto;
        margin-right:auto;

        p{
            --body-letter-spacing: -0.72px;
            --body-weight: 400;
            --body-size: 24px;
            --body-line-height:130%;
        }
    }
    .carmel-label{
        margin-bottom:24px !important;
    }

    .ptrn-herochoices-choice{
        background-color:#fff;
        padding:24px;
        border-radius:16px;

        figure{
            border-radius:8px !important;
            img{
            width:100%;
            height:328px;
            object-fit:cover;
        }


        } 
        .choicecontent{
            --body-letter-spacing: -0.48px;
            --body-weight:700;
            --body-line-height:100%;
            --body-size:24px;
            --carmel-font-body:var(--carmel-font-heading);
            --body-color:rgba(0, 117, 156, 1);
            margin-top:16px;
            p{
                margin-bottom:0 !important;
            }

        }
        .js-card-desc{
            --body-size:16px;
            padding-left:0;
        }

        .choicebutton{
            background-color:rgba(0, 117, 156, 1);
            border-radius:8px;
            display: flex;
            width: 32px;
            max-width:32px;
            height: 32px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            aspect-ratio: 1/1;
        }

        .kt-row-column-wrap {
            padding:0 !important;
        }
    }

}

@media(max-width:1024px){
    
    .ptrn-herochoices{
        h1,h2,h3,h4,h5,h6{
            --h2-letter-spacing:-1.32px;
            --h2-size: 44px;
            margin-bottom:16px !important;
        }
        .ptrn-herochoices-contentrow{
            text-align:center;
            max-width:100%;

            p{
                --body-letter-spacing: -0.54px;
                --body-size: 18px;
            }
        }

        .ptrn-herochoices-choice{

            figure img{
                height:264px;
            }
        }

    }


}


.tabsblock{
    > .kt-row-column-wrap {

        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:url(images/green-background.svg);
            background-size:cover;
            background-color:rgba(243, 248, 236, 1);
            border-radius: 24px;
        }
    }

    --h2-color: var(--carmel-color-secondary-donkerblauw);

    .carmel-label{
        background-color: rgba(255,255, 255, 1);
        margin-bottom:16px;
    }

    .tab-number{


        > div{
            background-color:var(--carmel-color-secondary-donkerblauw);
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            padding-right: 7px;
            padding-left:7px;
        }
        
        P{
            --body-letter-spacing: -0.48px;
            --body-weight: var(--carmel-font-weight-bold);
            --body-size: var(--carmel-font-size-button-large);
            --body-font: var(--carmel-font-heading);
            --body-color: #FFF;
            margin-left:0 !important;
            text-align: center;
           
        }
    }

    .tab-content{
        --body-color:var(--carmel-color-secondary-donkerblauw);
        --body-weight:500;
        --body-letter-spacing:-0.4px;
        --body-size:20px;
        --body-line-height:20px;

    }
	
	@media(max-width:768px){
		.tab-content p{font-size:16px !important;}		
}

    .tab-arrow{
        background-color:rgba(131, 187, 38, 1);
        border-radius: 8px;
        transition: 0.3s;
    }

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

    .kt-has-2-columns{
        gap:var(--carmel-space-xl);
    }

    .tabsblock-tab > .kt-inside-inner-col{
        border-radius:16px;
    }

    .tabsblock-tab:not(.kb-section-has-link){
        .tab-arrow{display:none}
    }

    .tabsblock-tab.kb-section-has-link{
        transition: 0.3s;
        &:hover{

            > .kt-inside-inner-col{
                background-color:#f2f2f2;
            }
            .tab-arrow{
                margin-right:-8px !important;
            }
        }
    }

    .tabsblock-tab.tabsblock-tab{
        > 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; 
        }
    }
}

.block-editor-iframe__body{
    .tabsblock > div > div > div.kadence-inner-column-inner {
            background-image:url(images/green-background.svg);
            background-size:cover;
            background-color:rgba(243, 248, 236, 1);
            border-radius: 24px;

            .tabsblock-tab.tabsblock-tab{ 
                
                .kadence-inner-column-inner{
                background-color:#fff !important;

                .tab-number {
                    width:40px !important;

                    > div{
                        background-color:rgb(0, 119, 160) !important;
                        padding:8px !important;
                        width:40px !important;
                        
                        p{
                            color:#fff;
                            font-size: 14px !important;
                        }
                    }
                }

                > 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;
                    width:calc(100% - 40px);
                    > div{
                        margin-left:0;
                    }
                }

                > div  :last-child {
                    flex: 0 0 auto;
                    margin-left: auto; 
                }
            }
        }
    }
    .tabsblock{
        .components-resizable-box__container{
            height:100% !important;
        }
    }
}

.ptrn-tabs-vertical{
    .tab-number{
        --body-color:#fff;
        --body-letter-spacing:-0.48px;
        --body-line-height:100%;
        --body-weight:700;
        --body-size:16px;
        background-color:rgba(131, 187, 38, 1);
        border-radius:8px;
        width:40px !important;
        height:40px !important;
        display:flex;
        align-items: center !important;
        justify-content: center !important;
        margin-right:24px;
        > div{
            padding:6px;
        }
    }
    .tab-content{
        --body-size:20px;
        --body-line-height:120%;
        --body-letter-spacing:-0.4px
    }

    figure{
        height:361px;
        width:100%;
        img{
            mask-image:url(images/vert-tab-mask.svg) !important;
            mask-size:contain;
            width:100%;
            height:100%;
            align-self: stretch;
        }

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

        + div{
            --body-size:20px;
            --body-letter-spacing:-0.4px;
            --body-line-height:120%;
            --body-weight:400;
        }
    }
    .ptrn-tabs-vertical-tab{
        
        border-radius:24px;
        max-width:1000px;
        > div{
            background-color:rgba(232, 247, 253, 1) !important;
        }
    }
    .kb-section-dir-horizontal{
        margin-bottom:24px;
    }


}

.ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child {
  bottom: 32px;
  transform: translateX(-50%);
}

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

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

        figure{
            height:220px;
            width:100%;
            img{
                mask-image:none !important;
                width:100%;
                height:100%;
                align-self: stretch;
                border-radius:16px;
            }
        }
        .ptrn-tabs-vertical-tab{
            margin-bottom:0px;

            > div{
                border-radius:16px;
                padding:8px 16px;
                width:100%;
                >div {
                    width:100%;
                    >div {
                        width:100%;
                    }
                }
            }
                
            .accordion__toggle-icon{
                background-color:rgba(0, 117, 156, 1);
                width:40px;
                height:40px;
                border-radius:100%;
                position: absolute;
                right:8px;

                &::before, &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    background: #fff;
                    transform: translate(-50%, -50%);
                }
                &::before {
                    width: 14px;
                    height: 2px;
                }
                &::after {
                    width: 2px;
                    height: 14px;
                    transition: transform 0.25s ease;
                }
            }
            &.is-active .accordion__toggle-icon::after {
                transform: translate(-50%, -50%) scaleY(0);
            }
        }
    }
    .ptrn-tabs-vertical-tab > .kt-inside-inner-col{
        border-radius:16px;
    }
    .ptrn-tabs-vertical-tab {
        .kb-section-dir-horizontal{
            margin-bottom:16px !important;
        }
	}
    /* De gesloten tabs krijgen op desktop een verticaal label
       (translateX(-50%) + bottom:32px). Op mobiel zijn het accordeon-
       rijen: die verschuiving schoof nummer en titel half buiten beeld. */
    /* patterns.css zet de kop van een GESLOTEN tab op mobiel op
       position:static (met hogere specificiteit dan onze regel hieronder).
       Daardoor hing het plus-icoon (::after) aan de hele tab i.p.v. aan de
       kop en stond het dicht tegen de rand, open 16px ervan af. Hier dus
       expliciet relative + alle offsets terug op auto (anders gaat de
       desktop-left:50% ineens wél meetellen). */
    .ptrn-tabs-vertical-tab:not(.is-active) > .kt-inside-inner-col > :first-child{
        position:relative !important;
        inset:auto !important;
        transform:none;
    }

    /* Plus/min-icoon van de accordeon. Hiervoor stond CSS voor een
       .accordion__toggle-icon-element klaar, maar dat element wordt nergens
       aangemaakt (niet in het patroon, niet in tabs-vertical.js). Daarom
       nu als ::after op de kop van elke tab — geen markup of JS nodig.
       32px rond, rechts in de kop (Figma: Button/Squircle 32px). */
    /* Open en dicht EXACT dezelfde zij-padding (16px), zodat nummer, titel
       en icoon niet verspringen bij openklikken. */
    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab > div{
        padding:8px 16px !important;
    }
    .ptrn-tabs-vertical .ptrn-tabs-vertical-tab.is-active > div{
        padding:8px 16px 16px !important;
    }
    .ptrn-tabs-vertical .tab-number{
        margin-right:16px;
    }
    .ptrn-tabs-vertical-tab > .kt-inside-inner-col > :first-child{
        position:relative;
        padding-right:40px;

        > .kt-inside-inner-col{
            flex-wrap:nowrap !important;
        }
        &::after{
            content:'';
            position:absolute;
            right:0;
            top:50%;
            width:32px;
            height:32px;
            transform:translateY(-50%);
            border-radius:50%;
            background:rgba(0, 117, 156, 1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            pointer-events:none;
        }
    }
    .ptrn-tabs-vertical-tab.is-active > .kt-inside-inner-col > :first-child::after{
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M0 7h14' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
    }
    .ptrn-tabs-vertical-tab .tab-content{
        min-width:0;
        flex:1 1 auto;
    }
}

.ptrn-bighero{
    --h1-size:88px;
    --h2-size:88px;
    --h3-size:88px;
    --h4-size:88px;
    --h5-size:88px;
    --h6-size:88px;
    --h1-letter-spacing:-2.64px;
    --h2-letter-spacing:-2.64px;
    --h3-letter-spacing:-2.64px;
    --h4-letter-spacing:-2.64px;
    --h5-letter-spacing:-2.64px;
    --h6-letter-spacing:-2.64px;
    --h1-line-height:90%;
    --h2-line-height:90%;
    --h3-line-height:90%;
    --h4-line-height:90%;
    --h5-line-height:90%;
    --h6-line-height:90%; 
}

@media(max-width:1024px){
    .tabsblock,
    .tabsblock .ptrn-bighero {
        /* .ptrn-bighero (genest in tabs) zette hier 44px — Figma: 32px */
        --h2-size:32px;
        --h2-letter-spacing:-1.28px;
        --h2-line-height:100%;
        --h2-weight:800;
        .ptrn-bighero > div{
            padding:80px 24px !important;

            h2{
                margin-bottom:40px !important;
            }
        }

        .kt-row-column-wrap > div{
            margin:0 !important; 
        }
    }

    .ptrn-bighero{
        --h1-size:44px;
        --h2-size:44px;
        --h3-size:44px;
        --h4-size:44px;
        --h5-size:44px;
        --h6-size:44px;
        --h1-letter-spacing: -1.32px;
        --h2-letter-spacing: -1.32px;
        --h3-letter-spacing: -1.32px;
        --h4-letter-spacing: -1.32px;
        --h5-letter-spacing: -1.32px;
        --h6-letter-spacing: -1.32px;
    }

}

.hero-text-centered-image, .superbanner{
    margin-top:-345px !important;
}

.hero-gallery-gallery{
    margin-top: -443px !important;
}

.editor-styles-wrapper .hero-text-centered-image, .editor-styles-wrapper .superbanner, .editor-styles-wrapper  .hero-gallery-gallery{
    margin-top:-125px !important;
}
@media(max-width:1024px){
    
    .hero-text-centered-image, .superbanner{
        margin-top:-265px !important;
    }
        .hero-gallery-gallery{
        margin-top: -392px !important;
    }
}

.hero-text-centered-image figure, .hero-text-centered-image img {
    width:100%;
    aspect-ratio: 1440 / 748;
    height:auto;
    mask-position: center;
    mask-repeat: no-repeat;  
    mask-image: url(images/headermask2.svg);
    mask-size:contain;
    mask-repeat: no-repeat;
}

.hero-text-centered-image.video {
    width:100%;
    aspect-ratio: 1440 / 832;
    height:auto;
    mask-position: center;
    mask-repeat: no-repeat;  
    mask-image: url(images/headermask.svg);
    mask-size:contain;
    mask-repeat: no-repeat;

    .kb-background-video-buttons-wrapper{
        top:50%;
        transition: 0.3s;
        opacity: 0;
    }

    &:hover{
        .kb-background-video-buttons-wrapper{
            opacity:1;
        }
    }

}

.editor-styles-wrapper{
    .hero-text-centered-image.video{
        margin-bottom:300px;
    }
}

@media (max-width:1520px) {
    .hero-text-centered-image figure{
        width:calc(100% - 32px);
        margin:0 auto;
    }
}

@media (max-width:1024px) {
    .ptrn-herobigimage{
        --body-size:18px;
        --body-letter-spacing:-0.54px;
    }
}

@media (max-width:768px) {
    .hero-text-centered-image figure, .hero-text-centered-image img{
        mask-image: url(images/headermaskmobile.svg);
        aspect-ratio: 358 / 401;
        height:auto;
    }

    .hero-text-centered-image.video {
        mask-image: url(images/headermaskmobile.svg);
        aspect-ratio: 358 / 401;
    }

    .ptrn-herobigimage + .video{
        margin-top:-385px !important;
    }
}
@media (max-width:500px) {
    .ptrn-herobigimage + .video{
        margin-top:-265px !important;
    }
    .ptrn-herobigimage:has(+ .video) {
    & > .kt-row-column-wrap {
        & > .wp-block-kadence-column > .kt-inside-inner-col {
            > div > div {
                padding-bottom: 80px;
            }
        }
    }
}
}

/**
 * VIDEO-HERO + STICKER ("We zien elkaar écht")
 * ----------------------------------------------------------------
 * Zelfde principe als de superbanner: de sticker-laag
 * (.superbannercontent.vast) krijgt exact de hoogte van de video en ligt
 * er precies overheen. De sticker staat op de Figma-positie, uitgedrukt in
 * procenten van de video, en wordt aan de onderkant van de video
 * afgesneden (zoals in Figma). Eerder stond hij met vaste marges
 * (-75px / -40px) los van de video — op mobiel zelfs linksboven.
 *   Desktop (Figma 1440 × 832): x1023 y628, 296 breed
 *   Mobiel  (masker 358 × 401): x173  y297, 169 breed (max 200px)
 * pointer-events:none op de laag zodat de play-knop van de video
 * klikbaar blijft.
 */
.entry-content:has(> .hero-text-centered-image.video + .superbannercontent){
    container-type:inline-size;
}
.hero-text-centered-image.video + .superbannercontent{
    --vid-w:1440; --vid-hh:832;
    --vid-h:calc(100cqi * 832 / 1440);
    --st-x:1023; --st-y:628; --st-w:296;
}
@media(max-width:768px){
    .hero-text-centered-image.video + .superbannercontent{
        --vid-w:358; --vid-hh:401;
        --vid-h:calc(100cqi * 401 / 358);
        --st-x:173; --st-y:297; --st-w:169;
        --st-max:200px;
    }
}
.hero-text-centered-image.video:has(+ .superbannercontent){
    margin-bottom:0 !important;
}
.hero-text-centered-image.video + .superbannercontent.superbannercontent{
    height:var(--vid-h) !important;
    margin-top:calc(-1 * var(--vid-h)) !important;
    overflow:clip;
    pointer-events:none;

    > .kt-row-column-wrap{
        padding:0 !important;
        height:100%;
    }
    .superbannercontentsection{
        height:100% !important;
        mask-image:none;

        > .kt-inside-inner-col{
            height:100%;
            position:relative;
        }
        .kb-vector-container.kb-vector-container{
            position:absolute;
            margin:0 !important;
            left:auto;
            right:calc((var(--vid-w) - var(--st-x) - var(--st-w)) / var(--vid-w) * 100%);
            top:calc(var(--st-y) / var(--vid-hh) * var(--vid-h));
            width:min(calc(var(--st-w) / var(--vid-w) * 100%), var(--st-max, 9999px)) !important;
            height:auto !important;
            justify-content:flex-start;
            pointer-events:auto;
        }
    }
    .kb-vector-container svg{
        width:100% !important;
        height:auto !important;
    }
}

/* superbanner */
/**
 * ================================================================
 * SUPERBANNER — één rekenmodel i.p.v. losse pixelwaarden per breakpoint
 * ================================================================
 * Opbouw (ongewijzigd, ook in de editor/patronen): drie LOSSE Kadence-
 * rijen die over elkaar heen liggen:
 *   1. .superbanner              → achtergrond + golf-animatie (masker)
 *   2. .superbannercontent       → meisje links, jongen rechts, tekst (masker)
 *   3. .superbannercontent.vast  → meisje midden, vingers, sticker (GEEN masker,
 *                                  ligt bovenop, dus mag over de rand)
 *
 * HOE HET WERKT
 * - --sb-u is één "ontwerp-pixel": de contentbreedte gedeeld door de
 *   Figma-breedte (1408 desktop, 358 mobiel). ALLES is een veelvoud van
 *   --sb-u, dus de hele compositie schaalt als één illustratie mee.
 *   Geen tussenstanden meer waarin een kind afgesneden of zwevend staat.
 * - Alle drie de lagen krijgen dezelfde hoogte (--sb-h) en de content-
 *   lagen schuiven precies -(--sb-h) omhoog. Geen magic numbers meer
 *   (-752 / -500 / -488 / -470 …) die per breakpoint uit elkaar lopen.
 * - Posities van de kinderen zijn SCHAKELAARS (--sb-ml-x, --sb-jr-y, …),
 *   zelfde principe als de typografie-schakelaars bovenaan. Voor een
 *   andere compositie herdefinieer je alleen die variabelen.
 * - BEWUST alleen left/top/width/height op de kinderen: transform blijft
 *   vrij voor de GSAP-animaties (invliegen). Die zetten inline transforms
 *   en zouden een transform uit CSS anders overschrijven.
 * - Container query (sb) i.p.v. media query: de breakpoint kijkt naar
 *   de beschikbare CONTENTbreedte, niet naar het scherm.
 *
 * SCOPE: alleen een .superbannercontent die direct ná een .superbanner
 * staat. De video-variant (.hero-text-centered-image.video +
 * .superbannercontent) houdt zijn eigen regels hierboven.
 */

/* Gedeelde basis — geldt voor elke .superbannercontent (ook de video-variant) */
.superbanner figure, .superbanner img{
    mask-image:none;
}

.superbannercontent{
    z-index:20;
    width:100%;

    > div{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .superbannercontentsection{
        width:100%;
        mask-image:url(images/superbannermask-straight.svg);
        mask-repeat:no-repeat;

        > .kt-inside-inner-col{
            position:relative;
            width:100%;
            height:100%;
        }
    }

    .contentbox{
        text-align:center;
        position:absolute;

        p{
            font-family:'hvd-poster-cleans' !important;
            color:rgba(255, 204, 3, 1) !important;
            line-height:85% !important;
            margin:0;
        }
    }
}

.superbannercontent.vast{
    z-index:30;

    .superbannercontentsection{
        mask-image:none;
    }

    .wezienelkaarecht-sticker{
        z-index:10;

        svg{
            width:100% !important;
            height:100% !important;
        }
    }
}

/* De contentkolom is de meetlat voor --sb-u */
.entry-content:has(> .superbanner + .superbannercontent){
    container:sb / inline-size;
}

/* ---- Rekenmodel + schakelaars: DESKTOP (Figma 1408 × 672) ---- */
.superbanner:has(+ .superbannercontent),
.superbanner + .superbannercontent,
.superbanner + .superbannercontent + .superbannercontent{
    --sb-u: calc(100cqi / 1408);
    --sb-h: calc(672 * var(--sb-u));

    /* meisje links (+ vingers) */
    --sb-ml-x: -48;  --sb-ml-y: -1;  --sb-ml-h: 650;
    /* jongen rechts */
    --sb-jr-x: 1080; --sb-jr-y: 37;  --sb-jr-h: 573;
    /* tekst */
    --sb-cb-x: 459;  --sb-cb-y: 180; --sb-cb-w: 546; --sb-cb-fs: 72;
    /* meisje midden */
    --sb-mm-x: 420;  --sb-mm-y: 361; --sb-mm-w: 568;
    /* sticker */
    --sb-st-x: 1045; --sb-st-y: 452; --sb-st-w: 296; --sb-st-h: 273;


    height:var(--sb-h);
}

/* ---- MOBIEL (Figma 358 × 401) — alleen de schakelaars wisselen ---- */
@container sb (max-width:640px){
    .superbanner:has(+ .superbannercontent),
    .superbanner + .superbannercontent,
    .superbanner + .superbannercontent + .superbannercontent{
        --sb-u: calc(100cqi / 358);
        --sb-h: calc(401 * var(--sb-u));

        /* compositie volgens Figma (Splitscreen mobiel, 358 × 401) */
        --sb-ml-x: -23;  --sb-ml-y: 3;   --sb-ml-h: 306;
        /* jongen valt met zijn onderkant achter de sticker */
        --sb-jr-x: 202;  --sb-jr-y: 127; --sb-jr-h: 261;
        --sb-cb-x: 118;  --sb-cb-y: 62;  --sb-cb-w: 221; --sb-cb-fs: 27;
        --sb-mm-x: -29;  --sb-mm-y: 245; --sb-mm-w: 260;
        --sb-st-x: 173;  --sb-st-y: 297; --sb-st-w: 169; --sb-st-h: 156;
    }
}

/* ---- Laag 1: achtergrond ---- */
.superbanner:has(+ .superbannercontent){
    /* BEWUST !important: Kadence zet per blok (mobiel) een eigen marge met
       een id-selector. De rij-marge hoort pas onder de LAATSTE laag. */
    margin-bottom:0 !important;

    .hero-text-centered-image-section{
        z-index:10;
        width:100%;
        height:var(--sb-h);
        aspect-ratio:auto;
        mask-image:url(images/superbanndermask.svg);
        mask-size:100% 100%;
        mask-position:0 0;
        mask-repeat:no-repeat;

        > div{
            width:100%;
            height:var(--sb-h);
            animation:carmel-cta-bg-scroll 80s linear infinite;
            background-repeat:repeat;
        }
    }
}

/* ---- Laag 2 + 3: precies over laag 1 heen ---- */
.superbanner + .superbannercontent,
.superbanner + .superbannercontent + .superbannercontent{
    position:relative;
    margin-top:calc(-1 * var(--sb-h)) !important;

    &:has(+ .superbannercontent){
        margin-bottom:0 !important;
    }

    > .kt-row-column-wrap{
        padding-top:0 !important;
        padding-bottom:0 !important;
        height:var(--sb-h);
    }

    .superbannercontentsection{
        height:var(--sb-h);
        aspect-ratio:auto;
        mask-size:100% 100%;
        mask-position:0 0;
    }

    /* meisje links + vingers delen dezelfde box (vingers liggen in laag 3,
       over de maskerrand heen) */
    .meisjelinks,
    .vingerslinks{
        position:absolute;
        margin:0;
        left:calc(var(--sb-ml-x) * var(--sb-u));
        top:calc(var(--sb-ml-y) * var(--sb-u));
        height:calc(var(--sb-ml-h) * var(--sb-u));
        width:auto;
        max-width:none;
    }
    .vingerslinks{
        left:calc((var(--sb-ml-x) + 1) * var(--sb-u));
    }

    .jongenrechts-clip,
    .jongenrechts-clip div{
        height:100%;
    }
    .jongenrechts{
        position:absolute;
        left:calc(var(--sb-jr-x) * var(--sb-u));
        top:calc(var(--sb-jr-y) * var(--sb-u));
        height:calc(var(--sb-jr-h) * var(--sb-u));
        width:auto;
    }

    .meisjelinks img,
    .vingerslinks img,
    .jongenrechts img{
        height:100%;
        width:auto;
        max-width:none;
        object-fit:contain;
    }

    .contentbox{
        left:calc(var(--sb-cb-x) * var(--sb-u));
        top:calc(var(--sb-cb-y) * var(--sb-u));
        width:calc(var(--sb-cb-w) * var(--sb-u));
        transform:rotate(-6.887deg); /* zoals voorheen: GSAP neemt deze rotatie over in zijn inline transform */

        p{
            font-size:calc(var(--sb-cb-fs) * var(--sb-u)) !important;
            letter-spacing:calc(var(--sb-cb-fs) * -0.03 * var(--sb-u)) !important;
        }
    }

    .meisjemidden{
        position:absolute;
        margin:0;
        left:calc(var(--sb-mm-x) * var(--sb-u));
        top:calc(var(--sb-mm-y) * var(--sb-u));
        width:calc(var(--sb-mm-w) * var(--sb-u));
        height:auto;
        max-width:none;

        img{
            width:100%;
            height:auto;
        }
    }

    .wezienelkaarecht-sticker{
        position:absolute;
        left:calc(var(--sb-st-x) * var(--sb-u));
        top:calc(var(--sb-st-y) * var(--sb-u));
        width:calc(var(--sb-st-w) * var(--sb-u)) !important;
        height:calc(var(--sb-st-h) * var(--sb-u)) !important;
    }
}

/* Laag 2 (met masker) — mobiel ander maskervorm, net als de achtergrond */
@container sb (max-width:640px){
    .superbanner:has(+ .superbannercontent) .hero-text-centered-image-section,
    .superbanner + .superbannercontent:not(.vast) .superbannercontentsection{
        mask-image:url(images/headermaskmobile.svg);
    }
}


footer.site-footer{
    padding:0px;

    .wp-block-kadence-rowlayout{
        margin-bottom:34px;
    }

    .linklist{
        a{
            display:block;
            width:100%;
            position: relative;
            color: #F5F5F4;
            font-size:20px;

            &:after{
                content:'';
                background-image:url('images/arrow.svg');
                background-repeat: no-repeat;
                background-size:12px 12px;
                background-position: center;
                width:32px;
                height:32px;
                position: absolute;
                right: 12px;
                top:-3px;
                border-radius: 8px;
                border: 1px solid var(--Primary-CCG-Grijs-25, rgba(245, 245, 244, 0.25));
                transition: 0.3s;
            }

            &:hover{
                text-decoration: none;

                &:after{
                    right:0;
                }
            }
        }
        p{
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
    }

    .site-top-footer-wrap > div{
        border-radius:24px 24px 0 0 ;
    }

    .site-middle-footer-wrap > div{
        border-radius: 0 0 24px 24px;
    }

}

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

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


/* text-image blokken */
.double-textblock-row1,
.double-textblock-row2,
.image-text-pattern,
.text-image-pattern{
    h1,h2,h3,h4,h5,h6{
        font-size: 56px !important;
        line-height: 100% !important;
        letter-spacing: -2.24px !important;
        font-weight: 800!important;
        color: rgba(0, 117, 156, 1);
        margin-bottom:24px !important;
        font-style: normal !important;
    }
    em{
        font-style: normal !important;
    }
    strong{
        font-weight: 800!important;
    }
    p, ul, ol, li, td, tr{
        --body-size: 20px;
        --body-line-height: 120%;
        --body-letter-spacing:  -0.4px;
        --body-weight: 400;
        --body-color: rgba(3, 10, 10, 1);
    }
    .carmel-label{
        margin-bottom:24px;
        --body-letter-spacing: -0.28px;
        background-color:rgba(232, 247, 253, 1);
        padding:8px;
        border-radius:8px;
        .carmel-label__dot{
            background-color:rgba(0, 117, 156, 1);
        }
    }
    figure{
        width:640px;
    }
    img{
        height:640px;
        width:640px;
        object-fit: cover;
    }
}

@media(max-width:1024px){
    .double-textblock-row1,
    .double-textblock-row2,
    .image-text-pattern,
    .text-image-pattern{
        h1,h2,h3,h4,h5,h6{
            font-size: 32px !important;
            letter-spacing: -1.28px !important;
        }

        p, ul, ol, li, td, tr{
            --body-size: 16px;
            --body-letter-spacing:  -0.32px;
        }
        .carmel-label{
            margin-bottom:24px;
            --body-letter-spacing: -0.28px;
            .carmel-label__dot{
                background-color:rgba(0, 117, 156, 1);
            }
        }
        img{
            height:320px;
            width:100%;
            max-width:340px;
        }
        /* Figma: 24px tussen tekst/knop en beeld, in beide volgordes.
           (was: row-gap 0 + figure margin-top 40 → kop plakte tegen de
           foto als de foto bovenaan stond) */
        figure{
            margin-top:0 !important;
            width:100%
        }
        .kt-row-column-wrap{
            row-gap:24px !important;
        }
        p:last-of-type{
            margin-bottom:24px;
        }
    }
}

@media(max-width:500px){
        .double-textblock-row1,
    .double-textblock-row2,
    .image-text-pattern,
    .text-image-pattern{
        img{
            height:290px;
            width:100%;
        }
    }
}


/* infohub */
.carmel-infohub__content{
    --h5-size:24px;
    --h5-line-height:100%;
    --h5-letter-spacing:-0.48px;
    --h5-weight:700;
    --h5-color:rgba(3, 10, 10, 1);
    h5{
        margin-bottom:40px !important;
    }

    --h3-size:18px;
    --h3-line-height: 100%;
    --h3-letter-spacing:-0.18px;
    --h3-weight:700;
    --h3-color:rgba(3, 10, 10, 1);

    --body-size:16px;
    --body-line-height:120%;

    h3{
        padding-bottom:8px;
        padding-top:8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        margin-bottom:16px;
    }

}

.carmel-infohub__nav{
    --carmel-font-body: inter;
    --body-weight: 700;
    --body-size:20px;
    --body-letter-spacing: -0.4px;
    --body-line-height: 120%; 
    --body-color:rgba(3, 10, 10, 1);
}

.carmel-infohub__nav a{
    font-style: normal;
    line-height: 120%;
    letter-spacing: -0.4px;
    font-weight:400;
    font-family: inter;

    &.is-active{
        background-color:transparent;
        font-weight: 400;
    }
}

@media(max-width:1024px){
    .carmel-infohub__content{
        --h5-letter-spacing:-0.4px;
        --h5-size:20px;

        --h3-size:16px;
        --h3-letter-spacing:-0.16px;

        --body-size:14px;

    }

    .carmel-infohub__nav{display: none;}
}

.infohub-template-default  .entry-content  h1{
    font-size:var(--carmel-font-size-display1) !important;
    line-height: var(--carmel-line-height-display1) !important;
    letter-spacing: var(--carmel-letter-spacing-display1) !important;
    font-weight: var(--display1-weight) !important;
}

.infohub-template-default  .entry-content  p, .infohub-template-default  .entry-content  ul, .infohub-template-default  .entry-content  li, .infohub-template-default  .entry-content   ol{
    font-size:20px !important;
    line-height:120% !important;
    letter-spacing:-0.4px !important;
}


.infohub-template-default .entry-content figure ,  .single-post  .entry-content  .nieuwscontent h1 + figure{
    height:400px;
}

.infohub-template-default .entry-content figure img,  .single-post  .entry-content  .nieuwscontent  h1 +  figure img{
    height:400px;
    object-fit: cover;
}




@media(min-width:1024px){
    .infohub-template-default  .infohubcontent, .single-post .nieuwscontent{
        max-width:750px;
    }

}

@media(max-width:375px){
.infohub-template-default  .entry-content  p, .infohub-template-default  .entry-content  ul, .infohub-template-default  .entry-content  li, .infohub-template-default  .entry-content   ol, .infohub-template-default  .entry-content   td{
font-size:16px !important;}
}


.single-post  .entry-content  p, .single-post  .entry-content  ul, .single-post  .entry-content  li, .single-post  .entry-content  ol{
    font-size:20px !important;
    line-height:120% !important;
    letter-spacing:-0.4px !important;
}


.single-post  .entry-content  h1, .infohub-template-default  .entry-content  h1{
	padding-bottom: calc(40px - 24px) !important;
    font-size:var(--carmel-font-size-h1) !important;
    line-height: var(--carmel-line-height-h1) !important;
    letter-spacing: var(--carmel-letter-spacing-h1) !important;
    font-weight: var(--h1-weight) !important;
}
@media(max-width:1024px){
    .single-post  .entry-content  h1, .infohub-template-default  .entry-content h1{
        padding-bottom: calc(32px - 24px) !important;
		margin-bottom:0px !important;
        font-size:56px !important;
        letter-spacing:  -2.8px !important;
    }
}
@media(max-width:768px){
    .single-post  .entry-content  h1,
    .infohub-template-default .entry-content h1,
    .infohub-template-default h1{
        font-size:44px !important;
        letter-spacing:-1.32px !important;
    }
}
@media(max-width:1024px){
    
    .infohub-template-default .entry-content figure ,  .single-post  .entry-content  .nieuwscontent figure{
        height:auto;
    }

    .infohub-template-default .entry-content figure img,  .single-post  .entry-content  .nieuwscontent figure img{
        height:100%;
        object-fit: cover;
    }
}

.infohub-template-default .entry-content .kb-button.kt-button, .infohubbuttons .kb-button.kt-button{
    background-color:transparent !important;
    color:rgba(0, 117, 156, 1)!important;
    padding:0 !important;
    height:auto !important;
    transform:none !important;



    .kt-btn-inner-text{
        letter-spacing: -0.16px!important;
        font-weight: 700!important;
    }

    &:after{
        display:none;
    }
    svg path{
        fill:rgba(0, 117, 156, 1)!important;
    }

    &:hover, &:focus{
        border-width:0 !important;
        box-shadow:none !important;
        --btn-arrow-opacity: 1;
    }
}

.carmel-gerelateerde-artikelen__title{
    color:rgba(0, 117, 156, 1);
    letter-spacing: -0.18px;
    line-height: 100%;
    font-weight:700;
    font-size:18px;
}
.carmel-gerelateerde-artikelen__list  a{
    font-weight: 400;
    line-height: 120%;
    font-size:16px;
}
.carmel-gerelateerde-artikelen__list li{
    margin-bottom:0 !important;
}

@media(max-width:1024px){
    .infohub-template-default h1{
        font-size:56px !important;
        letter-spacing: -2.8px !important;
    }
    .infohub-template-default p{
        font-size:16px !important;
        line-height:120% !important;
        letter-spacing:-0.32px !important;
    }
    .carmel-gerelateerde-artikelen__list  a{
        font-size:14px;
    }
    .carmel-gerelateerde-artikelen__title{
        letter-spacing: -0.16px;
        font-size:16px;
    }

}

/* veel gestelde vragen */

.veelgesteldevragen{

    --h2-size:120px;
    --h2-line-height:90%;
    --h2-letter-spacing:-6px;
    --h2-weight:800;

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

    --h5-size:32px;
    --h5-letter-spacing:-1.28px;
    --h5-weight:700;
    --h5-line-height:100%;
    --h5-color:rgba(0, 0, 0, 1);

    h5{
        margin-bottom:48px !important;
    }

    --h6-size:24px;
    --h6-line-height:100%;
    --h6-weight:700;
    --h6-letter-spacing:-0.48px;
    --h6-color:rgba(0, 0, 0, 1);

    --body-size:20px;
    --body-line-height:120%;
    --body-weight:400;
    --body-letter-spacing:-0.4px;

    .carmel-faq-accordion__answer ul li,.carmel-faq-accordion__answer ol li{
        font-size:20px;
        line-height:120%;
        letter-spacing: -0.4px;
        margin-bottom:8px !important;
    }
    .carmel-faq-accordion__answer p:has(+ ul){
        margin-bottom:8px !important;
    }

    .carmel-faq-accordion__question{
        margin-bottom:24px;
    }

    .carmel-faq-accordion__toggle-icon{
        color:rgba(245, 245, 244, 1);
        background-color:rgba(79, 131, 0, 1);
    }
  

}
  .carmel-faq-accordion__toggle-icon::before, .carmel-faq-accordion__toggle-icon::after{
        background-color:#fff;
    }

@media(max-width:1024px){
    
    .veelgesteldevragen{
        --h2-size:56px;
        --h2-letter-spacing:-2.8px;
    }
}

/* Mobiel: 56px brak "Veelgestelde" midden in het woord af */
@media(max-width:768px){
    .veelgesteldevragen{
        --h2-size:40px;
        --h2-letter-spacing:-1.6px;
    }
}

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

        --h5-size:24px;
        --h5-letter-spacing:-0.96px;

        h5{
            margin-bottom:24px !important;
        }

        --h6-size:20px;
        --h6-letter-spacing:-0.4px;

        --body-size:16px;
        --body-letter-spacing:-0.32px;

        .carmel-faq-accordion__answer ul li,.carmel-faq-accordion__answer ol li{
            font-size:16px;
            letter-spacing: -0.32px;
        }

    }
}


/* footer */
footer.site-footer{
    --body-size:14px;
    --body-line-height:100%;
    --body-weight:400;
    --body-color:rgba(255, 255, 255, 1);
    text-align: left;
    a{
        letter-spacing: -0.4px;
    }

    .contactgegevensfooter{
        --body-size:20px;
        --body-letter-spacing:-0.4px;
        --body-line-height:120%;
    }

    .kb-button.kt-button.button{
        border-color:#fff !important        ;
        background-color:#fff !important  ;
        color:rgba(0, 117, 156, 1) !important  ;
        height:48px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        

        svg path{
            stroke:rgba(0, 117, 156, 1) !important  ;
        }
    }
    .footer-html{
        margin:14px 0;
    }
}

@media(max-width:1024px){
    footer.site-footer .site-top-footer-inner-wrap, footer.site-footer .site-middle-footer-inner-wrap{
        grid-row-gap:0px
    }

    footer.site-footer{
        .kb-vector-container{
            justify-content: right;
        }
    }
}


/* hero-text-reveal */
.hero-text-reveal, .hero-center-green{

    --h1-color:rgba(79, 131, 0, 1);

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

    & > .kt-row-column-wrap {
        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:url(images/green-background.svg);
            background-size:cover;
            background-color:rgba(243, 248, 236, 1);
        }
    }

    .wp-block-kadence-rowlayout.alignfull.alignfull{
        margin-bottom:80px !important
    }


}

.hero-text-centered-sticker{
    width:100%;
    aspect-ratio: 1440 / 748;
    height:auto;
    margin-top: -863px;
    margin-bottom: 80px;
}

.hero-text-centered-sticker .ctasticker{
    position: absolute;
    width: 200px;
    height: 200px;
    right: 40px;
    top:0;

    img{
        object-fit: contain;
    }
}

@media(max-width:1024px){
    .hero-text-centered-sticker{
        width: 100%;
        aspect-ratio: 1440 / 748;
        height: auto;
        margin-top: -460px;
        margin-bottom: 150px;

        > div{
            height:100%;
        }
    }

    .hero-text-centered-sticker .ctasticker{
        position: absolute;
        width: 120px;
        height: 120px;
        right: 0px;
        bottom: 40px;
        top:auto
    }
}

@media(max-width:767px){
    .hero-text-centered-sticker{
        margin-bottom: var(--section-gap) !important;
        aspect-ratio: 358 / 401;
        height:auto;
    }
}

.hero-pattern-text-reveal{
    --h5-size:24px;
    --h5-letter-spacing:-0.48px;
    --h5-line-height:100%;
    --h5-weight:700;

    --body-size:16px;
    --body-line-height:120%;

    .js-card{
        border-radius: 24px;

        h5{
            max-width:calc(100% - 40px)
        }

        p{
            font-size:16px !important
        }


    }

    .js-card > div{
        background-color:#fff;
    }

    h5:after{
        background-image:url(images/arrow.svg);
        background-color:rgba(0, 176, 219, 1);
            right: -40px;
    }

    p{
        margin-bottom:0;
        max-height:84px;
    }
}

.pattern-text-reveal{
            .js-card h5:after{
            right:0;
        }
    }

/* Kaart-titels: de pijl (h5::after, 32px) staat absoluut rechts IN de
   titel — lange titels liepen er op mobiel onderdoor. Nu reserveert de
   titel rechts 48px (32px pijl + 16px lucht) en loopt de tekst daarvoor
   netjes door naar een volgende regel; de pijl blijft bij de eerste regel.
   hyphens:manual: alleen afbreken op bestaande streepjes ("Agora-|onderwijs"),
   niet midden in een woord. */
.pattern-text-reveal .js-card h5,
.hero-pattern-text-reveal .js-card h5{
    padding-right:48px;
    max-width:none !important;
    box-sizing:border-box;
    hyphens:manual;
}

@media(min-width:1024px){
    .pattern-text-reveal .js-card h5{
        margin-bottom:0 !important;
    }
}

/* Tablet/mobiel (≤1024px): de omschrijving onder de
   kaart-titel komt op desktop pas tevoorschijn bij hover (cards.css zet
   .js-card-desc op height:0/opacity:0 en de kaart op een vaste 420px).
   Zonder hover bleef de tekst half verstopt onder de volgende kaart —
   hier dus altijd tonen en de kaart laten meegroeien met de inhoud.
   BEWUST geen (hover:none): sommige laptops/desktops met touchscreen
   melden dat ook, waardoor de tekst op desktop opeens zichtbaar werd. */
@media (max-width:1024px){	
    .hero-pattern-text-reveal .js-card,
    .pattern-text-reveal .js-card,
    .hero-pattern-text-reveal .js-card > .kt-inside-inner-col{
        height:auto !important;
    }
    /* cards.css zet de omschrijving tussen 769–1024px absolute onderin de
       kaart (vanaf de kaartrand, met eigen padding). Hier terug in de
       normale flow, onder de titel en binnen de 24px kaart-padding — zo
       lijnt hij op elke breedte gelijk met titel en afbeelding. */
    .hero-pattern-text-reveal .js-card .js-card-desc,
    .pattern-text-reveal .js-card .js-card-desc{
        position:relative !important;
        inset:auto !important;
        height:auto !important;
        max-height:none !important;
        opacity:1 !important;
        overflow:visible !important;
        padding:0 !important;
        margin-bottom:0 !important;
    }
}

@media(max-width:1024px){
    .pattern-text-reveal{
        --h5-size:20px;
        --h5-letter-spacing:-0.4px;
        
        --body-size:14px;
        .js-card h5:after{
            right:0;
        }
    }

}

@media (max-width:375px){
	.pattern-text-reveal .js-card h5, .hero-pattern-text-reveal .js-card h5{padding-right:0px;}
	.hero-pattern-text-reveal .js-card h5:after{display:none;}
}
	




.hero-center-green, .hero-center-blue{
    --body-size:24px;
    --body-letter-spacing:-0.72px;
    --body-line-height:130%;
    --body-weight:400;

    --h1-size:88px;
    --h1-letter-spacing:-2.64px;
    --h1-line-height:90%;
    --h1-weight:800;
    h1{
        margin-bottom:24px;
        &:last-child{
            margin-bottom:0;
        }
    }
    p{
        margin-bottom:32px;
    }


}
.hero-center-blue{
    .wp-block-kadence-rowlayout.alignfull.alignfull{
        margin-bottom:0px !important;
    }
}

/* Mobiel/tablet: de tekst stond tegen de rand van het gekleurde vlak
   (geneste rij breekt uit met -16px, padding was 16px → 0px ruimte).
   Nu 24px tussen vlak en tekst, zelfde als de CTA en quote. */
@media(max-width:1024px){
    :is(.hero-center-green, .hero-center-blue, .hero-gallery, .hero-text-reveal) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap > .kt-row-column-wrap{
        padding-left:40px !important;
        padding-right:40px !important;
    }
}

@media(max-width:1024px){
    :is(.hero-center-green, .hero-center-blue):has(+ .hero-text-centered-image) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col{
        padding-bottom:152px !important;
    }
    :is(.hero-center-green, .hero-center-blue) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{
        padding-top:149px !important;
    }
}

@media(max-width:1024px){
    .hero-center-green, .hero-center-blue{
        --body-size:18px;
        --body-letter-spacing:-0.54px;

        --h1-size:44px;
        --h1-letter-spacing:-1.32px;
    }
}


/* cta */
:root  div.cta-pattern{
    mask-position: center;
    mask-repeat: no-repeat;  
    mask-image: url(images/cta-mask.svg);
    mask-size:contain;
    mask-repeat: no-repeat;
    aspect-ratio: 1440 / 535;
    background-color:rgba(131, 187, 38, 0.2);
    background-image:url(images/lijntjes-cta.svg);
    background-repeat:repeat;

    --h3-size:72px;
    --h3-letter-spacing:-1.44px;
    --h3-line-height:90%;
    --h3-weight:800;
    --h3-color:rgba(79, 131, 0, 1);

    animation: carmel-cta-bg-scroll 80s linear infinite;

    .carmel-label{
        margin-bottom:40px;
    }

    .kb-button:has(+ .kb-button){
        margin-right:88px;
    }

    .kb-button + .kb-button{
        color:rgba(0, 117, 156, 1) !important;
        border-color:rgba(0, 117, 156, 1) !important;
    }

    .cta-image{
        margin-right:-109px;
    }
}

/* (margin-top:120px verwijderd — op desktop deed hij niets (rij-marge
   is daar al 120) en op mobiel gaf hij altijd 120px boven elke CTA.
   De ruimte komt nu uit --section-gap / --section-gap-color.) */


@media(min-width:1024px){
    .cta-pattern .cta-left-column{
        width:960px;
    }

}
@media(max-width:1024px){
    .entry-content.single-content > div.cta-pattern{
        margin-bottom:80px;
    }
}

div.cta-pattern + .vingersrow{
    margin-top: -599px;
    width: 100px;
    margin-right: 0;
    float: right;

    figure{margin-right:-44px !important}
}

@keyframes carmel-cta-bg-scroll {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 5000px; 
    }
}

:root  div.cta-pattern.secundair{
    background-color:rgba(79, 131, 0, 1);
    --h3-color:#fff;
    
    .kb-button:first-child{
        background-color:#fff !important;
        color:rgba(79, 131, 0, 1) !important;
    }

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

@media(max-width:1482px){
    div.cta-pattern + .vingersrow{
    margin-top: -596px;
    }
}

@media(max-width:1024px){
    :root  div.cta-pattern{
        mask-image:none;
        width: 100%;

        border-radius:24px;
        padding:80px 24px 0px 24px;

        --h3-size:32px;
        --h3-letter-spacing:-1.28px;

        > div{
            padding-top:0;
             > div > .kt-inside-inner-col{
                align-items: flex-start;
             }   
        }

        h3{
            text-align:left;
        }

        .wp-block-kadence-column{
            z-index:2;
        }

        .wp-block-kadence-column + .wp-block-kadence-column{
            margin-top:-200px;
            z-index:1;
            figure{
                margin-right:56px;

            }
        }
    }

    div.cta-pattern + .vingersrow{
        margin-top:-535px;
        height:400px;
        figure{margin-right:-29px !important}
    }
}

@media(max-width:768px){
    :root  div.cta-pattern{
        .kb-buttons-wrap{
            flex-direction: column;
            align-items:flex-start;
            gap:16px;
        }
    }

}

@media(max-width:400px){
    :root div.cta-pattern {
        .wp-block-kadence-column + .wp-block-kadence-column {
            margin-top: -127px;
            z-index: 1;
        }
    }
        div.cta-pattern + .vingersrow{
        margin-top:-534px;
    }

}

/* megamenucarmel  */
.megamenucarmel {
    p{
        font-size:13px !important;
        color:rgba(0, 117, 156, 1) !important;
        line-height:120% !important;
        font-weight:400 !important;
        margin-bottom:24px;
    }

    a.carmel-menu-hover-link{
        letter-spacing: -0.4px !important;
        font-size:20px !important;
        font-weight:500 !important;
        line-height: 120% !important;
        color:rgba(0, 117, 156, 1) !important;
        margin-bottom:16px;
        &:last-child{
            margin-bottom:0;
        }
        &:hover{
            color:rgba(131, 187, 38, 1) !important;
        }
    }
    a.carmel-menu-hover-link--active{
        color:#4f8300 !important;
    }
}

@media(min-width:1024px){
    .megamenucarmel {
        min-width:  850px
    }
}

.js-slider-arrow{
    height:20px;

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

@media(min-width:1024px){
    .carmel-row-slider__nav button, .carmel-news-slider__nav button{
        width: 64px;
        height: 64px;
            svg {
                width: 20px !important;
                height: 20px !important;
            }
    }
}
/* topmenu */

#secondary-menu .kadence-menu-has-icon .menu-label-icon-wrap {
    + .dropdown-nav-toggle {
        display: none;
    }
}
#secondary-menu .kadence-menu-has-icon .menu-label-icon-wrap {
    border: 1px solid #00759C;
    border-radius: 8px !important;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#secondary-menu .kadence-menu-has-icon .menu-label-icon-wrap svg{
    width:20px;
    height:20px;
}
.search-toggle-open-container .search-toggle-open.search-toggle-style-bordered.search-toggle-style-bordered{
    border-color:rgba(0, 117, 156, 0.25);
}

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

    form{ 
        display:none
    }

}

.contactblok{
    background-color:#fff;
    padding:40px;
    --body-size:16px;
    --body-color:rgba(0, 117, 156, 1);
    --body-weight:400;
    --body-line-height:140%;
    --h6-size:18px;
    --h6-line-height:100%;
    --h6-letter-spacing:-0.18px;
    --h6-color:rgba(0, 117, 156, 1);
    --h6-weight:700;
    border-radius:24px;
    display: flex;
    width: 371px;
    h6{
        margin-bottom:10px
    }
    p:last-child{
        margin-bottom:0;
        align-self: stretch;
    }
}

.contactcontent{
    --body-size:20px;
}

@media(max-width:1024px){
    .contactblok{
        padding:32px;
        --body-size:14px;
        --h6-size:16px;
        --h6-letter-spacing:-0.16px;
        display: flex;
        width: 100%;
    }
}

/* quote */
.block-editor-block-list__block.quote-pattern{
    > .innerblocks-wrap{
       > .block-editor-block-list__block > .kadence-inner-column-inner{
            background-image: url(https://www.carmelcollegesalland.nl/wp-content/themes/theme-ccs/images/green-background.svg);
            background-size: cover;
            background-color: rgba(243, 248, 236, 1) !important;
            border-radius: 24px;
        }
    }
}


.quote-pattern{
    --h2-color:rgba(79, 131, 0, 1);

    > .kt-row-column-wrap {

        > .wp-block-kadence-column > .kt-inside-inner-col{
            background-image:url(images/green-background.svg);
            background-size:cover;
            background-color:rgba(243, 248, 236, 1);
            border-radius: 24px;
        }
    }

    h2{
        margin-bottom:32px !important;
    }
}
@media(max-width:1024px){
    .quote-pattern{
        h2{
            margin-bottom:24px !important;
        }

        .kt-inside-inner-col{
            .kt-row-column-wrap{
                padding-top:80px;
            }
        }
    }
}

.entry-content .wp-block-kadence-rowlayout.alignfull, .entry-content .wp-block-kadence-rowlayout.alignwide{
    margin-bottom:var(--section-gap) !important;

    &:only-child{
        margin-bottom:16px !important;
    }
}


/* Mobiel: rond gekleurde blokken (CTA, quote) 56px i.p.v. 80px — Figma.
   We zetten de marge op het blok ERVOOR (marges collapsen, dus de
   grootste wint; daarom niet op de CTA zelf). */
@media(max-width:768px){
    .entry-content > .wp-block-kadence-rowlayout.wp-block-kadence-rowlayout:has(+ .cta-pattern),
    .entry-content > .wp-block-kadence-rowlayout.wp-block-kadence-rowlayout:has(+ .quote-pattern),
    .entry-content > .quote-pattern.wp-block-kadence-rowlayout.wp-block-kadence-rowlayout{
        margin-bottom:var(--section-gap-color) !important;
    }
}
.entry-content .wp-block-kadence-rowlayout.alignfull  .wp-block-kadence-rowlayout.alignfull, .entry-content .wp-block-kadence-rowlayout.alignwide  .wp-block-kadence-rowlayout.alignfull{
    margin-bottom:80px !important;
}

/* actueel */
.carmel-nieuws-overzicht__tab.is-active{
    background-color:rgba(0, 117, 156, 1);
}
.carmel-nieuws-overzicht__tabs{
    background-color:#E8F7FD;

}
.carmel-nieuws-overzicht__tab{
    color:rgba(0, 117, 156, 1);
        font-size:16px;
    letter-spacing: -0.16px;
    line-height:100%;
    font-weight:700;
}
.carmel-nieuws-overzicht__date-input {
    width: 44px;
    background-color:#fff !important;
    margin-left:40px;
}
.carmel-nieuws-overzicht__date-overlay-label{
    line-height:1;
}
.carmel-nieuws-overzicht__image{
    height:315px;
    margin-bottom:32px;
    border-radius: 24px;
        width: 100%;
}
.carmel-nieuws-overzicht__badge, .carmel-news-slider__meta, .carmel-news-slider__badge{
    background-color:#fff;
    padding:2px 8px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.28px;
    font-size:14px;
    color:rgba(0, 117, 156, 1);
    border-radius:8px;
    margin-bottom:16px;
    text-transform: none;
    font-family: var(--carmel-font-heading, Interstate);
}

.carmel-nieuws-overzicht__title, .carmel-news-slider__title{
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.48px;
    font-size:24px;
}

h1.actueelh1{
    font-weight:800 !important;
}

@media(max-width:1024px){
    .carmel-nieuws-overzicht__grid,
    .carmel-team-grid{
        grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)) !important;
    }
}

/* stappen */
.steps-pattern{
    --body-size:20px;
    --body-letter-spacing:-0.4px;
    --body-line-height:120%;

    --h5-size:24px;
    --h5-line-height:100%;
    --h5-letter-spacing:-0.48px;
    
    .steps-pattern-step{

        --body-size:16px;
        --body-line-height:120%;
        --body-letter-spacing:0;
        
        border-radius:16px;

        > div{
            background-color:rgba(232, 247, 253, 1);

            .carmel-label{
                margin-bottom:0;
            }

            h5{
                margin-bottom:8px;
            }

            figure{
                border-radius:8px;

                img{
                    border-radius:8px;
                }
            }
        }
    }

    .carmel-row-slider__nav{
        padding-right:16px;
        svg{
            path{
                stroke:#fff;
            }
        }
        .carmel-row-slider__prev{
            transform:rotate(180deg);
        }
    }
}

.hero-gallery{
    h1{
        margin-bottom:24px !important; 
    }
}

@media(max-width:1024px){
    .hero-gallery{
        h1{
            margin-bottom:16px !important; 
        }
    }
}

.hero-gallery-gallery{
    .carmel-image-slider__slide img{
        border-radius:24px;
    }
}

.ptrn-introtext{
    h2{
        margin-bottom:40px !important;
    }
    .carmel-label {
        background-color: rgba(232, 247, 253, 1);
    }
    > div{
        padding-top:0 !important;
    }
}

@media(max-width:1024px){
    .ptrn-introtext{
        h2{
            margin-bottom:24px !important;
            font-size:32px !important
        }
        p{
            font-size:20px  !important;
        }
    }
}

.ptrn-video{

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

    a.kb-button{
        background-color:rgba(0, 117, 156, 1);

        svg{
            width: 32px !important;
            height: 32px !important;
            path{
                stroke-width: 1px;
                stroke-opacity: 1;
                fill: transparent;
                stroke: #fff;
            }
        }
        &:hover{
            background-color:rgba(0, 117, 156, 1);
        }

    }
    &.js-video-preview:hover a {
        transform: none !important;
        &:hover{
            transform: scale(1.71) !important;;
        }
    }
}

.ptrn-imagestext.js-imgtext{
    --body-size:20px;
    --body-letter-spacing:-0.4px;
    --body-line-height:120%;

    figure img{
        border-radius:24px;
    }
    h2{
        margin-bottom:24px !important;
    }
}

@media(max-width:1024px){
    .ptrn-imagestext.js-imgtext{
        --body-size:16px;
        --body-letter-spacing:-0.32px;
    }
}

.ptrn-textgallery{
    --body-size:20px;
    --body-letter-spacing:-0.4px;
    --body-line-height:120%;
}

@media(max-width:1024px){
    .ptrn-textgallery{
        --body-size:16px;
        --body-letter-spacing:-0.32px;
    }
}

.team-grid, .ptrn-team-slider{
    h2{
        margin-bottom:80px !important;
    }
    .carmel-label{
        background-color:#E8F7FD;
    }
}

.ptrn-team-slider h2{
    max-width:calc(100% - 100px);
}
.ptrn-team-slider {
    .wp-block-carmel-core-team-slider{
        margin-top:-136px
    }

    .carmel-team-slider__nav{
        margin-bottom:80px;
    }

}

@media(min-width:1024px){
    .ptrn-team-slider h2{
        max-width:50%;
    }

}

@media(max-width:1024px){
        .ptrn-team-slider {
    .wp-block-carmel-core-team-slider{
        margin-top:-82px
    }

    .carmel-team-slider__nav{
        margin-bottom:40px;
    }

}
}

.carmel-team-grid__name, .carmel-team-slider__name{
    font-size:24px !important;
    line-height:100% !important;
    letter-spacing: -1.12px !important;
    font-weight:700 !important;
    margin-bottom: 8px !important;
}


.carmel-team-grid__role, .carmel-team-slider__role{
    font-size:20px !important;
    line-height:120% !important;
    letter-spacing: -0.4px !important;
    font-weight:400 !important;
    opacity:0.5;
}

.carmel-team-grid__image, .carmel-team-slider__image{
    border-radius:24px;

}
@media(max-width:1024px){
    .team-grid .carmel-team-grid__name, .carmel-team-slider__name{
        font-size:22px !important;
        letter-spacing:  -0.88px !important;
    }
    .team-grid  .carmel-team-grid__role, .carmel-team-slider__role{
        font-size:16px !important;
        letter-spacing: -0.32px !important;
    }
    .carmel-team-grid__image, .carmel-team-slider__image{
        height:383px;
    }
    .team-grid, .ptrn-team-slider{
        h2{
            margin-bottom:40px !important;
        }
    }

}

/*text-header-left-image-right */
.text-header-left-image-right{
    --body-size:24px;
    --body-letter-spacing:-0.72px;
    --body-line-height:130%;

    .carmel-label {

        background-color: rgba(232, 247, 253, 1);
    }
    img{
        height:540px;
        align-self:stretch;
        margin-bottom:48px;
        object-fit:cover;
    }
    p{
        margin-bottom:48px !important;
    }
}

@media(max-width:1024px){
    .text-header-left-image-right{
        --body-size:16px;
        --body-letter-spacing:-0.32px;
        --body-line-height:120%;

        img, p{
            margin-bottom:24px !important;
        }
    }

}

.two-images-textblock{

    --body-size:20px;
    --body-line-height:120%;
    --body-letter-spacing:-0.4px;

    h2{
        max-width:564px;
    }

    p{
        margin-top:40px !important;
        margin-bottom:32px !important;
    }

    .carmel-label {
        background-color: rgba(232, 247, 253, 1);
    }

    &:has( + .two-images-textblock-images){
        margin-bottom:80px !important;
    }
}

.two-images-textblock-images img{
    height:616px;
    object-fit: cover;

    > div{
        padding-top:0;
    }
}

@media(max-width:1024px){

    .two-images-textblock{
        --body-size:16px;
        --body-letter-spacing:-0.32px;
        --body-line-height:120%;

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

        
        h2{
            max-width:inherit;
        }

        &:has( + .two-images-textblock-images){
            margin-bottom:40px !important;
        }
    }

    .two-images-textblock-images img{
        height:320px;
    }

}

/* faq */
.ptrn-faq{

    --h6-size:24px;
    --h6-line-height:100%;
    --h6-letter-spacing:0.48px;

    > div{
        padding-top:0;
    }

    h6{
        margin-bottom:24px !important
    }

    h2{
        max-width:448px;
    }

    .carmel-label {
        background-color: rgba(232, 247, 253, 1);
    }
    .carmel-faq-accordion__toggle-icon{
        background-color:rgba(131, 187, 38, 1);
        margin-bottom:24px !important
    }
    .carmel-faq-accordion__answer-inner{
        p, ul, ol, li, span, tr, td{
            font-size:20px !important;
            letter-spacing: -0.4px !important;
        }
    }
}

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

        h2{
            max-width:inherit;
        }

        h6, .carmel-faq-accordion__toggle-icon{
            margin-bottom:16px !important
        }

        .carmel-faq-accordion__answer-inner{
            p, ul, ol, li, span, tr,td{
                font-size:16px !important;
                letter-spacing: 0.32px !important;
            }
        }

    }
}

.editor-styles-wrapper .pattern-text-reveal .js-card > div{height:auto;}

.pattern-text-reveal{
    --body-size:20px;
    --body-line-height:120%;
    --body-letter-spacing:-0.4px;

    .kt-inside-inner-col{
        .kb-row-layout-wrap:nth-child(2){
            .js-card > div{
                background-color:rgba(239, 246, 229, 1);
                border-radius:16px;
                --h5-size:24px;
                --h5-letter-spacing:-0.4px;
                --h5-weight:700;
                --h5-line-height:100%;

                --body-size:16px;
                --body-weight:400;
                --body-letter-spacing:0;
                --body-line-height:120%;
                height:100%;

                h5:after{
                    background-color:rgba(131, 187, 38, 1);
                    background-image:url(images/arrow.svg);
                }
                figure{
                    border-radius:8px;
                }
                img{
                    height: 328px;
                    border-radius:8px;
                }
            }
            .js-card{
                height:inherit
            }
        }
    }
    .carmel-row-slider__prev{
        transform:rotate(180deg);
    }
    .carmel-row-slider__nav {
        padding-right:16px;
        svg{
        path{stroke:#fff;}
        }
    }
    .js-row-slider{
        margin-bottom:0 !important;
    }
}

.entry-content { 
    .pattern-text-reveal.wp-block-kadence-rowlayout.alignfull {

        .js-row-slider.wp-block-kadence-rowlayout.alignfull{
            margin-bottom:0 !important;
        }
    }
}

.pattern-text-reveal.roze{

    --h5-color:#fff;
   

    .kt-inside-inner-col{
        .kb-row-layout-wrap:nth-child(2){
            .js-card > div{
                 --body-color:#fff;
                background-color:rgba(214, 43, 139, 1);

                h5:after{
                    background-color:#fff;
                    background-image:url(images/Arrow-black.svg);
                }
            }
        }
    }
}

@media(max-width:1024px){
    .pattern-text-reveal{
        --body-size:16px;
        --body-letter-spacing:-0.32px;
        --body-line-height:120%;

        .kt-inside-inner-col{
            .kb-row-layout-wrap:nth-child(2){
                .js-card > div{
                    --h5-size:20px;

                    --body-size:14px;

                    figure{
                        height: 246px;
                    }    
                    img{
                        height: 246px;
                        align-self:stretch;
                    }
                }
            }
        }
    }
    /* Gescoped: stond eerder los in deze media query en haalde zo op de
       HELE site de ruimte tussen gestapelde kolommen weg. */
    .pattern-text-reveal .kt-has-2-columns{
        row-gap:0 !important;
    }
}
@media(max-width:768px){
    .pattern-text-reveal{
        p{
            height: Auto;
            opacity: 1;
            position: relative;
            margin-left: 0;
            padding-left: 0;
            overflow: visible;
        }
    }

}


/*ptrn-gallery*/

@media(min-width:1200px){
    .ptrn-gallery{
        figure{
            width:1212px;
            height:669px;
        }
         figure img{
            width:100% !important;
            height:100% !important;
            object-fit: cover !important;
         }
    }
}


/* zoekresultaten */

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

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

.search-results h2.entry-title{
    --h2-size:28px;
    --h2-color:rgba(0, 117, 156, 1);
    --h2-weight:700;
    --h2-line-height:100%;
    --h2-letter-spacing:-1.12px;
    margin-bottom:24px;
}

.search-results .excerpt_part{
    font-size:16px;
    font-weight:400;
    line-height: 120%;
    color:#000;
}

.search-results .site-main .entry-list-item article{
    padding:40px;
    border-radius:24px;
    box-shadow:none
}
.search-results .site-main article.type-attachment{
    border-radius:24px;
    box-shadow:none
}

.search-results .site-main .entry-list-item article .entry-content-wrap{
    padding:0;
}
.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{
    padding:0;
    display: flex;
    border-radius:8px;
        background-color:rgba(0, 176, 219, 1);
    color:#fff;
    padding:10px;
}

body.search-results #inner-wrap #primary, body .site-main #inner-wrap #primary{
    background-color: rgba(232, 247, 253, 1);
    width:calc(100% - 32px);
    margin:0 auto;
    border-radius:24px;
    padding-top:140px;
    margin-top:var(--hero-overlap);
}

/* zoekveld boven zoekresultaten */
#main.site-main:has(.carmel-search-results-searchbar) {
    display: flex;
    flex-direction: column;
}

#main.site-main:has(.carmel-search-results-searchbar)  .entry-header.search-archive-title {
    order: 1;
}

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

#main.site-main:has(.carmel-search-results-searchbar)  #archive-container {
    order: 3;
}

#main.site-main:has(.carmel-search-results-searchbar)  nav.pagination {
    order: 4;
}

input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 4L12 12M12 4L4 12' stroke='%23030A0A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.carmel-search-results-searchbar{
    background-color:#fff;
    padding:0px 8px 0px 16px;
    border-radius:24px;
    border: 1px solid #E5E5E5;

    form{
        display: flex;
        justify-content: center;
        align-items:flex-start;
        justify-content: space-between;
    }

}

.carmel-search-results-searchbar input[type=search]{
    border-width:0 !important;
    background-color:#fff;
    height: 104px;
    font-size:24px;
    color:rgba(3, 10, 10, 1);
    letter-spacing: -0.24px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.72px;
    width:calc(100% - 122px);
    max-width: 100%;
    &:focus{
        color:rgba(3, 10, 10, 1);
        box-shadow: none;;
    }
    &::placeholder{
        color:rgba(3, 10, 10, 1);
    }
}

.carmel-search-results-searchbar  .wp-block-search__button.wp-block-search__button{
    height:104px;
    width:104px;
    background-size: 90px 90px;
    background-color: transparent;
    border-radius:16px;
    background-image:url(images/search-button.svg);
}
.carmel-search-results-searchbar  .wp-block-search__button.wp-block-search__button:hover{
    transform: scale(1.1);
    box-shadow:none;
}

.search-archive .excerpt_part strong{
    font-weight:400;
    text-decoration: underline;
}

@media(max-width:1024px){
    .carmel-search-results-searchbar{
        border-radius:16px;
        padding:4px 4px 4px 24px;

    }
    .carmel-search-results-searchbar input[type=search]{
        letter-spacing: -0.18px;
        font-weight: 400;
        font-size:18px;
        height:72px;
        width: calc(100% - 73px);
    }
    .carmel-search-results-searchbar  .wp-block-search__button.wp-block-search__button{
        border-radius:12px;
        width:72px;
        height:72px;
        background-size: 56px 56px;
    }
    .search-results .site-main h1{
        margin-bottom:32px !important;
    }

    body.search-results #inner-wrap #primary{
        background-color: rgba(232, 247, 253, 1);
        width:calc(100% - 32px);
        margin:0 auto;
        border-radius:24px;
        padding-top:80px;
        margin-top:var(--hero-overlap);
    }

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


/**
 * 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.6s;
	--carmel-hero-carousel-ease: cubic-bezier(0.65, 0, 0.35, 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;
    }
}

@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;
	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 {
	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;
	}
}

@media(max-width:1024px){
    .hero-text-centered-image-section{
        figure, figure img{
            height:400px !important;
        }
    }
}


.ptrn-text-heading{
    --body-size:24px !important;
    --body-letter-spacing: -0.72px;
    --body-line-height:130%;

}

@media(max-width:1024px){
    .ptrn-text-heading{
        --body-size:18px !important;
        --body-letter-spacing: -0.54px;
    }
	.carmel-menu-highlight-card {height:100%;}
	.carmel-menu-highlight-card {
		  > div.carmel-menu-highlight-card__image{
		  height:60% !important;
		  margin-bottom:0px;}
	}
}

.carmel-menu-highlight-card {
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom:20px;
    > div.carmel-menu-highlight-card__image{
        width: 100%;
        height:85%;       
    }
}
.carmel-menu-highlight-card__title{
    color: var(--carmel-color-secondary-donkerblauw) !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
    letter-spacing: -0.18px !important;
}

.carmel-menu-highlight-card__arrow{
    background-color:transparent !important;
    color: var(--carmel-color-secondary-donkerblauw) !important; 
}

/* mobile menu */
.mobile-menu-container ul#mobile-menu > li > div > a, .mobile-menu-container ul#mobile-menu > li  > a{
    font-size:16px !important;
    line-height:120% !important;
	font-weight: 500 !important;
    color:rgba(0, 117, 156, 1) !important;


}
.mobile-menu-container ul#mobile-menu {
    .megamenucarmel {
        a{
            color: rgba(0, 117, 156, 1) !important;
            font-size: 14px !important;
            font-style: normal;
            font-weight: 500 !important;
            line-height: 120%;
            letter-spacing: -0.16px !important;           
        }

        .carmel-menu-highlight-card__image img{
            border-radius:24px;
			max-height:150px;			
        }

    }
    svg{
        fill:rgba(0, 117, 156, 1)
    }
}

.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%;
        }
    }
}

.mobile-menu-container ul#mobile-secondary-menu > li  > a, .mobile-menu-container ul#mobile-secondary-menu > li > div  > a{
    font-size:18px !important;
    line-height:100% !important;
    color:rgba(0, 117, 156, 1) !important
}

@media(max-width:600px){
    .newsslider {
        h4 + div{
            margin-top:-0px !important
        }
    }
}

/* formulieren */
   .kb-form-basic-style {
     --kb-form-background-color: #fff;
   }


/**
 * ================================================================
 * MOBIEL — AFSTANDEN VOLGENS FIGMA (390px)
 * ================================================================
 * BEWUST onderaan het bestand: deze regels moeten winnen van de
 * blok-specifieke regels hierboven (zelfde specificiteit → laatste wint).
 * Waar !important staat, is dat omdat Kadence per blok eigen marges/
 * paddings zet met een id-selector (kb-row-layout-id…).
 */
@media(max-width:768px){

    /* CTA: binnenruimte boven 56px (Figma), en geen eigen Kadence-
       marge erboven — de ruimte komt van het blok ervoor (56px). */
    .entry-content > .cta-pattern.wp-block-kadence-rowlayout,
    .entry-content > .quote-pattern.wp-block-kadence-rowlayout{
        margin-top:0 !important;
    }
    :root div.cta-pattern{
        padding-top:56px;

        /* Meisje rechts ONDER de knoppen i.p.v. eroverheen.
           BEWUST dezelfde hoogte als de vingers (.vingersrow img = 391px)
           en met haar rechterrand gelijk aan die van de vingers (29px
           over de rand van het vlak) — anders lopen hand en vingers niet
           meer gelijk. Beide staan vast t.o.v. de onderkant van de CTA,
           dus dit blijft kloppen op elke breedte. */
        .wp-block-kadence-column + .wp-block-kadence-column{
            margin-top:-16px;
        }
        .cta-image{
            margin-right:-52px; /* 24px binnenruimte + 28px vingerbreedte */

            figure{
                width:auto;
                margin-right:0 !important;
                margin-left:auto;
            }
            img{
                width:auto;
                height:391px;
                max-width:none;
            }
        }
    }

    /* Quote: gekleurd vlak 24px van de rand (was 8px), tekst daardoor
       op 48px — Figma. */
    .quote-pattern > .kt-row-column-wrap > .wp-block-kadence-column{
        margin-left:24px !important;
        margin-right:24px !important;
    }

    /* Sliders: 24px zijmarge (was 16px) en de pijlen direct onder de
       tekst (24px i.p.v. 80px), kaarten 24px eronder. */
    .pattern-text-reveal > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child{
        margin-bottom:24px !important;

        > .kt-row-column-wrap{
            padding-left:24px !important;
            padding-right:24px !important;
        }
    }
    .pattern-text-reveal{
        .carmel-row-slider__nav{
            padding-right:24px;
            margin-bottom:24px;
        }
        .js-row-slider > .kt-row-column-wrap{
            padding-left:24px !important;
        }
    }

    /* Tabs: 32px tussen titel en de tabs (was 40px + extra) */
    .tabsblock .ptrn-bighero > div h2,
    .tabsblock h2{
        margin-bottom:32px !important;
    }
}

/**
 * ================================================================
 * PUNTEN COLLEGA (responsiveness-lijst) — onderaan het bestand plakken
 * ================================================================
 * BEWUST onderaan: deze regels moeten winnen van eerdere regels met
 * dezelfde specificiteit.
 */

/* --- Desktop: CTA 80px boven en onder ---
   patterns.css (plugin) zet .cta-pattern op margin-top:240px; dat zetten
   we hier uit. De ruimte komt nu uit --section-gap-color (80px desktop,
   56px mobiel). De vingers schuiven 40px mee omdat de CTA-marge onder
   40px kleiner wordt. */
@media(min-width:1025px){
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper){
        --section-gap-color:80px;
    }
    body .entry-content.single-content > div.cta-pattern{
        margin-top:0 !important;
        margin-bottom:var(--section-gap-color) !important;
    }
    .entry-content > .wp-block-kadence-rowlayout.wp-block-kadence-rowlayout:has(+ .cta-pattern){
        margin-bottom:var(--section-gap-color) !important;
    }
    div.cta-pattern + .vingersrow{
        margin-top:calc(-599px + 40px);
    }
}
@media(min-width:1025px) and (max-width:1482px){
    div.cta-pattern + .vingersrow{
        margin-top:calc(-596px + 40px);
    }
}

/* --- Alinea's standaard 24px marge (Kadence: --global-md-spacing = 32px).
   Laatste alinea in een blok blijft 0 (Kadence :last-child wint). --- */
body .single-content p{
    margin-bottom:24px;
}

/* --- Big Image Centered-hero: h1 40px marge (desktop) --- */
@media(min-width:1025px){
    :is(.hero-center-green, .hero-center-blue) h1{
        margin-bottom:40px !important;
    }
}

/* --- Leerroutes: 16px tussen de kaarten, horizontaal én verticaal --- */
.hero-pattern-text-reveal .kt-row-column-wrap:has(> .js-card){
    gap:16px !important;
}

/* --- Mobiel (390) --- */
@media(max-width:768px){

    /* Primaire knop: 16px padding (48px hoog stond al) */
    .kb-button.wp-block-button__link{
        padding:0 16px !important;
    }

    /* Slider: pijlen 32px en links uitgelijnd met de tekst */
    .pattern-text-reveal .carmel-row-slider__nav{
        justify-content:flex-start;
        padding:0 24px;

        > button{
            width:32px;
            height:32px;
            min-width:32px;
        }
    }

    /* Footer: adres 16px */
    footer.site-footer .contactgegevensfooter{
        --body-size:16px;
    }

    /* Footer: contactknop 32px hoog, 10px padding (pijl-cirkel schaalt mee) */
    footer.site-footer .kb-button.kt-button.button{
        height:32px !important;
        padding:0 10px !important;
        min-width:0;
        margin-right:32px;

        &::after{
            width:32px;
            height:32px;
            right:-32px;
        }
    }

    /* Footer: "Met de kracht van" + Carmel-logo naast elkaar */
    footer.site-footer .site-footer-middle-section-1 .kt-row-column-wrap.kt-has-2-columns{
        grid-template-columns:auto auto !important;
        justify-content:start;
        align-items:center;
        column-gap:8px;
    }

    /* Footer: logo 164px breed */
    footer.site-footer .site-footer-middle-section-3 svg{
        width:164px !important;
        height:auto !important;
    }

    /* Footer: copyright, Disclaimer en Privacy onder elkaar.
       Grid i.p.v. flex: tussen de twee links staat een &nbsp; die anders
       een extra lege regel geeft; zo komt die onderaan terecht. */
    footer.site-footer .site-footer-middle-section-2 .footer-html-inner p{
        display:grid;
        justify-items:start;
        row-gap:8px;

        > a:first-of-type{ grid-row:2; }
        > a:last-of-type{ grid-row:3; }
    }
}

/* --- Footer 1024–1400px: menu-items en adres 14px --- */
@media(min-width:1024px) and (max-width:1400px){
    footer.site-footer .linklist a{
        font-size:14px;
    }
    footer.site-footer .contactgegevensfooter{
        --body-size:14px;
    }
}

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

/**
 * ================================================================
 * RONDE 3 — onderaan het bestand plakken (ná het collega-blok)
 * ================================================================
 */

/* --- CTA (desktop): meisje en vingers altijd gelijk ---
   De vingers (.vingersrow) hangen aan de ONDERKANT van de CTA, het meisje
   hing aan de BOVENKANT. Omdat de CTA-hoogte per breedte verschilt
   (510 / 518 / 535px) liepen ze tussen 1025 en 1480px 14–22px uit elkaar.
   Nu hangt het meisje ook aan de onderkant: haar kolom loopt door tot de
   onderrand en zij staat onderaan, 57px boven de rand — precies waar de
   vingers zitten. Daardoor is de CTA op desktop ook overal 535px hoog,
   gelijk aan Figma. */
@media(min-width:1025px){
    :root div.cta-pattern{
        > .kt-row-column-wrap{
            min-height:100%;
            box-sizing:border-box;
        }
        > .kt-row-column-wrap > .wp-block-kadence-column + .wp-block-kadence-column > .kt-inside-inner-col{
            display:flex;
            flex-direction:column;
            justify-content:flex-end;
            height:100%;
        }
        .cta-image{
            display:flow-root;

            figure{
                margin-bottom:57px !important;
            }
        }
    }
    /* één waarde voor alle desktopbreedtes (was -599 / -596 / +40 correctie) */
    div.cta-pattern + .vingersrow.vingersrow{
        margin-top:-559px !important;
    }
}

/* --- Mobiele header 48px hoog, logo 64×64 dat eronder uitsteekt (Figma) ---
   Gevolgen, allemaal hieronder doorgerekend:
   - de header is 52px lager → --hero-overlap van -109px naar -57px
     (achtergrond blijft 8px boven en naast de menubalk uitsteken);
   - de ruimte boven de hero-tekst wordt 52px kleiner, zodat de tekst op
     dezelfde afstand onder de menubalk blijft staan als nu;
   - de aparte -89px voor precies 1024px is niet meer nodig: het logo
     krijgt op die breedte nu ook de mobiele maat. */
@media(max-width:1024px){
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper){
        --hero-overlap:-57px;
    }

    #mobile-header .site-main-header-inner-wrap{
        min-height:48px !important;
        height:48px;
    }
    #mobile-header .site-branding{
        height:48px;
        position:relative;
        align-self:flex-start;

        a.brand{
            display:block;
            width:64px;
            height:48px;
            position:relative;
        }
        a.brand img{
            position:absolute;
            top:0;
            left:0;
            width:64px !important;
            height:64px !important;
            max-width:none !important;
            max-height:none !important;
            object-fit:contain;
        }
    }

    /* Ruimte boven de hero-tekst: alles 52px minder (Kadence-waarden per
       blok waren 160 / 220 / 140px; gecentreerde hero stond op 149px). */
    .entry-content > :is(.ptrn-herobigimage, .ptrn-herochoices, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero):first-child:not(.hero-center-green, .hero-center-blue) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{
        padding-top:108px !important;
    }
    :is(.hero-center-green, .hero-center-blue) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{
        padding-top:97px !important;
    }
    /* infohub / FAQ */
    .entry-content > .alignfull:first-child:not(.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue, .hero-center-green, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{
        padding-top:168px !important;
    }
    /* infohub-artikelen / nieuwsberichten */
    .single .entry-content > .alignfull:first-child:not(.ptrn-herobigimage, .ptrn-herochoices, .hero-center-blue, .hero-center-green, .hero-text-reveal, .herowrapper, .hero-gallery, .bighero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap:first-child > .kt-row-column-wrap{
        padding-top:88px !important;
    }
}

/* --- Footer desktop: minder lucht, géén vaste hoogte ---
   735px → ±640px. Boven/onder in de bovenste footer-rij 48px (was 72/80),
   logo 164px breed (zelfde als mobiel), adresregels 8px uit elkaar. */
@media(min-width:1025px){
    footer.site-footer .site-top-footer-wrap .site-footer-row{
        padding-top:48px !important;
        padding-bottom:48px !important;
    }
    footer.site-footer .site-footer-middle-section-3 svg{
        width:201px !important;
        height:auto !important;
    }
    footer.site-footer .contactgegevensfooter p{
        margin-bottom:8px;
    }
}