/* ==========================================================================
   QIGO WEBSITE - MAIN STYLESHEET (Definitieve Versie met alle aanpassingen)
   ========================================================================== */

/* --- 1. Huisstijl & Algemene Instellingen --- */

/* poppins-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* comfortaa-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/comfortaa-v47-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fredoka-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fredoka-v17-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --font-body: 'Poppins', sans-serif;
    --font-titel: 'Fredoka', sans-serif;
    --font-subtitel: 'Comfortaa', sans-serif;
    --kleur-achtergrond: #F0F8FF;
    --kleur-tekst: #333333;
    --kleur-wit: #FFFFFF;
    --kleur-primair: #1A535C;
    --kleur-primair-hover: #4A00E0;
    --kleur-accent: #FFC400;
    --kleur-accent2: #82a6bb;
    --radius-groot: 50px;
    --radius-klein: 20px;
    --schaduw: 0 8px 25px rgba(0, 0, 0, 0.1);
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    line-height: 1.6;

    width: 100%;
    overflow-x: clip;
}

.body--no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed;
    /* Dit is de nucleaire optie tegen background-scroll */
    width: 100%;
}

/* Algemene stijl voor alle koppen */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.modal__title {

    font-weight: 400;
    /* <--- HIERMEE DWING JE DE REGULAR VERSIE AF */
}

/* --- START NIEUW CODE BLOK --- */

/**
 * Accessibility & SEO: Visually hidden but available to screen readers and crawlers.
 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * Utility Class voor Golvende Onderstreping
 * * Gebruik: <h2 class="titel-golf">Titel</h2>
 * Standaardkleur (fallback) is wit (#ffffff), maar we gebruiken 
 * de CSS variabele --golf-kleur voor flexibiliteit.
 */
.titel-lijn {
    /* * Hier definiëren we de standaardkleur. 
     * Deze kan later overschreven worden.
     */
    --golf-kleur: #ffffff;

    display: inline-block;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 0;

    /* * BELANGRIJKE AANPASSING: 
     * De 'stroke' in de SVG is vervangen door 'CURRENTCOLOR'.
     * Dit zorgt ervoor dat de SVG de 'color' property van het element overneemt.
     */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 Q25,0 50,5 T100,5' stroke='CURRENTCOLOR' stroke-width='2.5' fill='none' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 8px;

    /* * We zetten de 'color' van het element op de waarde van onze variabele.
     * De SVG (met CURRENTCOLOR) pakt deze kleur nu automatisch op.
     */
    color: var(--golf-kleur);
}

/**
 * Omdat we de 'color' property van .titel-golf gebruiken voor de *lijn*, 
 * moeten we de tekst *binnen* de header zijn eigen (normale) kleur teruggeven.
 * * We lossen dit op door de tekst in een <span> te plaatsen.
 */
.titel-lijn span {
    /* 'inherit' pakt de normale tekstkleur van de pagina (parent) */
    color: inherit;
}

/* --- EINDE NIEUW CODE BLOK --- */

/* --- 2. Component: Header (.site-header) --- */
.site-header {
    position: sticky;
    top: -1px;
    width: 100%;
    padding: 0;
    /* Padding zit nu in de wrapper */
    box-sizing: border-box;
    z-index: 200;
    background-color: transparent;
}

/* DE WRAPPER REGELT NU DE LAYOUT */
.site-header__wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 10px 40px 20px 40px;
    box-sizing: border-box;
}

/* De pseudo-elementen creëren de zichtbare, golvende achtergrond */
.site-header::before,
.site-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: url(#header-wave-bottom);
}

.site-header::before {
    /* Dit is de witte vulling en komt VOOR de lijn */
    background-color: var(--kleur-achtergrond);
    z-index: -1;
}

.site-header::after {
    /* Dit is de donkere lijn en komt ACHTER de vulling */
    background-color: var(--kleur-primair);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.1));
    transform: translateY(3px);
    z-index: -2;
    /* Plaats deze laag verder naar achteren */
}

.site-header__logo {
    height: 50px;
    margin-top: 18px;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 200;
}

.main-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.main-nav__item {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: var(--kleur-tekst);
    font-size: 1.1rem;
    transition: color 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1001;
}

.nav-link:hover {
    color: var(--kleur-primair-hover);
}

