/* ── Shared Nav Component ──
   Depends on CSS custom properties defined per-page:
   --midnight, --yellow, --sans, --serif, --white
*/

/* ── Nav bar ── */
#mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.35s, backdrop-filter 0.35s, box-shadow 0.35s;
}
#mainNav.scrolled {
    background: rgba(12, 20, 37, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Logo ── */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--white);
}
.nav-logo svg { width: 32px; height: 32px; }
.nav-logo span {
    font-family: var(--serif);
    font-size: 1.38rem;
    letter-spacing: -0.01em;
}

/* ── CTA pill button ── */
.nav-cta {
    background: var(--yellow, #FACC15);
    color: var(--midnight, #0f172a);
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}
.nav-cta:hover {
    opacity: 0.85;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    #mainNav { padding: 14px 18px; }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    #mainNav { transition: none !important; }
}