/* =========================================
   1. VARIABELEN & BASIS (RESET & LAYOUT)
   ========================================= */

:root {
    /* Kleurenpalet */
    --kleur-primair: #1A535C;
    --kleur-accent: #FFC400;
    --kleur-wit: #ffffff;
    --kleur-achtergrond: #f0f4f8;
    --kleur-tekst: #333333;
    --kleur-lichtgrijs: #e0e0e0;

    
    /* Vormen */
    --radius-kaart: 24px;
    --radius-knop: 50px;
    --schaduw-zacht: 0 4px 12px rgba(0, 0, 0, 0.05);
    
    /* Spacing */
    --container-padding: 20px;
    
    
    /* NIEUW: De achtergrondkleur voor de bodem van je site */
    /* Dit is een heel zacht, warm geel/crème */
    --kleur-keuze:  #fff1c5; /* #fff7b2; */
    --kleur-header:  background-image: linear-gradient(to right, 
       #82aeb1 0%,    /* Zachte Petrol (Vertrouwen/Kalmte) */
        #a8d5ba 50%,   /* Frisse Mint (Gezondheid/Natuur) */
        #ffe082 100%   /* Zacht Goud (Energie/Qi) */
    );  /* was #cee0d2; */
}



body {
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-family: var(--font-body);
    margin: 0;
    
    /* CORRECTIE MOBIEL: Verwijder 'padding: 0'. 
       We laten main.css de padding-top regelen voor de vaste header op mobiel. */
    /* padding: 0; <--- WEGGEHAALD */
    
    line-height: 1.6;
}

/* ==========================================================================
   HEADER ANIMATIE (FIX)
   ========================================================================== */



/* 2. Pas de animatie toe op de header-achtergrond (::before) */
body.body--app-achtergrond .site-header::before {
    /* Stel de eindkleur ook vast in voor zekerheid */
    background-color: var(--kleur-achtergrond); 
    
    
    
    /* Zorg dat de kleurlaag zichtbaar is (maar wel achter de tekst) */
    opacity: 1; 
    z-index: -1; 
}

/* 3. Zorg dat de rand (::after) ook netjes kleurt, indien nodig */
/* ==========================================================================
   HEADER ANIMATIE (MARKETING MANNETJE UPDATE: DE VITALITEITS-FLOW)
   ========================================================================== */

/* 1. We maken een beweging in plaats van kleurverandering */
@keyframes levendigeFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

body.body--app-achtergrond .site-header::after {
    /* 2. De Basis Gradient (Onze nieuwe strategie-kleuren) */
    /* We voegen een extra tint toe voor een rijke overgang: Petrol -> Mint -> Goud */
    background-image: linear-gradient(135deg, #82aeb1, #a8d5ba, #ffe082);
    
    /* 3. De Truc: Maak de achtergrond groter dan het element */
    background-size: 200% 200%;
    
    /* 4. De Animatie: Laat hem rustig heen en weer golven */
    animation: levendigeFlow 15s ease infinite;
    
    /* Zorg dat de oude filter-regels weg zijn! */
    filter: none; 
}

/* --- De Hoofd Container --- */
.mijnqigo-layout {
    width: 100%;
    padding: 0;
    overflow-x: visible;
    
    /* Zorgt dat footer netjes onderaan blijft bij weinig content */
    min-height: 80vh; 
}

/* Inhoudsblok */
.mijnqigo-layout__main {
    padding: 0 var(--container-padding);
    padding-bottom: 4rem;
    width: 100%;
    
    /* Zorgt dat elementen niet groter worden dan dit blok */
    box-sizing: border-box; 
}

/* Verberg sidebar */
.mijnqigo-layout__sidebar {
    display: none !important;
}

/* =========================================
   DESKTOP AANPASSINGEN (Vanaf 801px)
   ========================================= */
@media (min-width: 801px) {
    
    /* CORRECTIE DESKTOP: Centreren en begrenzen */
    .mijnqigo-layout {
        max-width: 1200px; /* Maximale breedte van de site */
        margin: 0 auto;    /* Centreert het blok horizontaal */
        padding-top: 2rem; /* Wat extra ademruimte onder de header */
    }

    /* Omdat de sidebar weg is, mag main de volle breedte van de 1200px pakken */
    .mijnqigo-layout__main {
        max-width: 100%; 
        padding: 0 40px; /* Iets meer ruimte aan zijkanten op desktop */
    }
}
/* =========================================
   2. CATEGORIE KOPPEN (STIJL 1, 2, 3...)
   ========================================= */

.category-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Ruimte tussen bolletje en tekst */
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Het Gele Bolletje */
.category-header__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 40px;
    height: 40px;
    background-color: var(--kleur-accent);
    color: var(--kleur-wit);
    
    border-radius: 50%; /* Maakt het perfect rond */
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0; /* Voorkomt dat bolletje platgedrukt wordt */
}

/* De Titel Tekst */
.category-header__title {
    font-size: 1.5rem;
    color: var(--kleur-primair);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* =========================================
   3. BLOG KAARTEN (HORIZONTALE SCROLL)
   ========================================= */

/* De container voor de kaarten */
.category-post-row {
    display: flex;
    flex-wrap: nowrap;       /* Dwingt alles op 1 regel */
    overflow-x: auto;        /* Maakt horizontaal scrollen mogelijk */
    gap: 15px;               /* Ruimte tussen kaarten */
    padding-bottom: 15px;    /* Ruimte voor scrollbar */
    
    /* Zorgt voor soepel scrollen op iOS */
    -webkit-overflow-scrolling: touch; 
    
    /* Verberg scrollbar */
    scrollbar-width: none; 
}
.category-post-row::-webkit-scrollbar {
    display: none;
}

/* --- IMMERSIVE CARD (Compacte Versie) --- */
.blog-post-card {
    /* Mobiel: Compacte breedte */
    flex: 0 0 220px; 
    width: 220px;
    
    /* Verhouding liggend (4:3) - Dit blijft fijn compact */
    aspect-ratio: 4 / 3; 
    
    position: relative; 
    background-color: var(--kleur-wit);
    border-radius: var(--radius-kaart);
    box-shadow: var(--schaduw-zacht);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    
    background-color: #f0f0f0; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:active {
    transform: scale(0.98);
}
.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* De Wrapper voor de afbeelding */
.blog-post-card__link-wrapper {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
}

/* De Afbeelding zelf */
.blog-post-card__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease; 
}

/* Placeholder */
.blog-post-card__thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background-color: #333; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 2.5rem; 
}

/* Zoom effect */
.blog-post-card:hover .blog-post-card__thumbnail {
    transform: scale(1.05);
}

/* --- De Inhoud (Tekst Overlay) --- */
.blog-post-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2; 
    
    padding: 15px; 
    box-sizing: border-box;
    
    /* AANPASSING GRADIENT: Subtieler zwart (transparantie) */
    /* Loopt van transparant -> licht zwart -> 75% zwart (niet vol zwart) */
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0.75) 100%
    );
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}

/* De Titel */
.blog-post-card__title {
    font-family: var(--font-subtitel);
    
    /* AANPASSING MOBIEL: Normaal formaat zodat het past op kleine kaart */
    font-size: 1rem; 
    
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    
    color: var(--kleur-wit);
    /* Tekstschaduw behouden voor leesbaarheid op lichtere gradient */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); 
}

/* --- De Categorie Header --- */
.category-header {
    display: flex;
    align-items: center; 
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.category-show-more {
    font-size: 0.9rem;
    color: #888;
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px; 
    transition: color 0.2s ease;
    display: inline-block;
}
.category-show-more:hover {
    color: var(--kleur-accent);
}
.category-show-more i {
    font-size: 0.8em;
    margin-left: 4px;
}

/* --- DESKTOP AANPASSINGEN (Vanaf 801px) --- */
@media (min-width: 801px) {
    .category-post-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 25px; 
        overflow-x: visible; 
    }
    
    .blog-post-card {
        flex: auto;
        width: auto;
        aspect-ratio: 4 / 3; 
    }

    /* AANPASSING DESKTOP: Hier maken we de tekst groter */
    .blog-post-card__title {
        font-size: 1.25rem; /* Groter lettertype op desktop */
    }
}
/* =========================================
   SECTIE HIGHLIGHT (HELE CATEGORIE OMLIJST)
   ========================================= */

.category-section--highlight {
    background-color: rgba(255, 196, 0, 0.05); /* Heel zacht transparant geel */
    border: 2px solid var(--kleur-accent);      /* De gele rand */
    border-radius: var(--radius-kaart);         /* Ronde hoeken */
    padding: 1.5rem;                            /* Ruimte binnen het kader */
    margin-bottom: 2rem;
}

/* Zorg dat de titel binnen dit blok niet te veel witruimte boven zich heeft */
.category-section--highlight .category-header {
    margin-top: 0;
}

/* Mobiele aanpassing: Zorg dat de kaarten niet tegen de rand plakken bij scrollen */
.category-section--highlight .category-post-row {
    margin: 0 -10px;    /* Compensatie voor padding */
    padding: 5px 10px;  /* Ruimte voor schaduw van kaarten */
}

/* --- DESKTOP (Vanaf 801px) --- */
@media (min-width: 801px) {
    .category-post-row {
        /* Terug naar Grid op desktop */
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 30px;
        overflow-x: visible; /* Scrollen uitzetten */
    }
    
    .blog-post-card {
        /* Breedte weer flexibel maken voor de grid */
        flex: auto;
        width: auto;
    }
}

/* =========================================
   4. FILTER BALK (PILLS)
   ========================================= */

.blog-filter-bar {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 1rem;
    
    /* Horizontaal scrollen op mobiel (App gevoel) */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: verberg scrollbar */
}
/* Verberg scrollbar Chrome/Safari */
.blog-filter-bar::-webkit-scrollbar {
    display: none;
}

.pill-button {
    background-color: var(--kleur-wit);
    border: 1px solid var(--kleur-lichtgrijs);
    border-radius: var(--radius-knop);
    padding: 8px 20px;
    font-size: 0.9rem;
    color: var(--kleur-tekst);
    white-space: nowrap; /* Tekst niet afbreken */
    cursor: pointer;
    transition: all 0.2s ease;
}

.pill-button.is-active,
.pill-button:hover {
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    border-color: var(--kleur-primair);
}

/* ==========================================
   STIJL: Blog Filter Bar (Versie 2: Icons & Grijze Pillen)
   ========================================== */

/* De wrapper positioneert de balk op de pagina */
.blog-filter-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0 30px 0; /* Ruimte onder de balk */
    position: relative;
    z-index: 10;
}

/* De container balk (transparant, dient voor uitlijning) */
.blog-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    /* Hoogte matchen met zoekbalk (ongeveer 60px) */
    min-height: 60px;
    padding: 5px 0px;
    
    max-width: 100%; 
}

/* De lijst met scrollbare items */
.filter-pill__categories {
    display: flex;
    align-items: center;
    gap: 12px; /* Ruimte tussen de grijze pillen */
    
    overflow-x: auto; /* Scrollen op mobiel */
    padding: 5px;    /* Ruimte voor schaduwrandjes */
    margin-left: 0;
    /* Verberg scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.filter-pill__categories::-webkit-scrollbar {
    display: none;
}

/* De losse categorie-knoppen (Grijze Pillen) */
.filter-pill__link {
    display: inline-flex; /* Zorgt dat icoon en tekst netjes lijnen */
    align-items: center;
    gap: 8px; /* Ruimte tussen icoon en tekst */
    
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--kleur-primair); /* Donkergroen */
    
    /* De grijze transparante achtergrond */
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    
    /* Vorm */
    border-radius: 50px;
    padding: 12px 24px; /* Ruime padding voor 'button' gevoel */
    white-space: nowrap; /* Tekst op 1 regel houden */
    
    transition: all 0.2s ease;
}

/* Hover & Active State */
.filter-pill__link:hover,
.filter-pill__link.active {
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Tekst blijft donker */
    transform: translateY(-2px);           /* Klein sprongetje */
    box-shadow: 0 4px 10px rgba(255, 196, 0, 0.2); /* Gele gloed */
}

/* Icoon styling binnen de knop */
.filter-pill__link i {
    font-size: 1.1em;
    opacity: 0.8; /* Iets zachter dan de tekst */
}

/* =========================================
   5. WELKOMSTBLOK & ZOEKBALK (MOBILE FIRST)
   ========================================= */

.blog-welcome-block {
    text-align: center;
    padding: 2.5rem 1rem; /* Iets minder padding aan zijkant op mobiel */
    background-color: transparant; 
    border-radius: 0 0 24px 24px;
    margin-bottom: 2rem;
   
}

