/* ==========================================================================
   Smart Navigation Styles (Gecentreerd, Kleurrijk & Premium Glows)
   ========================================================================== */

/* De hoofdcontainer van de navigatie */
.main-navigation {
    width: 100%;
    background-color: #0b0c10; /* De diepdonkere achtergrond */
    padding: 14px 20px;
    border-bottom: 1px solid #2a2e38;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* Brengt het menu naar het absolute middelpunt */
    align-items: center;
    position: relative;
    z-index: 999;
}

/* De wrapper die de breedte limiteert */
.nav-wrapper-mobile {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Wordt overschreven op PC naar breder */
    justify-content: center;
}

/* Eén enkele, flexibele lijst voor een perfecte optische balans */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Symmetrische verdeling vanuit het midden */
    gap: 12px;               /* De exacte tussenruimte tussen alle capsules */
    flex-wrap: wrap;         /* Knoppen breken organisch af naar het midden */
    width: 100%;
}

/* ==========================================================================
   Standaard Links (Capsules met Neon-glow en Kleureffecten)
   ========================================================================== */
.nav-link {
    display: inline-block;
    padding: 10px 18px;
    color: #b0b3b8; /* Rustig zachtgrijs */
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background-color: #1f2229; /* Donkergrijze capsule */
    border: 1px solid #2a2e38;
    border-radius: 20px; /* Volledig ronde hoeken */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover-effect: Capsule krijgt goud-paarse gloed */
.nav-link:hover {
    color: #ffffff;
    background-color: #1c1f26;
    border-color: #dfb76c; /* Goud randje */
    box-shadow: 0 4px 12px rgba(223, 183, 108, 0.15), 
                0 2px 6px rgba(162, 57, 202, 0.1); /* Subtiel paars mystiek randje */
    transform: translateY(-1px);
}

.nav-btn-wrapper {
    display: inline-block;
}

/* ==========================================================================
   Speciale Knoppen (Intense Kleurverlopen & 3D Lift)
   ========================================================================== */

/* 1. De Persoonlijk Portaal Knop (Opvallend Emerald/Groen) */
.nav-btn-portal {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Ruimte voor het icoontje */
    padding: 10px 18px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #0ba37f, #008264); /* Premium groene verloopkleur */
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(11, 163, 127, 0.2); /* Zachte groene gloed */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-btn-portal:hover {
    background: linear-gradient(135deg, #0dbe94, #009673); /* Iets feller bij hover */
    transform: translateY(-2px); /* Subtiel lift-effect */
    box-shadow: 0 6px 14px rgba(11, 163, 127, 0.35);
}

/* 2. De Uitloggen Knop (Neon Rood) */
.nav-btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: #ff6b6b; /* Rustig rood */
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background-color: #1f2229;
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-btn-logout:hover {
    background: linear-gradient(135deg, #2c1a1a, #1f2229); /* Donkerrode gloed achtergrond */
    border-color: #e74c3c;
    color: #ff4747; /* Tekst wordt feller rood */
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
    transform: translateY(-1px);
}

/* 3. De Login Knop (Neon Blauw) */
.nav-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: #4dadff; /* Toegankelijk blauw */
    text-decoration: none;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background-color: #1f2229;
    border: 1px solid rgba(77, 173, 255, 0.3);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-btn-login:hover {
    background: linear-gradient(135deg, #162436, #1f2229); /* Donkerblauwe gloed */
    border-color: #4dadff;
    color: #70bfff;
    box-shadow: 0 4px 12px rgba(77, 173, 255, 0.2);
    transform: translateY(-1px);
}

/* ==========================================================================
   Mobile Toggle Button & Dropdown (Responsive Knoppen)
   ========================================================================== */

/* De Hamburgerknop */
.nav-toggle-btn {
    display: none;
    background: linear-gradient(135deg, #1f2229, #13151a);
    border: 1px solid #2a2e38;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.nav-toggle-btn:hover {
    border-color: #dfb76c;
    box-shadow: 0 0 12px rgba(223, 183, 108, 0.25);
}

.nav-toggle-btn i {
    color: #dfb76c;
    font-size: 14px;
}

/* ==========================================================================
   MEDIA QUERY: Mobiele weergave (Schermen onder 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .main-navigation {
        padding: 12px 16px;
        justify-content: flex-end; /* Zet de hamburgerknop strak rechts */
    }

    .nav-toggle-btn {
        display: flex;
    }

    /* Transformeer de wrapper naar een vloeiend mobiel uitklapmenu */
    .nav-wrapper-mobile {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: linear-gradient(180deg, #0b0c10, #13151a);
        border-bottom: 2px solid #2a2e38;
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        
        /* Ruststand: Volledig onzichtbaar gesloten */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                    opacity 0.3s ease,
                    visibility 0.4s;
    }

    /* Geopende status via Javascript `.is-open` */
    .nav-wrapper-mobile.is-open {
        max-height: 550px; /* Ruime max-hoogte voor alle items incl. knoppen */
        opacity: 1;
        visibility: visible;
        border-bottom-color: #dfb76c;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6),
                    0 4px 20px rgba(162, 57, 202, 0.08); /* Paarse gloed onder dropdown */
    }

    /* Menulijst verticaal onder elkaar stapelen */
    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 12px 0;
    }

    .nav-list li {
        width: 100%;
    }

    /* Mobiele links vullen de breedte en schuiven elastisch opzij bij aanraken */
    .nav-link {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #14161d;
        border-radius: 0;
        text-align: left;
    }

    .nav-link:hover {
        background-color: #13151a;
        padding-left: 32px; /* Speels effect naar rechts */
        color: #ffffff;
        box-shadow: none;
        transform: none;
    }

    /* Mobiele wrapper voor de speciale actie-knoppen onderin */
    .nav-btn-wrapper {
        display: block;
        padding: 8px 24px;
        box-sizing: border-box;
    }

    .nav-btn-portal, .nav-btn-login, .nav-btn-logout {
        width: 100%;
        justify-content: center;
        padding: 12px;
        box-sizing: border-box;
        font-size: 14.5px;
        border-radius: 8px; /* Iets strakker vierkant op mobiel */
    }
}

/* ==========================================================================
   MEDIA QUERY: Desktop Menu Verbreding & High-End Glows (PC / Vanaf 769px)
   ========================================================================== */
@media (min-width: 769px) {
    /* Maakt de totale menubalk een stuk breder over het scherm */
    .nav-wrapper-mobile {
        max-width: 1600px; 
        width: 95%;        
    }

    /* Geeft extra ruimte tussen de capsules onderling */
    .nav-list {
        gap: 20px; 
        justify-content: center;
    }

    /* De standaard capsules: Extra breed van binnenuit en luxer afgewerkt */
    .nav-link {
        padding: 12px 32px;    /* Brede, royale opvulling aan de zijkanten */
        font-size: 15px;       
        letter-spacing: 0.4px; /* Rustigere tekstspreiding */
        background-color: #16181f; 
        border-color: #323745;
    }

    /* PC HOVER EFFECTEN */

    /* Standaard links: Goud-paarse neon-glow en subtiele 3D vergroting */
    .nav-link:hover {
        background-color: #1c1f26;
        border-color: #dfb76c; 
        box-shadow: 0 6px 16px rgba(223, 183, 108, 0.2), 
                    0 0 20px rgba(162, 57, 202, 0.15);
        transform: translateY(-2px) scale(1.03); /* Lift omhoog + lichte zoom */
    }

    /* Brede padding synchroniseren naar alle speciale actie-knoppen */
    .nav-btn-portal, 
    .nav-btn-login, 
    .nav-btn-logout {
        padding: 12px 32px;
        font-size: 15px;
    }

    /* Persoonlijk Portaal (Emerald Groen): Intense 3D-glow */
    .nav-btn-portal:hover {
        background: linear-gradient(135deg, #0dbe94, #009673);
        box-shadow: 0 6px 20px rgba(11, 163, 127, 0.45), 
                    0 0 10px rgba(11, 163, 127, 0.2);
        transform: translateY(-3px) scale(1.03);
    }

    /* Login Knop (Neon Blauw): Heldere tech-glow */
    .nav-btn-login:hover {
        background: linear-gradient(135deg, #162436, #1f2229);
        border-color: #4dadff;
        color: #ffffff;
        box-shadow: 0 5px 18px rgba(77, 173, 255, 0.35);
        transform: translateY(-2px) scale(1.03);
    }

    /* Uitloggen Knop (Neon Rood): Rustige alarm-glow */
    .nav-btn-logout:hover {
        background: linear-gradient(135deg, #2c1a1a, #1f2229);
        border-color: #ff4747;
        color: #ff6b6b;
        box-shadow: 0 5px 18px rgba(231, 76, 60, 0.3);
        transform: translateY(-2px) scale(1.03);
    }
}