/* ── Public site header (the "nav" partial) ───────────────────────────────
 *
 * WHY THIS FILE EXISTS
 *
 * partial.nav.html is included by ~30 page templates, but its styles lived
 * only in index.css — so every page that does NOT load index.css rendered
 * the header markup with no header styles at all. Those pages are /login,
 * /login/mfa, /privacy, /terms and /error, which load theme.css alone.
 *
 * On those pages it was worse than merely unstyled: theme.css is the ADMIN
 * dashboard stylesheet and it defines a bare `nav { ... }` rule of its own
 * (60px tall, flex, space-between, padding 0 28px) for the admin chrome.
 * That rule matched the PUBLIC header markup too, so the logo and the link
 * list were laid out as siblings of an admin bar: the logo ran straight
 * into "Events" with no gap, and the logo kept its default underline
 * because nothing removed it. That is the /login header bug.
 *
 * The header is now self-contained: partial.nav.html links this file
 * itself, the same convention the recovered component.page.header and
 * component.video.header templates already use for their own CSS/JS. Any
 * page that renders the header therefore gets the header's styles, no
 * matter which stylesheet that page loads.
 *
 * SPECIFICITY / ORDERING: the partial's <link> sits in the body, after the
 * <head> stylesheets, so at equal specificity these rules win over
 * theme.css's admin `nav {}`. That is deliberate and is what fixes the
 * theme.css pages.
 *
 * BUTTON RULES ARE SCOPED. .btn/.btn-primary/.btn-secondary/.btn-donate are
 * used well beyond the header (hero CTAs, the donate section), and
 * theme.css has its own .btn. The copies here are scoped under `nav` and
 * `.nav-mobile-cta` so styling the header cannot leak into page content on
 * a theme.css page.
 *
 * DUPLICATION, STATED PLAINLY: index.css still carries its own copies of
 * these header rules. They are byte-identical, so a page loading both sees
 * no difference. They were left in place rather than cut out because
 * index.css interleaves them with .hero/.section/footer/grid rules inside
 * shared @media blocks, and splitting those blocks apart is a change with a
 * much wider blast radius than this bug warrants. THIS FILE IS THE
 * AUTHORITATIVE COPY: change the header here, and delete the index.css
 * block as a separate, separately-verified step.
 */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* theme.css's admin nav sets these; reset them for the public header. */
    height: auto;
    padding: 0;
    display: block;
}

nav .nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

nav .logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
    flex-shrink: 0;
}

/* The gradient-clipped wordmark. Applied to the inner <a> as well as the
 * wrapper so the anchor's own colour cannot override it, and with the
 * underline removed — on a theme.css page the logo rendered underlined
 * because only index.css was resetting anchor decoration. */
nav .logo,
nav .logo a {
    background: linear-gradient(135deg, #fff 0%, #999 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    white-space: nowrap;
}

nav .nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

nav .nav-links a {
    color: #f5f5f7;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s;
    white-space: nowrap;
}

nav .nav-links a:hover {
    opacity: 0.6;
}

nav .cta-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Current page indicator ───────────────────────────────────────────────
 *
 * The header had no current-page affordance of any kind. The active tab is
 * marked server-side (see nav_active.go — one place, every page, no
 * per-handler wiring and no JS), so this is purely its presentation. */
nav .nav-links a.is-active {
    color: #fff;
    position: relative;
}

nav .nav-links a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: #b30000;
    border-radius: 1px;
}

nav .nav-links a.is-active:hover {
    opacity: 1;
}

nav .nav-mobile-links a.is-active {
    color: #fff;
    border-left: 3px solid #b30000;
    padding-left: 12px;
}

/* ── Header buttons (scoped — see the header note above) ── */
nav .btn,
.nav-mobile-cta .btn {
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
}

nav .btn-primary,
.nav-mobile-cta .btn-primary {
    background: #fff;
    color: #000;
}

nav .btn-primary:hover,
.nav-mobile-cta .btn-primary:hover {
    background: #e8e8ed;
}

nav .btn-secondary,
.nav-mobile-cta .btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

nav .btn-secondary:hover,
.nav-mobile-cta .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

