/* Emergency mobile menu visibility fix */
@media (max-width: 768px) {
    /* Fix menu items visibility - remove slow CSS */
    .dropdown-menu .menu-item,
    .dropdown-menu.show .menu-item {
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        transition: none !important; /* Remove slow transitions */
    }
    
    /* Force all menu sections to be visible */
    .dropdown-menu .menu-section {
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
        transition: none !important;
    }
    
    /* Ensure dropdown menu itself is visible - faster */
    .dropdown-menu.show {
        visibility: visible !important;
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important; /* Remove slow animations */
        animation: none !important;
    }
}

/* Force menu item text to be visible - faster rendering */
.menu-item,
.menu-item * {
    visibility: visible !important;
    color: #333 !important; /* Set specific color instead of inherit */
    transition: none !important;
}

/* Simplify debug outlines */
.dropdown-menu.show {
    border: 1px solid rgba(255,0,0,0.5) !important;
}

.menu-item {
    border: 1px solid rgba(0,0,255,0.3) !important;
}

/* Ensure menu toggle button works - optimized */
.menu-toggle {
    pointer-events: auto !important;
    z-index: 99999 !important;
    position: relative !important;
    background-color: rgba(255,0,0,0.1) !important; /* Lighter red background */
    transition: none !important;
}

.menu-toggle:hover {
    background-color: rgba(255,255,255,0.2) !important;
}

.menu-toggle:active {
    background-color: rgba(0,255,0,0.3) !important; /* Green when pressed */
}

/* Make sure dropdown menu doesn't block clicks */
.dropdown-menu {
    pointer-events: auto !important;
}

/* Force all possible menu button selectors */
#menuToggleGroup,
#menuToggle,
button.menu-toggle,
.menu-toggle {
    pointer-events: auto !important;
    z-index: 999999 !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Add visual debug for menu states */
.dropdown-menu.show {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
}

.menu-toggle.active {
    background-color: rgba(0,0,255,0.2) !important;
}

/* COMPLETE MENU OVERRIDE - Nuclear option */
.menu-item {
    visibility: visible !important;
    display: flex !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 0.75rem 0.875rem !important;
    margin: 0 !important;
    border: none !important;
    background: white !important;
    color: #333 !important;
    cursor: pointer !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: background-color 0.2s ease !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
}

.menu-item:hover {
    background-color: #f5f5f5 !important;
    transform: scale(1.02) !important;
}

.menu-item * {
    visibility: visible !important;
    color: #333 !important;
    opacity: 1 !important;
}

.menu-section {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    padding: 1rem !important;
    background: white !important;
}

.menu-section-title {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    color: #666 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.75rem !important;
    background: white !important;
    padding: 0 8px !important;
}