/* ==========================================================================
   FIX: DIAMANT POSITIE (First Letter)
   ========================================================================== */

/* 1. De Container (De Heading zelf) */
.tk-heading-diamond {
    position: relative !important; /* Nodig als ankerpunt voor de diamant */
    z-index: 1;                    /* Zorgt dat de heading zelf bovenop ligt */
    overflow: visible !important;  /* CRUCIAAL: Laat de diamant buiten de lijntjes kleuren */
}

/* ==========================================================================
   DE DIAMANT (RESPONSIVE)
   ========================================================================== */

/* 1. Basisinstellingen (Desktop) */
.tk-heading-diamond::before {
    content: '';
    position: absolute;
    
    /* Desktop Positie & Grootte */
    top: -18px;
    left: -10px;
    width: 90px;
    height: 90px;
    
    /* Het Plaatje */
    background-image: url('/wp-content/uploads/2026/01/Diamand.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1; 
    
    /* Zorg voor een soepele overgang bij schalen */
    transition: all 0.3s ease;
}

/* 2. Tablet (Schermen kleiner dan 1024px) */
@media (max-width: 1024px) {
    .tk-heading-diamond::before {
        width: 80px;      /* Iets kleiner */
        height: 80px;
        top: -15px;       /* Iets minder ver omhoog */
        left: -22px;      /* Iets minder ver naar links */
    }
}

/* 3. Mobiel (Schermen kleiner dan 767px) */
@media (max-width: 767px) {
    .tk-heading-diamond::before {
        width: 60px;      /* Nog kleiner voor mobiel */
        height: 60px;
        top: -10px;       /* Dichter op de tekst */
        left: -15px;      /* Dichter op de tekst */
    }
}
}
/* --- 2. Custom List Diamond (Verticale lijst) --- */
/* Gebruik class: .tk-custom-list op een 'Term List' of 'Icon List' blok */

ul.tk-custom-list {
    margin: 0;
    padding: 0;
    list-style: none !important; /* Verberg standaard bolletjes */
}

.tk-custom-list li {
    position: relative;
    padding-left: 1.5em;  /* Ruimte maken voor het diamantje links */
    margin-bottom: 0.4em;  /* Ruimte tussen de regels */
    line-height: 1.5;
}

.tk-custom-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;            /* Finetunen op basis van lettergrootte */
    width: 0.5em;
    height: 0.5em;
    background-color: var(--global-palette4, #e94e1b);
    transform: rotate(45deg);
}

/* 1. Reset de container en de lijst */
.tk-col-tags, 
.tk-col-tags ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
}

/* 2. Reset de items (Links strak tegen de kant) */
.tk-col-tags li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    /* Zorg dat het icoontje (als dat er is via ::before) wel ruimte heeft, 
       maar de tekst start links als er geen icoon is */
}

/* 3. CRUCIAAL: Haal de padding van het EERSTE item af */
/* Anders staat hij 10px te laag door de ruimte die bedoeld is voor de lijntjes */
.tk-list-styled li:first-child {
    padding-top: 0 !important;
}

/* ==========================================================================
   FIX: QUOTE ICONEN (OPEN LINKS-BOVEN & CLOSE RECHTS-BOVEN)
   ========================================================================== */

/* Pinkies */
/* De container */
.tk-heading-quotes {
    position: relative !important;
    display: inline-block; /* Zorgt dat de box om de tekst sluit */
    z-index: 1;
}

