/* ════════════════════════════════════════════════════════
   SURAPURA — Nav + Footer (Light Theme)
   Shared across all light-theme pages.
   The page's :root must define the light-theme CSS variables
   (--ink, --orange, --orange-deep, --bg-primary, --bg-cream,
    --border, --border-bright, --ink-soft, --text-muted, --orange-subtle).
   ════════════════════════════════════════════════════════ */

/* ─── NAV ─── */
nav {
    background: rgba(255, 250, 244, 0.78) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.brand-text { color: var(--orange-deep) !important; font-weight: 700; }
.brand-text span { color: var(--text-muted) !important; }

.nav-menu a { color: var(--ink-soft) !important; }
.nav-menu a:hover,
.nav-menu a.active { color: var(--orange-deep) !important; }

.nav-cta-btn,
nav .nav-cta-btn,
.nav-menu .nav-cta-btn {
    background-color: #fd5f00 !important;
    color: #FFFAF4 !important;
    -webkit-text-fill-color: #FFFAF4 !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.25rem !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.2s, -webkit-text-fill-color 0.2s !important;
}
.nav-cta-btn:hover,
nav .nav-cta-btn:hover,
.nav-menu .nav-cta-btn:hover {
    background-color: #fd5f00 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: none !important;
}

.nav-dropdown {
    background: rgba(255, 250, 244, 0.98) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 40px rgba(40, 20, 0, 0.08);
}
.nav-dropdown a { color: var(--ink-soft) !important; }
.nav-dropdown a:hover {
    color: var(--orange-deep) !important;
    background: var(--orange-subtle) !important;
}
.nav-dropdown a.active { color: var(--orange-deep) !important; }

.mobile-toggle { color: var(--ink) !important; }

@media (max-width: 1200px) {
    .nav-menu {
        background: rgba(255, 250, 244, 0.98) !important;
        border-bottom: 1px solid var(--border) !important;
    }
}

/* ─── FOOTER ─── */
footer {
    border-top: 1px solid var(--border);
    background: var(--bg-cream);
}
.footer-copy,
.footer-links a,
.footer-email a { color: var(--text-muted); }
.footer-links a:hover,
.footer-email a:hover { color: var(--orange-deep); }
.discord-link img {
    filter: invert(0.6) sepia(1) saturate(2) hue-rotate(-12deg);
}