.blog-welcome-block__title {
    font-family: var(--font-titel, sans-serif);
    color: var(--kleur-primair);
    font-size: 1.8rem; /* Iets kleiner op mobiel voor betere fit */
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

/* --- De Zoekbalk Container --- */
.blog-search-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* De Zoek Formulier Container */
.blog-search-wrapper .search-form {
    display: flex;
    align-items: center; /* Zorgt dat input en knop verticaal lijnen */
    width: 100%;
    background-color: var(--kleur-wit);
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 4px; /* Kleine padding rondom */
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Voorkomt uitbreken */
}

.blog-search-wrapper .search-form:focus-within {
    border-color: var(--kleur-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Het invoerveld */
.blog-search-wrapper .search-field {
    flex-grow: 1; /* Neemt alle ruimte links in */
    border: none;
    background: transparent;
    padding: 12px 15px; /* Comfortabele touch area */
    font-size: 16px; /* 16px voorkomt dat iPhone inzoomt bij typen! */
    font-family: var(--font-body);
    color: var(--kleur-tekst);
    outline: none;
    min-width: 0; /* Flexbox trick: voorkomt dat input de bak opblaast */
}

/* De Zoekknop (MOBILE FIRST: ICOON) */
.blog-search-wrapper .search-submit {
    /* Reset standaard browser stijlen (iPhone fix) */
    -webkit-appearance: none;
    appearance: none;
    
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    border: none;
    
    /* Vormgeving: Pilvorm met tekst */
    border-radius: 50px;
    padding: 12px 25px; /* Ruime padding */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    /* Zorg dat de knop niet krimpt */
    flex-shrink: 0; 
    width: auto;
    height: auto;
}

.blog-search-wrapper .search-submit:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
}

/* Verberg eventuele hacks voor iconen die er nog stonden */
.blog-search-wrapper .search-submit::before {
    display: none; 
}
/* --- DESKTOP AANPASSINGEN (Vanaf 600px) --- */
@media (min-width: 600px) {
    .blog-welcome-block {
        padding: 3rem 1.5rem;
    }
    
    .blog-welcome-block__title {
        font-size: 2.5rem;
    }

    
}

/* =========================================
   6. SINGLE POST (DEFINITIEF)
   ========================================= */

/* --- De Container --- */
.single-post-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 20px;
}

/* =========================================
   NAVIGATIE BALK & HEADER (COMPLETE SET)
   ========================================= */

/* --- De Balk Zelf --- */
.single-post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--kleur-wit);
    border-radius: 50px;
    padding: 8px 15px;
    margin-bottom: 2rem;
    box-shadow: var(--schaduw-zacht);
    border: 1px solid #eee;
    position: relative;
    z-index: 100; /* Zorg dat balk boven content ligt */
}

/* --- Linkerkant (Home + Categorie) --- */
.single-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative; /* Voor positionering dropdown */
    
   /* STANDAARD (Zichtbaar): */
    /* Voeg DELAY toe (0.3s) zodat hij wacht met verschijnen tot zoekbalk dicht is */
    transition: max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s, 
                opacity 0.3s ease 0.3s,
                margin 0.3s ease 0.3s;
    
    overflow: visible; 
    max-width: 300px; 
    opacity: 1;
    white-space: nowrap;
}
/* --- Rechterkant (Zoeken + Delen) --- */
.single-nav-right {
    display: flex;
    justify-content: flex-end; /* Houdt iconen rechts */
    align-items: center;
    gap: 10px;
    
    /* Duw deze container altijd naar rechts */
    margin-left: auto; 
    flex-shrink: 0; 
    transition: width 0.3s ease;
}

/* --- Knoppen & Pills --- */
.nav-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f2f5;
    color: var(--kleur-primair);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
}
.nav-icon-btn:hover {
    background-color: var(--kleur-accent);
    color: #fff;
}
.nav-icon-btn[disabled] {
    background-color: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
}

.nav-category-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f9f9f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kleur-tekst);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.nav-category-pill:hover,
.nav-category-pill.is-open {
    background-color: #e0eaf1;
    color: var(--kleur-primair);
}

/* --- Dropdown Menu --- */
.category-dropdown-list {
    display: none; 
    position: absolute;
    top: 130%; /* Iets meer ruimte */
    left: 0;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    padding: 10px 0;
    list-style: none;
    z-index: 101;
    min-width: 200px;
}
.category-dropdown-list.is-visible {
    display: block !important; /* Forceer zichtbaarheid */
    animation: fadeInDrop 0.2s ease-out;
}
.category-dropdown-list li a {
    display: block;
    padding: 8px 20px;
    color: var(--kleur-tekst);
    text-decoration: none;
    font-size: 0.95rem;
}
.category-dropdown-list li a:hover {
    background-color: #f0f2f5;
    color: var(--kleur-primair);
}

@keyframes fadeInDrop {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Zoekbalk Standaard (Mobiel Dicht) --- */
.nav-search-form {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Inhoud rechts houden */
    background-color: #f0f2f5;
    border-radius: 50px;
   

    /* ANIMATIE UPDATE: We animeren ook de flex-grow */
    transition: flex-grow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                background-color 0.3s ease, 
                box-shadow 0.3s ease;
    
    flex-grow: 0; /* Standaard klein */
}

.nav-search-input {
    width: 0; /* Standaard dicht op mobiel */
    opacity: 0;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: var(--kleur-tekst);
    transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* =========================================
   SCENARIO 1: MOBIELE ZOEK MODUS (ANIMATIE)
   ========================================= */
@media (max-width: 800px) {
    
    /* Wanneer zoekmodus actief is: */
    .single-post-nav.search-mode .single-nav-left {
        /* CRUCIAAL: Nu verbergen we de overflow zodat hij netjes krimpt */
        overflow: hidden; 
        
        /* Krimpen naar 0 */
        max-width: 0;
        opacity: 0;
        margin: 0;
        
        /* Verberg dropdown en knoppen zodat je er niet per ongeluk op klikt */
        visibility: hidden; 
    }

    .single-post-nav.search-mode .single-nav-right {
        width: 100%;
        /* Zorg dat de elementen rechts blijven plakken */
        justify-content: flex-end; 
    }

    .single-post-nav.search-mode .nav-search-form {
        flex-grow: 1; 
        background-color: #fff;
        box-shadow: 0 0 0 2px var(--kleur-accent);
        
        /* Zorg dat de inhoud (input + knop) rechts blijft */
        justify-content: flex-end;
    }

    .single-post-nav.search-mode .nav-search-input {
        width: 100%; 
        opacity: 1;
        padding-left: 15px;
    }
}
/* =========================================
   SCENARIO 2: DESKTOP (ALTIJD OPEN)
   ========================================= */
@media (min-width: 801px) {
    
    /* Forceer de input altijd open */
    .nav-search-input {
        width: 150px !important;
        opacity: 1 !important;
        padding-left: 10px !important;
    }
    
    /* Zorg dat de form er normaal uitziet */
    .nav-search-form {
        background-color: #f0f2f5;
        box-shadow: none;
    }
    
    /* Focus effect */
    .nav-search-form:focus-within {
        background-color: #fff;
        box-shadow: 0 0 0 2px var(--kleur-accent);
    }
}

/* --- Hero Sectie --- */
.single-hero {
    display: flex;
    flex-direction: column; 
    gap: 1.5rem;
    margin-bottom: 3rem;
    text-align: center; /* Mobiel: Alles gecentreerd */
}

.single-hero__content {
    display: flex;
    flex-direction: column;
}

/* 1. Het Zon Icoon */
.single-hero__sun-icon {
    width: 60px;        /* Pas grootte aan naar wens */
    height: auto;
    margin: 0 auto 1rem auto; /* Centreren en ruimte onder icoon */
    display: block;
}

/* 2. De Titel */
.single-hero__title {
    font-family: var(--font-titel);
    font-size: 2rem;
    color: var(--kleur-primair);
    line-height: 1.2;
    margin: 0 0 1rem 0; /* Ruimte onder titel */
}

/* 3. De Samenvatting / Lead Tekst (Onder de titel) */
.single-hero__meta {
    font-family: var(--font-body);
    font-size: 1.1rem; /* Iets groter dan broodtekst */
    line-height: 1.6;
    color: #666;
    
    /* Zorg dat de tekst niet te breed uitloopt */
    max-width: 600px; 
    margin: 0 auto; /* Centreren op mobiel */
}

/* Verwijder standaard margins van de paragraaf in de excerpt */
.single-hero__meta p {
    margin: 0;
}

/* Auteur/Avatar styling mag weg of blijven staan als je het elders gebruikt, 
   maar in deze hero hebben we het nu vervangen door tekst. */




.author-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--kleur-primair);
}

.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--kleur-accent);
}

.meta-category {
    background-color: #f0f2f5;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    color: var(--kleur-tekst);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}



/* De Blob Afbeelding */
.single-hero__image-wrapper {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.single-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: border-radius 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease;
}

.single-hero__image-wrapper:hover .single-hero__image {
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    transform: scale(1.02);
}

/* --- Desktop Layout (Vanaf 801px) --- */
@media (min-width: 801px) {
    .single-hero {
        flex-direction: row; 
        align-items: center;
        text-align: left;    
    }
    
    .single-hero__title {
        font-size: 2.8rem;
    }
    
    .single-hero__content {
        flex: 1; 
        align-items: flex-start; 
    }
    
    .single-hero__sun-icon {
        margin-left: 0;      
        margin-right: 0;
    }

    .single-hero__image-wrapper {
        flex: 0 0 280px;
    }

    /* Zorg dat de samenvatting op desktop links uitlijnt */
    .single-hero__meta {
        margin-left: 0; 
        margin-right: 0;
        text-align: left;
    }
}
/* --- Content Styling --- */
.single-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 4rem;
}
.single-content p { margin-bottom: 1.5rem; }
.single-content h2 { 
    color: var(--kleur-primair); 
    font-family: var(--font-titel);
    margin-top: 3rem;
    font-weight: 600;
}

/* --- Gerelateerde Sectie --- */
.related-section {
    margin-top: 1rem;
    padding-top: 0rem;
    border-top: 1px solid #eee;
}
.related-title {
    font-family: var(--font-titel);
    color: var(--kleur-primair);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* =========================================
   DESKTOP FIXES (ZOEKEN & DROPDOWN)
   ========================================= */

/* 1. Dropdown Zichtbaarheid (Zekerheid) */
.category-dropdown-list.is-visible {
    display: block !important;
    animation: fadeInDrop 0.2s ease-out;
}

/* 2. Zoekbalk op Desktop: ALTIJD OPEN */
@media (min-width: 801px) {
    
    /* Reset flex-grow van mobiel */
    .single-post-nav.search-mode .nav-search-form {
        flex-grow: 0; 
    }

    /* Input altijd zichtbaar maken */
    .nav-search-input {
        width: 150px !important; /* Forceer breedte */
        opacity: 1 !important;   /* Forceer zichtbaarheid */
        padding-left: 10px !important;
        pointer-events: auto;
    }
    
    /* Zorg dat de container normaal doet */
    .nav-search-form {
        background-color: #f0f2f5; /* Lichtgrijs ipv wit */
        justify-content: center;
        box-shadow: none;
    }
    
    /* Focus effect op desktop */
    .nav-search-form:focus-within {
        background-color: #fff;
        box-shadow: 0 0 0 2px var(--kleur-accent);
    }
}

/* =========================================
   ARCHIVE & SEARCH GRID
   ========================================= */

.archive-grid {
    display: grid;
    /* Mobiel: 1 kolom (of 2 kleintjes als je dat liever hebt) */
    grid-template-columns: 1fr; 
    gap: 20px;
    margin-bottom: 3rem;
}

/* Tablet (vanaf 600px) */
@media (min-width: 600px) {
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (vanaf 900px) */
@media (min-width: 900px) {
    .archive-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Zorg dat de cards in de grid de hoogte vullen */
.archive-grid .blog-post-card {
    width: auto; /* Reset de vaste breedte van de slider */
    flex: auto;
    height: 100%;
}

/* Paginering Styling */
.blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.blog-pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--kleur-tekst);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background-color: var(--kleur-primair);
    color: #fff;
}


/* =========================================
   SHORTCODE STYLING (PROMO & KNOPPEN)
   ========================================= */

/* --- Het Container Blok --- */
.qigo-start-blok {
    background-color: #ffffff;
    border: 2px solid #f0f2f5; /* Subtiele rand */
    border-radius: var(--radius-kaart);
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: var(--schaduw-zacht);
}

.qigo-start-blok__titel {
    color: var(--kleur-primair);
    font-family: var(--font-titel);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* --- De Knoppen --- */
.qigo-start-blok__knoppen {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.qigo-start-blok__knop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid var(--kleur-primair);
}

.qigo-start-blok__knop:hover {
    background-color: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-primair); /* Donkere tekst op geel */
    transform: translateY(-2px);
}

.qigo-start-blok__knop i {
    font-size: 1.1em;
}

/* --- Variatie: Gele Knop (optioneel) --- */
.qigo-knop--geel {
    background-color: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-primair);
}
.qigo-knop--geel:hover {
    background-color: #fff; /* Wit bij hover */
}

/* =========================================
   BESTAANDE CODE: ACTION ROWS
   ========================================= */

.qigo-action-row {
    display: flex;
    flex-direction: row;
    align-items: center; /* Verticaal centreren */
    justify-content: center;
    gap: 20px; /* Ruimte tussen icoon en tekst */
    margin: 1.5rem 0;
    text-align: left;
}

/* Forceer links uitlijnen via shortcode uitlijning="links" */
.qigo-action-row--left {
    justify-content: flex-start !important;
}

/* =========================================
   NIEUWE CODE: MOBIELE OPTIMALISATIE
   ========================================= */

