/* ==========================================================================
   SIGMA SCANNER — nav.css
   §1 Navigation.

   Spec: 06-DESIGN-SYSTEM.md §11.

   Works fully without JavaScript: the mobile menu degrades to a plain
   anchor list if data-nav-toggle never gets a click handler, and the
   scroll state (transparent → glass) simply never toggles, leaving the
   nav in its "top" (transparent) presentation — legible against the light
   hero, still functional.
   ========================================================================== */

@layer components {

  /* ---------------------------------------------------------------------
     WHY THIS OVERRIDES style.css's `position: sticky`

     style.css sets the generic .ss-nav mount to `position: sticky` — a
     Phase-1 placeholder written when this header was still an empty shell,
     so it didn't matter whether it was sticky or fixed.

     It matters now. A sticky element occupies its normal-flow space: the
     hero section begins AFTER the nav's real height, not underneath it.
     But .hero's own top padding (see hero.css) already adds `--nav-h` of
     extra space, on the assumption that the nav floats OVER it. With
     sticky, that assumption is wrong twice over — the page gets extra
     dead space at the top, AND a "transparent" nav has nothing behind it
     but plain white body background, because the green hero wash hasn't
     started yet. That mismatch is exactly the "navbar background is fully
     white, doesn't match the hero" symptom.

     `position: fixed` makes the nav a true overlay: the hero begins at
     real page-top underneath it, so the transparent nav genuinely shows
     the hero's wash through it, and only goes opaque once something is
     scrolling beneath it (see [data-nav="scrolled"] below) — which is
     what the component's own CSS comments already documented as the
     intent, just never wired up correctly.

     `components` sorts after `layout` in the master layer order (declared
     once in style.css), so this rule correctly beats style.css's `sticky`
     regardless of specificity — no !important needed.
     --------------------------------------------------------------------- */
  .ss-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    /* style.css's layout-layer rule only sets z-index: var(--z-nav) (100)
       — fine while nothing else fixed overlaps the header, but the mobile
       scrim below is position:fixed; inset:0 at var(--z-overlay) - 1
       (199), which DOES cover the header strip. Without this override the
       scrim paints over the header once the drawer opens, burying the
       visible close (✕) icon under its 58%-opacity tint — the header
       looks dimmed/broken and the icon stops being the actual element
       under the user's finger (the scrim's own click-to-close handler was
       masking the symptom by closing anyway, for the wrong reason).
       Above both the scrim (199) and the drawer itself (200) so the
       header — and its close icon — always stays crisp on top; it never
       visually overlaps the drawer panel anyway, since the drawer's
       inset-block-start already starts it below the header's own height. */
    z-index: calc(var(--z-overlay) + 2);
    background: transparent;
    border-block-end: 1px solid transparent;
    box-shadow: none;
    transition: background-color 240ms var(--ease-out-quad),
                border-color 240ms var(--ease-out-quad),
                box-shadow 240ms var(--ease-out-quad);
  }

  /* If the utility bar (§0) is ever populated and un-hidden above this
     header, it will need to join this same fixed stack — currently it
     ships `hidden` with no content, so this isn't yet a live conflict,
     but flagging it here so it isn't rediscovered the hard way later. */

  /* Glass only once something is actually scrolling beneath it — the
     system's own rule for when glass is allowed (06-DESIGN-SYSTEM.md §6.1). */
  .ss-nav[data-nav="scrolled"] {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-block-end-color: var(--ink-200);
    box-shadow: var(--shadow-sm);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ss-nav[data-nav="scrolled"] { background: rgb(255 255 255 / .98); }
  }

  /* position + z-index here, not just on the outer .ss-nav, is the part
     that actually matters. .ss-nav__scrim/.ss-nav__mobile are positioned
     SIBLINGS of this element inside the same .ss-nav stacking context
     (they're markup children of <header class="ss-nav">, not separate
     page-level overlays) — per CSS stacking rules a positioned sibling
     with a z-index always paints above a static, unpositioned one in the
     same context, no matter how high a z-index the shared ancestor has.
     Without this, the scrim (z-index 199) painted over this bar the
     moment the drawer opened, burying the visible close (✕) icon under
     its 58%-opacity tint — confirmed via elementFromPoint() returning the
     scrim <div>, not the toggle button, at the icon's own coordinates. */
  .ss-nav__inner {
    position: relative;
    z-index: calc(var(--z-overlay) + 3);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    block-size: var(--nav-h);
    transition: block-size 240ms var(--ease-out-quad);
  }
  .ss-nav[data-nav="scrolled"] .ss-nav__inner { block-size: var(--nav-h-scrolled); }

  /* Column, not row: the wordmark sits above "by GreenSigma" — see the
     brand reference. Logo shrunk from 26px to 21px to make room for the
     sub-line without growing the header's own block-size. */
  .ss-nav__brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none; }
  .ss-nav__logo {
    block-size: 23px;
    inline-size: auto;
    transition: block-size 240ms var(--ease-out-quad);
  }
  .ss-nav[data-nav="scrolled"] .ss-nav__logo { block-size: 18px; }

  .ss-nav__brand-sub {
    font-size: 13px;
    line-height: 1;
    font-weight: var(--fw-medium);
    letter-spacing: .01em;
    color: var(--ink-500);
    padding-inline-start: 1px;
    transition: font-size 240ms var(--ease-out-quad);
  }
  .ss-nav[data-nav="scrolled"] .ss-nav__brand-sub { font-size: 9px; }

  /* ---------- MOBILE-ONLY "BOOK A DEMO" -----------------------------------
     Desktop already carries Book a Demo inside .ss-nav__actions (hidden
     below the 900px breakpoint, see the media query further down). Below
     that breakpoint .ss-nav__actions disappears entirely and the CTA
     would only be reachable inside the hamburger drawer — this puts it
     back in the bar itself, next to the toggle, per the mobile-navbar
     brief. Hidden again once .ss-nav__actions takes over, so the CTA
     never appears twice. */
  .ss-nav__mobile-cta {
    display: inline-flex;
    margin-inline-start: auto;
    white-space: nowrap;
    /* Deliberately smaller than .ss-btn--sm — three items now share the
       bar with the logo and the toggle on phones as narrow as 320px, and
       the standard small button (icon + padding-inline 16px) doesn't
       leave room. */
    block-size: 32px;
    padding-inline: var(--sp-3);
    font-size: var(--fs-xs);
  }

  /* Tighter row spacing below the desktop breakpoint — .ss-nav__inner's
     base gap (--sp-6, 24px) is sized for the desktop link/action cluster;
     on mobile only brand + CTA + toggle are visible, and 24px between
     each is what makes the 320px case above too tight to fit. */
  @media (max-width: 899px) {
    .ss-nav__inner { gap: var(--sp-2); }
  }

  /* ---------- LINKS (desktop) -------------------------------------------- */
  .ss-nav__links {
    position: relative;
    display: none;
    align-items: center;
    gap: var(--sp-7);
    margin-inline-start: var(--sp-2);
    margin-inline-end: auto;
  }
  .ss-nav__links a {
    /* Explicit, not inherited: style.css's `a:not([class])` rule (meant
       for unclassed prose links in body copy) sets underline + green on
       ANY <a> with no class attribute — including these, since neither
       desktop nor mobile nav links were ever given one. Nothing below
       previously touched text-decoration, so that underline survived
       untouched underneath the colour override that WAS set. Explicit
       beats accidental inheritance from an unrelated rule. */
    text-decoration: none;
    font-size: 15px;
    font-weight: var(--fw-medium);
    color: var(--ink-600);
    padding-block: 4px;
    transition: color 180ms var(--ease-out-quad);
  }
  .ss-nav__links a:hover { color: var(--ink-900); }
  /* Matches BOTH values used across the site: "true" is set by nav.js's
     own scroll-spy (index.html only, whose links are all #anchors), "page"
     is hand-set in markup on cross-page nav items that point at another
     file/URL (blog.html's "Learn", faq.html's "FAQ", newsroom.html's own
     "Newsroom" link) — scroll-spy never runs for those, so nothing else
     would ever apply this colour to them. */
  .ss-nav__links a[aria-current] { color: var(--ink-900); }

  /* Single element that slides between items, rather than a per-item
     border — 06-DESIGN-SYSTEM.md §11.2. Positioned in px by js/nav.js;
     absent a JS-computed position it simply has zero width and is inert. */
  .ss-nav__indicator {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 2px;
    border-radius: var(--r-full);
    background: var(--signal-600);
    transition: transform 280ms var(--ease-out-cubic), inline-size 280ms var(--ease-out-cubic);
    pointer-events: none;
  }

  /* ---------- ACTIONS (desktop) ------------------------------------------ */
  .ss-nav__actions { display: none; align-items: center; gap: var(--sp-3); flex: none; }

  /* ---------- MOBILE TOGGLE ----------------------------------------------- */
  .ss-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px; block-size: 40px;
    /* .ss-nav__mobile-cta already carries margin-inline-start:auto and
       sits immediately before this in the markup — it does the work of
       pushing this cluster to the bar's end. .ss-nav__inner's own `gap`
       already separates it from the CTA; no margin needed here too. */
    border-radius: var(--r-md);
    color: var(--ink-800);
  }
  .ss-nav__toggle:hover { background: var(--ink-050); }
  .ss-nav__toggle .ss-icon { inline-size: 22px; block-size: 22px; }

  /* ---------- MOBILE DRAWER + SCRIM ---------------------------------------
     A right-hand drawer with a dimmed backdrop: narrower than the
     viewport, elevated with a real shadow, closes on a backdrop tap.

     --nav-live-h is set by js/nav.js from the header's ACTUAL rendered
     height right before opening — the static --nav-h token is only
     correct at the unscrolled height, and can be up to 16px off if the
     drawer is opened after the nav has already compressed on scroll. The
     var(...) fallback keeps this valid CSS even before JS ever runs. */

  /* --overlay (rgb(7 26 18 / .48)) is ink-900 at 48% — ink-900 itself
     carries a slight green cast, and layering translucent green over an
     already-green hero background compounds into a muddy olive wash
     rather than a clean dim. A scrim's job is to recede, not to add its
     own colour to whatever it sits over — so this uses a true neutral
     near-black instead, independent of the brand palette. */
  .ss-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: rgb(8 10 9 / .58);
  }
  .ss-nav__scrim[hidden] { display: none; }

  .ss-nav__mobile {
    position: fixed;
    inset-block-start: var(--nav-live-h, var(--nav-h));
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: min(340px, 84vw);
    z-index: var(--z-overlay);
    background: var(--paper);
    border-inline-start: 1px solid var(--ink-200);
    box-shadow: var(--shadow-hero);
    padding: var(--sp-5) var(--sp-5) var(--sp-8);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .ss-nav__mobile[hidden] { display: none; }

  /* An explicit close affordance INSIDE the drawer, not just the header
     toggle above it — the toggle still works, but a panel that opens
     over the page should also close from inside itself without the user
     having to know that. */
  .ss-nav__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--sp-5);
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--ink-150);
  }
  .ss-nav__mobile-title {
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--ink-400);
  }
  .ss-nav__mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px; block-size: 32px;
    border-radius: var(--r-md);
    color: var(--ink-600);
  }
  .ss-nav__mobile-close:hover { background: var(--ink-050); color: var(--ink-900); }
  .ss-nav__mobile-close .ss-icon { inline-size: 18px; block-size: 18px; }

  .ss-nav__mobile ul { display: flex; flex-direction: column; }
  .ss-nav__mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    block-size: 50px;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    text-decoration: none;      /* belt-and-braces — see the desktop rule's note */
    color: var(--ink-800);
    border-block-end: 1px solid var(--ink-100);
    transition: color 160ms var(--ease-out-quad);
  }
  .ss-nav__mobile-link:hover,
  .ss-nav__mobile-link:active { color: var(--signal-700); }
  .ss-nav__mobile-link .ss-icon { color: var(--ink-300); flex: none; }

  .ss-nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-block-start: var(--sp-6);
  }
  .ss-nav__mobile-actions .ss-btn { inline-size: 100%; }

  /* A quiet footer anchors the bottom of a tall, mostly-empty panel —
     without it a two-item action list leaves a long stretch of blank
     white below, which is what made the first pass read as unfinished. */
  .ss-nav__mobile-foot {
    margin-block-start: auto;
    padding-block-start: var(--sp-6);
    font-size: var(--fs-xs);
    color: var(--ink-300);
  }

  /* ------------------------------------------------------------------
     ENTRANCE — @starting-style, not a two-step JS class dance

     The first pass deliberately shipped with NO entrance animation,
     reasoning that a JS-driven opacity transition needs two independent
     steps to both succeed (remove [hidden], THEN add a class on the next
     frame) — and if the second step never runs, the panel is stuck
     invisible. That reasoning was sound, but the conclusion — no
     animation at all — was more caution than necessary.

     @starting-style defines the FROM state for a property change TO an
     already-displayed element, entirely in CSS. There is no second JS
     step to fail: the moment [hidden] is removed, the browser interpolates
     from the @starting-style values to the rule's normal values on its
     own. In browsers without support (pre-2024 engines), the at-rule is
     simply inert — the panel renders directly at its final, fully visible
     state with no animation. Either way, removing [hidden] is the ONLY
     condition required for the drawer to be visible.
     ------------------------------------------------------------------ */
  .ss-nav__mobile {
    transform: translateX(0);
    opacity: 1;
    transition: transform 300ms var(--ease-out-cubic), opacity 220ms var(--ease-out-quad);
  }
  @starting-style {
    .ss-nav__mobile:not([hidden]) { transform: translateX(28px); opacity: 0; }
  }

  .ss-nav__scrim {
    opacity: 1;
    transition: opacity 260ms var(--ease-out-quad);
  }
  @starting-style {
    .ss-nav__scrim:not([hidden]) { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ss-nav__mobile, .ss-nav__scrim { transition: none; }
  }
}

/* ---- Desktop breakpoint --------------------------------------------------
   Deliberately in @layer components, NOT @layer layout.

   Cascade layer order (declared once in style.css) is:
     reset, tokens, base, layout, components, utilities
   `components` sorts AFTER `layout`, so a `layout`-layer override loses to
   any `components`-layer base rule regardless of whether its media query
   matches — layers outrank both specificity and source order. This exact
   mistake already happened once in hero.css (see its own note on the
   subject); the fix there was "move the override into the same layer as,
   or later than, the rule it overrides." Applying that here. */
@layer components {
  @media (min-width: 900px) {
    .ss-nav__links { display: flex; }
    .ss-nav__actions { display: flex; }
    .ss-nav__mobile-cta { display: none; }
    .ss-nav__toggle { display: none; }
  }
}