/**
 * Bruchwerk Navigation Component (Phase 7D)
 * Extracted inline styles from Partials/Page/Navigation/Main.html
 * BEM-light: bw-header, bw-topbar, bw-mainnav, bw-mobile-drawer, bw-logo
 *
 * Preserves visual parity with prior inline-style version:
 *  - sticky header (top:0)
 *  - 78px topbar height
 *  - desktop nav typography (Space Mono, .18em tracking, uppercase)
 *  - 44x44 mobile-menu trigger square
 *  - mobile drawer absolute under header
 */

/* ---------- Header (sticky outer wrapper) ---------- */
.bw-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

/* ---------- Topbar (logo + desktop nav row) ---------- */
.bw-topbar {
    /* Keep the close control above the drawer's viewport-sized backdrop. */
    position: relative;
    z-index: 22;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px;
}

/* ---------- Logo ---------- */
.bw-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bw-logo__img {
    height: 32px;
    display: block;
}

/* ---------- Desktop Main Nav ---------- */
.bw-mainnav {
    display: flex;
    gap: 4px;
    align-items: center;
}

.bw-mainnav__link {
    display: block;
    padding: 10px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bw-mainnav__trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bw-mainnav__caret {
    margin-left: 6px;
    opacity: 0.5;
}

/* Spielplan carries the magenta of the former ticket button (bru#7 point 7). */
.bw-mainnav__link--accent,
.bw-mobile-drawer__link--accent {
    background: var(--accent);
    color: #fff;
    transition: background .15s;
}
.bw-mainnav__link--accent:hover,
.bw-mainnav__link--accent:focus-visible,
.bw-mobile-drawer__link--accent:hover,
.bw-mobile-drawer__link--accent:focus-visible {
    background: #ff2e75;
    color: #fff;
}

/* ---------- Mobile Menu Trigger (hamburger button) ---------- */
.bw-mobile-trigger {
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    padding: 0;
}

.bw-mobile-trigger__icon-close {
    display: none;
}

/* ---------- Mobile Drawer (off-canvas-like dropdown) ---------- */
.bw-mobile-drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.bw-mobile-drawer[data-mobile-menu].is-open {
    display: block !important;
    z-index: 21;
    isolation: isolate;
}

/* Dim the page behind the open drawer without making the backdrop a close
   control. The drawer itself remains the only visible layer above it. */
.bw-mobile-drawer[data-mobile-menu].is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(14, 14, 16, .68);
    pointer-events: auto;
}

.bw-mobile-drawer__item {
    border-bottom: 1px solid var(--line);
}

.bw-mobile-drawer__summary {
    padding: 16px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bw-mobile-drawer__link { text-decoration: none; }

.bw-mobile-drawer__summary::-webkit-details-marker {
    display: none;
}

.bw-mobile-drawer__caret {
    opacity: 0.5;
}

.bw-mobile-drawer__sub {
    padding: 0 20px 16px;
}

.bw-mobile-drawer__sublink {
    display: block;
    padding: 10px 0;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--bone);
}

/* ---------- Responsive switch (Tablet-Breakpoint = 1439px) ----------
   Must live in THIS file: it loads after main.css, whose tablet block hides
   .desk-nav — the unconditional .bw-mainnav display above would otherwise win
   the cascade (equal specificity, later source). Keep the desktop nav out of
   viewports narrower than its measured need of 1435px (logo 346px, nav 1025px,
   padding 64px; ENT-5603). mobile-menu.js matches the same width. */
@media (max-width: 1439px) {
    .bw-mainnav { display: none; }
    .bw-mobile-trigger { display: flex; }
}