/* 1. Quote Open (Links Boven) */
.tk-heading-quotes::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -50px;
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/uploads/2026/01/quote_open.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* 2. Quote Close (Rechts BOVEN) */
.tk-heading-quotes::after {
    content: '';
    position: absolute;
    
    /* AANGEPAST: Nu ook aan de bovenkant uitgelijnd (ipv bottom) */
    top: -30px;      
    right: -50px;
    
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/uploads/2026/01/quote_close.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Mobiele aanpassing */
@media (max-width: 767px) {
    .tk-heading-quotes::before,
    .tk-heading-quotes::after {
        top: -20px; /* Beide dichter op de tekst */
        width: 40px; 
        height: 40px;
    }
    .tk-heading-quotes::before { left: -30px; }
    .tk-heading-quotes::after { right: -30px; }
}

/* Darkies */
/* De container */
.tk-heading-quotes-dark {
    position: relative !important;
    display: inline-block; /* Zorgt dat de box om de tekst sluit */
    z-index: 1;
}

/* 1. Quote Open (Links Boven) */
.tk-heading-quotes-dark::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -50px;
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/uploads/2026/01/quote_open_dark.svg'); 
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* 2. Quote Close (Rechts BOVEN) */
.tk-heading-quotes-dark::after {
    content: '';
    position: absolute;
    
    /* AANGEPAST: Nu ook aan de bovenkant uitgelijnd (ipv bottom) */
    top: -30px;      
    right: -50px;
    
    width: 60px;
    height: 60px;
    background-image: url('/wp-content/uploads/2026/01/quote_close_dark.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Mobiele aanpassing */
@media (max-width: 767px) {
    .tk-heading-quotes-dark::before,
    .tk-heading-quotes-dark::after {
        top: -20px; /* Beide dichter op de tekst */
        width: 40px; 
        height: 40px;
    }
    .tk-heading-quotes-dark::before { left: -30px; }
    .tk-heading-quotes-dark::after { right: -30px; }
}

/* ==========================================================================
   BUTTONS: MASTER STYLE & LOGIC (FINAL SPECIFICITY FIX)
   ========================================================================== */

/* --- 1. DE STANDAARD KNOP (NORMAAL: DONKER, HOVER: ROZE) --- */
.kb-button, 
.wp-block-kadence-singlebtn .kb-button,
.kb-btn-global-fill,
.kt-btn-size-standard { 
    display: inline-flex !important; 
    align-items: center; 
    justify-content: center; 
    gap: 0 !important; 
    padding: 12px 24px !important; 
    min-width: 220px; 

    /* Typografie & Vorm */
    font-weight: 400 !important; 
    font-size: 18px !important; 
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 8px !important; 
    
    /* ANIMATIES */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* BASIS STATUS (Donkerblauw) */
    background: rgba(10, 15, 28, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(10, 15, 28, 0.15) !important;
    
    /* TEKSTKLEUR: Forceer #f6f6f6 */
    color: #f6f6f6 !important; 
}
/* Forceer ook de span binnenin */
.kb-button .kt-btn-inner-text {
    color: #f6f6f6 !important;
}


/* STANDAARD HOVER -> ROZE */
.kb-button:hover, 
.wp-block-kadence-singlebtn .kb-button:hover,
.kb-btn-global-fill:hover { 
    background: rgb(255, 0, 128) !important;
    border-color: rgb(255, 0, 128) !important;
    color: #ffffff !important;
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(255, 0, 128, 0.3) !important;
}
.kb-button:hover .kt-btn-inner-text {
    color: #ffffff !important;
}


/* --- 2. DE VARIANTEN: GHOST & PINK (NORMAAL: ROZE, HOVER: DONKER) --- */
.tk-btn-ghost, 
.tk-button-pink, 
.kt-btn-style-outline {
    background: rgb(255, 0, 128) !important;
    border: 1px solid rgb(255, 0, 128) !important;
    box-shadow: 0 4px 15px rgba(255, 0, 128, 0.2) !important;
    color: #ffffff !important;
}
.tk-btn-ghost .kt-btn-inner-text, 
.tk-button-pink .kt-btn-inner-text, 
.kt-btn-style-outline .kt-btn-inner-text {
    color: #ffffff !important;
}

/* VARIANT HOVER -> DONKERBLAUW */
.tk-btn-ghost:hover, 
.tk-button-pink:hover, 
.kt-btn-style-outline:hover {
    background: rgba(10, 15, 28, 1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(10, 15, 28, 0.15) !important;
    color: #f6f6f6 !important;
}
.tk-btn-ghost:hover .kt-btn-inner-text, 
.tk-button-pink:hover .kt-btn-inner-text, 
.kt-btn-style-outline:hover .kt-btn-inner-text {
    color: #f6f6f6 !important;
}


/* --- 3. DE INVERSE KNOP (NORMAAL: DONKER, HOVER: ROZE) --- */
/* FIX: We gebruiken nu de .wp-block-kadence-advancedbtn wrapper om SUPER specifiek te zijn */
/* Hierdoor overschrijven we elke kleurinstelling van de kolom of kaart */

.wp-block-kadence-advancedbtn .kb-button.tk-btn-inverse {
    background: rgba(10, 15, 28, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(10, 15, 28, 0.15) !important;
    
    /* CRUCIAAL: Tekstkleur #f6f6f6 */
    color: #f6f6f6 !important;
}
/* Forceer de SPAN in de inverse knop */
.wp-block-kadence-advancedbtn .kb-button.tk-btn-inverse .kt-btn-inner-text {
    color: #f6f6f6 !important;
}


/* INVERSE HOVER */
.wp-block-kadence-advancedbtn .kb-button.tk-btn-inverse:hover {
    background: rgb(255, 0, 128) !important;
    border-color: rgb(255, 0, 128) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(255, 0, 128, 0.3) !important;
}
.wp-block-kadence-advancedbtn .kb-button.tk-btn-inverse:hover .kt-btn-inner-text {
    color: #ffffff !important;
}

/* --- 4. DE WHITEY KNOP (NORMAAL: WIT, HOVER: DONKERBLAUW) --- */
.kb-button.whitey,
.wp-block-kadence-advancedbtn .kb-button.whitey {
    background: #ffffff !important;
    color: #0a0f1c !important;
    border: none !important; /* Geen border */
    box-shadow: none !important; /* Geen shadow */
}

/* Tekstkleur forceren (ook voor span) */
.kb-button.whitey .kt-btn-inner-text {
    color: #0a0f1c !important;
}

/* HOVER STATUS: KLEUREN OMDRAAIEN */
.kb-button.whitey:hover,
.wp-block-kadence-advancedbtn .kb-button.whitey:hover {
    background: #0a0f1c !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover tekstkleur forceren */
.kb-button.whitey:hover .kt-btn-inner-text {
    color: #ffffff !important;
}


/* --- 4. DARK MODE LOGICA (AUTO SWITCH) --- */
/* Als body dark is -> Standaard knop wordt Roze. Inverse knop wordt genegeerd. */

body.show-dark-mode .kb-button:not(.tk-btn-ghost):not(.tk-button-pink):not(.tk-btn-inverse):not(.kt-btn-style-outline) {
    background: rgb(255, 0, 128) !important;
    border: 1px solid rgb(255, 0, 128) !important;
    box-shadow: 0 4px 15px rgba(255, 0, 128, 0.2) !important;
    color: #ffffff !important;
}
body.show-dark-mode .kb-button:not(.tk-btn-ghost):not(.tk-button-pink):not(.tk-btn-inverse):not(.kt-btn-style-outline) .kt-btn-inner-text {
    color: #ffffff !important;
}

/* En de HOVER draait om naar Donker */
body.show-dark-mode .kb-button:not(.tk-btn-ghost):not(.tk-button-pink):not(.tk-btn-inverse):not(.kt-btn-style-outline):hover {
    background: rgba(10, 15, 28, 1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(10, 15, 28, 0.15) !important;
    color: #f6f6f6 !important;
}
body.show-dark-mode .kb-button:not(.tk-btn-ghost):not(.tk-button-pink):not(.tk-btn-inverse):not(.kt-btn-style-outline):hover .kt-btn-inner-text {
    color: #f6f6f6 !important;
}


/* --- 5. CLEANUP --- */
.kb-button:active, 
.wp-block-kadence-singlebtn .kb-button:active {
    transform: translateY(2px) scale(0.99) !important;
    box-shadow: 0 1px 4px rgba(10, 15, 28, 0.1) !important;
}

.kb-button::after,
.wp-block-kadence-singlebtn .kb-button::after { 
    content: none !important; 
    display: none !important; 
}





/* ==========================================================================
   4. ALGEMENE LIST STYLING (Base Class)
   ========================================================================== */
.tk-list-styled, ul.tk-list-styled {
    list-style: none !important; padding: 0 !important; margin: 0 !important; display: inline-block !important; width: auto !important;
}
.tk-list-styled li {
    display: flex !important; align-items: center !important; width: 100% !important; border-bottom: 1px solid #000 !important; padding: 10px 0 !important; white-space: nowrap !important;
}
.tk-list-styled li::before {
    content: '' !important; flex: none !important; width: 16px !important; height: 16px !important; margin-right: 15px !important; background-image: url('/wp-content/uploads/2026/01/Diamand.svg') !important; background-repeat: no-repeat !important; background-size: contain !important; display: inline-block !important;
}
body.show-dark-mode .tk-list-styled li { color: #ffffff !important; border-bottom-color: rgba(255, 255, 255, 0.3) !important; }

/* ==========================================================================
   9. STEP ITEMS & COUNTERS - HYBRIDE VERSIE
   ========================================================================== */

/* --- A. BASIS LOGICA (TELLEN) --- */

/* 1. Reset de teller op de hoofdsectie */
.fade-to-blue-section,
.tk-step-counter-section {
    counter-reset: step-counter;
}

/* 2. De Item Wrapper: Hier vindt altijd de telling plaats */
.tk-step-item {
    position: relative;
    counter-increment: step-counter; 
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- B. VARIANT 1: STANDAARD (Voor Homepage met Iconen) --- */
/* Dit is de oude code, die werkt als je GEEN extra class toevoegt */

.tk-step-item:not(.tk-step-text-variant)::before {
    content: counter(step-counter, decimal-leading-zero);
    
    position: absolute;
    /* Pas deze 'top' aan als hij op de homepage niet goed staat */
    top: 110px; 
    left: -45px;
    
    font-size: 40px; 
    font-weight: 300;
    line-height: 1;
    color: rgba(0, 0, 0, 0.15); 
    
    z-index: 0;
    pointer-events: none;
    font-family: var(--global-heading-font-family, sans-serif);
}

/* --- C. VARIANT 2: NIEUW (Voor Klantcase met alleen Tekst) --- */
/* Deze wordt actief als je de class 'tk-step-text-variant' toevoegt */

/* 1. We verbergen het 'oude' nummer op de wrapper voor de zekerheid */
.tk-step-item.tk-step-text-variant::before {
    content: none !important;
}

/* 2. We maken ruimte in het tekstblok */
.tk-step-item.tk-step-text-variant .kt-infobox-textcontent {
    position: relative !important;
    overflow: visible !important; /* Laat het nummer buiten de lijntjes kleuren */
    margin-left: 60px !important; /* Duw de tekst naar rechts */
    z-index: 10; /* Zorg dat tekst (en dus nummer) bovenop ligt */
}

/* 3. We plakken het nummer AAN DE TEKST (Is onderdeel van de content) */
.tk-step-item.tk-step-text-variant .kt-infobox-textcontent::before {
    content: counter(step-counter, decimal-leading-zero);
    
    position: absolute;
    /* We zetten hem in de marge die we net gemaakt hebben */
    left: -60px; 
    top: 10px; /* Strak uitgelijnd met de eerste regel tekst */
    
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.25);
    
    font-family: var(--global-heading-font-family, sans-serif);
    pointer-events: none;
}

/* --- D. ALGEMEEN (Dark Mode) --- */
body.show-dark-mode .tk-step-item::before,
body.show-dark-mode .tk-step-item .kt-infobox-textcontent::before {
    color: rgba(255, 255, 255, 0.4); 
}

/* ==========================================================================
   HELPER: DYNAMIC GRID COLUMN (Voor Infoboxes in een kolom)
   Zorgt dat items in deze kolom netjes 50/50 naast elkaar staan.
   ========================================================================== */

/* 1. De Grid Container */
/* We targeten de interne wrapper van Kadence (.kt-inside-inner-col) */
.tk-dynamic-grid-col .kt-inside-inner-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Altijd 2 kolommen naast elkaar */
    gap: 40px !important; /* Ruimte tussen de blokjes */
    width: 100%;
}

/* 2. Oneven items fix (Optioneel) */
/* Als je 3 items hebt, wil je dat nummer 3 links staat, niet gek uitgerekt */
.tk-dynamic-grid-col .wp-block-kadence-infobox:nth-child(odd) {
    margin-right: auto !important;
    justify-self: start;
}

/* 3. Mobiele Reset */
/* Op mobiel wil je ze wel gewoon onder elkaar */
@media (max-width: 767px) {
    .tk-dynamic-grid-col .kt-inside-inner-col {
        grid-template-columns: 1fr !important; /* Terug naar 1 kolom */
        gap: 30px !important;
    }
}




/* ==========================================================================
   3. SCROLL MODES & KLEUREN (FINAL: FIXED CURTAIN)
   ========================================================================== */

/* 1. HET VASTE BEHANG (De Curtain) */
/* Dit zorgt voor de strakke achtergrondkleur zonder strepen */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10; /* Achter alles */
    background-color: #0A0F1C; /* Dark Mode kleur (default) */
    opacity: 0;
    pointer-events: none;
    
    /* De achtergrondkleur overgang */
    transition: opacity 0.6s ease-in-out, background-color 0.6s ease-in-out !important;
    will-change: opacity, background-color;
}

/* 2. DE SCHAKELAARS (Zet het behang aan) */
body.show-dark-mode::before {
    opacity: 1 !important;
    background-color: #0A0F1C !important;
}

body.show-lavender-mode::before {
    opacity: 1 !important;
    background-color: #E5E2FF !important;
}

body.show-white-mode::before {
    opacity: 1 !important;
    background-color: #ffffff !important; /* Forceer puur wit */
}

/* Zorg ook dat de content transparant wordt in white mode, net als bij de anderen */
/* --- AANGEPAST: WHITE MODE (KEIHARD WIT) --- */
/* In plaats van transparant, dwingen we deze containers naar #ffffff.
   Dit voorkomt dat je de standaard grijze #f6f6f6 van het thema erdoorheen ziet. */

body.show-white-mode,
body.show-white-mode #wrapper,
body.show-white-mode .site-inner,
body.show-white-mode .site-content,
body.show-white-mode .content-container,
body.show-white-mode .content-area,
body.show-white-mode article,
body.show-white-mode article.content-bg,
body.show-white-mode .entry-content-wrap,
body.show-white-mode .entry-content,
body.show-white-mode .single-content,
body.show-white-mode .wp-site-blocks {
    background-color: #ffffff !important; /* Forceer WIT i.p.v. transparant */
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    transition: background-color 0.6s ease-in-out !important;
}

/* De curtain mag ook gewoon wit blijven voor de zekerheid */
body.show-white-mode::before {
    opacity: 1 !important;
    background-color: #ffffff !important;
}

/* 3. MAAK DE SCROLLENDE PAGINA 100% GLASHELDER */
/* We maken de containers transparant zodat je de curtain erachter ziet. */

/* Eerst de transitie instellen voor het 'terugveren' naar normaal */
#wrapper, .site-inner, .site-content, .content-container, article, .entry-content, .wp-site-blocks, .kb-row-layout-wrap {
    transition: background-color 0.6s ease-in-out !important;
}

/* De lijst met elementen die transparant worden tijdens de modi */
body.show-dark-mode,
body.show-dark-mode #wrapper,
body.show-dark-mode .site-inner,
body.show-dark-mode .site-content,
body.show-dark-mode .content-container,
body.show-dark-mode .content-area,
body.show-dark-mode article,
body.show-dark-mode article.content-bg,
body.show-dark-mode .entry-content-wrap,
body.show-dark-mode .entry-content,
body.show-dark-mode .single-content,
body.show-dark-mode .wp-site-blocks,
body.show-dark-mode .fade-to-blue-section,
body.show-dark-mode .tk-step-section,
body.show-dark-mode .full-screen-grid-switch,
body.show-dark-mode [class*="has-theme-palette"],
body.show-dark-mode [class*="has-kb-palette"],

body.show-lavender-mode,
body.show-lavender-mode #wrapper,
body.show-lavender-mode .site-inner,
body.show-lavender-mode .site-content,
body.show-lavender-mode .content-container,
body.show-lavender-mode .content-area,
body.show-lavender-mode article,
body.show-lavender-mode article.content-bg,
body.show-lavender-mode .entry-content-wrap,
body.show-lavender-mode .entry-content,
body.show-lavender-mode .single-content,
body.show-lavender-mode .wp-site-blocks,
body.show-lavender-mode .fade-to-lavender-section,
body.show-lavender-mode [class*="has-theme-palette"],
body.show-lavender-mode [class*="has-kb-palette"] {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    transition: none !important; /* Direct glas worden, geen vertraging */
}

/* 4. OVERLAYS WEG */
body.show-dark-mode .kt-row-layout-overlay,
body.show-dark-mode .entry-content::before,
body.show-dark-mode .entry-content::after,

body.show-lavender-mode .kt-row-layout-overlay,
body.show-lavender-mode .entry-content::before,
body.show-lavender-mode .entry-content::after {
    display: none !important;
}

/* ==========================================================================
   5. TEKST KLEUREN (SMART TARGETING)
   ========================================================================== */
/* Hier zit de oplossing: We passen de kleur alleen aan BINNEN de secties die 
   meedoen aan het effect (.fade-to-blue-section en .fade-to-lavender-section). 
   De rest van de website wordt met rust gelaten. */

/* A. DE TRANSITIE (Altijd aan voor soepel effect) */
body .darkmode-to-white, 
body h1, body h2, body h3, body h4, body h5, body h6, 
body p, body li, body span, body a,
body .kt-adv-heading8_7248eb-dc { 
    transition: color 0.6s ease-in-out, border-color 0.6s ease-in-out !important;
}

/* B. DARK MODE AAN (Nacht): Maak tekst WIT, maar ALLEEN in de fade-secties */
body.show-dark-mode .fade-to-blue-section h1,
body.show-dark-mode .fade-to-blue-section h2,
body.show-dark-mode .fade-to-blue-section h3,
body.show-dark-mode .fade-to-blue-section h4,
body.show-dark-mode .fade-to-blue-section h5,
body.show-dark-mode .fade-to-blue-section h6,
body.show-dark-mode .fade-to-blue-section p,
body.show-dark-mode .fade-to-blue-section li,
body.show-dark-mode .fade-to-blue-section span,
/* Ook voor Lavender secties als die wit moeten worden in dark mode (zeldzaam, maar voor consistentie) */
body.show-dark-mode .fade-to-lavender-section h1,
body.show-dark-mode .fade-to-lavender-section h2,
body.show-dark-mode .fade-to-lavender-section h3,
body.show-dark-mode .fade-to-lavender-section h4,
body.show-dark-mode .fade-to-lavender-section h5,
body.show-dark-mode .fade-to-lavender-section h6,
body.show-dark-mode .fade-to-lavender-section p,
body.show-dark-mode .fade-to-lavender-section li,
body.show-dark-mode .fade-to-lavender-section span,

/* En de losse helper class (expliciet uitschrijven voor Kadence koppen!) */
body.show-dark-mode .darkmode-to-white,
body.show-dark-mode .darkmode-to-white h1,
body.show-dark-mode .darkmode-to-white h2,
body.show-dark-mode .darkmode-to-white h3,
body.show-dark-mode .darkmode-to-white h4,
body.show-dark-mode .darkmode-to-white h5,
body.show-dark-mode .darkmode-to-white h6 { 
    color: #fff !important; 
}

/* C. DARK MODE UIT (Dag/Lavender): Maak tekst DONKER, maar ALLEEN in de fade-secties */
/* Dit fixt jouw probleem: We dwingen alleen deze specifieke secties naar donker. 
   Jouw statische donkere footer/blokken worden genegeerd en blijven wit (zoals jij instelt). */

body:not(.show-dark-mode) .fade-to-blue-section h1,
body:not(.show-dark-mode) .fade-to-blue-section h2,
body:not(.show-dark-mode) .fade-to-blue-section h3,
body:not(.show-dark-mode) .fade-to-blue-section h4,
body:not(.show-dark-mode) .fade-to-blue-section h5,
body:not(.show-dark-mode) .fade-to-blue-section h6,
body:not(.show-dark-mode) .fade-to-blue-section p,
body:not(.show-dark-mode) .fade-to-blue-section li,
body:not(.show-dark-mode) .fade-to-blue-section span,

body:not(.show-dark-mode) .fade-to-lavender-section h1,
body:not(.show-dark-mode) .fade-to-lavender-section h2,
body:not(.show-dark-mode) .fade-to-lavender-section h3,
body:not(.show-dark-mode) .fade-to-lavender-section h4,
body:not(.show-dark-mode) .fade-to-lavender-section h5,
body:not(.show-dark-mode) .fade-to-lavender-section h6,
body:not(.show-dark-mode) .fade-to-lavender-section p,
body:not(.show-dark-mode) .fade-to-lavender-section li {
    color: #0A0F1C !important; /* Forceer donkerblauw */
}

/* UITZONDERINGEN BINNEN DE FADE SECTIES */
/* Zelfs binnen een fade-sectie moeten knoppen en contrast cards hun eigen ding doen */
.fade-to-blue-section .kb-button span,
.fade-to-blue-section .kt-btn-inner-text,
.fade-to-lavender-section .kb-button span,
.fade-to-lavender-section .kt-btn-inner-text,
.tk-contrast-card p,
.tk-contrast-card span,
.tk-contrast-card h1, .tk-contrast-card h2, .tk-contrast-card h3 {
    color: inherit !important;
}

/* ==========================================================================
   SECTION TRANSITION: TO GREY (Counter-balance for White Mode)
   ========================================================================== */

/* 1. Zorg dat de overgang soepel verloopt op de hele rij */
.tk-section-to-grey {
    transition: background-color 0.6s ease-in-out !important;
}

/* 2. De Trigger: Als White Mode aan staat -> Maak de achtergrond van deze sectie Grijs */
/* Dit tekent een grijs vlak bovenop de witte 'curtain' */
body.show-white-mode .tk-section-to-grey {
    background-color: #f6f6f6 !important;
}


/* ==========================================================================
   7. ELEMENTEN: CONTRAST CARD (SLOOPKOGEL-PROOF FIX)
   ========================================================================== */

/* --- 1. DE BASIS (DEFAULT: DONKERE KAART) --- */
.tk-contrast-card {
    background-color: #0A0F1C !important;
    color: #f6f6f6 !important;
    padding: 20px !important; 
    opacity: 1 !important;
    filter: none !important;
    transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out !important;
}

/* Transparantie fix */
.tk-contrast-card .kt-inside-inner-col,
.tk-contrast-card h1, .tk-contrast-card h2, .tk-contrast-card h3, 
.tk-contrast-card h4, .tk-contrast-card h5, .tk-contrast-card h6,
.tk-contrast-card p {
    background-color: transparent !important;
}

/* --- 2. TITELS (ALTIJD KNAL ROZE #FF0080) --- */
/* We moeten winnen van: body:not(.show-dark-mode) .fade-to-blue-section h* */

/* Algemeen */
.tk-contrast-card h1, .tk-contrast-card h2, .tk-contrast-card h3, 
.tk-contrast-card h4, .tk-contrast-card h5, .tk-contrast-card h6,
.tk-contrast-card .wp-block-kadence-advancedheading,
/* SPECIFIEK OM DE SLOOPKOGEL TE VERSLAAN: */
body .fade-to-blue-section .tk-contrast-card h1,
body .fade-to-blue-section .tk-contrast-card h2,
body .fade-to-blue-section .tk-contrast-card h3,
body .fade-to-blue-section .tk-contrast-card h4,
body .fade-to-blue-section .tk-contrast-card h5,
body .fade-to-blue-section .tk-contrast-card h6,
body .fade-to-blue-section .tk-contrast-card .wp-block-kadence-advancedheading,
/* En voor Dark Mode (wit voorkomen) */
body.show-dark-mode .tk-contrast-card h1, 
body.show-dark-mode .tk-contrast-card h2, 
body.show-dark-mode .tk-contrast-card h3, 
body.show-dark-mode .tk-contrast-card h4,
body.show-dark-mode .tk-contrast-card h5,
body.show-dark-mode .tk-contrast-card h6,
body.show-dark-mode .tk-contrast-card .wp-block-kadence-advancedheading {
    color: #FF0080 !important;
    opacity: 1 !important;
    transition: color 0.6s ease-in-out !important;
}

/* --- 3. TEKST (DEFAULT: LICHT #F6F6F6) --- */
/* We moeten winnen van: body:not(.show-dark-mode) .fade-to-blue-section p */

/* 1. Jouw nieuwe class (wint altijd) */
.tk-contrast-card .tk-card-text,
.tk-contrast-card p.tk-card-text {
    color: #f6f6f6 !important;
}

/* 2. Gewone paragrafen in de kaart (OVERRIDE voor de blauwe sectie bug) */
.tk-contrast-card p, .tk-contrast-card li, .tk-contrast-card span:not(.kt-btn-inner-text),
body .fade-to-blue-section .tk-contrast-card p,
body .fade-to-blue-section .tk-contrast-card li,
body .fade-to-blue-section .tk-contrast-card span:not(.kt-btn-inner-text),
.tk-contrast-card .has-text-color {
    color: #f6f6f6 !important;
    transition: color 0.6s ease-in-out !important;
}


/* --- 4. KNOPPEN (DEFAULT: GHOST) --- */
.tk-contrast-card .kb-button {
    background: transparent !important;
    border-color: #f6f6f6 !important;
    color: #f6f6f6 !important;
}
.tk-contrast-card .kb-button .kt-btn-inner-text {
    color: #f6f6f6 !important;
}
.tk-contrast-card .kb-button:hover {
    background: #FF0080 !important;
    border-color: #FF0080 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   SWITCH STATE: DARK MODE (KAART WORDT LICHT)
   ========================================================================== */

/* Achtergrond wordt #f6f6f6 */
body.show-dark-mode .tk-contrast-card {
    background-color: #f6f6f6 !important;
}

/* Tekst wordt DONKERBLAUW */
/* Ook hier: wees super specifiek */
body.show-dark-mode .tk-contrast-card .tk-card-text,
body.show-dark-mode .tk-contrast-card p,
body.show-dark-mode .tk-contrast-card li,
body.show-dark-mode .tk-contrast-card span:not(.kt-btn-inner-text),
body.show-dark-mode .tk-contrast-card .has-text-color,
body.show-dark-mode .tk-contrast-card .has-theme-palette-9-color {
    color: #0A0F1C !important;
}

/* Knoppen worden DONKER (Inverse) */
body.show-dark-mode .tk-contrast-card .kb-button {
    background: #0A0F1C !important;
    border-color: #0A0F1C !important;
    color: #f6f6f6 !important;
}
body.show-dark-mode .tk-contrast-card .kb-button .kt-btn-inner-text {
    color: #f6f6f6 !important;
}

/* Hover blijft roze */
body.show-dark-mode .tk-contrast-card .kb-button:hover {
    background: #FF0080 !important;
    border-color: #FF0080 !important;
    color: #ffffff !important;
}
/* ==========================================================================
   MASTER FIX: FULLWIDTH SECTIONS & IMAGE COVERS
   ========================================================================== */

/* --- 1. DE RIJ (FULLWIDTH FORCE) --- */
.wp-block-kadence-rowlayout.kolom-fullwidth-force {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
}

/* Zorg dat de kolommen flexbox gebruiken en uitrekken */
.kolom-fullwidth-force > .kt-row-column-wrap {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    /* OPTIONEEL: Wil je de gap in het midden ook weg? Uncomment dan hieronder: */
    /* gap: 0 !important; */
}

/* --- 2. DE KOLOM (PADDING RESET) --- */
/* Dit verwijdert die 25px gap aan de zijkanten */
.kolom-fullwidth-force .wp-block-kadence-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* De interne wrapper moet ook 100% hoog zijn */
.kolom-fullwidth-force .kt-inside-inner-col {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important; /* Reset interne padding */
}

/* --- 3. DE AFBEELDING (tk-image-cover-fill) --- */
/* Werkt nu op Kadence Images EN standaard WordPress Images */

/* Niveau 1: De Container (div of figure) */
.tk-image-cover-fill {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important; /* Reset margins (FIX VOOR DE GAP) */
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    position: relative !important;
    min-height: 100% !important;
}

/* Niveau 2: Eventuele tussenlagen (zoals figure binnen een div) */
.tk-image-cover-fill figure,
.tk-image-cover-fill .kb-is-ratio-image {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    position: relative !important;
}

/* Niveau 3: De Afbeelding zelf */
.tk-image-cover-fill img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    object-fit: cover !important;
    object-position: center center;
    
    /* Kill de inline aspect ratio van WordPress */
    aspect-ratio: unset !important;
}

/* --- 4. MOBIELE RESET (< 767px) --- */
@media (max-width: 767px) {
    /* Reset fullwidth naar normaal gedrag */
    .kolom-fullwidth-force > .kt-row-column-wrap {
        flex-direction: column !important;
        height: auto !important;
        gap: 0 !important;
    }
    
    /* Reset de afbeelding naar een blok met hoogte */
    .tk-image-cover-fill,
    .tk-image-cover-fill figure,
    .tk-image-cover-fill img {
        height: auto !important;
        position: relative !important;
        min-height: 300px; /* Zorg dat er beeld is */
    }
}

/* ==========================================================================
   MOBILE FIXES VOOR SCROLL MODES
   ========================================================================== */
@media (max-width: 900px) {
    
    /* 1. Forceer transparantie op mobiele wrappers */
    /* Kadence voegt vaak background-color toe op .site-inner op mobiel */
    body.show-dark-mode #wrapper,
    body.show-dark-mode .site-inner,
    body.show-dark-mode .content-area,
    body.show-lavender-mode #wrapper,
    body.show-lavender-mode .site-inner,
    body.show-lavender-mode .content-area {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* 2. Zorg dat de Curtain hoog genoeg is */
    /* 100vh op mobiel kan soms tricky zijn door de adresbalk, dit helpt */
    body::before {
        height: 120vh; /* Iets groter om springen van adresbalk op te vangen */
    }

    /* 3. Schakel de Grid-Logic visueel uit op mobiel als die in de weg zit */
    /* Soms blokkeert de grid-switch logica de kleuren omdat elementen op elkaar stapelen */
    .full-screen-grid-switch {
        /* Als dit element op mobiel verborgen is, zorg dat JS het niet meetelt */
        /* (Zie aanpassing in JS hieronder) */
    }
}