.main-nav__link-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    position: relative;
    white-space: nowrap;
}

.main-nav__link-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgba(255, 235, 59, 0.6);
    z-index: -1;
    transform: skewX(-15deg);
    transform-origin: left;
    transition: width 0.35s cubic-bezier(0.6, 0.04, 0.98, 0.34);
}

/* De markeerstift verschijnt nu correct bij hover 
.nav-link:hover .main-nav__link-main::before { width: 110%; }*/



/* Container voor knoppen aan de rechterkant */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Ruimte tussen de login-knop en (op mobiel) de hamburger */
    margin-left: auto;
    /* Duwt de hele groep naar rechts */
    z-index: 250;
}

.site-header__hamburger {
    display: none;
    /* Hamburger is standaard verborgen op desktop */
}

.corner-blob {
    position: absolute;
    top: 100px;
    right: 100px;
    z-index: 210;
    width: 190px;
    height: 190px;
    border-radius: 80% 10% 52% 48% / 10% 98% 41% 56%;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: white;
    box-shadow: var(--schaduw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    box-sizing: border-box;
    visibility: hidden;
}

.corner-blob__title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}

.corner-blob__text {
    margin: 0;
    font-size: 0.9rem;
}

.site-header__account {
    position: relative;
    /* De 'margin-left: auto;' is nu correct verplaatst naar .site-header__actions */
    z-index: 250;
    padding-bottom: 0px;
}

/* In main.css */


/* --- Vervang de bestaande .account-button styling hiermee --- */
.account-button {
    /* 1. Reset de oude knop-stijl */
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
    /* Standaard gewicht, niet vet */
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;

    /* 2. Neem de stijl van de navigatielinks over */
    color: var(--kleur-tekst);

    padding: 2px 8px;
    /* Zelfde als .main-nav__link-main */
    cursor: pointer;

    /* 3. Zorg voor correcte positionering voor het hover-effect */
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
    /* Behoud de kleur-transitie */

    /* Behoud de flex-eigenschappen voor iconen */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 4. Verwijder de specifieke hover-stijl van de oude knop */
.account-button:hover {
    background-color: transparent;
    /* Geen achtergrondverandering */
    transform: none;
    /* Geen beweging */
}

/* 5. Voeg het "markeerstift" hover-effect toe */
.account-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgba(255, 235, 59, 0.6);
    /* Gele markeerstift-kleur */
    z-index: -1;
    transform: skewX(-15deg);
    transform-origin: left;
    transition: width 0.35s cubic-bezier(0.6, 0.04, 0.98, 0.34);
}

/* 6. Activeer het effect bij hover op de container (net als de dropdown) */
.site-header__account:hover .account-button::before {
    width: 110%;
}

.site-header__account:hover .account-button {
    color: var(--kleur-primair-hover);
}

.account-dropdown {
    position: absolute;
    top: 100%;

    left: auto;
    /* Voorkomt conflicten met 'left' positionering */
    right: 0;
    margin-top: 0px;
    background-color: var(--kleur-wit);
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
    min-width: 200px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 260;
}

.site-header__account:hover .account-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.account-dropdown__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--kleur-tekst);
    transition: background-color 0.2s ease;
}

.account-dropdown__link:hover {
    background-color: #f0f2f5;
    color: var(--kleur-primair);
}

.account-dropdown__divider {
    height: 1px;
    background-color: #eee;
    margin: 5px 0;
}

/* --- AANGEPAST: Specifieke styling voor Login Overlay --- */
/* Structuur (position, scroll, flex) komt nu uit modals.css (.overlay) */
#login-overlay {
    /* Specifieke achtergrond voor de login pagina */
    background: radial-gradient(circle at center,
            rgba(255, 223, 0, 0.5),
            rgba(255, 255, 255, 0.99));
    /* Specifieke Z-index als je zeker wilt weten dat login boven alles ligt */
    z-index: 3500;
}


#login-overlay.overlay--visible #login-modal {
    transform: scale(1);
}

.login-modal__title {
    font-family: var(--font-titel);
    font-size: 3rem;
    color: var(--kleur-primair);
    margin-bottom: 1.5rem;
}

