/* ============================================
   SITE HEADER & NAVIGATION
   ============================================ */

/* z-index matters here for two reasons that pull in opposite directions:
   1) .nav-menu is a position:fixed DESCENDANT of this element. Since
      position:sticky + a z-index creates a stacking context, .nav-menu
      can't stack any higher than THIS element's own z-index when compared
      to things outside it (like .mobile-backdrop) — no matter what
      z-index .nav-menu itself has. So this must be higher than
      .mobile-backdrop's (9000).
   2) Removing the z-index entirely (an earlier, wrong fix) let ordinary
      scrolling page content — anything with its own z-index, like
      .vintage-radio's local stacking context — paint over the sticky
      header while scrolling, since z-index:auto ties are broken by DOM
      order and that content comes later in the document.
   9050 sits above .mobile-backdrop (9000) so .nav-menu escapes correctly,
   and below .sidebar-toggle (9200) and the detail modal (9500) so those
   still render on top of the header when relevant. */
.header {
    background: var(--color-cream);
    border-bottom: 4px solid var(--color-red);
    position: sticky;
    top: 0;
    z-index: 9050;
    box-shadow: var(--shadow-brand);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.5rem;
    max-width: var(--content-max-width);
    margin: 0 auto;
    /* Header border is 4px; keep nav's box-sizing:border-box height in sync
       with --header-height so the sticky sidebar lines up under it exactly. */
    min-height: calc(var(--header-height) - 4px);
    padding: 1rem clamp(1rem, 3vw, 2rem);
}

/* -- Brand / logo -- */

.nav-brand {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

/* Not sized directly — the logo isn't square (415x246), so only the <img>
   is constrained (via max-width/max-height below) and this just centers it. */
.vintage-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    /* ~1.1x the original site's 60px tablet-tier cap (2x, then -25%, then
       another -25%); see the 480px and 1300px breakpoints for the other tiers. */
    max-width: 68px;
    max-height: 68px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.brand-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
}

.nav-next-meeting {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.next-meeting-label {
    font-size: 0.7rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.next-meeting-date {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-red);
}

/* -- Hamburger toggle (mobile/tablet only — hidden again at 1300px+ below) -- */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-red);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* -- Nav links --
   Below 1300px this is a right-anchored off-canvas drawer (opened via
   .nav-toggle/JS — matching the toggle button's own position on the
   right of the header), sized to fit its widest button rather than a
   fixed width. The 1300px+ media query further down turns it back into
   the normal always-visible horizontal row. */

.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    list-style: none;
    gap: 0.5rem;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: max-content;
    min-width: 200px;
    max-width: min(85vw, 300px);
    background: var(--color-cream);
    border-left: 4px solid var(--color-red);
    box-shadow: var(--shadow-brand);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    /* No z-index here on purpose. This is a descendant of .header, which
       has its own z-index (9050) and therefore its own stacking context —
       so whatever value we put here is capped at 9050 for any comparison
       against things outside the header (nothing inside the header
       competes with it, so there's nothing to out-rank locally either).
       Giving this a bigger-looking number like 9100 would be misleading:
       it would still only ever really achieve 9050. */
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.nav-menu.open {
    transform: translateX(0);
}

/* Each button's text is two spans instead of a <br> so it can be laid out
   as one line here (row) or stacked two-line (column, see 1300px+ below)
   purely via CSS, without touching the markup. */
.link-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3em;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Comfortably tap-sized (touch, not hover, is the primary input here). */
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(220, 38, 38, 0.15);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-red);
    background: var(--color-white);
    border-color: var(--color-red);
}

.nav-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Collapsed by default; tapping the parent button (currently just Useful
   Links) toggles .open on .nav-dropdown (via the existing
   click-to-toggle script) to expand it inline, indented to show it's
   nested. Also the hitbox/touch dropdown fix's .open class at 1300px+. */
