/**
 * index.css - Home page only
 * Header: transparent at top, white on scroll
 */

body.page-index #mainNav {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body.page-index #mainNav:not(.nav-scrolled) a:not(.bg-gradient-to-r) {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.page-index #mainNav:not(.nav-scrolled) a:not(.bg-gradient-to-r):hover,
body.page-index #mainNav:not(.nav-scrolled) a.nav-active {
    color: rgb(147, 197, 253) !important;
}

body.page-index #mainNav:not(.nav-scrolled) .mobile-menu-button {
    color: white !important;
}

body.page-index #mainNav:not(.nav-scrolled) .mobile-menu-button:hover {
    color: rgb(147, 197, 253) !important;
}

body.page-index #mainNav.nav-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

body.dark.page-index #mainNav.nav-scrolled {
    background: rgba(15, 23, 42, 0.98) !important;
}

body.page-index #mainNav.nav-scrolled .nav-dropdown .dropdown-menu a {
    color: white !important;
}

body.page-index #mainNav.nav-scrolled a:not(.bg-gradient-to-r) {
    color: #334155 !important;
}

body.page-index #mainNav.nav-scrolled a:not(.bg-gradient-to-r):hover,
body.page-index #mainNav.nav-scrolled a.nav-active {
    color: rgb(59, 130, 246) !important;
}

body.page-index #mainNav.nav-scrolled .mobile-menu-button {
    color: #1e293b !important;
}

body.dark.page-index #mainNav.nav-scrolled a:not(.bg-gradient-to-r) {
    color: #cbd5e1 !important;
}

body.dark.page-index #mainNav.nav-scrolled .mobile-menu-button {
    color: white !important;
}

/* Logo – always show original image (no color filter on scroll) */
body.page-index #mainNav img {
    filter: none !important;
}

@media (max-width: 1023px) {
    body.page-index #mainNav:not(.nav-scrolled) {
        background: transparent !important;
    }

    body.page-index #mainNav.nav-scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body.dark.page-index #mainNav.nav-scrolled {
        background: rgba(15, 23, 42, 0.98) !important;
    }
}