/*
 * Hauptnavigation mit Untermenü (Ticket 007)
 *
 * Bewusst reines CSS statt Tailwind-Utilities: das gebaute Tailwind-Bundle in
 * public/assets/css enthält kein `group-hover:block` und würde die nötigen
 * Klassen erst nach einem erneuten vite-Build mitbringen. Gleiches Vorgehen wie
 * bei den Popups aus Ticket 005.
 *
 * ACHTUNG – Kaskade: Diese Datei wird nach app.css geladen und steht in keiner
 * @layer. Tailwind legt seine Utilities dagegen in `@layer utilities`, und
 * ungelayertes CSS gewinnt immer gegen gelayertes – unabhängig von der
 * Spezifität. Jede Eigenschaft, die hier auf `.site-nav__*` gesetzt wird,
 * überschreibt also die gleichnamige Utility-Klasse im Markup.
 *
 * Deshalb stehen Farben und Active State (`.is-open` aus
 * snippets/layout/navigation.php) komplett hier und nicht als Utilities im
 * Markup – beides gleichzeitig würde sich gegenseitig aushebeln.
 */

/*
 * Burger – ab 48rem ausgeblendet. Auf Mobil ist er das zweite Flex-Kind des
 * Headers neben dem Logo; die Navigation selbst liegt dort absolut und zählt
 * für das Flex-Layout nicht mehr mit.
 */
.site-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin-inline-end: -0.5rem;
    cursor: pointer;
}

/* Mittlerer Balken; die beiden äußeren sind ::before und ::after */
.site-nav__burger,
.site-nav__burger::before,
.site-nav__burger::after {
    display: block;
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    transition: transform 150ms ease, background-color 150ms ease;
}

.site-nav__burger {
    position: relative;
}

.site-nav__burger::before,
.site-nav__burger::after {
    content: "";
    position: absolute;
    inset-inline: 0;
}

.site-nav__burger::before {
    transform: translateY(-0.375rem);
}

.site-nav__burger::after {
    transform: translateY(0.375rem);
}

/* Offen: der mittlere Balken verschwindet, die äußeren werden zum X */
[aria-expanded="true"] .site-nav__burger {
    background: transparent;
}

[aria-expanded="true"] .site-nav__burger::before {
    transform: rotate(45deg);
}

[aria-expanded="true"] .site-nav__burger::after {
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__burger,
    .site-nav__burger::before,
    .site-nav__burger::after {
        transition: none;
    }
}

.site-nav__list {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item {
    position: relative;
}

/*
 * Gilt für <a> und für <button>: Gruppen-Einträge der Custom Navigation haben
 * kein eigenes Ziel und öffnen nur das Untermenü (Ticket 209). Ein Button ist
 * dafür nötig, weil :focus-within ein fokussierbares Element braucht.
 */
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-block: 0.5rem;
}

.site-nav__link,
.site-nav__sublink {
    color: var(--muted-foreground);
    letter-spacing: 0.04em;
    transition: color 200ms ease;
}

.site-nav__link.is-open,
.site-nav__sublink.is-open {
    color: var(--foreground);
}

/* Aktive Seite: rote Linie unter dem Eintrag, nur auf dem Desktop – im
   mobilen Panel stehen die Einträge untereinander, dort reicht die Farbe */
@media not all and (max-width: 48rem) {
    .site-nav__link.is-open::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0.375rem;
        height: 1px;
        background: var(--primary);
    }
}

/*
 * Tailwinds Preflight gleicht Buttons bereits an: `font: inherit`,
 * `color: inherit`, transparenter Hintergrund, kein Rahmen, kein Padding.
 * Hier bleibt nur der Zeiger übrig – den setzt Tailwind v4 nicht mehr selbst.
 *
 * Diese Eigenschaften dürfen hier NICHT wiederholt werden: siehe die Warnung
 * am Dateianfang, unlayered CSS schlägt jede Utility-Klasse.
 */
button.site-nav__link {
    cursor: pointer;
}

/*
 * Chevron statt gefülltem Dreieck: ein Quadrat, von dem nur zwei Kanten
 * gezeichnet und um 45° gedreht werden. Die Strichstärke passt damit zur
 * Schrift, ein Dreieck wirkt daneben immer zu schwer.
 *
 * Der Klassenname bleibt `caret` – so heißt das Element im Markup und in
 * navigation.php.
 */
.site-nav__caret {
    width: 0.375rem;
    height: 0.375rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;

    /* Die Spitze zeigt nach unten und liegt damit unterhalb der Boxmitte – das
       translateY hebt sie optisch wieder auf die Textlinie. Es steht bewusst in
       derselben transform wie die Drehung, sonst würde der Ausgleich beim
       Öffnen springen statt mitzulaufen. */
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__caret {
        transition: none;
    }
}

