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

/*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: #f9f9f9; /* Heel lichtgrijs, bijna wit */
    border-top: 1px solid #eee; /* Subtiele scheidingslijn */
    padding: 30px 20px;
    margin-top: auto; /* Duwt footer naar beneden als pagina kort is */
    text-align: center;
    font-size: 0.9rem;
    color: #888; /* Zachte tekstkleur */
}

.footer-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Navigatie Links */
.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Breekt netjes af op mobiel */
    gap: 10px;
}

.footer-nav a {
    color: var(--kleur-tekst); /* Je standaard donkere tekstkleur */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--kleur-primair); /* Je primaire blauw/groen */
    text-decoration: underline;
}

.footer-separator {
    color: #ccc;
    font-size: 0.8em;
}

/* Copyright regel */
.footer-copyright {
    font-size: 0.8rem;
    color: #aaa;
}

/* Mobiele aanpassing: Links onder elkaar of in 2 regels */
@media (max-width: 600px) {
    .site-footer {
        padding-bottom: 90px; /* EXTRA RUIMTE: Zodat footer niet achter de 'Floating Dock' verdwijnt! */
    }
    
    .footer-nav {
        gap: 15px; /* Iets meer ruimte voor vingers */
    }
    
    .footer-separator {
        display: none; /* Verberg puntjes op mobiel, links staan ruimer */
    }
}

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