/**
 * Dateiname: navigation.css
 * Beschreibung: Dunkle Nav-Leiste (Desktop) + Hamburger-Menü (Mobile)
 * Version: 0.1
 * Subversion: 0.1.4
 * Änderungen 0.1.4: .nav-menu__login-Schrift jetzt Gold (#D4AF37, Hover
 * #e8c968) statt der Standard-Menüfarbe (auf Nutzerwunsch). "Abmelden"
 * wird jetzt separat (nicht mehr über dieselbe Bedingung wie "Anmelden für
 * Mitglieder") gerendert und steht weiterhin als letzter Menüpunkt ganz am
 * Ende (siehe header.php) - hier keine CSS-Änderung nötig, betrifft nur die
 * PHP-Reihenfolge.
 * Änderungen 0.1.3: .nav-menu__login jetzt direkt nach "Über uns" statt am
 * Ende des Menüs (kein margin-top:auto mehr), Schrift deutlich kleiner
 * (12px statt 16px, via .nav-menu.active .nav-menu__login a) - auf
 * Nutzerwunsch.
 * Änderungen 0.1.2: .nav-menu__login ergänzt - "Anmelden für Mitglieder"/
 * "Abmelden" als letzter, optisch abgesetzter Punkt im mobilen
 * Hamburger-Menü (auf Nutzerwunsch), siehe header.php.
 * Änderungen 0.1.1: .main-nav ist jetzt position:sticky (statt relative,
 * top:0, z-index:500) - Menüleiste bleibt beim Scrollen oben stehen, die
 * Logo-/Vereinsname-Leiste (.identity-bar) darüber scrollt bewusst normal
 * mit (auf Nutzerwunsch, um auf kleinen Bildschirmen nicht dauerhaft
 * Platz zu verlieren). z-index 500 bleibt unter .nav-overlay (900),
 * .nav-menu (950) und der Lightbox (2000).
 */

.main-nav {
    background: var(--color-nav-bg);
    padding: 0 40px;
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
}

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

.main-nav__list li {
    margin: 0;
}

.main-nav__link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: oklch(0.85 0.01 60);
    padding: 16px 18px;
    border-bottom: 3px solid transparent;
    display: inline-block;
    text-decoration: none;
}

.main-nav__link:hover {
    color: #ffffff;
    text-decoration: none;
}

.main-nav__link.active {
    color: #ffffff;
    border-bottom-color: var(--color-nav-accent);
}

/* Hamburger-Button – nur mobil sichtbar (siehe responsive.css) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 10px;
    z-index: 10000;
    position: relative;
}

.hamburger span {
    width: 26px;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: all 0.25s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translateY(9px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-9px);
}

/* Mobiles Overlay-Menü – Standard ausgeblendet */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
}

.nav-overlay.active {
    display: block;
}

.nav-menu {
    display: none;
}

.nav-menu.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 320px);
    background: var(--color-nav-bg);
    z-index: 950;
    padding: 80px 0 40px;
    list-style: none;
    margin: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
}

.nav-menu.active li a {
    display: block;
    padding: 16px 28px;
    color: oklch(0.9 0.01 60);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
}

.nav-menu.active li a:hover,
.nav-menu.active li a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Login/Logout, direkt nach "Über uns" im mobilen Menü (auf Nutzerwunsch:
   auf kleinen Screens war das Anmelden bisher gar nicht mehr erreichbar,
   da die Kopfzeile mit dem Anmelden-Link dort ausgeblendet wird, siehe
   responsive.css .identity-bar__meta-group). Optisch abgesetzt durch
   Trennlinien + deutlich kleinere Schrift als die übrigen Menüpunkte (auf
   Nutzerwunsch) - eher Nebenfunktion als gleichrangiger Navigationspunkt. */
.nav-menu__login {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin: 4px 0;
}

.nav-menu.active .nav-menu__login a {
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #D4AF37;
}

.nav-menu.active .nav-menu__login a:hover {
    color: #e8c968;
}