/*
 * nav.css — Styles für die NavCell (\App\Cells\NavCell) inkl. Burger-Menü.
 * Theme-neutral: über CSS-Variablen anpassbar, mit Fallbacks.
 *
 *   --nav-gap             Abstand zwischen den Einträgen    (Standard: 1.5rem)
 *   --nav-color           Textfarbe der Links               (Standard: inherit)
 *   --nav-color-active    Farbe des aktiven Eintrags        (Standard: inherit)
 *   --nav-bg-mobile       Hintergrund des offenen Menüs     (Standard: transparent)
 *   --nav-gap-mobile      Abstand im offenen Menü           (Standard: 0.25rem)
 *   --nav-pad-mobile      Innenabstand des offenen Menüs    (Standard: 0.5rem 0)
 *   --nav-burger-size     Kantenlänge des Buttons           (Standard: 1.5rem)
 *   --nav-burger-bar      Farbe der Balken                  (Standard: currentColor)
 *   --nav-burger-height   Dicke der Balken                  (Standard: 2px)
 *
 * Diese Datei enthält bewusst KEINE @media-Query: der richtige Umschaltpunkt
 * hängt von Anzahl der Einträge und Länge der Beschriftungen ab und ist pro
 * Projekt verschieden. Stattdessen setzt nav-burger.js die Klasse
 * `is-collapsed`, sobald der per data-nav-breakpoint gewählte Punkt
 * unterschritten ist (Standard 768px) — der Breakpoint steht damit an genau
 * einer Stelle, im Markup.
 *
 * Nebeneffekt: ohne JavaScript wird `is-collapsed` nie gesetzt, die Liste
 * bleibt also sichtbar und der Burger ausgeblendet. Die Navigation ist damit
 * auch ohne JS vollständig bedienbar.
 *
 * Das Kit rendert nur die Liste. Der Burger-Button gehört ins Projekt-Layout,
 * damit er neben Logo/Kopfzeile sitzen kann (Markup siehe nav-burger.js):
 *
 *   <button class="site-nav__burger" type="button" data-nav-breakpoint="1024"
 *           aria-controls="hauptnav" aria-expanded="false" aria-label="Menü">
 *       <span></span><span></span><span></span>
 *   </button>
 *   <?= view_cell(\App\Cells\NavCell::class, [
 *       'nav_list' => config('Navigation')->items,
 *       'page'     => $page ?? '/',
 *       'id'       => 'hauptnav',
 *   ]) ?>
 */

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--nav-gap, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item a {
    color: var(--nav-color, inherit);
    text-decoration: none;
}

.site-nav__item a[aria-current="page"] {
    color: var(--nav-color-active, inherit);
    font-weight: 600;
}

/* ─── Burger-Button ──────────────────────────────────────────────────────
   Standardmäßig ausgeblendet; sichtbar wird er erst, wenn nav-burger.js
   `is-collapsed` setzt (Viewport unterhalb des Breakpoints). */

.site-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: var(--nav-burger-size, 1.5rem);
    height: var(--nav-burger-size, 1.5rem);
    background: none;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}

/*
 * Die Balken sind permanent auf Diagonal-Länge (√2 ≈ 141.42 %) und werden im
 * Ruhezustand per scaleX(0.7071) auf die sichtbaren 100 % gestaucht. Grund:
 * ein um 45° gedrehter Balken der Länge L misst nur noch L/√2 in der Breite —
 * bliebe er 100 % lang, wäre das X rund 30 % kleiner als der Hamburger.
 *
 * Die Streckung steckt deshalb in `transform` statt in `width`: beide Zustände
 * haben dieselbe Funktionsliste (translateY/rotate/scaleX), der Browser
 * interpoliert Drehung und Streckung also als EINE Bewegung. Über `width`
 * gelöst sähe es aus, als würden die Striche erst wachsen und dann kippen —
 * außerdem löst transform kein Layout aus.
 */
.site-nav__burger span {
    display: block;
    width: 141.42%;
    height: var(--nav-burger-height, 2px);
    background: var(--nav-burger-bar, currentColor);
    border-radius: 1px;
    transform: translateY(0) rotate(0deg) scaleX(0.7071);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/*
 * Offener Zustand: Balken werden zum X. Der Versatz bis zur Mitte ist die
 * halbe Strecke zwischen dem obersten und dem untersten Balken, die
 * `space-between` über die volle Button-Höhe verteilt.
 */
.site-nav__burger.is-active span:nth-child(1) {
    transform: translateY(calc((var(--nav-burger-size, 1.5rem) - var(--nav-burger-height, 2px)) / 2)) rotate(45deg) scaleX(1);
}

.site-nav__burger.is-active span:nth-child(2) {
    opacity: 0;
}

.site-nav__burger.is-active span:nth-child(3) {
    transform: translateY(calc((var(--nav-burger-size, 1.5rem) - var(--nav-burger-height, 2px)) / -2)) rotate(-45deg) scaleX(1);
}

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

/* ─── Zugeklappter Zustand ───────────────────────────────────────────────
   `is-collapsed` setzt nav-burger.js unterhalb des Breakpoints — auf dem
   Button (macht ihn sichtbar) und auf der Liste (klappt sie zu). `is-open`
   kommt beim Klick dazu. */

.site-nav__burger.is-collapsed {
    display: flex;
}

.site-nav__list.is-collapsed {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nav-gap-mobile, 0.25rem);
    padding: var(--nav-pad-mobile, 0.5rem 0);
    background: var(--nav-bg-mobile, transparent);
}

.site-nav__list.is-collapsed.is-open {
    display: flex;
}