/* 1. De CSS Reset: Verwijder de standaard ruimte van de browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Zorgt dat padding de breedte niet verpest */
}
.logo-img {
    width: 50px;       /* Of de gewenste breedte */
    height: 50px;      /* Zorg dat deze gelijk is aan de breedte */
    object-fit: contain; /* Dit zorgt dat de cirkel zijn vorm behoudt zonder te rekken */
    background: transparent;
}


/* 2. Maak de Navigatiebalk paginabreed */
header, .navbar {
    width: 100%;
    position: fixed; /* Of absolute, afhankelijk van je ontwerp */
    top: 0;
    left: 0;
    z-index: 2000;
}
header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

nav.container {
    display: flex;
    align-items: center;
}

/* Taal Dropdown (Helemaal links) */
.language-left {
    margin-right: 2rem;
}
.category-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 20px 0;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.category-bar::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

.filter-btn {
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid #eee;
    background: white;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn.active {
    background: var(--bright-green);
    color: white;
    border-color: var(--bright-green);
}

.dropbtn {
    background-color: var(--light-bg);
    color: var(--dark-text);
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.dropbtn:hover {
    background-color: #EEF5EE;
    border-color: var(--bright-green);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--white);
    min-width: 170px;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-top: 8px;
    overflow: hidden;
    z-index: 10;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--light-bg);
    color: var(--bright-green);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Logo */
.logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dark-text);
    letter-spacing: -1px;
    user-select: none;
}

.logo span {
    color: var(--bright-green);
}

/* Rechtergroep (Links + Profiel) */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-left: auto; /* Push alles naar de rechterkant */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 1.8rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--medium-text);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
    position: relative;
}

/* Hover effect voor nav links */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--bright-green);
    transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--bright-green);
}

/* Profiel Icoon */
.profile-icon {
    color: var(--dark-text);
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.profile-icon:hover {
    color: var(--bright-green);
    transform: scale(1.1);
}

/* --- 2. FOOTER --- */

footer {
    background-color: var(--white);
    border-top: 1px solid var(--border-color);
    padding: 40px 0;
    text-align: center;
    margin-top: auto; /* Handig voor 'sticky footers' */

}

footer p {
    color: #99A199;
    font-size: 0.9rem;
    margin: 0;
}
/* 1. Maak van de body een flex-container die de hele schermhoogte vult */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* vh = viewport height (100% van het scherm) */
    margin: 0;         /* Weg met die witte randen! */
}

/* 2. Zorg dat de main alle overgebleven ruimte 'opvreet' */
main {
    flex-grow: 1;
}

/* 3. Je footer blijft nu automatisch aan de bodem plakken */
footer {
    background-color: var(--white);
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    width: 100%;
}

/* De wrapper */
.dropdown {
    position: relative;
    display: inline-block;
}

/* De knop: kleiner en rond (pill-vorm) */
.dropbtn {
    background-color: white;
    color: #4CAF50;
    padding: 6px 16px; /* Kleiner gemaakt voor nav-bar look */
    font-size: 14px;   /* Iets kleiner font */
    font-weight: 600;
    border: 2px solid #4CAF50;
    border-radius: 20px; /* Mooie ronde vorm */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow {
    font-size: 10px;
    transition: transform 0.3s;
}
.arrow2 {
    font-size: 10px;
    transition: transform 0.3s;
    padding-left: 7rem;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

.dropbtn:hover {
    background-color: #f0fff0;
}

/* De dropdown inhoud */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 100;
    border-radius: 12px;

    /* DE FIX: Plaats hem iets hoger zodat hij de knop overlapt */
    top: calc(100% - 2px);
    left: 0;
    padding: 8px 0;
}

/* Extra onzichtbaar blokje om de hover-brug te garanderen */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f0fff0;
    color: #4CAF50;
}

/* Tonen bij hover op de container */
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content {
    /* ... je andere styles ... */
    top: 90%; /* Zet hem iets hoger zodat hij de knop overlapt */
    padding-top: 10px; /* Maak een onzichtbaar gebied voor je muis */
}
/* De hoofdcontainer die alles bij elkaar houdt */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Compacte ronde knop */
.dropbtn {
    background-color: white;
    color: #333;
    padding: 6px 14px; /* Nav-bar formaat */
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #4CAF50;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* De dropdown inhoud */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 100;
    border-radius: 12px;
    top: 100%; /* Direct onder de knop */
    left: 0;
    margin-top: 0;
    padding: 8px 0;
}