.login-modal__google-btn {
    display: flex;
    /* Gebruik flexbox voor perfecte uitlijning */
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: var(--kleur-wit);
    color: var(--kleur-tekst);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    /* Zorgt dat padding binnen de 100% breedte valt */
}

.login-modal__google-btn:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
    transform: translateY(-1px);
}

.login-modal__google-icon {
    width: 20px;
    /* Geef het icoon een vaste breedte */
    height: 20px;
    /* en hoogte */
}

/* --- 8. Component: Notificatie Modal --- */
.notification-modal {
    position: fixed;
    top: 110px;
    /* Precieze positie net onder de header-golf */
    left: 50%;

    /* Gecentreerd en start iets naar boven voor animatie */
    transform: translate(-50%, -20px);

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 50px;
    /* Volledig afgeronde hoeken */
    background-color: var(--kleur-wit);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    /* Zorgt dat het boven alles verschijnt */

    /* AANGEPAST: Breder maken voor betere tekstweergave */
    width: 90%;
    max-width: 450px;

    /* Standaard verborgen */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.notification-modal--visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    /* Breng naar de definitieve positie */
}

.notification-modal__icon {
    font-size: 1.4rem;
}

.notification-modal__text {
    margin: 0;
    font-weight: 600;
    color: var(--kleur-tekst);
}

/* --- Kleurvarianten --- */
.notification-modal--success {
    border: 2px solid #4CAF50;
}

.notification-modal--success .notification-modal__icon {
    color: #4CAF50;
}

.notification-modal--error {
    border: 2px solid #D8000C;
}

.notification-modal--error .notification-modal__icon {
    color: #D8000C;
}

.notification-modal--info {
    border: 2px solid #2196F3;
}

.notification-modal--info .notification-modal__icon {
    color: #2196F3;
}

.notification-modal__actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
    /* Push to right if there is space, but modal is centered so it's fine */
}

