/* ==========================================================================
   Shared Top Navigation — single source of truth across ALL pages.
   Self-contained (hardcoded palette, no page :root vars) so the bar renders
   pixel-identical on light pages (base.html, index_v4) and the dark-themed
   stock_landing page. Included via app/templates/partials/_nav.html.
   ========================================================================== */

/* Clear the fixed top bar. `body` (0,0,1) outranks any `* { padding:0 }`
   reset (0,0,0), so this offset holds on every page that links nav.css. */
body { padding-top: 64px; }

.top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(250, 244, 226, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 1000;
}
.top-nav a { text-decoration: none; }

.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand a {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
    color: #0f1b2d;
}
.nav-brand i { color: #0369a1; }

/* Ticker chip — quick jump back to the stock's Stock IQ page.
   Styled to match .nav-link (same font/weight/color as "Home"). */
.nav-ticker {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: #46566c !important;
    transition: background 0.15s, color 0.15s;
}
.nav-ticker:hover {
    background: #e9f1f9;
    color: #0f1b2d !important;
}

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

.nav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: #46566c;
    transition: background 0.15s, color 0.15s;
}
.nav-link i { font-size: 13px; }
.nav-link:hover { background: #e9f1f9; color: #0f1b2d; }
.nav-link.active { background: rgba(30, 58, 95, 0.08); color: #0369a1; }

/* Auth cluster */
.nav-auth {
    display: flex; align-items: center; gap: 6px;
    margin-left: 12px; padding-left: 12px;
    border-left: 1px solid #e7eef5;
}
.nav-auth-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-auth-btn.sign-in { color: #46566c; background: #e9f1f9; }
.nav-auth-btn.sign-in:hover { background: #f1f5fa; color: #0f1b2d; }
.nav-auth-btn.sign-out { color: #7e8ca1; }
.nav-auth-btn.sign-out:hover { color: #be123c; }
.nav-auth-user {
    font-size: 13px; font-weight: 500; color: #46566c;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mobile hamburger toggle (hidden on desktop) */
.nav-hamburger {
    display: none;
    background: none; border: none;
    font-size: 22px; color: #0f1b2d;
    cursor: pointer; padding: 6px; line-height: 1;
}

/* ── Mobile: hamburger + dropdown ── */
@media (max-width: 768px) {
    .top-nav { padding: 0 16px; }
    .nav-hamburger { display: block; }
    .nav-links {
        display: none;
        position: fixed; top: 64px; left: 0; right: 0;
        flex-direction: column; align-items: stretch;
        background: rgba(251, 246, 230, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        padding: 12px 16px; gap: 4px;
        border-bottom: 1px solid #ece1c2;
        box-shadow: 0 8px 24px rgba(28, 26, 24, 0.08);
        z-index: 999;
    }
    .nav-links.open { display: flex; }
    .nav-link { padding: 12px 16px; font-size: 15px; min-height: 44px; }
    .nav-auth {
        margin-left: 0; padding-left: 0; border-left: none;
        margin-top: 4px; padding-top: 8px;
        border-top: 1px solid #e7eef5;
    }
    .nav-auth-btn { min-height: 44px; }
}