@media (max-width: 600px) {
    .qigo-action-row {
        /* Verander van horizontaal naar verticaal */
        flex-direction: column; 
        /* Lijn de knop en tekst links uit */
        align-items: flex-start; 
        /* Iets minder ruimte tussen knop en tekstkolom */
        gap: 12px; 
    }

    .qigo-action-text-col {
        /* Optioneel: iets inspringen zodat de tekst 
           mooi uitlijnt met de tekst in de knop */
        padding-left: 5px; 
    }
    
    .qigo-standalone-knop {
        /* Zorg dat de knop op mobiel niet onnodig 
           klein wordt als de tekst kort is */
        width: auto;
    }
}


/* 1. De Primaire Knop (van qigo_knop) */
.qigo-standalone-knop.qigo-knop--rond {
    width: 60px;       
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    padding: 0;
    
    /* FIX: Geen lijntjes onder de knop zelf */
    text-decoration: none !important;
    border-bottom: none !important;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. De Secundaire Link Icoon (van qigo_link) */
.qigo-small-icon-circle {
    width: 45px;       
    height: 45px;
    border-radius: 50%;
    
    /* STIJL: Geel */
    background-color: var(--kleur-accent); 
    color: var(--kleur-primair);
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    
    /* FIX: Geen lijntjes onder de knop zelf */
    text-decoration: none !important;
    border-bottom: none !important;
    
    transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Hover Effecten */

/* =========================================
   NIEUWE CODE: MOBIELE COMPACTE WEERGAVE
   ========================================= */

@media (max-width: 600px) {
    /* Standaard gedrag op mobiel: stapelen (voor knoppen MET tekst) */
    .qigo-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* UITZONDERING: Als de knop rond is of een klein icoon-rondje bevat, 
       blijven ze op mobiel WEL naast elkaar staan. */
    .qigo-action-row:has(.qigo-knop--rond),
    .qigo-action-row:has(.qigo-small-icon-circle) {
        flex-direction: row;     /* Naast elkaar houden */
        align-items: center;     /* Verticaal perfect in het midden */
        flex-wrap: nowrap;       /* Voorkom dat het alsnog afbreekt */
        gap: 15px;
    }

    /* Zorg dat de tekst-pill in deze compacte stand de rest van de breedte pakt */
    .qigo-action-row:has(.qigo-knop--rond) .qigo-action-text-col,
    .qigo-action-row:has(.qigo-small-icon-circle) .qigo-action-text-col {
        flex: 1;                 /* Vult de resterende ruimte naast de knop */
        width: auto;
        padding: 10px 18px;      /* Iets compactere padding voor de pill op mobiel */
    }
    
    /* Maak de titel iets kleiner zodat het goed past naast de knop */
    .qigo-action-row:has(.qigo-knop--rond) .qigo-action-title,
    .qigo-action-row:has(.qigo-small-icon-circle) .qigo-action-title {
        font-size: 0.95rem;
    }
}

/* Primaire knop: Pop effect */
.qigo-action-row:hover .qigo-standalone-knop.qigo-knop--rond {
    transform: scale(1.08);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Secundaire link: Draai & Kleur effect (Zoals inline links) */
.qigo-action-row:hover .qigo-small-icon-circle {
    transform: rotate(-45deg) scale(1.1); /* Draait schuin omhoog */
    background-color: #ffe066; /* Iets lichter geel */
}

/* --- De Rechterkant: Tekst Kolom --- */
.qigo-action-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* De Hoofdtekst (Link) */
a.qigo-action-title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kleur-primair);
    line-height: 1.2;
    text-decoration: none;
    
    /* De 'Wist je dat' gele lijn */
    border-bottom: 2px solid var(--kleur-accent);
    display: inline-block; 
    width: fit-content;
    
    transition: color 0.2s ease;
}

/* De Beschrijving (Grijs) */
.qigo-action-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #777;
    line-height: 1.4;
    margin-bottom: 4px; /* Ruimte ONDER de beschrijving (want hij staat nu boven) */
}

/* Hover over het hele blok: kleur de titel oranje */
.qigo-action-row:hover a.qigo-action-title {
    color: #FF9100; /* Oranje */
    border-bottom-color: #FF9100;
}

/* =========================================
   SHORTCODE: INFO BLOCK (Compact & Clean)
   ========================================= */

.qigo-info-container {
    /* Basis Layout: Flexbox Kolom (Mobiel) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 1rem;
    
    /* Styling: Wit & Schoon */
    background-color: var(--kleur-wit);
    padding: 1.5rem;
    margin: 2rem 0;
    
    border-radius: var(--radius-kaart);
    box-shadow: var(--schaduw-zacht);
    border: 1px solid rgba(0,0,0,0.05); /* Heel licht randje voor definitie */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.qigo-info-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 1. Media (Logo/Icon) */
.qigo-info-media {
    flex-shrink: 0; /* Mag niet krimpen */
    width: 60px;
    height: 60px;
}

.qigo-info-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.qigo-info-icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(26, 83, 92, 0.1); /* Zachte versie van primair */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--kleur-primair);
}

/* 2. Content Wrapper (Titel + Tekst) */
.qigo-info-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%; /* Vul de breedte op mobiel */
}

.qigo-info-titel {
    font-family: var(--font-titel);
    font-size: 1.2rem;
    color: var(--kleur-primair);
    margin: 0;
    line-height: 1.3;
}

.qigo-info-tekst p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* 3. Knop Wrapper */
.qigo-info-action {
    flex-shrink: 0;
    margin-top: 5px;
}

.qigo-info-knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap; 
}

.qigo-info-knop:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
}

.qigo-info-extra {
    margin-top: 1.5rem; /* Creëert ruimte tussen de beschrijving en de vinkjes */
    width: 100%;        /* Zorgt dat de lijst de volle breedte benut */
}

/* --- DESKTOP (Vanaf 800px) --- */
@media (min-width: 800px) {
    .qigo-info-container {
        flex-direction: row; /* Alles naast elkaar */
        align-items: center; /* Verticaal centreren */
        text-align: left;    /* Tekst links uitlijnen */
        justify-content: space-between;
        padding: 1.5rem 2.5rem;
        gap: 2rem;
    }
    
    .qigo-info-content {
        width: auto;
        flex: 1; /* Neemt alle beschikbare ruimte in */
    }
    
    .qigo-info-action {
        margin-top: 0;
    }
}

/* =========================================
   AANPASSINGEN: LAYOUTS & PROMO
   ========================================= */

/* 1. INFO BLOK: Layout 'knop-onder' (Desktop Fix) */
/* Op mobiel verandert er niets (was al onder elkaar), maar op desktop passen we het grid aan */
@media (min-width: 800px) {
    .qigo-info-container.qigo-info--knop-onder {
        /* We gebruiken Grid om de knop onder de tekst te plaatsen, 
           maar de afbeelding wel links te houden */
        display: grid;
        grid-template-columns: auto 1fr; /* Kolom 1: Plaatje, Kolom 2: Tekst */
        grid-template-areas: 
            "media content"
            "media action";
        align-items: start;
        gap: 1rem 2rem;
    }

    .qigo-info-container.qigo-info--knop-onder .qigo-info-media {
        grid-area: media;
    }
    
    .qigo-info-container.qigo-info--knop-onder .qigo-info-content {
        grid-area: content;
        width: 100%;
    }
    
    .qigo-info-container.qigo-info--knop-onder .qigo-info-action {
        grid-area: action;
        margin-top: 0;
        justify-self: start; /* Knop links uitlijnen onder de tekst */
    }
}



/* =========================================
   SHORTCODE: HERO KAART (Afbeelding Achtergrond)
   ========================================= */

.qigo-kaart-container {
    position: relative; /* Basis voor absolute overlay */
    background-size: cover;
    background-position: center;
    background-color: #ffffff; /* Fallback kleur */
    
    border-radius: var(--radius-kaart);
    overflow: hidden; /* Zorgt dat afbeelding binnen bochten blijft */
    box-shadow: var(--schaduw-zacht);
    
    /* Flexbox om inhoud te centreren */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
}

/* De donkere laag over de foto */
.qigo-kaart-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45); /* 45% zwart filter */
    z-index: 1;
    transition: background 0.3s ease;
}

/* Hover effect: maak foto iets lichter/donkerder */
.qigo-kaart-container:hover .qigo-kaart-overlay {
    background: rgba(0, 0, 0, 0.14); /* Iets lichter bij hover */
}

/* De Inhoud (Moet boven overlay liggen) */
.qigo-kaart-content {
    position: relative;
    z-index: 2;
    color: #ffffff; /* Witte tekst */
    max-width: 600px; /* Niet te breed worden */
}

/* Het Icoon (Gele bol) */
.qigo-kaart-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 60px;
    height: 60px;
    background-color: var(--kleur-accent); /* Jouw geel */
    color: var(--kleur-primair);           /* Jouw donkergroen */
    border-radius: 50%;
    
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Tekst Styling */
.qigo-kaart-titel {
    font-family: var(--font-titel);
    font-size: 2rem;
    margin: 0 0 1rem 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Voor leesbaarheid */
}

.qigo-kaart-tekst {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #f0f0f0;
   
}

/* De Knop (Wit op donker) */
.qigo-kaart-knop {
    display: inline-block;
    background-color: #ffffff;
    color: var(--kleur-primair);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.qigo-kaart-knop:hover {
    background-color: var(--kleur-accent); /* Geel bij hover */
    color: var(--kleur-primair);
    transform: translateY(-3px);
}

/* =========================================
   SHORTCODE: LOSSE KNOP (Custom Gradient)
   ========================================= */

.qigo-standalone-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Ruimte tussen icoon en tekst */
    
    padding: 12px 30px;
    border-radius: 50px; /* Mooi rond */
    
    /* Typografie */
    font-weight: 700;
    font-family: var(--font-body, sans-serif);
    text-decoration: none;
    font-size: 1rem;
    
    /* Vaste eigenschappen */
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    
    /* Zorgt dat hij niet tegen andere tekst aan plakt */
    margin: 10px 0; 
    cursor: pointer;
}

/* Hover Effecten */
.qigo-standalone-knop:hover {
    transform: translateY(-3px); /* Komt iets omhoog */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    filter: brightness(1.05); /* Maakt de kleuren iets feller */
}

.qigo-standalone-knop i {
    font-size: 1.1em; /* Icoon ietsje groter */
}

/* =========================================
   SHORTCODE: TAGS (Minimalistische Pills)
   ========================================= */

/* Container: Zorgt dat ze naast elkaar staan */
.qigo-tags-wrapper {
    display: flex;
    flex-wrap: wrap; /* Past het niet? Dan naar volgende regel */
    gap: 15px;       /* Ruimte tussen de pills */
    margin: 1.5rem 0;
    align-items: center;
}

/* De Pill (De rand) */
.qigo-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    
    /* UX REVERT: Transparant met border */
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 50px;
    
    padding: 6px 6px 6px 20px; 
    
    text-decoration: none;
    color: var(--kleur-primair);
    font-weight: 600; /* Revert naar 600 */
    font-size: 0.9rem; /* Revert naar 0.9rem */
    font-family: var(--font-body);
    
    transition: all 0.2s ease;
}

/* De Pijlknop (Accent) */
.qigo-tag-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 32px;
    height: 32px;
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Donkergroen */
    border-radius: 50%;
    
    font-size: 0.9em;
    transition: transform 0.2s ease;
}

/* Hover Effecten */
.qigo-tag-pill:hover {
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.qigo-tag-pill:hover .qigo-tag-arrow {
    transform: rotate(180deg); /* Blijft binnen accordion context handig, of gewoon scale */
}

/* =========================================
   REDACTIONELE BLOK STIJL: "HET ZWEVENDE ACCENT"
   ========================================= */

.qigo-flex-blok {
    position: relative;
    margin: 1rem 0;
    
    /* Maak er een mooie kaart van */
    background-color: var(--kleur-wit);
    border-radius: var(--radius-kaart); /* 24px uit je main.css */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Heel zachte schaduw */
    
    /* Ruimte reserveren: Links extra ruimte voor de 'zwevende pil' */
    padding: 2rem 2rem 2rem 3.5rem; 
    
    overflow: hidden; /* Zorgt dat alles netjes binnen de ronding blijft */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Subtiel effect: Kaart komt iets omhoog bij hover */
.qigo-flex-blok:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* --- HET VERRASSENDE ACCENT (De Zwevende Pil) --- */
/* Dit is het verticale streepje, maar losgekoppeld en rond gemaakt */
.qigo-flex-blok__accent-pill {
    position: absolute;
    left: 1.5rem; /* Positie vanaf links */
    top: 2rem;    /* Gelijk met de titel */
    bottom: 2rem; /* Loopt door tot onderaan */
    
    width: 6px;   /* Dikte van de pil */
    border-radius: 10px; /* Volledig ronde uiteinden (capsule) */
    
    /* De Gradient vulling */
    background: linear-gradient(to bottom, var(--blok-accent-1), var(--blok-accent-2));
    
    opacity: 0.8;
}

/* --- Titel Styling (Fredoka Font) --- */
.qigo-flex-blok__titel {
    font-family: var(--font-titel); /* Fredoka - Speels */
    font-size: 1.4rem;
    color: var(--kleur-primair);
    margin-top: 0;
    margin-bottom: 0;
    
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Het icoon krijgt een zachte gloed erachter */
.qigo-flex-blok__titel .qigo-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 36px;
    height: 36px;
    border-radius: 50%;
    
    /* Achtergrond is heel licht transparant versie van accentkleur 1 */
    background-color: #f0f4f8; 
    color: var(--blok-accent-1); /* Neemt de paarse kleur aan */
    font-size: 1rem;
}

/* --- Inhoud Styling --- */
.qigo-flex-blok__inhoud {
    font-family: var(--font-body); /* Poppins */
    font-size: 1rem;
    line-height: 1.8; /* Iets meer lucht */
    color: var(--kleur-tekst);
}

/* Lijstjes styling: Custom bolletjes */
.qigo-flex-blok__inhoud ul {
    margin: 0;
    padding-left: 0.5rem;
    list-style: none;
}

.qigo-flex-blok__inhoud li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 10px;
}

/* De bullets zijn kleine cirkeltjes in accentkleur */
.qigo-flex-blok__inhoud li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--blok-accent-1);
    opacity: 0.6;
}

