/* ══════════════════════════════════════════════════════════════
   RICHIEST NAV — standalone stylesheet
   Add to any page that needs the Richiest nav without the full
   ETF page design system.
   ══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
    --ink: #0f0f0f;
    --ink-muted: #6b6b6b;
    --paper: #fafaf7;
    --border: #ddd9ce;
    --earn: #b5541a;
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --s2: 0.5rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --wide-width: 960px;
}

/* ── NAV ── */
.site-nav { border-bottom: 1px solid var(--border); background: var(--paper); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--s5); display: flex; align-items: center; justify-content: space-between; height: 52px; position: relative; }
.nav-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.nav-logo span { color: var(--earn); }
.nav-links { display: flex; gap: var(--s4); list-style: none; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0; margin: 0; }
.nav-links a { text-decoration: none; color: var(--ink-muted); transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
/* hamburger */
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--s2); margin-right: calc(-1 * var(--s2)); }
.nav-toggle-label span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }

@media (max-width: 768px) {
    .nav-toggle-label { display: flex; margin-left: auto; }
    .nav-links { display: none; position: absolute; top: 52px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.07); flex-direction: column; gap: 0; padding: 4px 0 12px; z-index: 99; }
    .nav-links li a { display: block; padding: 12px 24px; font-size: 0.9375rem; border-bottom: 1px solid var(--border); }
    .nav-links li:last-child a { border-bottom: none; }
    .nav-toggle-input:checked ~ .nav-links { display: flex; }
    .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}