/* Custom CSS to remove black background from main menu */
/* This file overrides any dark backgrounds in the navigation */

/* High specificity selectors to override theme styles */
body .primary-navigation,
body #main-nav.primary-navigation,
body .primary-navigation.dark,
body .cm_header_lay_three .primary-navigation,
body .site-header .primary-navigation {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body .primary-navigation ul,
body #main-nav.primary-navigation ul,
body .primary-navigation.dark ul,
body .site-header .primary-navigation ul {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body .primary-navigation ul li,
body #main-nav.primary-navigation ul li,
body .primary-navigation.dark ul li,
body .site-header .primary-navigation ul li {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body .primary-navigation ul li a,
body #main-nav.primary-navigation ul li a,
body .primary-navigation.dark ul li a,
body .site-header .primary-navigation ul li a {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Remove any dark/black backgrounds from all navigation elements */
body #main-nav,
body #main-nav ul,
body #main-nav ul li,
body #main-nav ul li a,
body .header-navigation,
body .header-navigation ul,
body .header-navigation ul li,
body .header-navigation ul li a,
body .site-header #main-nav,
body .site-header #main-nav ul,
body .site-header #main-nav ul li,
body .site-header #main-nav ul li a {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Ensure menu items are visible with proper text color */
body .primary-navigation ul li a,
body #main-nav.primary-navigation ul li a,
body .site-header .primary-navigation ul li a {
    color: #333 !important;
}

body .primary-navigation ul li a:hover,
body #main-nav.primary-navigation ul li a:hover,
body .site-header .primary-navigation ul li a:hover {
    color: #0888ec !important;
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* Override any media queries that might add dark backgrounds */
@media (min-width: 768px) {
    body .primary-navigation,
    body #main-nav.primary-navigation,
    body .primary-navigation ul,
    body .primary-navigation ul li,
    body .primary-navigation ul li a {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
    }
}

@media (min-width: 992px) {
    body .primary-navigation,
    body #main-nav.primary-navigation,
    body .primary-navigation ul,
    body .primary-navigation ul li,
    body .primary-navigation ul li a {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
    }
}

/* Remove any gradient or other background effects */
body .primary-navigation,
body .primary-navigation ul,
body .primary-navigation ul li,
body .primary-navigation ul li a {
    background-image: none !important;
    background-attachment: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
}