/* --- Knop Styling (Natuurlijk & Zacht) --- */
.qigo-flex-blok__footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-start; /* Knop links uitgelijnd */
}

/* --- Knop Styling (Standaard & Promo) --- */
.qigo-flex-blok__footer {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-start;
}

/* 1. De Basis (Ghost Button - Zoals het was) */
.qigo-flex-blok__knop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    
    background-color: transparent; 
    color: var(--kleur-primair);
    
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600; 
    font-size: 0.95rem;
    text-decoration: none;
    
    /* Border met de accentkleur */
    border: 2px solid #eee; 
    border-image: linear-gradient(to right, var(--blok-accent-1), var(--blok-accent-2)) 1;
    border: 2px solid var(--blok-accent-2); 
    
    transition: all 0.3s ease;
}

.qigo-flex-blok__knop:hover {
    background-color: var(--blok-accent-2);
    color: var(--kleur-primair);
    transform: translateX(5px);
    border-color: var(--blok-accent-2);
}

/* 2. De Wistjedat Styling (Nieuwe Tekst Link Stijl) */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop {
    /* Reset de box styling */
    background: transparent !important;
    border: none !important;
    padding: 5px 0 !important;
    border-radius: 0 !important;
    
    /* Typografie en lijn */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 2px solid transparent !important;
}

.qigo-flex-blok--wistjedat .qigo-flex-blok__knop:hover {
    /* Nieuwe hover effecten */
    transform: translateY(-2px);
    border-bottom-color: var(--kleur-accent) !important;
    background-color: transparent !important;
}

/* Pijltje specifiek voor wistjedat */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop > i {
    font-size: 0.8em;
    margin-left: 6px;
    color: var(--kleur-accent);
    transition: transform 0.2s ease;
}

.qigo-flex-blok--wistjedat .qigo-flex-blok__knop:hover > i {
    transform: translateX(3px);
}
/* =========================================
   FLEX BLOK: AFBEELDING ONDERSTEUNING & PROMO
   ========================================= */

/* Zorg dat de afbeelding netjes in het rondje past */
.qigo-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Zorgt dat hele plaatje zichtbaar blijft */
    border-radius: 50%;  /* Rond afsnijden indien nodig */
    display: block;
}

/* Als er een afbeelding is, halen we de padding iets weg of passen we de achtergrond aan */
.qigo-icon-wrap.has-image {
    background-color: transparent; /* Transparant zodat jouw PNG 'blend' */
    /* Of gebruik: background-color: rgba(255,255,255,0.5); als je een lichte achtergrond wilt */
    overflow: hidden;
    padding: 2px; /* Klein beetje padding zodat logo niet tegen de rand plakt */
}

.qigo-flex-blok--promo {
    background-color: #ffffff !important; /* Forceer wit */
    /* Optioneel: gele rand voor extra 'advertentie' gevoel? 
       Zo nee, verwijder onderstaande regel */
    border: 1px solid rgba(255, 196, 0, 0.2); 
}

/* --- Type="Promo" Specifieke styling --- */
/* Dit zorgt dat de 'promo' versie lijkt op 'wistjedat' qua knop-stijl, maar met eigen kleuren */
.qigo-flex-blok--promo .qigo-flex-blok__knop {
    background: none;
    border: none;
    padding: 0;
}

.qigo-flex-blok--promo .qigo-knop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background-color: var(--blok-accent-1);
    color: #fff; /* Witte pijl */
    transition: transform 0.3s ease;
}

.qigo-flex-blok--promo .qigo-knop-text {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--kleur-primair);
    border-bottom: 2px solid var(--blok-accent-1);
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* Hover effecten Promo */
.qigo-flex-blok--promo .qigo-flex-blok__knop:hover .qigo-knop-icon {
    transform: scale(1.1) rotate(-45deg);
    background-color: var(--blok-accent-2);
}
.qigo-flex-blok--promo .qigo-flex-blok__knop:hover .qigo-knop-text {
    color: var(--blok-accent-2);
    border-color: var(--blok-accent-2);
}


/* =========================================
   DE KICKER (Minimalistisch & Rustig)
   ========================================= */

.qigo-kicker-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Ruimte tussen bolletje en tekst */
    
    /* Typografie */
    font-family: var(--font-body); /* Gewoon het leeslettertype voor rust */
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase; /* Hoofdletters */
    letter-spacing: 1.5px;     /* Ruimte tussen letters = Luchtig */
    
    /* Kleur: We gebruiken je donkere groen, maar iets zachter (opacity) */
    color: var(--kleur-primair);
    opacity: 0.8; 
    
    /* Layout: Geen harde box meer */
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 5px; /* Dicht op de kop die volgt */
}

/* Een klein decoratief streepje/bolletje ervoor */
.qigo-kicker-pill::before {
    content: '';
    display: block;
    width: 20px;       /* Een horizontaal streepje */
    height: 3px;
    background-color: var(--kleur-accent); /* Jouw goud/geel */
    border-radius: 2px;
}

/* SLIMME TRUC: Als er een H2 of H3 direct NA een Kicker komt */
.qigo-kicker-pill + h2,
.qigo-kicker-pill + h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    
    /* Optioneel: de kop iets groter maken voor contrast */
    line-height: 1.2;
}
/* =========================================
   VARIANT: TYPE="WISTJEDAT" (FIX)
   ========================================= */

/* 1. De "Meer lezen" link stijl (in plaats van een knop) */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop {
    background-color: transparent !important; /* Geen achtergrond */
    border: none !important;                  /* Geen rand */
    box-shadow: none !important;              /* Geen schaduw */
    padding: 0;                               /* Geen dikke padding */
    
    color: var(--kleur-primair);              /* Donkergroene tekst */
    font-weight: 700;
    
    /* FIX: Geen standaard onderstreping op de container, dit voorkomt dubbele lijnen */
    text-decoration: none !important; 
}

.qigo-flex-blok--wistjedat .qigo-flex-blok__knop:hover {
    transform: translateX(3px);               /* Klein hupje opzij */
    color: var(--blok-accent-2);              /* Wordt oranje bij hover */
}

/* 2. Het Icoon-rondje in de titel ook geel maken */
.qigo-flex-blok--wistjedat .qigo-flex-blok__titel .qigo-icon-wrap {
    background-color: rgba(255, 196, 0, 0.15); /* Zacht geel */
}

/* ... (De sectie KNOP STYLING ALGEMEEN mag je laten staan zoals die was) ... */

/* -------------------------------------------
   OPTIE 2: WIST-JE-DAT (Icoon Rondje + Tekst)
   ------------------------------------------- */
   
/* Bij Wistjedat heeft de <a> tag GEEN border/padding */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop {
    padding: 0;
    border: none;
    background: none;
}

/* Het icoon als de "knop" */
.qigo-flex-blok--wistjedat .qigo-knop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 32px;  
    height: 32px;
    border-radius: 50%; 
    
    background-color: var(--blok-accent-1);
    color: var(--kleur-primair); 
    
    font-size: 0.9rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* De Tekst Styling (Hier zit nu de lijn!) */
.qigo-flex-blok--wistjedat .qigo-knop-text {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--kleur-primair);
    
    /* FIX: De gele lijn staat hier nu standaard aan via border-bottom */
    border-bottom: 2px solid var(--blok-accent-1); /* Gele lijn */
    padding-bottom: 2px; /* Zorgt voor beetje lucht tussen tekst en lijn (ipv underline-offset) */
    
    transition: border-color 0.3s ease, color 0.3s ease;
}

/* --- Hover Effecten voor Wistjedat --- */

/* 1. Het rondje draait/beweegt */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop:hover .qigo-knop-icon {
    transform: scale(1.1) rotate(-45deg); 
    box-shadow: 0 4px 10px rgba(255, 196, 0, 0.4);
}

/* 2. De tekstkleur én de lijnkleur veranderen */
.qigo-flex-blok--wistjedat .qigo-flex-blok__knop:hover .qigo-knop-text {
    color: var(--blok-accent-2);          /* Tekst Oranje */
    border-bottom-color: var(--blok-accent-2); /* Lijn ook Oranje */
}
/* =========================================
   SHORTCODE: VERDER LEZEN (Subtiele Links)
   ========================================= */

.qigo-verder-lezen-wrapper {
    margin: 0.5rem 0;
}

/* De Titel (Gewoon standaard H3, zoals gevraagd) */
.qigo-verder-lezen-wrapper h3 {
    margin-bottom: 1rem;
    color: var(--kleur-primair);
    /* Optioneel: Je kunt hier de Fredoka font toevoegen als je wilt */
    /* font-family: var(--font-titel); */
}

.qigo-verder-lezen-list {
    display: flex;
    flex-direction: column;
    gap: 0px; /* Ruimte tussen de links */
}

/* De Link Container (De "Knop") */
.qigo-verder-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    group: pointer; /* Zorgt dat hover overal werkt */
    width: fit-content; /* Niet breder dan nodig */
}

/* 1. Het Icoon Rondje (Subtiel) */
.qigo-verder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 28px;
    height: 28px;
    border-radius: 50%;
    
    /* Rustige kleuren: Lichtblauw achter, Donkergroen icoon */
    background-color: #e0f2f1; /* Heel licht groen/blauw */
    color: var(--kleur-primair);
    
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* 2. De Tekst */
.qigo-verder-text {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--kleur-primair);
    
    /* Subtiele onderstreping die pas verschijnt bij hover */
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

/* --- Hover Effecten --- */

/* Icoon draait en kleurt */
.qigo-verder-link:hover .qigo-verder-icon {
    background-color: var(--kleur-accent2); /* Je mooie blauw */
    color: #fff; /* Wit pijltje */
    transform: rotate(-45deg) scale(1.1);
}

/* Tekst kleurt mee */
.qigo-verder-link:hover .qigo-verder-text {
    color: var(--kleur-primair-hover); /* Of accent2 als je dat liever hebt */
    border-bottom-color: var(--kleur-accent2);
}

/* =========================================
   SHORTCODE: INLINE TEXT LINK (BLEND-IN + HOVER SLIDE)
   ========================================= */

.qigo-text-link {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--kleur-primair);
    text-decoration: none;
    
    /* Gele lijn (subtiel in rust) */
    border-bottom: 2px solid rgba(255, 196, 0, 0.3);
    
    /* Zorg dat de link zich als inline-block gedraagt voor de animatie, 
       maar wel netjes in de tekstflow past */
    display: inline-flex; 
    align-items: baseline; /* Uitlijnen op de tekstregel */
    gap: 0; /* Geen ruimte in rust */
    
    transition: all 0.2s ease;
}

/* Het Icoon: Mocht er nog ergens eentje gerenderd worden */
.qigo-text-link i {
    font-size: 0.85em;        /* Iets kleiner dan de tekst */
    color: var(--kleur-accent);
    margin-left: 6px;
    transition: all 0.2s ease;
}

/* --- HOVER STATUS --- */
.qigo-text-link:hover {
    border-bottom-color: var(--kleur-accent); /* Hard geel */
}

/* --- VARIANT: ROZE (kleur="roze") --- */
.qigo-text-link--pink {
    /* De lijn is in rust zacht roze ipv zacht geel */
    border-bottom-color: rgba(216, 27, 96, 0.2); 
}

/* Het pijltje wordt diep roze */
.qigo-text-link--pink i {
    color: #d81b60; 
}

/* Hover: Hard roze lijn */
.qigo-text-link--pink:hover {
    border-bottom-color: #d81b60;
}

/* --- VARIANT: BLAUW (kleur="blauw") --- */
.qigo-text-link--blue {
    /* De lijn is jouw ijsblauw (#c2f4fb). 
       Omdat het een lichte kleur is, maken we hem 'solid' (niet transparant) 
       zodat hij goed zichtbaar is. */
    border-bottom-color: #c2f4fb; 
}

/* Het pijltje krijgt je primaire donkergroen voor mooi contrast */
.qigo-text-link--blue i {
    color: var(--kleur-primair); 
}