/* DE CRUCIALE FIX: De onzichtbare brug */
.dropdown-content::before {
    content: "";
    position: absolute;
    top: -15px; /* Dit vult het gat boven het menu op */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

/* Zorg dat het menu open blijft zolang je in de .dropdown container bent */
.dropdown:hover .dropdown-content {
    display: block;
}
/* 1. De Navigatie/Header (De 'vader' van de dropdown) */
/* Deze MOET een hogere z-index hebben dan de Hero */
header, .navbar, nav {
    position: relative; /* Noodzakelijk voor z-index */
    z-index: 2000 !important;
    overflow: visible !important;
}

/* 2. De Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 2001; /* Hoger dan de header */
}

/* 3. De Dropdown Content (De talenlijst) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Direct onder de knop */
    left: 0;
    z-index: 9999 !important;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-radius: 12px;
}
/* Verberg hamburger standaard op desktop */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--dark-text);
    border-radius: 3px;
    transition: 0.3s;
}

/* --- Desktop Fix --- */

nav.container {
    display: flex;
    align-items: center;
    /* Verander flex-start naar space-between voor een goede verdeling */
    justify-content: space-between;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 1.8rem;
    /* Duw de links naar rechts, weg van het logo */
    margin-left: auto;
    margin-right: 2.5rem;
}

/* Verberg de mobiele profiel-link op desktop */
.nav-profile-mobile {
    display: none !important;
}
/* --- 3. RESPONSIVE NAV --- */


/* Het icoontje naast de links op desktop */
.desktop-profile {
    display: flex;
    align-items: center;
    margin-right: 10px; /* Ruimte tussen icoon en hamburger (als die er is) */
}

/* Verberg de tekst-link die in de mobiele lijst staat */
.nav-profile-mobile {
    display: none !important;
}

/* --- Desktop Layout (Basis) --- */
nav.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Verdeelt links en rechts */
    position: relative; /* Cruciaal voor het centreren van het logo */
    height: 70px;
}

/* Logo: Altijd in het midden, ongeacht de rest */
.logo {
    margin: 0 !important;
    z-index: 10;
}

/* Rechtergroep: Duwt alles naar de rechterkant */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

/* Verberg mobiele elementen op desktop */
.nav-profile-mobile, .hamburger {
    display: none !important;
}

.nav-right-group {
    margin-left: auto; /* De magneet die alles naar rechts duwt */
    display: flex;
    align-items: center;
    gap: 25px; /* Ruimte tussen je menu-links en het profiel-icoon */
}

/* --- Desktop Navigatie --- */

nav.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo links, Menu rechts */
    height: 80px;
    position: relative;
}

/* 1. Verwijder de absolute positie van het logo */
.logo {
    position: static; /* Zet hem terug in de normale volgorde */
    transform: none;
    margin-left: 1rem;
    font-size: 1.6rem;
}

/* 2. Groepeer taal en logo aan de linkerkant */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 3. Lijn de links en het icoon rechts uit */
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2rem; /* Ruimte tussen de woorden en het icoon */
}

/* Styling voor het profiel icoon in de lijst */
.desktop-profile-li {
    display: flex;
    align-items: center;
}

.desktop-profile-li .profile-icon {
    display: flex;
    color: var(--dark-text);
    transition: 0.2s;
}

/* Verberg mobiele elementen op desktop */
.nav-profile-mobile, .hamburger {
    display: none !important;
}

/* 1. De Navigatie Container */
nav.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Houdt links en rechts maximaal uit elkaar */
    padding: 0 20px; /* Pas dit aan naar 0 als hij écht tegen de rand moet plakken */
    height: 80px;
    width: 100%;
}

/* 2. De Linkerkant (Talen + Logo) */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 10px; /* DIT IS DE RUIMTE: Vergroot dit voor meer plek tussen taal en logo */
}

/* 3. De Rechterkant (Menu + Profiel) */
.nav-right-group {
    display: flex;
    align-items: center;
    margin-left: auto; /* Extra zekerheid dat alles naar rechts wordt geduwd */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.5rem; /* Ruimte tussen de linkjes onderling */
    margin: 0;
    padding: 0;
}

/* Zorg dat de profiel-li geen extra padding aan de rechterkant heeft */
.desktop-profile-li {
    display: flex;
    align-items: center;
    padding-right: 0;
}

/* De hoofdcontainer die alles verdeelt */
nav.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Houdt links en rechts uit elkaar */
    padding: 0 20px;
    height: 80px;
}

/* De linker groep: Talen + Logo */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 20px; /* DIT IS DE FIX: Precies 20px tussen taal en logo */
}

/* Zorg dat het logo geen gekke margins meer heeft */
.logo {
    position: static; /* Zet hem terug in de normale rij */
    transform: none;
    margin: 0;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}

/* De rechter groep: Menu + Profiel */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: 2.5rem; /* Ruimte tussen de links onderling */
    margin-left: auto; /* Duwt alles extra naar rechts */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
}
/* --- DE NIEUWE NAVIGATIE BASIS --- */

