/* assets/css/header.css */

/* --- BASIS HEADER STIJL --- */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px);
    height: var(--header-height);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo Typografie (Fallback) */
.site-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.text-gold { color: var(--color-gold); }
.site-branding img { height: 40px; width: auto; display: block; }

/* --- DESKTOP MENU --- */
.desktop-navigation {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 30px;
}

.nav-list li a {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-main);
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

/* Hover lijn effect */
.nav-list li a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 0; height: 2px;
    background-color: var(--color-gold);
    transition: width 0.3s ease;
}
.nav-list li a:hover::after { width: 100%; }
.nav-list li.current-menu-item a { color: var(--color-gold); }

/* Taal Switcher Desktop */
.language-switcher {
    display: flex;
    gap: 15px;
    padding-left: 20px;
    border-left: 1px solid #ddd;
}
.lang-btn {
    font-size: 0.8rem;
    font-weight: 700;
    color: #999;
}
.lang-btn.active, .lang-btn:hover { color: var(--color-gold); }


/* --- HAMBURGER BUTTON (Mobile Toggle) --- */
.menu-toggle {
    display: none; /* Verborgen op desktop */
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    z-index: 1002; /* Boven de overlay */
}

.menu-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-main);
}

.hamburger-box {
    width: 30px;
    height: 24px;
    position: relative;
    display: inline-block;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
    width: 30px; height: 2px;
    background-color: var(--color-text-main);
    position: absolute;
    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
    width: 30px; height: 2px;
    background-color: var(--color-text-main);
    position: absolute;
    transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hamburger-inner::before { top: -8px; }
.hamburger-inner::after { bottom: -8px; }

/* Hamburger naar Kruisje Animatie */
body.menu-open .hamburger-inner {
    background-color: transparent !important;
}
body.menu-open .hamburger-inner::before {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--color-gold); /* Goud kruisje */
}
body.menu-open .hamburger-inner::after {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--color-gold);
}
body.menu-open .menu-label { color: var(--color-gold); }


/* --- MOBILE OVERLAY (Hidden by default) --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #fff;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animatie states */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

body.menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-menu-content {
    text-align: center;
}

/* Mobiele lijst stijl */
.mobile-nav-list {
    list-style: none;
    padding: 0; margin: 0;
}

.mobile-nav-list li {
    margin-bottom: 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

/* Trapsgewijs inladen van items */
body.menu-open .mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav-list li:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav-list li:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav-list li:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav-list li:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

.mobile-nav-list li a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Terug naar strak */
    font-size: 2.5rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px; /* Iets meer lucht tussen de letters */
    color: var(--color-text-main);
    text-decoration: none;
    font-style: normal; /* Geen italic meer voor menu items */
    transition: color 0.3s ease;
}

/* Hover effect: Dan pas wordt het goud en sierlijk (optioneel) */
.mobile-nav-list li a:hover {
    color: var(--color-gold);
    /* Als je wilt dat hij bij hover wél sierlijk wordt, laat je dit staan. 
       Zo niet, haal de font-family regel hieronder weg. */
    font-style: italic;
}

/* De actieve pagina */
.mobile-nav-list li.current-menu-item a {
    color: var(--color-gold);
    /* Hier ook strak houden voor consistentie */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
}

.mobile-nav-list li.current-menu-item a {
    color: var(--color-gold);
    font-style: italic;
}

/* Mobile Language Switcher */
.language-switcher.mobile-only {
    margin-top: 40px;
    justify-content: center;
    border-left: none;
    padding-left: 0;
    opacity: 0;
    transition: opacity 0.5s 0.6s;
}
body.menu-open .language-switcher.mobile-only { opacity: 1; }
.language-switcher.mobile-only .lang-btn { font-size: 1.2rem; margin: 0 10px; }


/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 992px) {
    .desktop-navigation { display: none; } /* Verberg desktop menu */
    .menu-toggle { display: flex; } /* Toon hamburger */
}

@media (min-width: 993px) {
    .mobile-menu-overlay { display: none !important; } /* Zeker weten weg op desktop */
}