/* Hover: Lijn wordt iets donkerder/intenser (Petrol) voor feedback */
.qigo-text-link--blue:hover {
    border-bottom-color: var(--kleur-primair);
}

/* =========================================
   HERO KAART: PROMO MODUS
   ========================================= */

/* 1. Het Label (Wit met donkere tekst) */
.qigo-hero-label {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    
    background-color: #ffffff;
    color: var(--kleur-primair);
    
    padding: 5px 12px;
    border-radius: 50px;
    
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* 2. RUIMTE FIX: Zorg dat tekst niet onder het label kruipt */
.qigo-kaart-promo-mode .qigo-kaart-content {
    /* We duwen de inhoud naar beneden, weg van het label */
    padding-top: 60px; 
    justify-content: center; /* Houdt het verticaal mooi in balans */
}

/* 3. KLEUR NUANCE: De Promo Knop (Geel Accent) */
/* Alleen als de kaart in 'promo-mode' is, maken we de knop geel */
.qigo-kaart-promo-mode .qigo-kaart-knop {
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Donkergroene tekst */
    border: 2px solid var(--kleur-accent); /* Randje zelfde kleur */
    font-weight: 700;
}

.qigo-kaart-promo-mode .qigo-kaart-knop:hover {
    background-color: #fff; /* Wit bij hover */
    border-color: #fff;
    color: var(--kleur-primair);
}

/* 4. MOBIELE OPTIMALISATIE */
@media (max-width: 600px) {
    
    /* Knop kleiner maken zodat hij past */
    .qigo-kaart-promo-mode .qigo-kaart-knop {
        width: auto;            /* Niet schermvullend */
        max-width: 100%;        /* Maar ook niet breder dan het scherm */
        padding: 8px 16px;      /* Minder lucht rondom de tekst */
        font-size: 0.85rem;     /* Iets kleiner lettertype */
        white-space: nowrap;    /* Probeer op 1 regel te blijven */
    }
    
    /* Eventueel de titel ook iets kleiner op mobiel als die heel lang is */
    .qigo-kaart-promo-mode .qigo-kaart-titel {
        font-size: 1.5rem; 
    }
}

/* =========================================
   ACTION ROWS: KLEUR VARIATIES (ROZE)
   ========================================= */

/* 1. Het Icoon (Roze ipv Geel) */
.qigo-action-row--pink .qigo-small-icon-circle {
    background-color: #F8BBD0; /* Zacht roze (van je knop gradient) */
    color: var(--kleur-primair);
}

/* Hover effect icoon */
.qigo-action-row--pink:hover .qigo-small-icon-circle {
    background-color: #f48fb1; /* Iets dieper roze */
}

/* 2. De Link Titel (Onderstreping) */
.qigo-action-row--pink a.qigo-action-title {
    border-bottom-color: #F8BBD0;
}

/* Hover effect tekst */
.qigo-action-row--pink:hover a.qigo-action-title {
    color: #d81b60; /* Diep roze/rood voor goede leesbaarheid */
    border-bottom-color: #d81b60;
}
/* =========================================
   INLINE LINK: ROZE VARIANT
   ========================================= */

/* Het bolletje roze maken */
a.qigo-inline-smart-link.qigo-inline--pink .qigo-inline-icon {
    background-color: #F8BBD0; /* Zacht roze */
    color: var(--kleur-primair);
}

/* Hover effect */
a.qigo-inline-smart-link.qigo-inline--pink:hover .qigo-inline-icon {
    background-color: #f48fb1; /* Iets donkerder roze */
}

/* =========================================
   LIJST STIJLEN (GLOBAAL & SHORTCODE)
   ========================================= */

/* --- 1. De Basis (Reset) --- */
.single-content ul, .single-content ol,
.qigo-lijst-container ul, .qigo-lijst-container ol {
    padding-left: 0;
    margin: 1rem 0;
}

.single-content ul li, .single-content ol li,
.qigo-lijst-container ul li, .qigo-lijst-container ol li {
    position: relative;
    margin-bottom: 0.8rem;
    color: var(--kleur-tekst);
    line-height: 1.6;
}

/* --- 2. Unordered List (Bolletjes) --- */
.single-content ul,
.qigo-lijst-container ul {
    list-style: none !important;
}

.single-content ul li,
.qigo-lijst-container ul li {
    padding-left: 2rem; /* Ruimte voor bolletje */
}

.single-content ul li::before,
.qigo-lijst-container ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px; /* Verticaal uitlijnen */
    
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    background-color: var(--kleur-accent); 
    box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15);
}

/* --- 3. Ordered List (Nummers 1. 2. 3.) --- */
.single-content ol,
.qigo-lijst-container ol {
    list-style: none;         /* Verberg standaard browser nummering */
    counter-reset: qigo-counter; /* Start de teller */
}

.single-content ol li,
.qigo-lijst-container ol li {
    counter-increment: qigo-counter; /* Tel er 1 bij op per item */
    padding-left: 2.5rem;            /* Iets meer ruimte nodig dan bolletje */
}

.single-content ol li::before,
.qigo-lijst-container ol li::before {
    content: counter(qigo-counter); /* Toon het nummer */
    
    position: absolute;
    left: 0;
    top: 0px; /* Iets hoger beginnen omdat cirkel groter is */
    
    /* Vormgeving Cirkel */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);           /* Donkergroen cijfer */
    
    /* Tekst centreren in cirkel */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-body);
    
    box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.15); /* Zelfde gloed als bolletjes */
}

/* --- 4. UITZONDERINGEN & REPARATIES --- */

/* Bescherming voor 'In het kort' / Flex Blokken (UL) */
.single-content .qigo-flex-blok__inhoud ul li::before {
    background-color: var(--blok-accent-1); 
    box-shadow: none;                       
    width: 8px; height: 8px;
    left: 5px; top: 10px;
}
.single-content .qigo-flex-blok__inhoud ul li { padding-left: 1.8rem; }

/* Bescherming voor 'In het kort' / Flex Blokken (OL) */
.single-content .qigo-flex-blok__inhoud ol li::before {
    background-color: var(--blok-accent-1); /* Pak de blok-kleur */
    box-shadow: none;
    color: #fff; /* Wit cijfer op gekleurde achtergrond */
    font-size: 0.8rem;
    width: 22px; height: 22px; /* Iets subtieler in een blok */
}

/* Vinkjes Variant (Shortcode) */
.qigo-lijst-container.qigo-lijst--check ul li::before {
    content: "✔"; 
    font-weight: 900;
    background-color: transparent; 
    box-shadow: none;
    color: #04952a; 
    font-size: 1.1rem;
    top: 2px;
    width: auto; height: auto;
}

/* Inline Variant */
.qigo-lijst-container.qigo-lijst--inline ul,
.qigo-lijst-container.qigo-lijst--inline ol {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px 25px; 
    margin: 0; 
}
.qigo-lijst-container.qigo-lijst--inline li {
    width: auto; 
    margin-bottom: 0; 
    display: inline-block; 
}
@media (max-width: 600px) {
    .qigo-lijst-container.qigo-lijst--inline ul,
    .qigo-lijst-container.qigo-lijst--inline ol {
        gap: 8px 15px;
    }
}

/* =========================================
   CONTACT PAGINA GRID (3 Kolommen)
   ========================================= */

.qigo-contact-grid {
    display: grid;
    /* Mobiel: 1 kolom (onder elkaar) */
    grid-template-columns: 1fr; 
    gap: 20px; /* Ruimte tussen de blokken */
    margin-bottom: 1rem;
}

/* Desktop (vanaf 800px): 3 kolommen naast elkaar */
@media (min-width: 800px) {
    .qigo-contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
   MOBIELE VS DESKTOP TEKST WISSEL
   ========================================= */

/* Standaard (Mobiel): Laat desktop tekst zien? Nee. */
.qigo-text-desktop {
    display: none;
}
.qigo-text-mobile {
    display: inline;
}

/* Vanaf Desktop (800px): Draai het om */
@media (min-width: 800px) {
    .qigo-text-desktop {
        display: inline;
    }
    .qigo-text-mobile {
        display: none;
    }
}

/* =========================================
   FAQ ACCORDION (WORDPRESS DETAILS BLOK)
   ========================================= */

/* 1. Het Blok (De Container) */
.wp-block-details {
    background-color: var(--kleur-wit);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-kaart);
    margin-bottom: 1rem;
    box-shadow: var(--schaduw-zacht);
    overflow: hidden; 
    transition: box-shadow 0.3s ease;
}

.wp-block-details:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 2. De Vraag (De Klikbare Balk) */
.wp-block-details summary {
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    font-weight: 700;
    color: var(--kleur-primair);
    font-family: var(--font-body);
    list-style: none; 
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Zorg dat de titel altijd boven de inhoud ligt */
    background-color: #fff;
    z-index: 2;
}

.wp-block-details summary::-webkit-details-marker {
    display: none;
}

/* 3. Het Pijltje (Icon Fix) */
.wp-block-details summary::after {
    /* De Unicode voor Chevron Down */
    content: '\f078'; 
    
    /* FIX: We proberen alle mogelijke FontAwesome namen */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900; /* Belangrijk voor de Solid iconen */
    
    color: var(--kleur-accent);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
    margin-left: 15px; /* Beetje ruimte tussen tekst en pijl */
}

/* Als hij open is: Draai het pijltje */
.wp-block-details[open] summary::after {
    transform: rotate(180deg);
}

/* Als hij open is: Randje onder de titel */
.wp-block-details[open] summary {
    border-bottom: 1px solid #f0f0f0;
    background-color: #fafafa;
}

/* 4. Het Antwoord (De Inhoud FIX) */
/* We targeten nu alles wat IN het blok zit, behalve de summary */
.wp-block-details > *:not(summary) {
    /* Padding aan de zijkanten toepassen op de tekst zelf */
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 1rem; /* Ruimte tussen alinea's */
    color: var(--kleur-tekst);
    line-height: 1.6;
    
    /* Zachte animatie */
    animation: fadeInSlide 0.3s ease-out;
}

/* De allereerste alinea na de titel wat ruimte boven geven */
.wp-block-details > *:not(summary):nth-of-type(1) {
    margin-top: 1.5rem;
}