.notification-modal__btn {
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-modal__btn--yes {
    background-color: var(--kleur-accent, #FFC400);
    color: var(--kleur-primair, #1A535C);
}

.notification-modal__btn--yes:hover {
    background-color: var(--kleur-accent-hover, #FFD54F);
    transform: translateY(-1px);
}

.notification-modal__btn--no {
    background-color: #f0f0f0;
    color: #666;
}

.notification-modal__btn--no:hover {
    background-color: #e0e0e0;
}

/*VERBORGEN MOBIELE ELEMENTEN --------------------------------- */

/* NIEUW: Verberg de mobiele sluitknop standaard */
.menu-close-area {
    display: none;
}

.main-nav__item--account-mobile {
    display: none;
}

/* Zorg dat de desktop knop altijd getoond wordt (buiten de media query) */
.site-header__account--desktop {
    display: block;
}

/* Verberg de social media balk standaard (op desktop) */
.main-nav__socials {
    display: none;
}



/* --- 9. Algemene Responsive Stijlen (Stap 3) --- */
/* In bestand: main.css */

/* In bestand: main.css */

/* ==================================================================== */
/* | VERVANG DE HELE @media (max-width: 800px) SECTIE MET DEZE CODE    | */
/* ==================================================================== */
@media (max-width: 800px) {
    body {
        padding-top: 90px;
    }

    /* Verberg de blob, die over het menu heen lag */
    .corner-blob {
        display: none;
    }

    .site-header__account--desktop {
        display: none;
    }

    .menu-background-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        /* Plaatst het achter de menu-items */
        display: none;
        /* Standaard verborgen */
    }

    /* Toon de overlay alleen als het menu open is */
    .site-header--menu-open .menu-background-overlay {
        display: block;
    }

    /* 1. Verberg de desktop-knop en toon de mobiele knop. */
    .site-header__account--desktop {
        display: none !important;
        /* Verberg de knop met de nieuwe class */
    }

    .main-nav__item--account-mobile {
        display: list-item;
        /* Toon de mobiele knop in de lijst */
    }

    /* 2. Style de mobiele knop en lijn de inhoud correct uit. */
    .main-nav__item--account-mobile>.nav-link {
        justify-content: space-between;
        /* Houdt de pijl rechts */
        width: 100%;
    }

    .main-nav__item--account-mobile .main-nav__link-main {
        justify-content: flex-start;
        /* Lijn icoon en tekst links uit */
    }

    /* 3. Lijn de submenu-items correct links uit. */
    .main-nav__item--account-mobile .dropdown__link {
        justify-content: flex-start;
        /* Lijn de inhoud links uit */
        gap: 12px;
    }

    /* --- 1. DE HEADER (de "liftkooi") --- */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 500;
        height: 90px;
        overflow: hidden;
        transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 0;
        /* Padding wordt door de wrapper geregeld */

    }

    /* --- 2. DE WRAPPER --- */
    /* In gesloten staat gedraagt de wrapper zich als een horizontale balk */
    .site-header__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        box-sizing: border-box;
        width: 100%;
        height: 90px;
        /* Geef een vaste hoogte in gesloten staat */
    }

    /* --- 3. DE ELEMENTEN IN GESLOTEN STAAT --- */
    /* Verberg de desktop-navigatie, de inlogknop en de sluit-knop */
    .site-header__nav,
    .site-header__account,
    .menu-close-area {
        display: none;
    }

    /* Toon de hamburgerknop */
    .site-header__hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .site-header__hamburger span {
        width: 100%;
        height: 3px;
        background-color: var(--kleur-tekst);
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    .site-header__actions {
        /* Geen speciale positionering meer nodig, flexbox regelt dit */
        position: static;
    }

    /* --- 4. DE OPENGEKLAPTE STAAT --- */
    .site-header--menu-open .nav-link:hover .main-nav__link-main::before,
    .site-header--menu-open .main-nav__item.is-active>.nav-link .main-nav__link-main::before {
        width: 110%;
    }

    .site-header--menu-open {
        height: 100vh;
        height: 100svh;
        background-color: rgba(0, 0, 0, 0.6);
        /* Gebruikt de primaire kleur met 80% dekking */
        transition: background-color 0.4s ease, height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        /* De hoogte-animatie start direct (duur: 0.4s) */
        /* De achtergrondkleur-animatie start pas na 0.15s (duur: 0.3s) */
        transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
            background-color 0.3s ease 0.15s;

    }

    /* ============================================= */
    /* | NIEUW: Reset van desktop-specifieke stijlen | */
    /* ============================================= */
    .site-header__nav,
    .main-nav__list,
    .main-nav__item,
    .main-nav__dropdown,
    .dropdown__content {
        /* Reset layout en positionering */
        position: static;
        display: block;
        flex-direction: initial;
        gap: initial;

        /* Reset visuele effecten */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: none;
        box-shadow: none;
        clip-path: none;
        transform: none;
        transition: none;

        /* Reset afmetingen en marges */
        min-width: auto;
        margin: 0;
        padding: 0;
    }

    /* Reset de pseudo-elementen van de dropdown */
    .dropdown__content::before {
        display: none;
    }

    .site-header--menu-open .main-nav__item:hover~.main-nav__item {
        transform: none;
        /* Verwijder het opzij schuiven */
    }




    /* De wrapper wordt een verticale container die alles positioneert */
    .site-header--menu-open .site-header__wrapper {
        flex-direction: column;
        align-items: stretch;
        /* NIEUW: Lijn alles bovenaan uit */
        justify-content: flex-start;
        /* space-between voor login onder */
        height: 100%;
        padding: 15px 20px 100px 20px;
    }

    /* Toon de navigatie en inlogknop in het open menu */
    .site-header--menu-open .site-header__nav,
    .site-header--menu-open .site-header__account {
        display: block;
    }

    .site-header--menu-open .site-header__logo-link {
        position: absolute;
        top: 20px;
        left: 20px;
    }

    .site-header__nav {
        display: none;
    }

    /* Toon de navigatie alleen als het menu open is */
    .site-header--menu-open .site-header__nav {
        display: flex;
        /* Maakt het een flex-container */
        flex-direction: column;
        /* Stapelt de menulijst en social balk verticaal */
        flex-grow: 1;
        /* DIT IS CRUCIAAL: laat de nav-container groeien */
        overflow: hidden;
        /* Voorkomt dat elementen eruit 'lekken' */
        padding-top: 65px;
        /* Behoudt de ruimte onder het logo */
        align-items: stretch;
        /* Dwingt de kind-elementen (menu en socials) om de volledige breedte te gebruiken */
    }

    .site-header--menu-open .site-header__actions {
        position: absolute;
        top: 15px;
        right: 20px;
    }

    .site-header--menu-open .main-nav__list {
        flex-grow: 1;
        /* Laat de lijst groeien om de ruimte te vullen */
        overflow-y: auto;
        /* Maakt ALLEEN DEZE LIJST scrollbaar indien nodig */
        padding-bottom: 20px;
        /* Voegt wat ademruimte toe aan de onderkant van de lijst */
        flex-direction: column;
        /* Zorgt dat de <li>'s verticaal blijven */
        scrollbar-width: none;
        /* Voor Firefox */
        -ms-overflow-style: none;
        /* Voor Internet Explorer en Edge */
    }

    /* Voor Webkit-browsers zoals Chrome, Safari, etc. */
    .site-header--menu-open .main-nav__list::-webkit-scrollbar {
        display: none;
    }


    .site-header--menu-open .nav-link {
        padding: 15px 0;
        color: var(--kleur-tekst);
        font-size: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .main-nav__list>.main-nav__item:last-child>.nav-link {
        border-bottom: none;
    }

    /* --- NIEUW: Accordion Stijlen --- */
    .main-nav__dropdown {
        /* Verberg het submenu standaard */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;

        /* Verwijder desktop-specifieke stijlen */
        padding: 0 0 0 15px;
        /* Alleen inspringen links */
        margin-top: 0;
        background: none;
        box-shadow: none;
    }

    /* Toon het submenu als het parent-item de class 'is-open' heeft */
    .main-nav__item.is-open>.main-nav__dropdown {
        max-height: 500px;
        margin-top: 10px;
    }

    /* Hamburger-animatie naar 'X' */
    .site-header--menu-open .site-header__hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .site-header--menu-open .site-header__hamburger span:nth-child(2) {
        opacity: 0;
    }

    .site-header--menu-open .site-header__hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }



    /* deze drie css maken de inlogknop neutraal
Reset de account-knop zodat deze als een menu-item oogt */
    .site-header--menu-open .account-button {
        width: 100%;
        background: none;
        box-shadow: none;
        color: var(--kleur-tekst);
        font-size: 1.5rem;
        font-weight: 400;
        padding: 15px 0;
        justify-content: flex-start;
        /* Lijn tekst links uit */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0;
    }

    /* Reset de desktop dropdown stijlen voor de mobiele accordion */
    .site-header--menu-open .account-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 0 0 15px;
        /* Inspringen, net als de andere submenus */
        margin-top: 0;
        min-width: auto;
        border-radius: 0;
    }

    .site-header--menu-open .account-dropdown .account-dropdown__link {
        padding-top: 12px;
        padding-bottom: 12px;

    }

    /* --- NIEUWE CODE START: Styling voor Social Media Knoppen in Mobiel Menu --- */

    /* De container voor de social links */
    .main-nav__socials {
        flex-shrink: 0;
        display: flex;
        justify-content: left;
        gap: 25px;
        padding: 20px 0 120px 0;
        /* Voegt 50px ruimte aan de onderkant toe */
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        /* De 'margin-top: auto' is niet meer nodig en verwijderd */
    }

    /* Standaard niet zichtbaar, alleen in open menu */
    .site-header:not(.site-header--menu-open) .main-nav__socials {
        display: none;
    }


    .site-header--menu-open .menu-close-area {
        display: block;
        /* Maak de knop zichtbaar */
        position: absolute;
        /* Positioneer ten opzichte van de header */
        bottom: 40px;
        /* Afstand van de onderkant */
        left: 50%;
        /* Centreer horizontaal */
        transform: translateX(-50%);
        /* Corrigeer de horizontale centrering */

        /* Styling voor de witte, ronde knop */
        width: 50px;
        height: 50px;
        background-color: var(--kleur-wit);
        border: none;
        border-radius: 50%;
        /* Maakt de knop perfect rond */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        cursor: pointer;

        /* Styling voor het icoon in de knop */
        color: var(--kleur-primair);
        font-size: 1.5rem;
        line-height: 50px;
        /* Centreert het icoon verticaal */
        text-align: center;
        /* Centreert het icoon horizontaal */

        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .site-header--menu-open .menu-close-area:hover {
        transform: translateX(-50%) scale(1.1);
        /* Iets groter bij hover */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }



}

/* --- 11. Hulpprogramma's --- */
body.preload * {
    transition: none !important;
}

.card__header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.card__icon {
    font-size: 2rem;
    color: var(--kleur-primair);
    margin-right: 15px;
}

.card__title {
    margin: 0;
    font-size: 1.4rem;
    color: var(--kleur-primair);
}

/* --- Blob Card Modal Styling (Mobiel Visuals) --- */
/* Structuur (fullscreen, radius) komt nu uit modals.css */
@media (max-width: 767px) {

    /* Blob achtergrond verbergen op klein scherm voor rust */
    .modal-dialog--blob .modal__blob-background {
        display: none;
    }

    /* Content padding aanpassingen voor mobiel */
    .modal-content-container .modal__header {
        padding: 25px 20px 20px 20px;
        text-align: left;
    }

    .modal-dialog--blob .modal__inner-padding {
        padding: 20px;
    }
}

/* ==========================================================================
   SITE FOOTER (Minimalistisch)
   ========================================================================== */

.site-footer {
    width: 100%;
    background-color: var(--kleur-achtergrond);
    padding: 60px 0 0 0;
    /* Restored top padding */
    margin-top: auto;
    position: relative;
    z-index: 10;
}

.footer-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 40px;
    /* Consistent internal padding for full-width content */
}

.footer-content-panel {
    background-color: #f7f9fc;
    border-top: 1px solid rgba(26, 83, 92, 0.12);
    /* Accentuated border */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.01);
    padding: 60px 0 40px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
    width: 100%;
    padding: 0;
    /* Container handles padding now */
}

