/* ============================================================
   LEGAL BRAIN: SHARED NAV
   The homepage was built standalone with its own inline nav CSS, and the subpages were
   built separately against assets/style.css. The result was two visibly different navs on
   the same site: different logo mark (gradient "LB" tile vs a navy bar-chart SVG), different
   type scale, and a different CTA ("Login" vs "Open App"), which Michael spotted on
   2026-07-28.

   This file restyles the SUBPAGE nav (`nav.nav > .nav-inner`) to match the homepage exactly,
   so the homepage he already approved is left untouched and the drifted pages come to it.
   Loaded after style.css so it wins.

   Mobile is deliberately NOT unified: the homepage uses a full-screen #mobile-menu overlay
   with its own JS, the subpages use a simpler .nav-links toggle that already works. Porting
   the overlay is a separate job; the toggle here is restyled to match, not replaced.
   ============================================================ */

nav.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 16px 0;
    background: rgba(6, 8, 12, 0.8);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(26, 35, 50, 0.5);
}

nav.nav .nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

nav.nav .nav-logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; font-size: 20px; font-weight: 700; color: var(--text-heading);
}
/* the gradient tile from the homepage, rebuilt in CSS so there is no second logo asset */
nav.nav .nav-logo .nav-logo-icon {
    width: 36px; height: 36px; flex: 0 0 auto;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 40%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.3px;
}

nav.nav .nav-links {
    display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0;
}
nav.nav .nav-links a {
    color: var(--text-muted); text-decoration: none;
    font-size: 14px; font-weight: 500; transition: color .2s;
}
nav.nav .nav-links a:hover,
nav.nav .nav-links a.active { color: var(--text-heading); }

/* CTA: same pill, same glow, same label and destination as the homepage */
nav.nav .nav-links a.nav-cta,
nav.nav a.nav-cta {
    background: var(--accent); color: #fff; font-weight: 600;
    padding: 10px 24px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 0 30px rgba(74, 158, 255, .25), 0 4px 12px rgba(0, 0, 0, .3);
    transition: background .2s, box-shadow .3s, transform .3s;
}
nav.nav a.nav-cta::after { content: '\2192'; transition: transform .3s ease; }
nav.nav a.nav-cta:hover {
    background: var(--accent-hover); color: #fff;
    box-shadow: 0 0 50px rgba(74, 158, 255, .35), 0 8px 24px rgba(0, 0, 0, .3);
    transform: translateY(-2px);
}
nav.nav a.nav-cta:hover::after { transform: translateX(4px); }

/* hamburger, matching the homepage's three-bar mark */
nav.nav .nav-toggle {
    display: none; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 110;
    color: var(--text-heading); font-size: 20px; line-height: 1;
}

@media (max-width: 900px) {
    nav.nav .nav-toggle { display: block; }
    nav.nav .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(6, 8, 12, .97);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(26, 35, 50, .5);
        padding: 8px 24px 20px;
    }
    nav.nav .nav-links.open { display: flex; }
    nav.nav .nav-links li { padding: 0; }
    nav.nav .nav-links a { display: block; padding: 14px 0; font-size: 16px; }
    nav.nav .nav-links a.nav-cta { justify-content: center; margin-top: 10px; }
}