/*
 * Icon-Navigation (Prototyp, Variante 2) — nur mobil.
 *
 * Farben kommen aus dem Header (rose-700, amber-100) und stehen bewusst nicht
 * hier: die Klassen dafuer setzt Blade ueber Tailwind. Hier steht nur, was
 * Tailwind nicht ausdruecken kann — Skew, Touch-Targets, Scroll-Verhalten.
 */

.main-nav {
    /*
     * Neigungswinkel der Icons. Zum Justieren nur diesen Wert aendern.
     * Zum Abschalten: NAV_ICON_SKEW=false in der .env (entfernt die Klasse),
     * oder die transform-Zeile in .nav-icon--italic auskommentieren.
     */
    --nav-icon-skew: -10deg;
    --nav-icon-size: 22px;
}

.main-nav__row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Loesung (a): eine Zeile, horizontal scrollbar. Der Fade rechts zeigt an,
 * dass es weitergeht — ohne ihn wirkt die Leiste abgeschnitten.
 */
.main-nav__row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

.main-nav__row--scroll > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Loesung (b): Umbruch in zwei Zeilen. */
.main-nav__row--wrap {
    flex-wrap: wrap;
    row-gap: 0.125rem;
}

.main-nav__row--secondary {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

/*
 * Touch-Target nach WCAG 2.5.5: mindestens 44x44px, auch bei den reinen
 * Icon-Punkten.
 */
.nav-item {
    min-height: 44px;
    min-width: 44px;
    white-space: nowrap;
    text-decoration: none;
}

.main-nav__row--secondary .nav-item {
    /* Die zweite Zeile ist reine Textnavigation und darf kompakter sein. */
    min-height: 36px;
}

/*
 * Einheitliche Icon-Groesse. Die Icon-Font skaliert ueber font-size, das
 * Inline-SVG der Markenlogos ueber width/height — beide landen bei 22px.
 */
.material-symbols-outlined.nav-icon {
    font-size: var(--nav-icon-size);
    line-height: 1;
}

svg.nav-icon {
    display: block;
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
}

/*
 * Kursive Icons. Material Symbols hat keinen Italic-Schnitt, die Neigung
 * entsteht deshalb geometrisch. Nur diese eine Regel ist dafuer zustaendig.
 */
.nav-icon--italic {
    transform: skewX(var(--nav-icon-skew));
}