/* Transparent Navbar Styles */
.navbar {
    background-color: transparent !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.dark-mode .navbar {
    background-color: transparent !important;
}

body.dark-mode .navbar.scrolled {
    background-color: rgba(10, 14, 39, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Ensure navbar text is visible on transparent background */
.navbar .nav-link {
    color: #333 !important;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* CRITICAL: White text in dark mode */
body.dark-mode .navbar .nav-link {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Dark mode brand/logo text */
body.dark-mode .navbar .navbar-brand {
    color: #ffffff !important;
}

/* Dark mode toggler icon */
body.dark-mode .navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* Remove text shadow when scrolled for clarity */
.navbar.scrolled .nav-link {
    text-shadow: none;
}

body.dark-mode .navbar.scrolled .nav-link {
    text-shadow: none;
    color: #ffffff !important;
}

/* Logo styling for transparent navbar */
.navbar .site-logo {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

body.dark-mode .navbar .site-logo {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}

/* Mobile navbar adjustments */
@media (max-width: 768px) {
    .navbar {
        background-color: rgba(255, 255, 255, 0.98) !important;
    }

    body.dark-mode .navbar {
        background-color: rgba(10, 14, 39, 0.98) !important;
    }
}