/* Tab row: tab + socials naast elkaar (desktop) */
.footer-tab-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 0;
    /* Container handles padding now */
}

.footer-tab-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin-bottom: 0;
}

.footer-socials--tab {
    align-self: center;
    padding-bottom: 28px;
    /* Lijn uit met connector hoogte */
    flex-shrink: 0;
}

.footer-brand-tab {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--kleur-primair);
    color: #fff;
    padding: 16px 28px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 12px rgba(26, 83, 92, 0.1);
    max-width: 560px;
    width: 100%;
}

.footer-tab-logo {
    height: 36px;
    width: 36px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-brand-tab p {
    font-family: var(--font-subtitel);
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.55;
    margin: 0;
}

.footer-brand-tab strong {
    color: var(--kleur-accent);
    font-weight: 600;
}

.footer-tab-connector {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--kleur-primair) 0%, rgba(26, 83, 92, 0.08) 50%, transparent 100%);
    margin-bottom: 0;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-title {
    font-family: var(--font-titel);
    font-size: 1.2rem;
    color: var(--kleur-primair);
    margin: 0 0 10px 0;
    font-weight: 500;
}

.footer-col a {
    color: #5a6b7c;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.footer-col a:hover {
    color: var(--kleur-primair);
    transform: translateX(4px);
}

