/* ------------------------------------------------------------------ Site header
   The public website's header + brand lockup — ONE source of truth, loaded by BOTH
   renderers so the bar is pixel-identical wherever a public page is served:
     • the marketing Razor Pages (Pages/Shared/_Layout.cshtml, alongside site.css)
     • the Clearing's Blazor SSR pages (Components/Ideas/ClearingHeader.razor, alongside app.css)
   Every token used here (--fn-*) is defined in BOTH site.css and app.css; --fn-maxw is
   marketing-only, so it carries a fallback. Keep it that way — no other dependency on
   site.css, or the Clearing loses its chrome.
   Behaviour (mobile toggle + is-scrolled) lives in js/site.js, which delegates from
   document so it survives Blazor's enhanced-navigation DOM swaps. */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(247,241,228,.82);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--fn-line); box-shadow: var(--fn-shadow-sm); }

/* The width/padding are set here rather than relying on .container, which only site.css defines. */
.header-inner {
    width: 100%; max-width: var(--fn-maxw, 1140px); margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 1rem; min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-leaf { width: 32px; height: 32px; flex: none; }
/* only the sprig sways (pivot at the stem base); the squircle box stays put */
.brand-sprig { transform-box: fill-box; transform-origin: 50% 100%; animation: leaf-sway 6s ease-in-out infinite; }
@keyframes leaf-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.brand-lockup { display: inline-flex; flex-direction: column; line-height: 1.04; }
.brand-name { font-family: var(--fn-font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.01em; color: var(--fn-forest-900); }
.brand-kicker { font-family: var(--fn-font-display); font-weight: 600; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fn-forest-700); }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.primary-nav a:not(.nav-cta) {
    text-decoration: none; color: var(--fn-ink-700); font-weight: 500; font-size: .98rem;
}
.primary-nav > a:not(.nav-cta):not(.nav-signin):hover { color: var(--fn-forest-700); }
.nav-signin { font-weight: 600; }

/* The header's own CTA. It deliberately does NOT lean on .btn: site.css and app.css each define
   .btn differently (the app's is a hand-drawn sketch pill), so the same markup rendered a fat
   ember button on the marketing pages and a small pill on the Clearing's. Self-contained = same
   button everywhere. Values mirror site.css's .btn + .btn-primary + .btn-sm. */
.primary-nav .nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-weight: 600; font-size: .95rem;
    padding: .5rem 1.05rem;
    background: var(--fn-ember); color: #fff6ec;
    border: 2px solid transparent; border-radius: var(--fn-radius-pill, 300px);
    box-shadow: var(--fn-shadow-sm);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s, background .14s;
}
.primary-nav .nav-cta:hover { background: var(--fn-ember-strong); transform: translateY(-1px); box-shadow: var(--fn-shadow); }
.primary-nav .nav-cta:active { transform: translateY(0); }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 46px; height: 46px;
    background: transparent; border: 2px solid var(--fn-bark-300);
    border-radius: var(--fn-radius-sm, 8px);
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    cursor: pointer;
}
.nav-toggle span { width: 20px; height: 2px; background: var(--fn-forest-800); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Five nav links + a CTA get tight before the phone breakpoint — shrink the gap, don't wrap. */
@media (max-width: 900px) {
    .primary-nav { gap: 1rem; }
    .primary-nav a:not(.nav-cta) { font-size: .94rem; }
}

@media (max-width: 780px) {
    .nav-toggle { display: flex; }
    .primary-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: .4rem;
        background: var(--fn-paper); border-bottom: 1px solid var(--fn-line);
        padding: 1rem 1.5rem 1.4rem; box-shadow: var(--fn-shadow);
        display: none;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav a { padding: .55rem 0; }
    .primary-nav .nav-cta { margin-top: .4rem; padding: .6rem 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-sprig { animation: none; }
}