/* De allerlaatste alinea wat ruimte onder geven */
.wp-block-details > *:not(summary):last-child {
    margin-bottom: 1.5rem;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FIX: QIGO LINK WRAPPING (Tekst afbreken)
   ========================================= */

/* 1. Sta tekst toe om naar de volgende regel te gaan */
a.qigo-inline-smart-link {
    white-space: normal; /* Was nowrap, nu mag het breken */
    max-width: 100%;     /* Zeker weten dat het binnen het scherm blijft */
}

/* 2. Bescherm het icoontje tegen platdrukken */
a.qigo-inline-smart-link .qigo-inline-icon {
    flex-shrink: 0; /* Icoon behoudt altijd zijn ronde vorm en grootte */
    margin-top: 2px; /* Iets nettere uitlijning als de tekst over meerdere regels loopt */
}

/* --- TOEVOEGEN AAN style.css --- */

/* 1. Basis Container */
.qigo-kaart-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Ronde vormen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Flexbox zorgt dat tekst altijd onderaan of netjes uitgelijnd staat */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Tekst onderin */
    
    /* Hier pakken we de variabele uit de PHP, met een fallback van 300px */
    min-height: var(--qigo-kaart-hoogte, 300px);
    
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qigo-kaart-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 2. De Overlay (Zorgt dat tekst leesbaar blijft op foto's) */
.qigo-kaart-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Verloop van transparant naar donker voor leesbaarheid tekst */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* 3. De Inhoud */
.qigo-kaart-content {
    position: relative;
    z-index: 2; /* Boven de overlay */
    padding: 2rem;
    color: #fff;
    width: 100%;
}

/* 4. Typografie binnen de kaart */
.qigo-kaart-titel {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.qigo-kaart-tekst {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

/* 5. Mobiele Aanpassingen (Fluid!) */
@media (max-width: 768px) {
    .qigo-kaart-container {
        /* Op mobiel negeren we de vaste hoogte als de tekst lang is */
        min-height: auto; 
        
        /* We zorgen wel voor een minimale beeldverhouding zodat plaatjes mooi blijven */
        aspect-ratio: 4/3; 
    }

    .qigo-kaart-content {
        padding: 1.5rem;
    }

    .qigo-kaart-titel {
        font-size: 1.25rem;
    }
    
    /* Als het een promo-kaart is, mag hij op mobiel iets compacter */
    .qigo-kaart-promo-mode {
        aspect-ratio: auto; /* Reset */
    }
}

/* =========================================
   NIEUWE CODE: VERDER LEZEN BADGE & ITEM
   ========================================= */

.qigo-verder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    /* Mobiel: Badge en link mogen onder elkaar als het niet past */
    flex-wrap: wrap; 
}

.qigo-verder-badge {
    display: inline-block;
    background-color: rgba(26, 83, 92, 0.08); /* Zachte QiGO Petrol */
    color: var(--kleur-primair);
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.qigo-verder-badge:hover {
    background-color: var(--kleur-accent); /* Geel */
    color: var(--kleur-primair);
    transform: translateY(-1px);
}

/* BESTAANDE CODE: VERDER LINK (Aangepast voor item layout) */
.qigo-verder-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: fit-content;
}

/* =========================================
   AANGEPASTE CODE: VERDER LEZEN MULTI-LINE FIX
   ========================================= */

.qigo-verder-item {
    display: flex;
    align-items: flex-start; /* NIEUW: Lijn uit op de bovenkant van de tekst */
    gap: 12px;
    margin-bottom: 16px; /* Iets meer ruimte tussen items voor leesbaarheid */
    flex-wrap: wrap; 
}

.qigo-verder-link {
    display: inline-flex;
    align-items: flex-start; /* NIEUW: Icoon blijft bovenaan bij de eerste regel */
    gap: 12px;
    text-decoration: none;
    width: fit-content;
    padding-top: 2px; /* Zorgt dat tekst en icoon perfect op één lijn starten */
}

.qigo-verder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Voorkom dat het rondje platgedrukt wordt */
    
    width: 28px;
    height: 28px;
    border-radius: 50%;
    
    background-color: #e0f2f1;
    color: var(--kleur-primair);
    
    font-size: 0.85rem;
    
    /* NIEUW: Lijn het icoon visueel uit met de hoogte van de eerste tekstregel */
    margin-top: 2px; 
    
    transition: all 0.3s ease;
}

.qigo-verder-text {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--kleur-primair);
    line-height: 1.4; /* Zorgt voor een rustige bladspiegel bij 2 regels */
    
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Hover effecten blijven hetzelfde, maar werken nu beter door flex-start */
.qigo-verder-link:hover .qigo-verder-icon {
    transform: rotate(-45deg) scale(1.1);
    background-color: var(--kleur-accent);
}

.qigo-verder-link:hover .qigo-verder-text {
    border-bottom-color: var(--kleur-accent);
}

/* =========================================
   AANGEPASTE CODE: INFO BLOK SECUNDAIRE LINK
   ========================================= */

/* 1. Verwijder de achtergrond van het icoon binnen dit specifieke blok */
.qigo-info-secundair .qigo-inline-icon {
    background-color: transparent !important; /* Geen gele bol meer */
    color: var(--kleur-primair);              /* Icoon krijgt de petrol kleur */
    width: auto;                              /* Geen vaste breedte nodig voor de bol */
    height: auto;
    font-size: 1rem;                          /* Iets groter icoon voor balans */
    margin-right: 4px;                        /* Beetje afstand tot de tekst */
}

/* 2. Zorg dat de link tekst mooi blijft lijnen */
.qigo-info-secundair .qigo-inline-text:hover {
        border-bottom: 2px solid var(--kleur-accent); /* Behoud de gele lijn onder de tekst voor herkenbaarheid */

}

/* 3. Hover effect voor de 'schone' link */
.qigo-info-secundair:hover .qigo-inline-icon {
    transform: scale(1.1);                    /* Alleen een klein zoom effectje */
    background-color: transparent !important; /* Forceer transparant ook bij hover */
    
}

/* =========================================
   BESTAANDE CODE: ACTIE GEBIED RESPONSIEF
   ========================================= */

.qigo-info-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px; /* Iets meer ruimte tussen knop en de nu 'naakte' link */
    flex-shrink: 0;
}

@media (max-width: 800px) {
    .qigo-info-action {
        flex-direction: column; 
        align-items: center;
        gap: 15px;
        width: 100%;
    }
}

/* =========================================
   DEFINITIEVE FIX: INFO BLOK & SPACING
   ========================================= */

/* 1. De Grote Fredoka Titel */
.qigo-info-titel--groot {
    font-family: var(--font-titel), sans-serif !important;
    font-size: 1.85rem !important; /* Krachtige uitstraling */
    color: var(--kleur-primair);
    margin-bottom: 0.5rem !important;
    line-height: 1.2;
}

/* 2. Spacing Fix: Trek de lijst en knoppen strak */
.qigo-info-extra .qigo-lijst-container ul {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.qigo-info-extra {
    margin-bottom: 0 !important;
}

/* 3. Actie-knoppen Layout */
.qigo-info-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 10px; /* Direct onder de laatste regel tekst/lijst */
}

/* 4. Secundaire Link (Schoon, zonder bol) */
.qigo-info-secundair {
    display: inline-flex;
    align-items: flex-start; /* NIEUW: Uitlijnen op de bovenkant (start tekst) */
    gap: 8px;
    text-decoration: none;
}

.qigo-info-secundair .qigo-inline-icon {
    background-color: transparent !important;
    color: var(--kleur-primair);
    width: auto;
    height: auto;
    font-size: 1.1rem;
    
    /* NIEUW: Optische uitlijning met de eerste regel tekst & fix vervorming */
    margin-top: 3px; 
    flex-shrink: 0; 
}

.qigo-info-secundair .qigo-inline-text {
    font-weight: 700;
    color: var(--kleur-primair);
   
}

.qigo-info-secundair .qigo-inline-text:hover {
   
    border-bottom: 2px solid var(--kleur-accent);
}
/* 5. Desktop Grid Fix voor 'knop-onder' */
@media (min-width: 800px) {
    .qigo-info--knop-onder {
        display: grid;
        grid-template-columns: 80px 1fr; /* Kolom 1: Logo/Icoon, Kolom 2: Content */
        grid-template-areas: 
            "media content"
            "media action";
        column-gap: 30px;
        row-gap: 0;
        text-align: left;
        align-items: start;
    }

    .qigo-info--knop-onder .qigo-info-media { grid-area: media; }
    .qigo-info--knop-onder .qigo-info-content { grid-area: content; }
    .qigo-info--knop-onder .qigo-info-action { 
        grid-area: action; 
        justify-self: start; 
        margin-top: 5px;
    }
}

/* Mobiel: Alles onder elkaar en gecentreerd */
@media (max-width: 799px) {
    .qigo-info-action {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
}

/* =========================================
   AANGEPASTE CODE: INFO BLOK MET ACHTERGROND
   ========================================= */

/* De container instellen voor achtergrondfoto's */
.qigo-info--has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    border: none !important;
    overflow: hidden;
    color: #ffffff !important; /* Standaard witte tekst bij foto */
}

/* De donkere laag over de foto voor leesbaarheid */
.qigo-info-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* 40% zwart filter */
    z-index: 1;
}

/* Zorg dat alle content BOVEN de overlay ligt */
.qigo-info--has-bg .qigo-info-media,
.qigo-info--has-bg .qigo-info-content,
.qigo-info--has-bg .qigo-info-action {
    position: relative;
    z-index: 2;
}

/* Tekstkleuren aanpassen als er een achtergrondfoto is */
.qigo-info--has-bg .qigo-info-titel,
.qigo-info--has-bg .qigo-info-tekst p,
.qigo-info--has-bg .qigo-info-extra li {
    color: #ffffff !important;
}

.qigo-info--has-bg .qigo-info-secundair .qigo-inline-text {
    color: #ffffff !important;
}

.qigo-info--has-bg .qigo-info-secundair .qigo-inline-icon  {
    color: #ffffff !important;
}

/* =========================================
   HERSTEL: AFBEELDING RECHTS (PRIORITEIT FIX)
   ========================================= */

@media (min-width: 800px) {
    /* We voegen !important toe aan de grid-instellingen om de links-layout te overschrijven */
    .qigo-info--img-rechts {
        display: grid !important; 
        grid-template-columns: 1fr 380px !important; 
        grid-template-areas: 
            "content media"
            "action media" !important;
        padding: 0 !important; 
        min-height: 350px;     
        align-items: stretch !important;
        overflow: hidden;
    }

    /* Forceer de media-container naar de juiste grid-area */
    .qigo-info--img-rechts .qigo-info-media {
        grid-area: media !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important; /* Zorg dat het zichtbaar is */
    }

    .qigo-info--img-rechts .qigo-info-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
        border-radius: 0;
        
        /* Het zachte verloop van afbeelding naar tekst */
        -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
        mask-image: linear-gradient(to left, black 60%, transparent 100%);
    }

    /* Padding voor tekst-onderdelen herstellen voor deze layout */
    .qigo-info--img-rechts .qigo-info-content {
        grid-area: content !important;
        padding: 2.5rem 0 1rem 2.5rem !important;
    }

    .qigo-info--img-rechts .qigo-info-action {
        grid-area: action !important;
        padding: 0 0 2.5rem 2.5rem !important;
        justify-content: flex-start !important;
    }
}

/* =========================================
   AANPASSING: TRANSPARANT CONFLICT VOORKOMEN
   ========================================= */

.qigo-info--transparent {
    box-shadow: none !important;
    border: none !important;
    /* We verwijderen de padding-left/right !important hier, 
       zodat de grid-padding van de layouts hierboven kan werken */
    padding-left: 0;
    padding-right: 0;
}
/* =========================================
   NIEUWE CODE: PILL-STYLING VOOR TEKSTKOLOM
   ========================================= */

.qigo-action-row .qigo-action-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* De Pill-vorm */
    background-color: #ffffff;       /* Wit voor contrast op de achtergrond */
    border: 1px solid #e0e0e0;       /* Lichte grijze rand */
    padding: 12px 24px;              /* Ruimte binnen de pill */
    border-radius: 24px;             /* Matchen met var(--radius-kaart) */
    
    /* Subtiele diepte */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect op het hele blok */
.qigo-action-row:hover .qigo-action-text-col {
    transform: translateY(-2px);
    box-shadow: var(--schaduw-zacht);
    border-color: var(--kleur-accent); /* Rand wordt geel bij actie */
}

/* De Titel binnen de pill: we halen de harde onderlijn weg 
   omdat de 'box' nu al genoeg definitie geeft. */
.qigo-action-row .qigo-action-title {
    border-bottom: none !important; 
    margin-bottom: 2px;
}

/* De Beschrijving binnen de pill */
.qigo-action-row .qigo-action-desc {
    margin-bottom: 0; /* Ruimte aan de onderkant is al geregeld via padding */
}