.footer-col--cta p {
    font-size: 0.9rem;
    color: #5a6b7c;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.footer-cta-btn {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
    width: fit-content;
    box-shadow: 0 4px 10px rgba(255, 196, 0, 0.3);
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 196, 0, 0.4);
    background-color: #ffd54f;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0 0 0;
    /* Container handles horizontal padding */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-socials .social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(26, 83, 92, 0.05);
    color: var(--kleur-primair);
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.footer-socials .social-link:hover {
    background-color: var(--kleur-primair);
    color: var(--kleur-wit);
    transform: translateY(-2px);
}

.footer-socials .social-link--share {
    background-color: var(--kleur-accent);
    color: var(--kleur-primair);
    box-shadow: 0 2px 8px rgba(255, 196, 0, 0.4);
}

.footer-socials .social-link--share:hover {
    background-color: #ffd54f;
    color: var(--kleur-primair);
    box-shadow: 0 4px 12px rgba(255, 196, 0, 0.5);
}

.footer-copyright {
    font-size: 0.85rem;
    color: #888;
}

.footer-col-divider {
    border: none;
    border-top: 1px solid rgba(26, 83, 92, 0.1);
    margin: 4px 0 4px 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: var(--kleur-primair);
}

.footer-legal-links span {
    color: #ccc;
}