nav .btn-donate,
.nav-mobile-cta .btn-donate {
    background: linear-gradient(135deg, #8b0000 0%, #b30000 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* ── Current-page affordance for the CTA buttons ──
   The nav tabs mark the current section with an underline (.nav-links
   a.is-active above). The right-hand CTA buttons -- Donate, Login,
   Subscribe, Follow Us -- own their own pages too, but they are buttons,
   not tabs, so an underline would look wrong on them. An inset ring marks
   the one whose page you are on instead. Which button is current is set by
   navActive in nav_active.go (/donate, /login, /subscribe-now, /subscribe);
   the footer-only pages (/careers, /privacy, /terms, /apply) have nothing
   in the header to mark and stay as they are. */
nav .cta-buttons .btn.is-active,
.nav-mobile-cta .btn.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
nav .cta-buttons .btn-donate.is-active,
.nav-mobile-cta .btn-donate.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 15px rgba(139, 0, 0, 0.4);
}

/* ── Hamburger button (hidden on desktop) ── */
nav .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    flex-shrink: 0;
}

nav .nav-hamburger span {
    display: block;
    height: 2px;
    background: #f5f5f7;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

nav .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav .nav-hamburger.open span:nth-child(2) { opacity: 0; }
nav .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu drawer ── */
nav .nav-mobile-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(0, 0, 0, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 24px 36px;
}

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

nav .nav-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
}

nav .nav-mobile-links a {
    color: #f5f5f7;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.2s;
}

nav .nav-mobile-links a:hover { color: #999; }

nav .nav-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

nav .nav-mobile-cta .btn {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
}

/* ── Responsive ──
 * Only the header's own breakpoints are reproduced here; index.css keeps
 * the page-content rules that share these @media blocks. */
@media (max-width: 1024px) {
    /* Was `position: relative`, which scrolled the header off the top and
       never brought it back: on a phone, once you were a screen into a
       video page there was no way to navigate anywhere without scrolling
       all the way up again.
       Sticky instead, with the hide-on-scroll-down / show-on-scroll-up
       behaviour driven by static/js/nav-headroom.js -- so it is out of
       the way while you read and one upward flick away when you want it.
       The transition is on the transform only; animating `top` or
       `position` would reflow the page on every scroll event. */
    nav {
        position: sticky;
        top: 0;
        transition: transform .22s ease;
        will-change: transform;
    }
    nav.nav-hidden { transform: translateY(-100%); }
    /* Never hide it while the mobile menu is open -- that would take the
       close button with it. */
    nav.nav-menu-open { transform: none !important; }
    nav .nav-links { display: none; }
    nav .cta-buttons { display: none; }
    nav .nav-hamburger { display: flex; }
}

/* Someone who has asked not to see motion gets a header that simply
   stays put. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    nav { transition: none; }
    nav.nav-hidden { transform: none; }
}

@media (max-width: 480px) {
    nav .nav-content { padding: 14px 16px; }
    nav .logo { font-size: 17px; }
}

/* ── Clearance for pages that carry no offset of their own ────────────────
 *
 * The public header is position:fixed (as index.css has always had it), so
 * it is out of the document flow and overlays whatever follows. Pages
 * styled by index.css already account for that — .hero has margin-top:60px,
 * /events has .et-offset, /projects .pt-offset, /subscribe
 * .frame-nav-offset.
 *
 * The theme.css-only pages do not, because they were laid out against
 * theme.css's ADMIN nav{}, which is position:sticky and therefore occupies
 * layout space. .legal-page, for instance, sets padding:60px top — enough
 * to sit below a sticky 60px bar, but not enough to clear a fixed one, so
 * its first heading slid under the header.
 *
 * These wrappers are given the header's height as top clearance. Listed
 * explicitly rather than applied to body, because a blanket body rule would
 * double up on every page that already offsets itself.
 */
.legal-page,
.login-wrapper,
.error-page {
    padding-top: 68px;
}

@media (max-width: 480px) {
    /* .nav-content drops to 14px padding at this width, so the bar is
       shorter and the clearance follows it. */
    .legal-page,
    .login-wrapper,
    .error-page {
        padding-top: 60px;
    }
}