/* header.css — public-site header (kiosk views use _LayoutMenuBoard). */

/* ============================================================
   Header wrapper — fixed to top of viewport
   ============================================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    background: var(--ink);
    border: 0;
    outline: 0;
    /* 1px solid-ink halo below the header. If subpixel rounding ever leaves a
       hairline gap between fixed-header bottom and hero-section top, this
       paints over it in the same color so nothing reads as a "weird line". */
    box-shadow: 0 1px 0 var(--ink);
    transition: background-color var(--dur-base) var(--ease-out);
}

.header::before,
.header::after,
.menu-list-items::before,
.menu-list-items::after {
    content: none;
}

.menu-list-items {
    border: 0;
    box-shadow: none;
}

/* (no extra chrome on scroll — keep header flat on the dark canvas) */

/* ============================================================
   Nav strip
   ============================================================ */

.mega-menu {
    position: relative;
}

.menu-list-items {
    background: var(--ink);
    padding-block: var(--sp-4);
    transition: padding-block var(--dur-base) var(--ease-out);
}

/* keep the header height stable when scrolled — no shrink */

.menu-list-items .container {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    position: relative;
}

/* Logo wordmark */
.menu-logo {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}

.menu-logo > li > a {
    display: inline-flex;
    align-items: center;
    transition: opacity var(--dur-base) var(--ease-out);
}

.menu-logo > li > a:hover { opacity: 0.85; }

.menu-logo img {
    width: clamp(180px, 18vw, 240px);
    height: auto;
    display: block;
    /* Wordmark SVG is black paths — invert to cream for the dark header */
    filter: invert(94%) sepia(5%) saturate(280%) hue-rotate(2deg) brightness(96%);
}

/* ============================================================
   Nav links — centered between logo and Order CTA
   ============================================================ */

.menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-6);
}

.menu-links > li { display: inline-block; }

/* Order CTA sits in the nav row alongside the regular links — no extra
   margin, lets the .menu-links gap handle spacing. */
.menu-link-cta { margin-left: 0; }

.menu-links > li > a {
    display: inline-block;
    color: var(--cream);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-block: var(--sp-2);
    position: relative;
    transition: color var(--dur-base) var(--ease-out);
}

.menu-links > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--ember);
    transition: right var(--dur-base) var(--ease-out);
}

.menu-links > li > a:hover,
.menu-links > li > a:focus-visible {
    color: var(--ember);
}

.menu-links > li > a:hover::after,
.menu-links > li > a:focus-visible::after {
    right: 0;
}

/* ============================================================
   Order Online — desktop topbar variant. Renders as a plain nav link
   matching the other items (Bagels / Coffee / About / etc.) instead
   of a button. The mobile drawer has its own pill-style override in
   components.css, which still applies under 992px.
   ============================================================ */

/* Scoped to `.header` because `menu-order-cta` is also used as a class on the
   bottom-of-menu-page section; without scoping, this rule would set
   `display: inline-block` on that <section> and collapse its layout. */
.header .menu-order-cta {
    display: inline-block;
    color: var(--cream);
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--sp-2) 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color var(--dur-base) var(--ease-out);
}

.header .menu-order-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: var(--ember);
    transition: right var(--dur-base) var(--ease-out);
}

.header .menu-order-cta:hover,
.header .menu-order-cta:focus-visible {
    color: var(--ember);
    background: transparent;
    border-color: transparent;
}

.header .menu-order-cta:hover::after,
.header .menu-order-cta:focus-visible::after {
    right: 0;
}

/* ============================================================
   Mobile — hide nav links, show hamburger drawer
   (hamburger styles live in components.css)
   ============================================================ */

@media (max-width: 992px) {
    .menu-list-items .container {
        justify-content: space-between;
        gap: var(--sp-3);
    }

    .menu-logo img {
        width: clamp(120px, 30vw, 160px);
    }

    .header .menu-order-cta {
        padding: var(--sp-2) var(--sp-4);
        font-size: 0.75rem;
    }
}

/* Body offset for fixed header — hero sections supply their own padding-top */
body { padding-top: 0; }