/*
 * np-mobile-nav.css — Phase B Mobile-Navigation (Hamburger + Slide-Out-Drawer).
 *
 * Verhalten:
 *  - Auf Viewports <= 720 px (--np-bp-mobile) wird der Hamburger-Button
 *    rechts oben sichtbar; die alte horizontale Navbar (.np-nav__links)
 *    bleibt durch die existierende nicer.css-Regel weiterhin display:none.
 *  - Klick auf den Hamburger schiebt den Drawer von rechts ein (transform).
 *  - Auf Viewports >= 721 px sind Hamburger + Drawer komplett ausgeblendet.
 *
 * JS-Hook: frontend/web/js/np-mobile-nav.js togglet die Klasse
 * `.np-mobile-nav-drawer--open` und synct `aria-expanded` auf dem Toggle.
 * Bewusst vanilla, kein Alpine (Risk Register: Alpine-Konflikte vermeiden).
 *
 * Tap-Target-Mindestmaß: 44x44 px via --np-tap-min.
 * Safe-Area-Aware: Drawer-`top` und `padding-bottom` lesen die env()-Insets.
 */

/* ─── Toggle Button (Hamburger / X) ─────────────────────────────────── */
.np-mobile-nav-toggle {
    position: fixed;
    top: calc(var(--np-safe-top) + 10px);
    right: calc(var(--np-safe-right) + 12px);
    z-index: 100001;
    width: var(--np-tap-min);
    height: var(--np-tap-min);
    min-width: var(--np-tap-min);
    min-height: var(--np-tap-min);
    padding: 0;
    appearance: none;
    background: var(--np-cream, #fbf6ec);
    border: 1.5px solid var(--np-ink, #111114);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 0 var(--np-ink, #111114);
}

.np-mobile-nav-toggle:focus {
    outline: none;
}

.np-mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--np-orange, #ff6a13);
    outline-offset: 2px;
}

.np-mobile-nav-toggle__icon {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.np-mobile-nav-toggle__icon::before,
.np-mobile-nav-toggle__icon::after,
.np-mobile-nav-toggle__icon span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--np-ink, #111114);
    transition: transform 0.18s ease, opacity 0.12s ease, top 0.18s ease;
}

.np-mobile-nav-toggle__icon::before { top: 0; }
.np-mobile-nav-toggle__icon span { top: 7px; }
.np-mobile-nav-toggle__icon::after { top: 14px; }

/* aria-expanded="true" → Cross-Icon (X) */
.np-mobile-nav-toggle[aria-expanded="true"] .np-mobile-nav-toggle__icon::before {
    top: 7px;
    transform: rotate(45deg);
}
.np-mobile-nav-toggle[aria-expanded="true"] .np-mobile-nav-toggle__icon span {
    opacity: 0;
}
.np-mobile-nav-toggle[aria-expanded="true"] .np-mobile-nav-toggle__icon::after {
    top: 7px;
    transform: rotate(-45deg);
}

/* ─── Backdrop ──────────────────────────────────────────────────────── */
.np-mobile-nav-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(17, 17, 20, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.np-mobile-nav-drawer__backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Drawer ────────────────────────────────────────────────────────── */
.np-mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    width: 80vw;
    max-width: 320px;
    padding-top: calc(var(--np-safe-top) + var(--np-tap-min) + 16px);
    padding-bottom: calc(var(--np-safe-bottom) + var(--np-space-4));
    padding-left: var(--np-space-4);
    padding-right: var(--np-space-4);
    background: var(--np-cream, #fbf6ec);
    border-left: 1.5px solid var(--np-ink, #111114);
    box-shadow: -8px 0 24px -8px rgba(17, 17, 20, 0.25);
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.np-mobile-nav-drawer--open {
    transform: translateX(0);
}

.np-mobile-nav-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.np-mobile-nav-drawer__list li {
    margin: 0;
    padding: 0;
}

.np-mobile-nav-drawer__list a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 4px;
    font-size: var(--np-font-body);
    font-family: var(--font-body, inherit);
    color: var(--np-ink, #111114);
    text-decoration: none;
    border-bottom: 1px dashed var(--np-line-soft, #d8d3c5);
    letter-spacing: 0.01em;
}

.np-mobile-nav-drawer__list li:last-child a {
    border-bottom: 0;
}

.np-mobile-nav-drawer__list a:focus-visible {
    outline: 2px solid var(--np-orange, #ff6a13);
    outline-offset: 2px;
}

.np-mobile-nav-drawer__list a[aria-current="page"] {
    font-weight: 600;
    color: var(--np-orange, #ff6a13);
    border-left: 3px solid var(--np-orange, #ff6a13);
    padding-left: 10px;
}

/* ─── Header-Tap-Target-Audit (Phase B.3) ───────────────────────────── */
@media (max-width: 720px) {
    /*
     * Existierende .np-nav__burger (Alpine-Variante) wird vom neuen
     * Toggle ersetzt — im Markup wurde sie entfernt, hier dient die
     * Regel als zusätzlicher Sicherheits-Riegel, falls sie irgendwann
     * über einen anderen Pfad doch wieder eingeschleust würde.
     */
    .np-nav__burger {
        display: none !important;
    }

    /*
     * Logo-Link: bekommt vergrößerten Tap-Bereich via Padding.
     * Das eigentliche Logo-Image bleibt unverändert, aber der
     * Click-Target ist jetzt >= 44x44 px.
     */
    .np-nav .np-logo {
        min-height: var(--np-tap-min);
        min-width: var(--np-tap-min);
        padding: 6px 6px 6px 0;
        box-sizing: content-box;
    }

    /*
     * CTA-Buttons im Header (Mitmachen / Einloggen / + Preis melden /
     * Usermenu-Trigger) — auf >= 44 px hochziehen. Padding statt
     * Min-Height ist die WCAG-empfohlene Lösung (Tap-Area, nicht Optik).
     */
    .np-nav__cta .np-btn--sm,
    .np-nav__cta .np-usermenu__trigger {
        min-height: var(--np-tap-min);
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ─── Desktop: alles ausblenden ─────────────────────────────────────── */
@media (min-width: 721px) {
    .np-mobile-nav-toggle,
    .np-mobile-nav-drawer,
    .np-mobile-nav-drawer__backdrop {
        display: none !important;
    }
}