/* Navigation Menu Color Override - Highest Priority */

/* Desktop Navigation Styles */
@media screen and (min-width: 768px) {
    /* Navigation container with dark background */
    html body .main-navigation,
    html body #site-navigation {
        background: #2c3e50 !important; /* Dark blue-gray background */
    }
    
    /* Alternative darker backgrounds you can try: */
    /* background: #1a1a1a !important; /* Pure dark */
    /* background: #333333 !important; /* Dark gray */
    /* background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%) !important; /* Gradient */
    
    /* Navigation wrapper */
    html body .main-navigation .nav-wrapper,
    html body #site-navigation .nav-wrapper {
        background: transparent !important;
    }
    
    /* Menu list */
    html body .main-navigation ul.nav-menu,
    html body #site-navigation ul.nav-menu,
    html body #primary-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Menu items */
    html body .main-navigation ul.nav-menu > li,
    html body #primary-menu > li {
        display: inline-block !important;
    }
    
    /* Menu links - WHITE TEXT */
    html body .main-navigation ul.nav-menu > li > a,
    html body #site-navigation ul.nav-menu > li > a,
    html body #primary-menu > li > a,
    html body .nav-menu a {
        color: #ffffff !important; /* White text */
        text-decoration: none !important;
        padding: 15px 20px !important;
        display: block !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Hover state */
    html body .main-navigation ul.nav-menu > li > a:hover,
    html body #site-navigation ul.nav-menu > li > a:hover,
    html body #primary-menu > li > a:hover,
    html body .nav-menu a:hover {
        color: #ffd700 !important; /* Gold/yellow on hover */
        background: rgba(255,255,255,0.1) !important;
    }
    
    /* Active/current page */
    html body .main-navigation ul.nav-menu > li.current-menu-item > a,
    html body .main-navigation ul.nav-menu > li.current_page_item > a,
    html body #primary-menu > li.current-menu-item > a,
    html body #primary-menu > li.current_page_item > a {
        color: #ffd700 !important; /* Gold/yellow for current page */
        background: rgba(255,255,255,0.05) !important;
    }
    
    /* Visited links should also be white */
    html body .main-navigation ul.nav-menu > li > a:visited,
    html body #primary-menu > li > a:visited {
        color: #ffffff !important;
    }
}

/* Alternative: If navigation still has white background, force dark background everywhere */
@media screen and (min-width: 768px) {
    /* Force dark background on all possible navigation containers */
    .site nav,
    nav.main-navigation,
    #site-navigation,
    .navigation,
    .nav {
        background-color: #2c3e50 !important;
    }
}