/* MOBIEL: Op mobiel de volle breedte benutten */
@media (max-width: 600px) {
    .qigo-action-row .qigo-action-text-col {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   AANGEPASTE CODE: INFO BLOK CLEANUP
   ========================================= */

/* 1. Verberg schaduw en rand als achtergrond transparant is */
.qigo-info--transparent {
    box-shadow: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Grid aanpassing als er GEEN media (icoon/img) is */
.qigo-info--no-media {
    display: block !important; /* Geen grid nodig, alles mag gewoon onder elkaar */
    text-align: left;
}

.qigo-info--no-media .qigo-info-content {
    padding: 0 !important;
}

.qigo-info--no-media .qigo-info-action {
    justify-content: flex-start;
    margin-top: 15px;
}

/* 3. Zorg dat lege titels geen ruimte innemen */
.qigo-info-titel:empty, 
.qigo-info-tekst:empty {
    display: none;
}

/* =========================================
   NIEUWE LAYOUT: AFBEELDING BOVEN (IMG-TOP)
   ========================================= */

.qigo-info--img-top {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Ruimte weghalen voor de afbeelding */
    overflow: hidden;
    text-align: center;
}

.qigo-info--img-top .qigo-info-media {
    width: 100% !important;
    height: 220px; /* Vaste hoogte voor het sfeerbeeld bovenop */
    margin-bottom: 0;
}

.qigo-info--img-top .qigo-info-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    
    /* DE FADE: Van boven (zichtbaar) naar beneden (transparant) */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Content padding herstellen voor img-top */
.qigo-info--img-top .qigo-info-content {
    padding: 1.5rem 2rem 1rem 2rem !important;
    margin-top: -30px; /* Laat de tekst een beetje over de fade lopen voor diepte */
    position: relative;
    z-index: 2;
}

.qigo-info--img-top .qigo-info-action {
    padding: 0 2rem 2.5rem 2rem !important;
    justify-content: center;
}

/* Desktop optimalisatie voor img-top (iets hogere afbeelding) */
@media (min-width: 800px) {
    .qigo-info--img-top .qigo-info-media {
        height: 280px;
    }
}
/* =========================================
   SHORTCODE: KEUZE SECTIE (FIXED LAYOUT & RESTORED TEXT)
   ========================================= */

.qigo-keuze-container {
    position: relative;
    z-index: 2; /* Zorg dat tekst boven de golf ligt */
    
    /* Reset de oude styling die conflicten gaf */
    background-color: transparent !important; 
    margin: 0 auto;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* --- 1. DE ZWEVENDE KNOP --- */
.qigo-keuze-main-wrapper {
    position: relative;
    z-index: 20; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -35px; /* Precies op de rand */
    margin-bottom: 1.5rem;
}

.qigo-keuze-knop-groot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.2rem;
    
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    border: 4px solid #fff; 
    box-shadow: 0 10px 25px rgba(26, 83, 92, 0.3); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 280px;
}

.qigo-keuze-knop-groot:hover {
    transform: translateY(-5px) scale(1.02);
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    border-color: #fff;
}

.qigo-keuze-subtekst {
    margin-top: 15px;
    font-size: 0.9rem;
    color: rgba(0,0,0,0.6); 
    font-weight: 500;
}

/* --- 2. TITEL & CONTENT (HERSTELDE STYLING) --- */
.qigo-keuze-titel {
    font-family: var(--font-titel);
    font-size: 2rem;
    color: var(--kleur-primair);
    margin-top: 1rem;
    margin-bottom: 1rem; 
    max-width: 800px;
    position: relative;
    z-index: 10;
}

.qigo-keuze-links-groep {
    margin-bottom: 1rem;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Herstelde Divider (Grijs ipv Transparant) - ORIGINEEL */
.qigo-keuze-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    
    color: #999999;        /* Originele grijze kleur */
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    
    margin-top: 10px;
    margin-bottom: 15px;
}

/* --- TIER TWO STYLING (Onderkant van qigo_keuze) --- */
.qigo-keuze-tier-two {
    margin-top: 7rem; /* Zorgt voor afstand van de social card / OVERLAP FIX */
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Links uitgelijnd, niet gecentreerd */
}

.qigo-keuze-links-groep--tier-two {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Links uitgelijnd */
    width: 100%;
    margin-bottom: 5px;
}

/* DE NIEUWE PILL: "Lees verder" label */
.qigo-keuze-divider--tier-two {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    font-family: var(--font-body);
    font-size: 0.9rem; 
    font-weight: 600;
    color: var(--kleur-primair);
    text-transform: none; 
    letter-spacing: normal;
    margin-bottom: 12px;
    
    /* PILL STYLING - REVERT NAAR TRANSPARANT MET BORDER */
    background-color: transparent; 
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: none;
}

.qigo-keuze-divider--tier-two i {
    color: var(--kleur-accent);
}

/* Verwijder de pseudo-element lijntjes voor TIER TWO */
.qigo-keuze-divider--tier-two::before,
.qigo-keuze-divider--tier-two::after {
    display: none !important;
}

.qigo-keuze-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 5px; /* Lijn subtiel in onder de pill */
}

/* Herstelde Link Secundair (Zwart/Primair ipv aangepast) */
.qigo-keuze-link-secundair {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--kleur-primair); /* Gewoon harde kleur */
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.qigo-keuze-link-secundair:hover {
    background-color: transparent;
    transform: translateY(-2px);
    border-bottom-color: var(--kleur-accent); /* Gele streep bij hover */
}

.qigo-keuze-link-secundair i {
    font-size: 0.8em;
    margin-left: 6px;
    color: var(--kleur-accent);
    transition: transform 0.2s ease;
}

.qigo-keuze-link-secundair:hover i {
    transform: translateX(3px);
}

/* TIER TWO Links: Zelfde als base, maar met links-uitgelijnde pijltjes structuur */
.qigo-keuze-link-secundair--tier-two {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* Reset de pill stijlen */
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent; /* Voor de hover lijn */
    padding: 2px 0;
    border-radius: 0;
    width: fit-content; /* Zorg dat border-bottom niet 100% is */
}

.qigo-keuze-link-secundair--tier-two:hover {
    background-color: transparent;
    border-color: transparent; /* Reset de oude border-color */
    border-bottom-color: var(--kleur-accent); /* Gele lijn */
    transform: translateX(5px); /* Schuif naar rechts in plaats van omhoog */
    box-shadow: none;
}

.qigo-keuze-link-secundair--tier-two i {
    margin-left: 0; /* Reset de basis left-margin */
    color: var(--kleur-accent); /* Behoud altijd de gele pijl */
}

.qigo-keuze-link-secundair--tier-two:hover i {
    transform: none; /* Icon schuift mee met hele link via translateX(5px) */
}

.qigo-keuze-divider::before,
.qigo-keuze-divider::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: #ddd; /* Originele lichte lijn */
}

/* --- 4. DE BOTTOM WAVE (DEFINITIEVE FIX) --- */
.qigo-wave-bottom {
    position: absolute;
    /* We plakken hem strak tegen de onderkant */
    bottom: 0; 
    left: 0;
    width: 100%;
    /* De hoogte moet matchen met de golf in de SVG */
    height: 120px; 
    z-index: 1; 
    pointer-events: none;
    line-height: 0;
    /* Zorg dat er geen kiertje ontstaat door sub-pixels */
    transform: translateY(1px); 
}

.qigo-wave-bottom svg {
    display: block;
    width: 100%;
    height: 100%;
    
    /* 1. KLEUR: Dit moet de kleur zijn van de witruimte ONDER het gele blok */
    fill: var(--kleur-achtergrond, #f0f4f8); 
    
    /* 2. VORM: We spiegelen hem verticaal (Flip Vertical) */
    transform: scaleY(1); 
}

/* Mobiele aanpassing */
@media (max-width: 600px) {
    .qigo-keuze-knop-groot {
        padding: 16px 30px;
        font-size: 1.1rem;
        width: 90%;
    }
    .qigo-keuze-container {
        padding-bottom: 140px; 
    }
   
}/* =========================================
   QIGO FOOTER NAVIGATIE (SHORTCODE STIJL)
   ========================================= */

.qigo-footer-nav-wrapper {
    width: 100%;
    max-width: 1000px; 
    margin: 60px auto 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.qigo-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Titel */
.qigo-verder-titel {
    font-family: var(--font-titel);
    font-size: 1.1rem;
    color: var(--kleur-primair);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.05);
}

/* Lijst */


/* Item Wrapper */
.qigo-verder-item {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    
}

/* Badge (Pill boven tekst) */
.qigo-verder-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background-color: #f0f0f0;
    color: #888;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    display: inline-block;
}

.qigo-verder-badge:hover {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
}

/* De Link */
.qigo-verder-link {
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #555;
    transition: all 0.2s ease;
    width: 100%;
}

.qigo-verder-link:hover {
    color: var(--kleur-primair);
    transform: translateX(3px);
}

/* Het Icoon */
.qigo-verder-icon i {
    font-size: 0.85rem;
    color: #ccc; /* Grijs in rust */
    width: 15px; 
    text-align: center;
    transition: color 0.2s ease;
}

/* FIX: Icoon kleur bij hover */
.qigo-verder-link:hover .qigo-verder-icon i {
    /* Nu wordt hij donkergroen (primair) zodat hij goed zichtbaar is op wit/geel */
    color: var(--kleur-primair); 
}

/* Tekst */
.qigo-verder-text {
    font-weight: 500;
    line-height: 1.4;
}

/* Mobiel */
@media (max-width: 768px) {
    .qigo-footer-grid {
        grid-template-columns: 1fr;
        gap: 0px;
    }
}
/* Alleen op desktop (mobiel staan ze onder elkaar) */
@media (min-width: 769px) {
    .qigo-footer-col:first-child {
        border-right: 1px solid #eee; /* Verticaal lijntje */
        padding-right: 60px; /* Ruimte tussen tekst en lijn */
    }
    
    /* We moeten de gap van de grid dan iets aanpassen, 
       anders wordt de ruimte dubbel zo groot */
    .qigo-footer-grid {
        gap: 0; /* Gap op 0 zetten, we gebruiken padding voor de ruimte */
    }
    
    .qigo-footer-col:last-child {
        padding-left: 60px; /* Ruimte links van de 2e kolom */
    }
}

/* =========================================
   MOBIEL: VAN GRID NAAR LIST VIEW (AANGEPAST)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Container: Alles onder elkaar */
    .category-post-row {
        display: flex;
        flex-direction: column;
        gap: 15px; 
        
        overflow-x: visible; 
        padding-bottom: 0;
        padding-left: 0; 
        padding-right: 0;
    }

 /* 6. BEPERK AANTAL ITEMS: Max 4 op mobiel (ALLEEN HOMEPAGE) */
    
    /* We beperken de selectie tot lijsten die IN de kolommen-layout zitten.
       Dit komt alleen voor op de homepage (front-page.php).
       Categoriepagina's hebben deze wrapper niet, dus daar toont hij alles. */
    .mijnqigo-layout__columns .category-post-row .blog-post-card:nth-child(n+5) {
        display: none;
    }

    /* 2. De Kaart: Liggend maken */
    .blog-post-card {
        display: flex;       
        flex-direction: row; 
        
        flex: none;
        width: 100%;
        height: 100px;       /* Iets compacter gemaakt (was 110px) */
        aspect-ratio: auto;  
        
        background-color: #fff; 
    }

    /* 3. De Foto (Links) - KLEINER GEMAAKT */
    .blog-post-card__link-wrapper {
        position: relative;
        width: 110px;        /* AANGEPAST: Was 130px, nu smaller */
        height: 100%;        
        flex-shrink: 0;      
        border-radius: 16px 0 0 16px; 
    }
    
    .blog-post-card__thumbnail {
        border-radius: 16px 0 0 16px; 
    }

    /* 4. De Inhoud (Rechts) - MEER RUIMTE */
    .blog-post-card__content {
        position: relative;  
        width: auto;
        flex: 1;             /* Pakt nu automatisch de extra ruimte */
        
        background: none;    
        padding: 10px 15px;     /* AANGEPAST: Alleen links/rechts padding, boven/onder niet nodig door flex */
        
        /* VERTICAAL CENTREREN */
        display: flex;
        align-items: center; /* Dit centreert de tekst verticaal */
        justify-content: flex-start; /* Dit lijnt horizontaal links uit */
    }

    /* 5. De Titel */
    .blog-post-card__title {
        font-size: 0.9rem;   /* Iets kleiner voor betere fit */
        line-height: 1.3;
        color: var(--kleur-primair); 
        text-shadow: none;           
        margin: 0;
        
        /* LINKS UITLIJNEN */
        text-align: left;
        width: 100%;
    }
    
    /* Hover effect uit op mobiel */
    .blog-post-card:hover .blog-post-card__thumbnail {
        transform: none;
    }
}
/* =========================================
   NAVIGATIE WISSEL (DESKTOP VS MOBIEL)
   ========================================= */

/* Standaard: Verberg mobiele dropdown */
.mobile-nav-only {
    display: none;
}

/* De Dropdown Styling */
.qigo-select-wrapper {
    position: relative;
    width: 100%;
}

.qigo-select-wrapper select {
    width: 100%;
    appearance: none; /* Verwijder standaard browser pijl */
    -webkit-appearance: none;
    
    background-color: #fff;
    border: 1px solid #eee;
    padding: 12px 15px;
    border-radius: 50px; /* Mooie ronde pil-vorm */
    font-size: 1rem;
    color: var(--kleur-primair);
    font-family: inherit;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    outline: none;
}

/* Eigen pijltje toevoegen */
.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kleur-accent);
    pointer-events: none; /* Klik gaat er doorheen naar select */
    font-size: 0.8rem;
}

/* --- MOBIEL: WISSEL OM --- */
@media (max-width: 768px) {
    
    /* Verberg de desktop pillen */
    .desktop-nav-only {
        display: none;
    }
    
    /* Toon de mobiele dropdown */
    .mobile-nav-only {
        display: block;
    }
}

/* =========================================
   BLOG HERO (UITGELICHT / POPULAIR)
   ========================================= */

.blog-popular-section {
    margin-bottom: 60px;
    width: 100%;
}

.blog-section-title {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--kleur-primair);
}

/* GRID LAYOUT: Desktop */
.blog-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Links groter dan rechts */
    gap: 20px;
    height: 400px; /* Vaste hoogte voor strakke uitlijning */
}

/* Wrapper voor de rechterkolom (2 kleintjes onder elkaar) */
.blog-hero-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

/* --- DE KAARTEN (Algemeen) --- */
.hero-card {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    height: 100%; /* Vul de grid cel */
    background: #000; /* Fallback */
    transition: transform 0.3s ease;
}

.hero-card:hover {
    transform: scale(1.01);
}

.hero-card__image-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

.hero-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7; /* Iets donkerder maken voor leesbaarheid tekst */
    transition: opacity 0.3s;
}

.hero-card:hover .hero-card__img {
    opacity: 0.5; /* Donkerder bij hover */
}

/* De Content (Over de foto heen) */
.hero-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Leesbaarheid */
    color: #fff;
}

/* Labels & Titels */
.hero-card__tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--kleur-accent, #FFC400);
    color: var(--kleur-primair, #000);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 3;
}

