/* Mobile Menu Fix - Applies globally, but targeted at mobile viewports */

@media (max-width: 1024px) {
    /* Target Elementor Nav Menu dropdowns specifically on mobile */
    .elementor-nav-menu--dropdown {
        background-color: #1a1a1a !important; /* Dark background to ensure contrast */
        border-top: 1px solid #333 !important; /* Subtle separation */
        box-shadow: 0px 8px 16px rgba(0,0,0,0.5) !important;
    }
    
    /* Ensure the wrapper holding the submenu doesn't force a white background */
    .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        background-color: #1a1a1a !important;
    }

    /* Style the links inside the mobile dropdown to ensure readability */
    .elementor-nav-menu--dropdown a,
    .elementor-nav-menu--dropdown .elementor-item {
        color: #ffffff !important; /* Force white text for visibility */
        background-color: transparent !important; /* Remove any inline white background */
        padding: 15px 20px !important; /* Improve touch target size */
        border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Subtle dividers */
    }

    /* Submenu hover/active states */
    .elementor-nav-menu--dropdown a:hover,
    .elementor-nav-menu--dropdown a:focus,
    .elementor-nav-menu--dropdown a.elementor-item-active {
        color: #D4AF37 !important; /* Gold accent on hover/active */
        background-color: rgba(255,255,255,0.05) !important;
    }

    /* Ensure submenu toggles (arrows) are visible */
    .elementor-nav-menu--dropdown .sub-arrow {
        color: #ffffff !important;
    }

    /* Specific fix for nested submenus */
    .elementor-nav-menu--dropdown .sub-menu {
        background-color: #111111 !important; /* Slightly darker for nested depth */
    }
    
    /* Astra/Default theme fallback just in case the menu is not Elementor */
    .ast-mobile-header-wrap .ast-mobile-header-content,
    .main-header-menu,
    .ast-builder-menu-mobile {
        background-color: #1a1a1a !important;
    }

    .ast-mobile-header-wrap .menu-item > a,
    .ast-builder-menu-mobile .menu-item > a {
        color: #ffffff !important;
    }
}