nav.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Houdt links en rechts uit elkaar */
    height: 80px;
    padding: 0 20px;
    position: relative;
}

/* Groepeer taal en logo aan de linkerkant */
.nav-left-group {
    display: flex;
    align-items: center;
    gap: 20px; /* EXACT 20px tussen vlag en logo */
}

.logo {
    /* Reset alles! */
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
}

/* Groepeer links en profiel aan de rechterkant */
.nav-right-group {
    display: flex;
    align-items: center;
    margin-left: auto; /* Zorgt dat de groep rechts blijft */
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2rem; /* Ruimte tussen Home, Over ons, etc. */
}

/* Zorg dat het profiel-icoon netjes aansluit in de rij */
.desktop-profile-li {
    display: flex;
    align-items: center;
}

/* Verberg mobiele elementen op desktop */
.hamburger, .nav-profile-mobile {
    display: none !important;
}

.nav-profile-desktop {
    display: flex; /* Zichtbaar op desktop */
    align-items: center;
}

.nav-profile-mobile {
    display: none !important; /* Verberg de tekstversie op desktop */
}


/* Container voor alle meldingen */
#notification-container {
    position: fixed;
    top: 150px; /* Net onder de navigatiebalk van 80px */
    left: 50%;
    transform: translateX(-50%); /* Zorgt voor de horizontale centrering */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center; /* Zorgt dat de tekstblokjes zelf ook gecentreerd zijn */
    gap: 12px;
    width: 100%; /* Nodig om binnen de 100% te kunnen centreren */
    pointer-events: none; /* Zorgt dat je nog steeds op knoppen onder de container kunt klikken */
}

.notification {
    pointer-events: auto; /* Zorgt dat je de melding wel kunt wegklikken indien nodig */
    min-width: 320px;
    max-width: 90%;
    padding: 14px 24px;
    border-radius: 50px; /* Een moderne 'pill' vorm */
    background: white;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Tekst in het midden van de pill */

    /* Animatie: Begin iets hoger en onzichtbaar */
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #eee;
}

.notification.show {
    opacity: 1;
    transform: translateY(0); /* Schuif naar de eindpositie */
}

