/* --- Global Mobile Menu Styling (Applies only to screens 768px wide or less) --- */

/* 1. CRITICAL VISIBILITY FIX: Force the menu background when the specific "open" class is present */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open #modal-1-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    background-color: #000000 !important; 
	color: white !important;
	max-height: 100vh !important;
overflow-y: auto !important;
    /* New Positioning for Right-Side Slide */
    left: auto !important; /* Remove any left positioning */
    right: 0 !important; /* Anchor the menu to the right edge */
	height: auto !important;
    
    /* Ensure the menu is visible and covering the correct area when open */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Ensure the menu slides in from the right */
    transform: translateX(0) !important; /* Keep at 0 for the 'open' state */

    width: 70% !important;
    align-items: end !important; /* Aligns content to the end (right side for LTR) */
}

@media (max-width: 768px) {
    
    /* 2. Menu Content Container Styling */
    .wp-block-navigation__responsive-container-content {
        padding: 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
		width:50% !important;
    }
    
    /* 3. Menu List Container (Resets margins and lists) */
    .wp-block-navigation__container {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
		align-items:start !important;

        /* CRITICAL FIX: Ensure the list container is NOT centering its contents */
        justify-content: flex-start !important; 
    }

    /* 4. Menu Item Wrapper (<li>) Alignment & Sizing */
    .wp-block-navigation-item {
     display: flex !important;
    flex: auto;
    width: 150%;
    }
    
    /* 5. Menu Link (<a>) Styling (Text, Color, Alignment, Tap Area) */
    .wp-block-navigation-item a { 
        display: block !important; 
        width: 100% !important;

        /* Text Styling */
        color: #FFFFFF !important;  
        font-weight: bold !important;
        font-size: 1.1em !important;
        
        /* Padding and Left Alignment */
        padding: 15px 25px !important; 
        text-align: left !important;
    }
    
    /* 6. Link Text Span (Ensures the inner text element also aligns left) */
    .wp-block-navigation-item__label {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* 7. Style the Hover/Focus State for Menu Items */
    .wp-block-navigation-item a:hover,
    .wp-block-navigation-item a:focus {
		color:white !important;
    }

    /* 8. Target the Close/X Button */
   /* 8. Target the Close/X Button (Make it Attractive) */
.wp-block-navigation__responsive-container-close {
   /* Base Color & Size */
    background:#ffffff !important;
    color: #000000 !important;
    /* 💥 INCREASE FONT SIZE FOR LARGER 'X' 💥 */
    font-size: 2.5em !important; /* Made the X larger (was 2em) */
    font-weight: 900 !important; /* Keep it very bold */
    
    /* Position (Often needed for visibility on the overlay) */
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100000 !important; /* Ensure it's above everything */

    /* Touch Target & Visual Appeal */
    padding: 10px !important; /* Increases the clickable area */
    line-height: 1 !important; /* Centers the X symbol */
    border: 2px solid #FFFFFF !important; /* Add a white border */
    border-radius: 50% !important; /* Make it a circular button */
    
    /* 💥 INCREASE HEIGHT/WIDTH TO FIT THE LARGER 'X' 💥 */
    height: 45px !important; /* Set a larger fixed size (was 35px) */
    width: 45px !important; /* Set a larger fixed size (was 35px) */
    
    display: flex !important; /* Use flex to perfectly center the X inside the circle */
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* Add a subtle hover effect for user feedback */
.wp-block-navigation__responsive-container-close:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Light transparent fill on hover */
    transform: scale(1.05); /* Slight growth on hover */
    transition: all 0.2s ease-in-out;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item a {
        /* This overrides the 25px left padding from your main menu links */
        padding-left: 4px !important; 
    }

}