/* ============================================================
   nav-universal.css — canonical floating-pill nav styles.

   Auto-injected by /js/nav-universal.js on every page that mounts
   <div id="sb-nav-mount">. Re-canonicalised 2026-06-20: this file is
   now the single source of truth, with embedded design tokens so it
   has zero external dependencies. The duplicate block that used to
   live in homepage-hero.css has been removed; the homepage now reads
   the same styles as legal/terms/privacy/etc.
   ============================================================ */

/* Scoped tokens — local to the universal nav so the host page's own
   tokens stay intact. */
.nav-floating[data-scroll-nav],
.nav-floating[data-scroll-nav] * {
    --sbun-text:           #E2E8F0;
    --sbun-electric-blue:  #0EA5E9;
    --sbun-cyber-purple:   #A855F7;
    --sbun-font-display:   'Sora', 'Inter', system-ui, sans-serif;
}

.nav-floating {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10005;
    width: calc(100% - 40px);
    max-width: 1200px;
    transition: all 0.3s ease;
}

.nav-blur {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    /* Hard safety net — anything that tries to spill past the rounded pill
       is clipped at the border, not visually bleeding outside it. */
    overflow: hidden;
}

/* Lock the inline nav row — never wrap, never grow past the pill. */
.nav-wrapper { flex-wrap: nowrap; min-width: 0; }
.nav-links   { flex-wrap: nowrap; min-width: 0; }
.nav-link    { white-space: nowrap; }

.nav-floating:hover .nav-blur {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 165, 233, 0.1);
}

.nav-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.nav-brand img {
    border-radius: 10px;
}

.brand-text {
    font-family: var(--sbun-font-display);
    font-size: 18px;
    font-weight: 700;
    color: white;
}

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

.nav-link {
    padding: 8px 16px;
    color: var(--sbun-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-link.active {
    background: rgba(14, 165, 233, 0.14);
    color: white;
}

.btn-nav {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-nav-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--sbun-electric-blue), var(--sbun-cyber-purple));
    border: none;
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.btn-nav-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10001;
    position: relative;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Collapse to hamburger at 1180px — the inline row (Logo · 5 links ·
   Login · Let's Talk) starts crowding the rounded pill below this width
   and "Let's Talk" wraps. Triggers a single, consistent breakpoint across
   every page; homepage-hero.css used to duplicate this at 1180px but
   lost source-order to this file (injected last by nav-universal.js),
   creating a 901–1180px dead zone where neither the inline nav nor the
   hamburger was visible. Fixed 2026-06-21. */
@media (max-width: 1180px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile menu popover — ported from the chosen repo pattern 2026-06-20.
   Anchored under the hamburger (top-right of the viewport), not a full-
   height off-canvas drawer. Rounded card, dark slate with blur, subtle
   fade + scale + translate entrance. Click outside auto-closes (the
   JS document-click listener handles it; no backdrop element needed).
   ════════════════════════════════════════════════════════════════════ */
.nav-drawer {
    position: fixed;
    top: 90px;                     /* sits 10px below the floating nav pill */
    right: 20px;
    width: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 110px);
    z-index: 10006;                /* one above .nav-floating (10005) */
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.96);
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 280ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
/* Keep [hidden] semantically valid for screen readers while we override
   the default `display: none` so our transition can run from a visible-
   in-DOM but visibility:hidden state. */
.nav-drawer[hidden] {
    display: block;
    pointer-events: none;
}
.nav-drawer:not([hidden]) {
    pointer-events: auto;
}

/* The chosen pattern's popover doesn't need a backdrop element — the
   document click listener closes on any outside click. Keep .nav-drawer__
   backdrop as a no-op so existing markup parses but renders nothing. */
.nav-drawer__backdrop { display: none; }

.nav-drawer__panel {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
}
.nav-drawer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: white;
    font-family: var(--sbun-font-display, 'Sora', 'Inter', system-ui, sans-serif);
    font-weight: 700;
    font-size: 15px;
}
.nav-drawer__brand img {
    border-radius: 8px;
    width: 28px;
    height: 28px;
}
.nav-drawer__close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(226, 232, 240, 0.65);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 160ms ease, transform 220ms ease;
}
.nav-drawer__close:hover {
    color: white;
    transform: rotate(90deg);
}

.nav-drawer__links {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    gap: 1px;
}
.nav-drawer__link {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: background 140ms ease, color 140ms ease, padding-left 160ms ease;
}
.nav-drawer__link:hover,
.nav-drawer__link:focus,
.nav-drawer__link.active {
    background: rgba(14, 165, 233, 0.14);
    color: white;
    padding-left: 18px;
}

.nav-drawer__actions {
    padding: 10px 4px 4px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 8px;
}
.nav-drawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 160ms ease;
}
.nav-drawer__btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: white;
}
.nav-drawer__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
}
.nav-drawer__btn--primary {
    background: linear-gradient(135deg, #0EA5E9, #A855F7);
    color: white;
}
.nav-drawer__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.35);
}

/* Body class kept for any host page that wants to react to drawer state;
   no scroll-lock applied (popover doesn't need it — page stays usable). */