/**
 * Header UX Polish — Nav Hover + Sticky Reveal
 *
 * v1.11.2.21 — additiver UX-Layer vor Header v2 Refactor.
 *
 * Architektur-Vertrag:
 *   - Nutzt bestehende Tokens (--nav-color, --nav-color-hover, --nav-active-border-color)
 *   - Konsolidiert mit nav-active-state.css: gleicher ::after-Pseudo, gleiche
 *     Geometrie. Hover und Active rendern als ein einheitlicher Underline-
 *     Mechanismus — Hover = animated reveal, Active = static visible.
 *   - Sticky-Transition setzt auf bestehende body.is-scrolled-Klasse
 *     (gesetzt von assets/js/main.js bei pageYOffset > 1) — kein neues JS.
 *   - Mobile-Nav (.navbar-mobile) bleibt unberuehrt.
 *   - Respektiert prefers-reduced-motion.
 *
 * Scope: NUR Desktop-Header / Top-Level-Nav-Items.
 *
 * @package Blueprint
 */

/* ============================================
   PART A — NAV HOVER UNDERLINE REVEAL
   ============================================ */

/* Default-State: ::after-Marker fuer alle Top-Level-Links vorbereitet
   (transform: scaleX(0) — unsichtbar). Hover triggert Reveal.
   Active-State (current-menu-item) erbt scaleX(1) via spezifischere
   Regel weiter unten und bleibt damit dauerhaft sichtbar. */
.navbar-horizontal .navbar-nav > li > a {
    /* position: relative existiert bereits via .navbar-horizontal .navbar-nav li
       (main.css Z. 313) — hier nur Sicherstellung fuer Top-Level-Anker. */
    position: relative;
}

.navbar-horizontal .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--nav-color-hover, var(--accent-color, var(--color-primary, #34aee4)));
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.22s ease;
    pointer-events: none;
}

/* Hover + Keyboard-Focus: animierter Reveal */
.navbar-horizontal .navbar-nav > li > a:hover::after,
.navbar-horizontal .navbar-nav > li > a:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Active-State (current-menu-item): Underline dauerhaft sichtbar.
   Hoehere Spezifitaet als Default-Regel oben, niedriger als Hover —
   damit Hover-State bei aktivem Link weiterhin als „aktive Animation"
   erlebbar ist (Farbton wechselt von Active-Color zu Hover-Color).
   Background-Token wechselt auf Active-Border-Color, konsistent mit
   nav-active-state.css. */
.navbar-horizontal .navbar-nav > li.current-menu-item > a::after,
.navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after,
.navbar-horizontal .navbar-nav > li.current_page_item > a::after,
.navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after {
    transform: scaleX(1);
    opacity: 1;
    background: var(--nav-active-border-color, var(--color-primary, #34aee4));
}

/* nav-active-style="color" und ="pill": ::after wird von nav-active-state.css
   per `display: none` unterdrueckt (Z. 73-78, 91-96). Diese Unterdrueckung
   gilt nur fuer .current-menu-item — nicht-aktive Links behalten ihren
   Hover-Reveal in allen Active-Styles. Bei Pill-Style hat aktives Item
   bewusst keinen Underline (Pill-Background ist der Marker). */

/* Transparent-Header-Variant: Hover-Underline nutzt Transparent-Token,
   damit auf Hero/Bild-Sections sichtbar. Active-Underline-Token aus
   bestehender Variant-Logik bleibt unveraendert. */
.bp-header--transparent .navbar-horizontal .navbar-nav > li > a::after,
.bp-header--glass-dark .navbar-horizontal .navbar-nav > li > a::after,
.bp-header--dark .navbar-horizontal .navbar-nav > li > a::after {
    background: var(--nav-transparent-color-hover, var(--nav-transparent-color, #ffffff));
}

.bp-header--transparent .navbar-horizontal .navbar-nav > li.current-menu-item > a::after,
.bp-header--transparent .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after,
.bp-header--transparent .navbar-horizontal .navbar-nav > li.current_page_item > a::after,
.bp-header--transparent .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after,
.bp-header--glass-dark .navbar-horizontal .navbar-nav > li.current-menu-item > a::after,
.bp-header--glass-dark .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after,
.bp-header--glass-dark .navbar-horizontal .navbar-nav > li.current_page_item > a::after,
.bp-header--glass-dark .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after,
.bp-header--dark .navbar-horizontal .navbar-nav > li.current-menu-item > a::after,
.bp-header--dark .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after,
.bp-header--dark .navbar-horizontal .navbar-nav > li.current_page_item > a::after,
.bp-header--dark .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after {
    background: var(--nav-transparent-color-active, var(--nav-transparent-color, #ffffff));
}

/* ============================================
   PART B — STICKY REVEAL TRANSITION
   ============================================
   Bestehender Sticky-Mechanismus (assets/js/main.js):
     - body.is-scrolled wird ab pageYOffset > 1 gesetzt
     - .navbar-desktop.sticky / .navbar-mobile.sticky werden gleichzeitig gesetzt
   Mobile bleibt unberuehrt — nur .navbar-desktop bekommt weichen Reveal. */

.navbar-desktop {
    transition:
        box-shadow 0.28s ease,
        background-color 0.28s ease,
        backdrop-filter 0.28s ease,
        -webkit-backdrop-filter 0.28s ease;
    will-change: box-shadow, background-color;
}

/* Sanfter Shadow-Aufbau beim Scrollen — additiv zu bestehender
   main.css-Regel `body.is-scrolled .navbar-desktop.sticky` (Z. 277-279).
   Dort wird der Shadow harter gesetzt; hier sorgt die transition oben
   fuer weichen Uebergang dahin. Keine neue Shadow-Definition noetig. */

/* Wenn Sticky deaktiviert ist (header-not-sticky): keine Reveal-Animation
   relevant — Header ist statisch. Transition oben schadet aber nicht. */

/* ============================================
   PART C — REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .navbar-horizontal .navbar-nav > li > a::after {
        transition: opacity 0.01ms;
        /* transform-Aenderung instantan, opacity minimal animiert
           damit zumindest Sichtbarkeit nachvollziehbar bleibt. */
    }

    .navbar-desktop {
        transition: none;
    }
}