:root {
    --nav-text-90: rgba(10, 10, 10, 0.9);
    --nav-hover-blue: #2c7be5;
    --nav-hover-bg: rgba(128, 128, 128, 0.5);
    /* Subtle texture colors */
    --texture-blue: rgba(44, 123, 229, 0.08);
    --texture-green: rgba(0, 217, 126, 0.08);
    --texture-yellow: rgba(245, 158, 11, 0.08);
}

/* Modern Navigation Styling */
#header.nav-experiment-active {
    background: transparent !important;
    border: none !important;
}

#topNav.nav-experiment-bar {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1000;
}

/* Texture Layer Implementation */
#topNav.nav-experiment-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: 
        /* Left & Middle Blur Textures */
        radial-gradient(circle at 15% 50%, var(--texture-blue) 0%, transparent 45%),
        radial-gradient(circle at 35% 30%, var(--texture-green) 0%, transparent 40%),
        radial-gradient(circle at 55% 70%, var(--texture-yellow) 0%, transparent 45%),
        /* Right Gradient: Light Grey to Pure White */
        linear-gradient(to right, transparent 50%, #f4f4f4 80%, #ffffff 100%);
    pointer-events: none;
}

/* Typography & Interactions */
#topNav.nav-experiment-bar .nav-link,
#topNav.nav-experiment-bar .dropdown-toggle {
    color: var(--nav-text-90) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    padding: 12px 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 8px;
    margin: 4px 2px;
}

#topNav.nav-experiment-bar .nav-link:hover,
#topNav.nav-experiment-bar .dropdown-toggle:hover {
    color: var(--nav-hover-blue) !important;
    background-color: var(--nav-hover-bg) !important;
    transform: translateY(-1px);
}

/* Submenu / Dropdown Customization */
#topNav.nav-experiment-bar .dropdown-menu {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-top: 10px !important;
}

#topNav.nav-experiment-bar .dropdown-item {
    color: var(--nav-text-90) !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#topNav.nav-experiment-bar .dropdown-item:hover {
    color: var(--nav-hover-blue) !important;
    background-color: var(--nav-hover-bg) !important;
    padding-left: 22px !important;
}

/* Multi-level Dropdown Support */
@media (min-width: 992px) {
    #topNav.nav-experiment-bar .dropdown-menu .nav-item {
        position: relative;
    }
    #topNav.nav-experiment-bar .dropdown-menu .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -10px;
        margin-top: 0 !important;
    }
    #topNav.nav-experiment-bar .dropdown-menu .nav-item:hover > .submenu {
        display: block;
        animation: smkFadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Mobile Submenu State */
.submenu.lives {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    box-shadow: none !important;
    background: rgba(0,0,0,0.03) !important;
    border: none !important;
    margin-left: 1rem !important;
}

@keyframes smkFadeInScale {
    from { opacity: 0; transform: scale(0.95) translateX(-5px); }
    to { opacity: 1; transform: scale(1) translateX(0); }
}

/* Header Adjustments */
#header.sticky#topNav.nav-experiment-bar {
    background: rgba(255, 255, 255, 0.85) !important;
}

/* Responsive Fix */
@media (max-width: 991px) {
    #navbar_main_opd_experiment {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
    }
}
