/* ==========================================================================
   VISIONFI SITE CHROME
   usage: <link rel="stylesheet" href="/assets/visionfi-core.css">
          <link rel="stylesheet" href="/assets/visionfi-site.css">

   Shared by scoutnotebook.com and visionfi.ai. Everything here is chrome that
   both sites genuinely have in common — not brand tokens (those live in
   visionfi-core.css, vendored from visionfi-internal-operations and never
   hand-edited) and not page design (that stays page-local, and should).

   AUTHORED HERE: shared/visionfi-site.css. The copies under public/assets/
   and public/scout/assets/ are generated — run scripts/sync-shared-css.sh
   after editing, or the deploy's --check will refuse to ship.

   Why the two sites need one copy each rather than sharing a URL: visionfi.ai
   serves public/ but excludes public/scout, and scoutnotebook.com serves
   public/scout as its root. Neither can reach the other's files, and pointing
   one host at the other's origin would make a styling outage cross-domain.

   NAMING. Everything is scoped under `.site-nav` except `.brandlock` /
   `.brandline`, which the footer also uses. Short generic names — .links,
   .menu, .top — are safe only because they are nested; do not promote one to
   the top level. visionfi-core.css already owns .rail, .strip, .cols and
   .legal, and unscoped collisions render as something else entirely.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SITE NAV
   The sticky masthead. Works on <nav> or <header>; put a .wrap inside it.

     <nav class="site-nav"><div class="wrap">
       <a class="brandlock" href="/">…</a>     stacked, or --inline
       <div class="links">…</div>              optional centred link row
       <a class="navportal" href="…">…</a>     optional utility link
       <a class="btn btn-primary" href="…">…</a>
     </div></nav>
   -------------------------------------------------------------------------- */
.site-nav {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255,255,255,.93); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}
.site-nav .wrap {
    display: flex; align-items: center; gap: 26px; min-height: 62px; flex-wrap: wrap;
}
/* `--split` is for a masthead with no `.links` row to absorb the free space:
   lockup on the left, CTA on the right, nothing in between. Opt-in rather
   than a default, because on a nav that DOES have a link row it would also
   spread the wrapped mobile rows and shift the secondary actions. */
.site-nav--split .wrap { justify-content: space-between; }

/* ---- Brand lockup -------------------------------------------------------
   Default stacks the wordmark over its tagline. `--inline` sets them on one
   line with a hairline between, for pages whose masthead is a single row. */
.brandlock { text-decoration: none; display: block; line-height: 1.1; }
.brandlock .wordmark { display: block; }
.brandline {
    display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-dim);
    margin-top: 3px;
}
.site-footer .brandline { color: var(--color-dk-muted); }

.brandlock--inline { display: flex; align-items: center; gap: 16px; }
.brandlock--inline .wordmark { display: inline; }
/* Sat on one line the tagline reads as a masthead descriptor rather than a
   subtitle, so it takes the darker text colour and a touch more size. */
.brandlock--inline .brandline {
    margin-top: 0; font-size: 10.5px; letter-spacing: .12em; color: var(--color-text-light);
}
/* The divider is drawn, not marked up — one less empty span per page. */
.brandlock--inline .brandline::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 1px; height: 18px; background: #d8d8d8; margin-right: 16px;
}

/* ---- Centred link row --------------------------------------------------- */
.site-nav .links {
    display: flex; gap: 44px; flex: 1; flex-wrap: wrap; align-items: center;
    justify-content: center; padding: 0 20px;
    font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-light);
}
.site-nav .links a { text-decoration: none; }
.site-nav .links a:hover { color: var(--color-ink); }
/* Current page. `.top` marks the section a dropdown belongs to; `.on` marks a
   plain link. Both mean "you are here". */
.site-nav .links a.on,
.site-nav .links > .top > a { color: var(--color-ink); font-weight: 700; }

/* ---- Dropdown ----------------------------------------------------------- */
.site-nav .navdrop { position: relative; }
.site-nav .navdrop > a {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; letter-spacing: .02em;
}
.site-nav .navdrop > a::after { content: "▾"; font-size: 9px; color: var(--color-text-dim); }
.site-nav .navdrop .menu {
    position: absolute; top: 100%; left: -14px; min-width: 220px;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-float); padding: 8px 0; display: none; z-index: 40;
}
.site-nav .navdrop:hover .menu,
.site-nav .navdrop:focus-within .menu { display: block; }
.site-nav .navdrop .menu a { display: block; padding: 8px 16px; color: var(--color-text-light); }
.site-nav .navdrop .menu a:hover { background: var(--color-surface); color: var(--color-ink); }

/* ---- Utility link -------------------------------------------------------
   The customer portal: a destination for people who already bought, not a
   third audience tab. Deliberately quieter than the link row. */
.site-nav .navportal {
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
    color: var(--color-text-dim); text-decoration: none; white-space: nowrap;
}
.site-nav .navportal:hover { color: var(--color-ink); }

/* ---- Mobile -------------------------------------------------------------
   Every child wraps to its own line by default, which stacked the header six
   rows deep before the hero. Collapse to three: lockup + primary CTA, then
   the link row, then the secondary actions. */
@media (max-width: 860px) {
    .site-nav .wrap { gap: 12px 16px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
    .site-nav .brandlock { flex: 1 1 auto; }
    .site-nav .btn-primary { order: 2; flex: 0 0 auto; }
    .site-nav .links { order: 3; flex: 1 0 100%; justify-content: flex-start; gap: 24px; padding: 0; }
    .site-nav .navportal { order: 4; }
    /* Keep the dropdown panels inside the viewport */
    .site-nav .navdrop .menu { min-width: 0; width: max-content; max-width: min(82vw, 260px); }
    .site-nav .links > .navdrop:last-child .menu { left: auto; right: -14px; }
}
/* The tagline is the first thing to go when the row gets tight — otherwise the
   lockup grows to the full row width and pushes the CTA onto its own line.
   The inline variant spends its budget horizontally, so it gives up sooner. */
@media (max-width: 720px) {
    .brandlock--inline .brandline { display: none; }
}
@media (max-width: 520px) {
    .brandline { display: none; }
}