/* ==========================================================================
   site-nav.css: THE ONE BAR (founder, 2026-09-25)
   ==========================================================================
   Styles partials/_site_nav.html, the masthead of the landing, of every page of
   the public shell and of the plans page. It used to be two bars: the landing's
   eleven entries in spaced capitals on the page ground, and the shell's four in
   normal case on a darker band, so a visitor walking from the landing into the
   research met another site ("even the writings are a bit different ... even the
   band colors are different"). This file is the only place the bar is styled;
   landing.css and public-shell.css carry no rule for it.

   Self-contained on purpose: the three pages that load it have three different
   token sets, so the bar names its own colours (the public shell's palette) and
   its own face, and reads nothing from the page around it.

   THE DENSITY ZOOM. The public shell zooms its body to 0.8 on a desktop and the
   research pages undo that; the bar cancels whatever zoom it sits in (height and
   padding divided by the factor, children counter-zoomed) so it lands at the same
   size on every page. The landing and the plans page set no zoom, and at
   --app-zoom 1 every calc below is the identity. The counter-zoom sits on the
   children, not the bar, because zoom on a sticky element is where engines
   disagree. (Carried over from public-shell.css, where it was written 2026-08.)
   ========================================================================== */

.site-nav {
    --sn-band: #0B0E14;
    --sn-rule: #2B3645;
    --sn-ink: #9BA8BC;
    --sn-ink-strong: #E8ECF2;
    --sn-accent: #3fae7f;
    --sn-on-accent: #04140d;

    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(20px / var(--app-zoom, 1));
    height: calc(56px / var(--app-zoom, 1));
    padding: 0 calc(40px / var(--app-zoom, 1));
    box-sizing: border-box;
    background: var(--sn-band);
    border-bottom: 1px solid var(--sn-rule);
    font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.2;
    letter-spacing: normal;
}
.site-nav > * { zoom: calc(1 / var(--app-zoom, 1)); }

/* The landing: fixed under its 30px beta strip, where its layout expects the bar. */
.site-nav.site-nav--fixed { position: fixed; top: 30px; left: 0; right: 0; z-index: 100; }

/* ---- The brand -------------------------------------------------------- */
.site-nav .site-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--sn-ink-strong);
    text-decoration: none;
}
.site-nav .site-nav-mark { display: block; width: 28px; height: 28px; color: var(--sn-accent); }
.site-nav .site-nav-wordmark {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.site-nav .site-nav-wordmark .wm-accent { font-weight: 400; color: var(--sn-accent); }

/* ---- The links -------------------------------------------------------- */
.site-nav .site-nav-links { display: flex; align-items: center; gap: 24px; }
.site-nav .site-nav-links > a:not(.site-nav-btn),
.site-nav .site-nav-panel > a {
    color: var(--sn-ink);
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.site-nav .site-nav-links > a:not(.site-nav-btn):hover,
.site-nav .site-nav-panel > a:hover,
.site-nav a[aria-current="page"] { color: var(--sn-ink-strong); }
/* the page the visitor is on: its link underlined in the brand green */
.site-nav .site-nav-links > a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--sn-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* ---- The two buttons: the offer for firms (quiet), following the research (filled) ---- */
.site-nav a.site-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--sn-accent);
    border-radius: 6px;
    background: var(--sn-accent);
    color: var(--sn-on-accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.site-nav a.site-nav-btn:hover { transform: translateY(-1px); }
.site-nav a.site-nav-btn--quiet {
    border-color: var(--sn-rule);
    background: transparent;
    color: var(--sn-ink);
    font-weight: 500;
}
.site-nav a.site-nav-btn--quiet:hover { border-color: var(--sn-accent); color: var(--sn-ink-strong); }
.site-nav a:focus-visible,
.site-nav summary:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; border-radius: 4px; }

/* ---- The menu: under 960px the links fold into it; no script needed ---- */
.site-nav a.site-nav-follow { display: none; }
.site-nav .site-nav-menu { display: none; }
.site-nav .site-nav-menu > summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    list-style: none;
    cursor: pointer;
}
.site-nav .site-nav-menu > summary::-webkit-details-marker { display: none; }
.site-nav .site-nav-menu > summary span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--sn-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav .site-nav-menu[open] > summary span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-nav .site-nav-menu[open] > summary span:nth-child(2) { opacity: 0; }
.site-nav .site-nav-menu[open] > summary span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.site-nav .site-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 20px 18px;
    background: var(--sn-band);
    border-bottom: 1px solid var(--sn-rule);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}
.site-nav .site-nav-panel > a {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1rem;
}
.site-nav .site-nav-panel-btns { display: flex; gap: 10px; padding-top: 16px; }
.site-nav .site-nav-panel-btns a.site-nav-btn { flex: 1; padding: 10px 12px; }

@media (max-width: 1120px) {
    .site-nav { padding: 0 calc(28px / var(--app-zoom, 1)); }
    .site-nav .site-nav-links { gap: 18px; }
}
@media (max-width: 960px) {
    .site-nav { gap: calc(12px / var(--app-zoom, 1)); }
    .site-nav .site-nav-links { display: none; }
    .site-nav a.site-nav-follow { display: inline-flex; margin-left: auto; }
    .site-nav .site-nav-menu { display: block; }
}
/* while the bar shows its own Follow button, the open menu does not repeat it */
@media (max-width: 960px) and (min-width: 521px) {
    .site-nav .site-nav-panel-btns a.site-nav-btn:not(.site-nav-btn--quiet) { display: none; }
}
@media (max-width: 768px) {
    .site-nav { padding: 0 20px; }
}
/* a phone: the brand and the menu; both buttons wait inside it */
@media (max-width: 520px) {
    .site-nav { padding: 0 16px; }
    .site-nav a.site-nav-follow { display: none; }
}

/* A printed paper keeps the paper, not the website. */
@media print {
    .site-nav { display: none !important; }
}