/* Mobiele aanpassing */
@media (max-width: 600px) {
    .site-footer {
        padding: 50px 0 0px 0;
        /* Restored vertical padding */
    }

    .footer-container {
        padding: 0 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col--cta {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    /* Mobiel: socials boven de tab */
    .footer-tab-row {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 0;
        /* Container handles it */
    }

    .footer-content-panel {
        padding: 40px 0 30px 0;
        /* Horizontal padding handled by internal container */
        border-top: 1px solid rgba(26, 83, 92, 0.1);
    }

    .footer-grid {
        padding: 0;
    }

    .footer-bottom {
        padding: 25px 0 0 0;
    }

    .footer-socials--tab {
        align-self: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 16px;
    }

    .footer-brand-tab {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   NIEUWE HEADER NAVIGATIE (Clean, Mobile First & Robust)
   ========================================================================== */

/* --- 1. Basis Dropdown Stijlen (Mobiel / Accordion Logic) --- */
/* Dit is de standaard staat (mobiel), gebaseerd op max-height animatie */

.main-nav__dropdown {
    display: block;
    /* Altijd aanwezig in DOM voor animatie */
    max-height: 0;
    /* Standaard dichtgeklapt */
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    opacity: 1;
    visibility: visible;
    position: static;
    /* Gewoon in de flow van de lijst */
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.dropdown__content {
    padding: 10px 0 10px 15px;
    /* Inspringen op mobiel */
}

/* De linkjes op mobiel */
.dropdown__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--kleur-tekst);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Button op mobiel gewoon als tekstlink */
.dropdown__link--cta {
    color: var(--kleur-primair);
    font-weight: 700;
}

/* Mobiele pijl styling */
.mobile-only {
    display: inline-block;
    margin-left: auto;
    transition: transform 0.3s;
    font-size: 0.8em;
}

.main-nav__item.is-open .mobile-only {
    transform: rotate(180deg);
}

/* ==========================================================================
   DESKTOP HEADER - DEFINITIEVE VERSIE
   ========================================================================== */
@media (min-width: 801px) {

    .mobile-only {
        display: none;
    }

    /* 1. Het Ankerpunt */
    .main-nav__item {
        position: relative;
    }

    .site-header__nav {
        position: static;
    }

    /* 2. Achtergrond Animatie (Het Gordijn) */
    .site-header::before,
    .site-header::after {
        transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        height: 100%;
    }

    /* AANPASSING PUNT 3: Trigger alleen als er ook echt een dropdown in het item zit */
    /* We gebruiken :has() om te checken of het gehoverde item een .main-nav__dropdown bevat */
    .site-header:has(.main-nav__item:hover .main-nav__dropdown)::before,
    .site-header:has(.main-nav__item:hover .main-nav__dropdown)::after {
        height: 200px !important;
    }

    .main-nav__dropdown {
        max-height: none;
        overflow: visible;
        display: block;
        position: absolute;

        top: 100%;
        left: -30px;
        /* <--- DIT IS DE BOOSDOENER DIE WE STRAKS RESETTEN */

        width: max-content;
        min-width: 300px;
        /* Standaard breedte voor gewone menus */

        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        pointer-events: none;

        padding-top: 15px;
        z-index: 205;

        /* Reset specifieke account-stijlen voor het geval dat */
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    /* De "Brug" voor hover */
    .main-nav__dropdown::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
    }

    /* Hover effect algemeen */
    .main-nav__item:hover .main-nav__dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0px);
    }

    /* 2. DE SPECIFIEKE UITZONDERING VOOR ACCOUNT (De Fix) */
    /* Omdat dit NA de code hierboven staat, wint deze regel */
    .site-header__account .main-nav__dropdown {
        left: auto;
        /* Reset de -30px */
        right: 0;
        /* Plak aan de rechterkant */
        min-width: auto;
        /* Reset de 300px breedte */

        /* Voeg de styling toe die de algemene dropdown niet heeft */
        background-color: var(--kleur-wit);
        box-shadow: var(--schaduw);
        border-radius: var(--radius-klein);
        padding: 5px 0;
        /* Kleinere padding */

        /* Zorg dat de animatie vanuit rechts komt */
        transform-origin: top right;

        /* AANGEPAST: Dit bepaalt hoe laag de balk hangt */
        margin-top: 25px;
        /* Was 10px. Pas aan naar wens (bv. 30px) */
    }

    /* NIEUW: Het 'bruggetje' vergroten zodat het menu niet dichtklapt */
    /* Dit moet minstens even groot zijn als de margin-top hierboven */
    .site-header__account .main-nav__dropdown::before {
        height: 30px;
        /* Iets meer dan de margin-top */
        top: -30px;
        /* Zelfde waarde, maar negatief */
    }

    /* Inhoud van account menu rechts uitlijnen */
    .site-header__account .dropdown__content--horizontal {
        justify-content: flex-end;
        padding: 5px 15px;
    }

    /* Hover State */
    .main-nav__item:hover .main-nav__dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0px);
    }

    /* 4. Inhoud Styling */
    .dropdown__content--horizontal {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        padding: 0 10px;
    }

    /* Linkjes */
    .dropdown__content--horizontal .dropdown__link {
        border-bottom: none;
        padding: 5px 10px;
        white-space: nowrap;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .dropdown__content--horizontal .dropdown__link:hover {
        color: var(--kleur-primair);
        transform: scale(1.05);
    }

    /* Button (CTA) */
    .dropdown__content--horizontal .dropdown__link--cta {
        background-color: var(--kleur-primair);
        color: var(--kleur-wit);
        padding: 10px 20px;
        border-radius: 50px;
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(26, 83, 92, 0.2);
    }

    /* AANPASSING PUNT 1: Hover wordt accentkleur */
    .dropdown__content--horizontal .dropdown__link--cta:hover {
        background-color: var(--kleur-accent);
        /* Geel */
        color: var(--kleur-primair);
        /* Donkere tekst voor leesbaarheid */
        transform: translateY(-2px);
    }

    /* Separator */
    .dropdown__separator {
        display: block;
        width: 1px;
        height: 20px;
        background-color: #e0e0e0;
    }

    /* AANPASSING PUNT 2: Gele streep alleen bij hover, niet bij active */
    .main-nav__link-main {
        position: relative;
        z-index: 1;
        padding: 5px 10px;
    }

    .main-nav__link-main::before {
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        height: 80%;
        width: 0%;
        background-color: rgba(255, 235, 59, 0.7);
        z-index: -1;
        transform: skewX(-15deg);
        transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Alleen :hover triggert nu de streep. De .is-active selector is verwijderd. */
    .main-nav__item:hover .nav-link .main-nav__link-main::before {
        width: 100%;
    }
}

/* ==========================================================================
   FIX: HAMBURGER (Boven) & CHEVRON KNOP (Onder)
   ========================================================================== */
@media (max-width: 800px) {

    /* --- 1. De Hamburger (Kruisje) Rechtsboven --- */
    .site-header--menu-open .site-header__hamburger {
        position: absolute !important;

        /* Positie exact zoals in gesloten staat */
        top: 33px !important;
        right: 20px !important;

        /* Zorg dat hij nergens door weggedrukt wordt */
        margin: 0 !important;
        z-index: 1002 !important;

        /* Reset flex-eigenschappen */
        align-self: auto !important;
        transform: none;
    }

    /* Hamburger animatie behouden */
    .site-header--menu-open .site-header__hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .site-header--menu-open .site-header__hamburger span:nth-child(2) {
        opacity: 0;
    }

    .site-header--menu-open .site-header__hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* --- 2. De Chevron Knop (Pijl omhoog) Onderaan --- */

    /* Verberg hem standaard (als menu dicht is) */
    .menu-close-area {
        display: none;
    }

    /* Toon hem als menu OPEN is */
    .site-header--menu-open .menu-close-area {
        display: flex !important;
        /* Terugbrengen! */

        position: absolute !important;
        bottom: 40px !important;
        /* Ruimte vanaf de onderkant */
        left: 50% !important;
        /* Horizontaal centreren */
        transform: translateX(-50%) !important;
        /* Correctie voor centreren */

        z-index: 1002 !important;

        /* Zorg voor de ronde witte styling */
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

        /* Centreren van het icoontje */
        justify-content: center;
        align-items: center;
        color: var(--kleur-primair);
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* Hover effectje */
    .site-header--menu-open .menu-close-area:hover {
        transform: translateX(-50%) scale(1.1) !important;
    }
}