/* Mobile Menu Submenu Fix - Force Professional Styling */

/* Ensure nav items are full width and stack vertically */
#mobile-menu .nav-item,
.mobile-menu-block .nav-item {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* Target submenus in mobile menu with maximum specificity */
#mobile-menu #mobile-menu-content .sub-menu,
#mobile-menu .mobile-menu-content .sub-menu,
.mobile-menu-block #mobile-menu-content .sub-menu,
.mobile-menu-block .mobile-menu-content .sub-menu,
nav#mobile-menu .sub-menu {
    width: 95% !important;
    margin: 10px auto !important;
    padding: 8px 0 !important;
    background: #f8f9fa !important;
    border: none !important;
    border-left: 3px solid #f97316 !important;
    border-radius: 0 8px 8px 0 !important;
    list-style: none !important;
    position: relative !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: none;
    clear: both !important;
}

/* Show active submenus - with very high specificity */
#mobile-menu #mobile-menu-content .nav-item-has-children.active > .sub-menu,
#mobile-menu .mobile-menu-content .nav-item-has-children.active > .sub-menu,
.mobile-menu-block #mobile-menu-content .nav-item-has-children.active > .sub-menu,
.mobile-menu-block .mobile-menu-content .nav-item-has-children.active > .sub-menu,
nav#mobile-menu .nav-item-has-children.active > .sub-menu,
#mobile-menu .sub-menu.active,
.mobile-menu-block .sub-menu.active,
nav#mobile-menu .sub-menu.active,
nav.mobile-menu-block .sub-menu.active {
    display: block !important;
}

/* Style submenu items */
#mobile-menu .sub-menu--item,
.mobile-menu-block .sub-menu--item,
nav#mobile-menu .sub-menu--item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
}

#mobile-menu .sub-menu--item:last-child,
.mobile-menu-block .sub-menu--item:last-child,
nav#mobile-menu .sub-menu--item:last-child {
    border-bottom: none !important;
}

/* Style submenu links */
#mobile-menu .sub-menu--item a,
#mobile-menu .sub-menu--item .nav-sub-link,
.mobile-menu-block .sub-menu--item a,
.mobile-menu-block .sub-menu--item .nav-sub-link,
nav#mobile-menu .sub-menu--item a,
nav#mobile-menu .sub-menu--item .nav-sub-link {
    display: block !important;
    padding: 12px 20px !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Hover effects for submenu links */
#mobile-menu .sub-menu--item a:hover,
#mobile-menu .sub-menu--item .nav-sub-link:hover,
.mobile-menu-block .sub-menu--item a:hover,
.mobile-menu-block .sub-menu--item .nav-sub-link:hover,
nav#mobile-menu .sub-menu--item a:hover,
nav#mobile-menu .sub-menu--item .nav-sub-link:hover {
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.05) !important;
    padding-left: 25px !important;
}

/* Override any conflicting styles from Navigation.astro */
@media (max-width: 1023px) {
    /* Force vertical layout for mobile menu */
    #mobile-menu .site-menu-main,
    .mobile-menu-block .site-menu-main {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    #mobile-menu .nav-item,
    .mobile-menu-block .nav-item {
        width: 100% !important;
        display: block !important;
    }
    
    #mobile-menu .sub-menu,
    .mobile-menu-block .sub-menu {
        width: 95% !important;
        margin: 10px auto !important;
        background: #f8f9fa !important;
        border-left: 3px solid #f97316 !important;
        display: none;
        position: relative !important;
    }
    
    #mobile-menu .nav-item-has-children.active > .sub-menu,
    .mobile-menu-block .nav-item-has-children.active > .sub-menu {
        display: block !important;
    }
}