.site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    display: none;
    min-width: 12rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;

    /* Ohne Rundung und Schatten. Die Fläche entspricht der gescrollten
       Kopfzeile in layout/header.php – ohne eigene Fläche würde der
       Seiteninhalt durch das Menü scheinen. */
    border: 1px solid var(--border);
    background: var(--nav-scrolled-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/*
 * Öffnen per Maus und Tastatur – nur auf dem Desktop. `not all and (…)` ist
 * exakt das Gegenstück zur Mobil-Query weiter unten; damit gibt es keine
 * Breite, in der beide oder keine von beiden gelten.
 *
 * Die Begrenzung ist nötig, seit das Untermenü auf Mobil per Chevron
 * aufklappt: Ein Tap löst dort auch :hover und :focus-within aus und würde das
 * Untermenü hinter dem Rücken des Aufklapp-Buttons öffnen.
 */
@media not all and (max-width: 48rem) {

    .site-nav__item:hover > .site-nav__submenu,
    .site-nav__item:focus-within > .site-nav__submenu {
        display: block;
    }

    /* Solange das Menü offen ist, zeigt der Chevron nach oben: 45° − 180°.
       Gleiche Selektoren wie oben, damit sich Chevron und Menü nie
       widersprechen können. */
    .site-nav__item:hover > .site-nav__link .site-nav__caret,
    .site-nav__item:focus-within > .site-nav__link .site-nav__caret {
        /* nach oben gedreht liegt die Spitze über der Boxmitte, der Ausgleich
           kehrt sich also um */
        transform: translateY(0.125rem) rotate(-135deg);
    }
}

/*
 * Aufklapp-Button des mobilen Untermenüs. Auf dem Desktop ausgeblendet – ein
 * `display: none` ist zugleich nicht fokussierbar, der Button taucht dort also
 * auch in der Tab-Reihenfolge nicht auf.
 */
.site-nav__expand {
    display: none;
    align-items: center;
    justify-content: center;

    /* großzügige Fläche zum Antippen */
    padding: 0.75rem;
    margin-inline-end: -0.75rem;
    cursor: pointer;
}

/* Trifft den Chevron im Aufklapp-Button; der Burger nutzt eine andere Klasse */
[aria-expanded="true"] .site-nav__caret {
    transform: translateY(0.125rem) rotate(-135deg);
}

.site-nav__sublink {
    display: block;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
}

/*
 * Hover und Tastaturfokus zeigen sich überall gleich: die Schrift wird hell,
 * wie im Entwurf. Die Unterstreichung ist der aktiven Seite vorbehalten.
 */
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
    color: var(--foreground);
}

/*
 * Mobil: Die Navigation wird zum Panel, das der Burger unter dem Header
 * aufklappt. Bezugspunkt ist der Header selbst – er ist `sticky` und damit
 * positioniert, also der Containing Block für dieses `absolute`.
 *
 * Geschlossen steht `display: none`, nicht nur eine Verschiebung aus dem Bild:
 * so sind die Links auch per Tab nicht erreichbar, solange das Menü zu ist.
 */
@media (max-width: 48rem) {
    /* Burger ganz rechts, hinter dem Theme-Umschalter */
    .site-nav__toggle {
        display: inline-flex;
        order: 1;
        color: var(--foreground);
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        padding: 0.5rem 1.5rem 1.25rem;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);

        /* Fast deckend: das Panel liegt über die volle Breite auf dem
           Seiteninhalt, und große Überschriften müssen durch die Fläche
           hindurch unleserlich bleiben. */
        background: var(--nav-mobile-bg);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .site-nav[data-open="true"] {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    /* Beschriftung links, Aufklapp-Button rechts, Untermenü in einer eigenen
       Zeile darunter */
    .site-nav__item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .site-nav__expand {
        display: inline-flex;
    }

    /* Der Chevron im Link ist auf Mobil überflüssig – dort steht er im
       Aufklapp-Button daneben */
    .site-nav__link .site-nav__caret {
        display: none;
    }

    .site-nav__submenu {
        position: static;
        display: none;
        flex-basis: 100%;
        min-width: 0;
        padding: 0.25rem 0 0.25rem 0.75rem;
        margin-inline-start: 0.25rem;

        /* Die Linie links ersetzt hier die Menüfläche und zeigt die Einrückung.
           Der Blur muss mit weg: er wirkt auch ohne eigene Hintergrundfarbe und
           würde sonst als milchiges Rechteck im Panel stehen bleiben. */
        border: 0;
        border-left: 1px solid var(--border);
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .site-nav__submenu[data-open="true"] {
        display: block;
    }

    /* Gruppen-Einträge sind hier funktionslos: aufgeklappt wird über den
       Chevron daneben */
    button.site-nav__link {
        cursor: default;
    }
}