.hero-card__title {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-card__title--big {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.hero-card__excerpt {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-card__btn {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kleur-accent, #FFC400);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* =========================================
   AANPASSING HERO TEKST MOBIEL
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. De Grote Titel (Hero) */
    .hero-card__title--big {
        font-size: 1.25rem; /* Was 1.8rem op desktop -> Nu flink kleiner */
        line-height: 1.2;
        margin-bottom: 8px;
    }

    /* 2. De Ondertitel / Samenvatting */
    .hero-card__excerpt {
        font-size: 0.85rem; /* Iets kleiner en fijner */
        line-height: 1.4;
        margin-bottom: 10px;
        
        /* Zorg dat het niet te lang wordt op mobiel (max 3 regels) */
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Optioneel: De knop ook iets compacter */
    .hero-card__btn {
        font-size: 0.8rem;
    }
}

/* --- ITEM 2 & 3 (KLEIN) --- */
.hero-card--small {
    height: 50%; /* Helft van de hoogte */
}
.hero-card--small .hero-card__title {
    font-size: 1.1rem;
}

/* =========================================
   MOBIEL (Responsief)
   ========================================= */
@media (max-width: 768px) {
    .blog-hero-grid {
        display: flex;
        flex-direction: column;
        height: auto; /* Geen vaste hoogte meer */
    }

    .blog-hero-side {
        height: auto;
    }
    
    .hero-card--large {
        height: 300px; /* Mooie hoogte voor de bovenste */
    }
    
    .hero-card--small {
        height: 150px; /* Iets compacter voor de onderste twee */
    }
}

/* =========================================
   MOBIEL HYBRID: IMG-RECHTS GEDRAAGT ZICH ALS IMG-TOP
   ========================================= */
@media (max-width: 799px) {
    
    /* 1. Reset de container naar verticaal & verwijder padding */
    .qigo-info--img-rechts {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;       /* Ruimte weghalen zodat foto rand raakt */
        overflow: hidden;
        text-align: left;            /* Tekst links houden (of center als je dat mooier vindt) */
    }

    /* 2. Forceer de afbeelding bovenaan met vaste hoogte */
    .qigo-info--img-rechts .qigo-info-media {
        display: block !important;
        width: 100% !important;
        height: 220px;               /* De 'Hero' hoogte */
        margin-bottom: 0;
    }

    .qigo-info--img-rechts .qigo-info-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        
        /* 3. De Fade-out (Masker) */
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    }

    /* 4. Trek de tekst iets over de fade heen (-30px) */
    .qigo-info--img-rechts .qigo-info-content {
        padding: 1.5rem 2rem 1rem 2rem !important;
        margin-top: -30px; 
        position: relative;
        z-index: 2;
    }

    /* 5. Actieknoppen padding correctie */
    .qigo-info--img-rechts .qigo-info-action {
        padding: 0 2rem 2.5rem 2rem !important;
        margin-top: 5px;
        justify-content: flex-start; /* Links uitlijnen (matcht met text-align left) */
    }
}
/* =========================================
   YOUTUBE EMBED STYLING (ROBUUSTE FIX)
   ========================================= */

/* 1. De container: Bepaalt de vorm en verhouding */
.wp-block-embed__wrapper, /* Sommige thema's gebruiken deze wrapper */
.wp-block-embed {
    position: relative; /* Noodzakelijk ankerpunt voor de video */
    width: 100%;
    aspect-ratio: 16 / 9; /* De breedbeeld verhouding */
    
    border-radius: var(--radius-kaart); /* Jouw 24px */
    overflow: hidden; /* Snijdt de hoekjes van de video af */
    box-shadow: var(--schaduw-zacht);
    margin-bottom: 2rem;
    background-color: #000; /* Zwart achtergrondje voorkomt witflits */
}

/* 2. De Video zelf: Dwingen om te vullen */
.wp-block-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;  /* Forceer breedte */
    height: 100% !important; /* Forceer hoogte */
    border: none;
}
/* =========================================
   SOCIAL BAR IN KEUZE BLOK (Shortcode)
   ========================================= */

/* Wrapper positionering */
.qigo-social-integration {
    position: relative;
    z-index: 50; /* Zorg dat hij BOVEN de afgesneden achtergrond ligt */
    width: 100%;
}

/* De Strip zelf */
.interaction-pod {
    position: relative;
    background-color: #ffffff;
    
    /* Vorm en Positie */
    width: 90%;
    max-width: 800px;
    margin: 0px auto 0 auto; /* 40px afstand van de content erboven */
    padding: 15px 30px;
    
    /* Styling */
    border-radius: 60px;
    box-shadow: 0 15px 35px rgba(26, 83, 92, 0.08); /* Diepe schaduw voor zwevend effect */
    border: none; 
    
    z-index: 50;
    
    /* Zorg dat de tekst netjes in één lijn blijft in deze compacte vorm */
    text-align: left; 
}

.pod-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pod-label {
    font-weight: 700;
    color: var(--kleur-primair);
    font-size: 0.95rem;
}

.star-btn {
    background: none; border: none; font-size: 22px; color: #ccc; cursor: pointer; padding: 0 1px;
}
.star-btn.active-star { color: var(--kleur-accent); } /* JS voegt deze class toe */

.pod-feedback-panel { margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.pod-input { width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-family: inherit;}
.pod-submit-btn { background: var(--kleur-primair); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.9rem;}

.pod-share-row { margin-top: 15px; font-size: 0.85rem; color: #666; display: flex; gap: 8px; align-items: center;}
.share-btn { background: #f5f5f5; border: none; padding: 4px 10px; border-radius: 4px; color: #333; text-decoration: none; cursor: pointer; font-size: 0.8rem;}



/* =========================================
   SHORTCODE: KNOP MET AFBEELDING (OVERLAP)
   ========================================= */

/* De Hoofd Wrapper */
.qigo-btn-overlap-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontaal centreren */
    width: 100%;
    margin: 2rem 0;
    position: relative;
    z-index: 1;
}

/* De Knop binnen deze wrapper */
.qigo-btn-overlap-wrapper .qigo-standalone-knop {
    z-index: 10; /* Zorg dat de knop ALTIJD boven de foto ligt */
    margin: 0;   /* Reset standaard margins */
    
    /* Optioneel: schaduw versterken voor diepte */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

/* De Afbeelding Container */
.qigo-overlap-img-container {
    width: 100%;
    max-width:400px;
    /* De variabele hoogte wordt inline gezet door PHP, fallback hier: */
    min-height: 200px; 
    
    background-color: #fff;
    border-radius: var(--radius-kaart); /* Jouw ronde hoeken (24px) */
    overflow: hidden;
    box-shadow: var(--schaduw-zacht);
    
    /* DE TRUC: Trek de container omhoog */
    /* De knop is ong 50-54px hoog. De helft is ~25px */
    margin-top: -27px; 
    
    position: relative;
    z-index: 1; /* Onder de knop */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Tekst (als die er is) onderin */
}

/* De Afbeelding zelf */
.qigo-overlap-img-container img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    
    /* HIER GEBEURT HET: We gebruiken de variabele, met center als fallback */
    /* De eerste waarde 'center' is horizontaal, de tweede (var) is verticaal */
    object-position: center var(--img-focus, center);
    
    transition: transform 0.5s ease;
    z-index: 0;
}

.qigo-overlap-img-container:hover img {
    transform: scale(1.03);
}

/* Optioneel: Tekst binnen de afbeelding (als link_tekst wordt gebruikt) */
.qigo-overlap-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
    backdrop-filter: blur(5px);
    padding: 20px;
    margin: 100px 20px 20px 20px; /* Ruimte bovenlaten voor de foto */
    border-radius: 16px;
    text-align: center;
}

.qigo-overlap-content .qigo-action-title {
    display: block;
    color: var(--kleur-primair);
    margin-bottom: 5px;
}

/* =========================================
   FAQ ACCORDION (STRUCTURED CONTENT PLUGIN)
   ========================================= */

/* 1. Het Blok (De Container) */
.sc_card {
    background-color: var(--kleur-wit);
    border: 1px solid rgba(0,0,0,0.05) !important; /* Forceer override van plugin */
    border-radius: var(--radius-kaart);
    margin-bottom: 1rem;
    box-shadow: var(--schaduw-zacht);
    overflow: hidden; 
    transition: box-shadow 0.3s ease;
}

.sc_card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* 2. De Vraag (De Klikbare Balk) */
.sc_card_header {
    padding: 1.2rem 1.5rem !important;
    cursor: pointer;
    font-weight: 700;
    color: var(--kleur-primair);
    font-family: var(--font-body);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent; /* Voor soepele transitie */
    
    /* Zorg dat de titel altijd boven de inhoud ligt */
    background-color: #fff;
    z-index: 2;
}

/* Verwijder eventuele standaard icoontjes van de plugin zelf */
.sc_card_header:before, 
.sc_card_header img {
    display: none !important;
}

/* 3. Het Pijltje (Jouw FontAwesome Icon) */
.sc_card_header::after {
    /* De Unicode voor Chevron Down */
    content: '\f078'; 
    
    /* FIX: FontAwesome definities */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif;
    font-weight: 900; 
    
    color: var(--kleur-accent);
    font-size: 0.9rem;
    transition: transform 0.3s ease;
    margin-left: 15px; 
}

/* INTERACTIE (Let op: dit hangt af van hoe de plugin de 'open' status aangeeft) */
/* De plugin voegt vaak een class toe als hij open gaat. */

/* Als hij open is: Draai het pijltje */
/* Vervang '.sc_card_active' eventueel als de plugin een andere naam gebruikt */
.sc_card:not(.sc_card_collapsed) .sc_card_header::after {
    transform: rotate(180deg);
}

/* Als hij open is: Randje onder de titel */
.sc_card:not(.sc_card_collapsed) .sc_card_header {
    border-bottom: 1px solid #f0f0f0;
    background-color: #fafafa;
}

/* 4. Het Antwoord (De Inhoud) */
.sc_card_text {
    /* Padding aan de zijkanten toepassen */
    padding: 1.5rem !important; 
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    
    color: var(--kleur-tekst);
    line-height: 1.6;
    
    /* Zachte animatie */
    animation: fadeInSlide 0.3s ease-out;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   NIEUW: QIGO LINK EXTENSIES (FIXED)
   ========================================= */

/* 1. Het icoon LINKS (De Fix voor "niet zichtbaar") */
.qigo-pre-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 1.1em;
    
    /* Zorg dat deze container niet inklapt */
    flex-shrink: 0; 
}

/* BELANGRIJK: Overschrijf de standaard regel die alle i's verbergt */
.qigo-text-link .qigo-pre-icon i {
    max-width: none !important; /* Reset de 0px breedte */
    opacity: 1 !important;      /* Reset de onzichtbaarheid */
    margin: 0 !important;
    transform: none !important; /* Geen schuif effect */
    display: inline-block;
}

/* 2. De MODUS: Reveal (Knop="ja") */

/* In rust: Alleen het icoon is zichtbaar, tekst is weg */
.qigo-text-link.qigo-text-link--reveal .qigo-link-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    
    display: inline-block; /* Nodig voor breedte animatie */
    vertical-align: bottom;
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* In rust: Het pijltje rechts mag OOK weg blijven (standaard gedrag), 
   maar het linker icoon moet zichtbaar blijven */

/* 3. HOVER STATUS (Magic Reveal) */

/* Tekst schuift open */
.qigo-text-link.qigo-text-link--reveal:hover .qigo-link-text {
    max-width: 250px; /* Genoeg ruimte geven */
    opacity: 1;
    margin-left: 5px;
}

/* Het linker icoon krijgt een kleurtje bij hover */
.qigo-text-link:hover .qigo-pre-icon {
    color: var(--kleur-accent);
    transform: scale(1.1); /* Klein plop effectje */
}

/* FIX: Lijntje onderaan */
/* In reveal mode, geen lijn in rust (want het is alleen een icoon) */
.qigo-text-link.qigo-text-link--reveal {
    border-bottom-color: transparent; 
}
/* Bij hover verschijnt de lijn onder de tekst */
.qigo-text-link.qigo-text-link--reveal:hover {
    border-bottom-color: var(--kleur-accent);
}

/* =========================================
   SEO AUTO-LINKER STYLING 
   ========================================= */

/* SEO Link Styling: Zo minimalistisch mogelijk (amper zichtbaar) */
.qigo-seo-link {
    color: inherit; /* Neemt exact de kleur van de omliggende tekst aan */
    text-decoration: underline; 
    text-decoration-style: dotted; /* Lichte, gestippelde lijn eronder */
    text-decoration-color: rgba(0, 0, 0, 0.2); /* Zeer lichte transparante kleur */
    text-underline-offset: 3px;
    font-weight: normal;
    transition: text-decoration-color 0.2s ease;
}

.qigo-seo-link:hover {
    text-decoration-color: inherit; /* Bij hover wordt het stippellijntje iets donkerder/zichtbaarder */
}

/* =========================================
   POST TAGS (Collapsible UX)
   ========================================= */

/* De Wrapper voor de uitklap-functionaliteit */
.qigo-tags-accordion {
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: left; /* Forceer altijd links, ongeacht de open-status */
}

/* De knop (Summary) zelf, verwijdert de standaard browser 'driehoek' */
.qigo-tags-accordion summary {
    list-style: none; /* Verwijdert driehoek in moderne browsers */
    cursor: pointer;
    display: inline-flex; /* Zorgt dat hij niet per se 100% breedte pakt */
    user-select: none;
}
.qigo-tags-accordion summary::-webkit-details-marker {
    display: none; /* Verwijdert driehoek in Safari */
}

/* Draai het icoontje als hij open is */
.qigo-tags-accordion[open] summary .qigo-tag-arrow i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.qigo-tags-accordion summary .qigo-tag-arrow i {
    transition: transform 0.3s ease;
}

/* Inhoud van het uitklapmenu */
.qigo-tags-accordion-content {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Forceer links uitlijnen op de pills */
    gap: 8px; /* Dichter op elkaar voor de kleine pills */
    padding-left: 5px; /* Iets inspringen onder de knop */
}

/* De minimale, rustige styling voor de tags zelf */
.qigo-tag-pill--minimal {
    background-color: #f5f7f9; /* Heel licht grijs/blauw */
    color: var(--kleur-primair) !important;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
}

.qigo-tag-pill--minimal:hover {
    background-color: var(--kleur-wit);
    border-color: var(--kleur-primair);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}