/* Mobile menu background - specifically targeting the expanded menu */
@media only screen and (max-width: 48rem) {
    /* Target the menu wrapper with a full-screen overlay approach */
    #cs-navigation .cs-ul-wrapper {
        width: 100%;
        height: 100vh;
        opacity: 0;
        background: linear-gradient(135deg, var(--secondary) 0%, rgba(44, 44, 44, 0.6) 100%), url("../assets/images/mobile-menu-backer.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.4s, opacity 0.3s;
    }
    
    /* When menu is active, show the wrapper with animation */
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleY(1);
        transition-delay: 0.1s;
    }
    
    /* Ensure menu items remain clickable and visible */
    #cs-navigation .cs-li {
        position: relative;
        z-index: 2;
    }
    
    /* Ensure the navigation container maintains proper positioning */
    #cs-navigation {
        position: relative;
    }
}