/**
 * Header v2 — minimal, glassmorphism, typography-first.
 *
 * Klassen-Prefix: nv-header__*
 * Spezifitaet: alle Nav-Selektoren ueber den Wrapper qualifiziert
 *   (.nv-header .nv-header__nav > ul,
.nv-header .nv-header__nav .menu,
.nv-header .nv-header__menu a) — kein !important noetig.
 *
 * Variablen aus home-v2.css :root, mit Fallbacks.
 */

:root {
    --nv-accent: var(--hv2-accent, #47b2e4);
    --nv-accent-strong: var(--hv2-accent-strong, #2196f3);
}

/* Body-Reset: irgendein Plugin (all-bootstrap-blocks oder ein Block-Theme-
   Default) injektet inline body{padding:24px 12px;background:#f5f8fa!important}
   das einen sichtbaren weissen Rand um die ganze Page produziert. Hier global
   ueberschrieben (header-v2.css wird auf jeder Seite geladen). */
html body {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #050a14 !important;
}

/* Body-Offset wenn der Header NICHT transparent ueber Inhalt liegen darf */
body:not(.has-transparent-header) {
    padding-top: 76px;
}

/* ============================================================
   Shell
   ============================================================ */
.nv-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: transparent;
    /* Subtile, immer sichtbare Trennlinie + Schatten — gibt dem Header
       Tiefe gegenueber dunklem Content darunter. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
    transition:
        background 0.4s ease,
        backdrop-filter 0.4s ease,
        -webkit-backdrop-filter 0.4s ease,
        border-bottom-color 0.4s ease,
        box-shadow 0.4s ease;
}

.nv-header__row {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 18px 0;
    transition: padding 0.4s ease;
}

/* ----- Beim Scrollen: dezent abgedunkelt + blur, klarere Trennlinie ----- */
.nv-header.is-scrolled {
    background: rgba(7, 14, 26, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 16px 36px -16px rgba(0, 0, 0, 0.55);
}

.nv-header.is-scrolled .nv-header__row {
    padding: 12px 0;
}

/* ============================================================
   Brand / Logo
   ============================================================ */
.nv-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.nv-header__brand a,
.nv-header__brand .custom-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.nv-header__brand img,
.nv-header__brand .custom-logo {
    display: block;
    max-height: 36px;
    width: auto;
    height: auto;
    transition: max-height 0.4s ease;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.nv-header.is-scrolled .nv-header__brand img,
.nv-header.is-scrolled .nv-header__brand .custom-logo {
    max-height: 30px;
}

.nv-header__sitename {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.nv-header__sitename:hover {
    color: #fff;
}

.nv-header.is-scrolled .nv-header__sitename {
    font-size: 17px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}

/* ============================================================
   Nav — Typography-first
   ============================================================ */
.nv-header__nav {
    margin-left: auto;
}

/* wp_nav_menu rendert nur ein nacktes <ul><li><a> (kein menu_class) — daher
   selektieren wir ueber den Wrapper .nv-header__nav. */
.nv-header__nav ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nv-header__nav li {
    position: relative;
    list-style: none;
}

.nv-header__nav a {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    text-transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    transition: color 0.25s ease;
}

.nv-header__nav a:hover {
    color: #fff;
}

/* Underline-Reveal — der "Strich" */
.nv-header__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nv-accent), var(--nv-accent-strong));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.nv-header__nav a:hover::after,
.nv-header__nav .current-menu-item > a::after,
.nv-header__nav .current_page_item > a::after,
.nv-header__nav .current-menu-ancestor > a::after {
    transform: scaleX(1);
}

.nv-header__nav .current-menu-item > a,
.nv-header__nav .current_page_item > a,
.nv-header__nav .current-menu-ancestor > a {
    color: #fff;
}

/* Submenu (zweite Ebene, falls das Menue Dropdowns hat) */
.nv-header__nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    margin-top: 12px;
    background: rgba(7, 14, 26, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 10px;
    min-width: 220px;
    flex-direction: column;
    gap: 0;
    list-style: none;
    display: none;
    box-shadow: 0 22px 60px -20px rgba(0, 0, 0, 0.55);
}

.nv-header__nav li:hover > .sub-menu {
    display: flex;
}

.nv-header__nav .sub-menu a {
    display: block;
    padding: 10px 14px;
    text-align: left;
    border-radius: 10px;
}

.nv-header__nav .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
}

.nv-header__nav .sub-menu a::after {
    display: none;
}

/* ============================================================
   Mobile toggle (hidden on desktop)
   ============================================================ */
.nv-header__toggle {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.nv-header__toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(71, 178, 228, 0.4);
}

.nv-header__toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.nv-header.is-mobile-open .nv-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nv-header.is-mobile-open .nv-header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.nv-header.is-mobile-open .nv-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Mobile breakpoint
   ============================================================ */
@media (max-width: 991px) {
    .nv-header__toggle {
        display: inline-flex;
    }

    .nv-header__nav {
        /* Mobile-Drawer: full-height vom Header-Ende bis Bottom. dvh statt vh,
           damit iOS-Safari/Chrome-Mobile mit URL-Bar nicht den Bottom-Bereich
           abschneidet. Plus safe-area-inset fuer Notch/Home-Indicator.
           top folgt der tatsaechlichen Header-Hoehe via dynamischer Calc. */
        position: fixed;
        top: var(--nv-header-height, 72px);
        left: 0;
        right: 0;
        bottom: 0;
        max-height: calc(100dvh - var(--nv-header-height, 72px));
        background: rgba(5, 10, 20, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 24px 24px calc(32px + env(safe-area-inset-bottom)) 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
        margin: 0;
    }

    .nv-header.is-mobile-open .nv-header__nav {
        transform: translateX(0);
    }

    .nv-header__nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .nv-header__nav a {
        padding: 14px 4px;
        font-size: 18px;
    }

    .nv-header__nav a::after {
        bottom: 8px;
    }
}

@media (max-width: 768px) {
    body:not(.has-transparent-header) { padding-top: 64px; }
    .nv-header__row { padding: 12px 0; }
    .nv-header.is-scrolled .nv-header__row { padding: 10px 0; }
    .nv-header__brand img,
    .nv-header__brand .custom-logo { max-height: 30px; }
    /* Mobile-Drawer-top muss der kleineren Header-Hoehe folgen */
    .nv-header__nav { top: 60px; max-height: calc(100dvh - 60px); }
}