.dropdown-menu {
    display: none;
    list-style: none;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-dropdown.open .dropdown-menu {
    display: flex;
}

.dropdown-menu a {
    display: block;
    /* Taller than the desktop version below — touch, not hover, is the
       primary input in the mobile drawer these live in. */
    padding: 0.85rem 0.75rem 0.85rem 1.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-menu a:hover {
    color: var(--color-red);
}

/* ============================================
   WIDE SCREENS: classic horizontal bar with
   hover dropdowns, single row.
   ============================================ */

@media screen and (min-width: 1300px) {
    /* Grid mirrors the page-layout columns below: a sidebar-width zone for
       the logo, then the brand text flush against that same boundary, then
       the nav menu centered in whatever space is left to the screen edge. */
    .nav {
        display: grid;
        grid-template-columns: var(--sidebar-width) auto 1fr;
        column-gap: 0;
        align-items: center;
        max-width: none;
        margin: 0;
        padding: 0.4rem 2rem 0.4rem 0;
    }

    /* Unwrap these so the logo and brand text become direct grid items,
       landing in their own columns instead of sharing .nav-brand's column. */
    .nav-brand,
    .logo-container {
        display: contents;
    }

    .vintage-logo {
        justify-self: center;
    }

    .logo-img {
        /* ~1.1x the original site's 130px full-size cap (2x, then -25%, then -25%) */
        max-width: 146px;
        max-height: 146px;
    }

    .brand-info {
        justify-self: start;
        padding-right: 1.5rem;
    }

    .nav-toggle {
        display: none;
    }

    /* Back to the normal always-visible horizontal row — undoes the
       mobile drawer's fixed positioning/sliding entirely. */
    .nav-menu {
        display: flex;
        position: static;
        flex-direction: row;
        justify-self: center;
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        border-left: none;
        box-shadow: none;
        transform: none;
        transition: none;
        z-index: auto;
    }

    /* Two-line stacked buttons again (row on mobile, see .link-text above). */
    .link-text {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* Restore the tighter desktop button size — the base .nav-link padding
       above is sized for touch targets in the mobile drawer specifically. */
    .nav-link {
        padding: 0.5rem 0.9rem;
        line-height: 1.35;
    }

    .nav-dropdown {
        display: block;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0.5rem;
        background: var(--color-cream);
        border: 3px solid var(--color-red);
        border-radius: 8px;
        box-shadow: var(--shadow-brand);
        padding: 0.5rem 0;
        min-width: 180px;
        white-space: nowrap;
        z-index: 1001;
    }

    /* Invisible hit-region covering the visual gap (the margin-top above),
       sized to match .dropdown-menu's own centered footprint rather than
       .nav-dropdown's narrower width, so hovering anywhere between the
       trigger and the menu — including the widened part of the menu that
       overhangs the trigger on either side — keeps the whole thing open.
       It's gated to the same open/hover state so it only exists while
       relevant, and it's sized to the gap only, not the menu itself, so it
       can't sit on top of and intercept clicks on the menu's own items. */
    .nav-dropdown::after {
        content: '';
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: max(100%, 180px);
        height: 0.5rem;
    }

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown.open .dropdown-menu {
        display: flex;
    }

    .nav-dropdown:hover::after,
    .nav-dropdown.open::after {
        display: block;
    }

    .dropdown-menu a {
        padding: 0.6rem 1.25rem;
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 480px) {
    .brand-title {
        font-size: 1rem;
    }

    .logo-img {
        /* ~1.1x the original site's 50px smallest-tier cap (2x, then -25%, then -25%) */
        max-width: 56px;
        max-height: 56px;
    }
}

/* Below this, logo + brand text + hamburger no longer fit on one row and
   the toggle wraps onto its own line. Drop the logo so the brand text
   shifts left and frees up the room the toggle needs to stay put. */
@media screen and (max-width: 460px) {
    .vintage-logo {
        display: none;
    }
}