/* Dropdown Menu Fix - Prevents blue background issue on all pages */

/* Ensure dropdown menu has correct background */
.nav-item.dropdown .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Fix dropdown items - completely transparent background */
.nav-item.dropdown .dropdown-menu a,
.nav-item.dropdown .dropdown-menu .dropdown-item {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    border: none !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    display: block !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

/* Hover state - only color change, no background */
.nav-item.dropdown .dropdown-menu a:hover,
.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

/* Active and focus states - no background color */
.nav-item.dropdown .dropdown-menu a:active,
.nav-item.dropdown .dropdown-menu .dropdown-item:active,
.nav-item.dropdown .dropdown-menu a:focus,
.nav-item.dropdown .dropdown-menu .dropdown-item:focus {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Visited state - no background */
.nav-item.dropdown .dropdown-menu a:visited,
.nav-item.dropdown .dropdown-menu .dropdown-item:visited {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Override any Bootstrap styles - no background */
.nav-item.dropdown .dropdown-menu .btn {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 15px !important;
    margin: 0 !important;
}

.nav-item.dropdown .dropdown-menu .btn:hover,
.nav-item.dropdown .dropdown-menu .btn:active,
.nav-item.dropdown .dropdown-menu .btn:focus {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile touch fixes - no background color */
@media (max-width: 991px) {
    .nav-item.dropdown .dropdown-menu a,
    .nav-item.dropdown .dropdown-menu .dropdown-item {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    .nav-item.dropdown .dropdown-menu a:active,
    .nav-item.dropdown .dropdown-menu .dropdown-item:active {
        background-color: transparent !important;
        color: var(--primary-color) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Override any conflicting styles from other CSS files - completely transparent */
.nav-item.dropdown .dropdown-menu * {
    background-color: transparent !important;
}

.nav-item.dropdown .dropdown-menu a *,
.nav-item.dropdown .dropdown-menu .dropdown-item * {
    background-color: transparent !important;
    color: inherit !important;
}

/* Additional overrides to ensure no blue background anywhere */
.nav-item.dropdown .dropdown-menu li,
.nav-item.dropdown .dropdown-menu li * {
    background-color: transparent !important;
}

.nav-item.dropdown .dropdown-menu a:any-link,
.nav-item.dropdown .dropdown-menu .dropdown-item:any-link {
    background-color: transparent !important;
}

/* Enhanced hover fix for cross-browser compatibility */
.nav-item.dropdown .dropdown-menu a:hover,
.nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.nav-item.dropdown .dropdown-menu a:hover *,
.nav-item.dropdown .dropdown-menu .dropdown-item:hover * {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Force color change on hover for all browsers */
.nav-item.dropdown .dropdown-menu a:hover,
.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    -webkit-text-fill-color: var(--primary-color) !important;
    -webkit-text-stroke: 0 !important;
}

/* Additional specificity for Chrome and other WebKit browsers */
.nav-item.dropdown .dropdown-menu a:hover,
.nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--primary-color) !important;
    background-color: transparent !important;
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .nav-item.dropdown .dropdown-menu a:hover,
    .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
        color: var(--primary-color) !important;
        background-color: transparent !important;
    }
}

/* Safari specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .nav-item.dropdown .dropdown-menu a:hover,
    .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
        color: var(--primary-color) !important;
        background-color: transparent !important;
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .nav-item.dropdown .dropdown-menu a:hover,
    .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
        color: var(--primary-color) !important;
        background-color: transparent !important;
    }
}