/* Subtiele kleuraccenten aan de onderkant in plaats van de zijkant */
.notification.success { border-bottom: 3px solid #2ecc71; }
.notification.error { border-bottom: 3px solid #e74c3c; }
.notification.info { border-bottom: 3px solid #3498db; }
.logo {
    text-decoration: none; /* Verwijdert de onderstreping */
    color: inherit;        /* Zorgt dat "Bright" zwart blijft (of je ingestelde kleur) */
    display: inline-block; /* Zorgt dat de link goed klikbaar is */
}

.logo:hover {
    opacity: 0.9;          /* Subtiele feedback als je eroverheen hovert */
}

/* Zorg dat de span (News) zijn eigen kleur behoudt */
.logo span {
    color: var(--bright-green); /* Of de kleur die je eerder had ingesteld */
}
.main-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    padding: 80px 0 30px;
    margin-top: 100px;
    color: #444;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 60px;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.footer-logo span { color: var(--bright-green); }

.footer-about p {
    line-height: 1.6;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

/* De 'No Frameworks' Badge */
.framework-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    margin-top: 2rem;
    font-weight: 600;
    border: 1px solid #eee;
    color: #888;
}

.footer-links h4, .footer-socials h4 {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #111;
}

.footer-links ul { list-style: none; padding: 0; }
.footer-links ul li { margin-bottom: 12px; }
.footer-links ul li a {
    text-decoration: none;
    color: #666;
    transition: 0.3s;
}

.footer-links ul li a:hover { color: var(--bright-green); padding-left: 5px; }

.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-btn {
    width: 45px;
    height: 45px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-btn:hover {
    background: var(--bright-green);
    color: white;
    transform: translateY(-5px);
    border-color: var(--bright-green);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
    font-size: 0.85rem;
    color: #aaa;
}

html, body {
    height: 100%;
    margin: 0;
}

/* 2. Maak van de body een flex-container die verticaal stapelt */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Pak minimaal de volledige hoogte van de viewport */
}

/* 3. De 'magie': duw de footer naar de onderkant */
.main-footer {
    margin-top: auto;
    width: 100%;
}
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .footer-socials .social-icons { justify-content: center; }
    .framework-badge { justify-content: center; }
}
/* --- MOBIEL (Alleen voor telefoons) --- */
@media (max-width: 768px) {
    .logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .nav-links {
        display: none; /* Jouw bestaande mobiele menu logica */
    }
    .hamburger {
        display: flex !important;
    }
}
@media (max-width: 768px) {
    /* Het menu dat uitklapt */
    .nav-links {
        display: none; /* Standaard uit */
        flex-direction: column !important; /* Dwing alles onder elkaar */
        position: absolute;
        top: 70px; /* Moet gelijk zijn aan de hoogte van je header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 40px 0; /* Ruimte aan boven- en onderkant */
        gap: 25px; /* Gelijke ruimte tussen elk menu-item */
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 999;
        list-style: none;
        margin: 0;
    }

    /* Zorg dat de linkjes zelf ook mooi gecentreerd zijn */
    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.2rem; /* Iets groter op mobiel voor dikke vingers */
        font-weight: 700;
        display: block;
        width: 100%;
    }

    /* --- HET PROFIEL GEDEELTE --- */
    .nav-profile-mobile {
        display: flex !important; /* Zorg dat hij ECHT zichtbaar is op mobiel */
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        padding-top: 25px;
        border-top: 1px solid #eee; /* Scheidingslijn tussen menu en profiel */
    }

    .profile-link-text {
        color: var(--bright-green) !important;
        display: flex;
        align-items: center;
        gap: 10px;
    }
}
/* --- Mobiele Instellingen (< 768px) --- */
@media (max-width: 768px) {
    .nav-profile-desktop {
        display: none !important; /* Verberg het losse icoontje in het menu */
    }

    .nav-profile-mobile {
        display: flex !important; /* Toon de tekstversie 'Mijn Profiel' */
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
}
/* --- Mobiele Media Query --- */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Verberg menu standaard */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .nav-links.active { display: flex !important; }

    /* Verberg het icoon op mobiel, toon de tekst "Mijn Profiel" */
    .desktop-profile-li { display: none !important; }
    .nav-profile-mobile { display: block !important; border-top: 1px solid #eee; margin-top: 10px; }

    .hamburger { display: flex !important; flex-direction: column; gap: 5px; }
}

@media (max-width: 768px) {
    .nav-right-group {
        gap: 1rem;
    }

    .language-left {
        margin-right: 1rem;
    }
}
@media (max-width: 768px) {
    nav.container {
        justify-content: space-between;
        position: relative; /* Nodig voor centreren logo */
        padding: 0 15px;
    }

    /* Logo Perfect in het Midden */
    .logo {
        margin: 0;
        font-size: 1.2rem;
        z-index: 10;
    }
    .nav-logo {
        width: 11rem;
        height: auto;
    }

    /* Talenkiezer Links */
    .language-picker {
        z-index: 11;
    }

    .dropbtn { padding: 6px 10px; }

    /* Hamburger & Profiel Rechts */
    .nav-right-group {
        z-index: 11;
    }

    .hamburger {
        margin-right: 3rem;
        display: flex; }

    /* Het uitklapmenu */
    .nav-links {
        display: none; /* Standaard dicht */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        gap: 15px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        text-align: center;
    }

    .nav-links.active {
        display: flex; /* Open als active class aanwezig is */
    }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }
}
@media (max-width: 768px) {
    nav.container {
        justify-content: space-between;
        position: relative;
        height: 70px; /* Vaste hoogte voor de nav */
    }

    /* Het menu dat uitklapt */
    .nav-links {
        display: none; /* Standaard uit */
        position: absolute;
        top: 70px; /* Precies onder de nav bar */
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 1000;
        border-top: 1px solid #eee;
    }

    /* Wanneer het menu 'active' is, tonen we het */
    .nav-links.active {
        display: flex !important;
    }

    /* Styling voor de profielknop binnen de lijst */
    .nav-profile-mobile {
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #eee;
        width: 100%;
    }

    .profile-link-text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: var(--bright-green) !important;
    }
}
/* --- Mobiele Media Query Aanpassing --- */

@media (max-width: 768px) {
    .nav-links {
        margin-left: 0; /* Reset de margin op mobiel */
        margin-right: 0;
        /* Je bestaande mobiele styles blijven hier staan... */
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
    }

    .nav-links.active {
        display: flex !important;
    }

    /* Toon de profiel-link ALLEEN op mobiel */
    .nav-profile-mobile {
        display: block !important;
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
}
/* --- Desktop Instellingen --- */
/* --- Mobiele Instellingen --- */

@media (max-width: 768px) {
    /* Verberg het losse icoontje op mobiel */
    .desktop-profile {
        display: none !important;
    }

    /* Toon de tekst-link IN het hamburger menu */
    .nav-profile-mobile {
        display: block !important;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }
}

/* --- Mobiele Layout (< 768px) --- */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Verberg standaard op mobiel */
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow-md);
    }

    /* Toon menu bij klik */
    .nav-links.active {
        display: flex !important;
    }

    /* Toon hamburger en mobiel profiel */
    .hamburger {
        display: flex !important;
    }

    .nav-profile-mobile {
        display: block !important;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    /* Verberg desktop profiel-icoon op mobiel */
    .desktop-profile {
        display: none !important;
    }
}