/**
 * Beautiful Mobile Menu
 * Improved mobile menu styling with WordPress integration
 */

@media (max-width: 767px) {
    /* ========================================
       MOBILE MENU TOGGLE - 3 Lines Only
       ======================================== */
    
    /* Reset button styles */
    html body .mobile-menu-toggle,
    body .mobile-menu-toggle,
    .mobile-menu-toggle {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding: 10px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 10001 !important;
    }
    
    /* Hide FontAwesome icon */
    html body .mobile-menu-toggle i,
    body .mobile-menu-toggle i,
    .mobile-menu-toggle i {
        display: none !important;
    }
    
    /* Create 3 horizontal bars using span inside button */
    html body .mobile-menu-toggle span,
    body .mobile-menu-toggle span,
    .mobile-menu-toggle span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }
    
    html body .mobile-menu-toggle span::before,
    body .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::before,
    html body .mobile-menu-toggle span::after,
    body .mobile-menu-toggle span::after,
    .mobile-menu-toggle span::after {
        content: '' !important;
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
        position: absolute !important;
        transition: all 0.3s ease !important;
    }
    
    html body .mobile-menu-toggle span::before,
    body .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::before {
        top: -8px !important;
    }
    
    html body .mobile-menu-toggle span::after,
    body .mobile-menu-toggle span::after,
    .mobile-menu-toggle span::after {
        top: 8px !important;
    }
    
    /* When menu is active/open - X animation */
    html body .mobile-menu-toggle.active span,
    body .mobile-menu-toggle.active span,
    .mobile-menu-toggle.active span {
        background: transparent !important; /* Hide middle bar */
    }
    
    html body .mobile-menu-toggle.active span::before,
    body .mobile-menu-toggle.active span::before,
    .mobile-menu-toggle.active span::before {
        transform: rotate(45deg) !important;
        top: 0 !important;
    }
    
    html body .mobile-menu-toggle.active span::after,
    body .mobile-menu-toggle.active span::after,
    .mobile-menu-toggle.active span::after {
        transform: rotate(-45deg) !important;
        top: 0 !important;
    }
    
    /* ========================================
       MOBILE MENU OVERLAY
       ======================================== */
    
    html body .main-navigation,
    body .main-navigation,
    .main-navigation,
    html body #site-navigation,
    body #site-navigation,
    #site-navigation {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        max-width: 80% !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2) !important;
        z-index: 10000 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important; /* Remove any padding */
        margin: 0 !important;
    }
    
    /* When menu is active/open */
    html body .main-navigation.active,
    body .main-navigation.active,
    .main-navigation.active,
    html body #site-navigation.active,
    body #site-navigation.active,
    #site-navigation.active {
        left: 0 !important;
    }
    
    /* ========================================
       MENU HEADER - Completely remove wrapper/container from flow
       ======================================== */
    
    /* Make nav-wrapper not take any space */
    html body .main-navigation .nav-wrapper,
    body .main-navigation .nav-wrapper,
    .main-navigation .nav-wrapper,
    html body #site-navigation .nav-wrapper,
    body #site-navigation .nav-wrapper,
    #site-navigation .nav-wrapper {
        display: contents !important; /* Remove from layout flow */
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Make container not take any space */
    html body .main-navigation .container,
    body .main-navigation .container,
    .main-navigation .container,
    html body #site-navigation .container,
    body #site-navigation .container,
    #site-navigation .container,
    html body .nav-wrapper .container,
    body .nav-wrapper .container,
    .nav-wrapper .container {
        display: contents !important; /* Remove from layout flow */
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Close button in menu - position relative to #site-navigation */
    html body .main-navigation .mobile-menu-close,
    body .main-navigation .mobile-menu-close,
    .main-navigation .mobile-menu-close,
    html body #site-navigation .mobile-menu-close,
    body #site-navigation .mobile-menu-close,
    #site-navigation .mobile-menu-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        background: transparent !important;
        border: none !important;
        color: #333 !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 5px !important;
        z-index: 10001 !important;
        transition: transform 0.2s !important;
    }
    
    html body .mobile-menu-close:hover,
    body .mobile-menu-close:hover,
    .mobile-menu-close:hover {
        transform: rotate(90deg) !important;
    }
    
    /* ========================================
       MENU ITEMS STYLING
       ======================================== */
    
    html body .nav-menu,
    body .nav-menu,
    .nav-menu,
    html body #primary-menu,
    body #primary-menu,
    #primary-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 60px 0 20px 0 !important; /* Top padding for close button */
        display: block !important;
        flex-direction: column !important;
        background: transparent !important;
        width: 100% !important;
        min-height: 100vh !important; /* Fill entire height */
        position: relative !important;
        z-index: 1 !important;
    }
    
    html body .nav-menu li,
    body .nav-menu li,
    .nav-menu li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    html body .nav-menu li a,
    body .nav-menu li a,
    .nav-menu li a {
        display: block !important;
        padding: 15px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: all 0.2s !important;
        border-left: 3px solid transparent !important;
    }
    
    html body .nav-menu li a:hover,
    body .nav-menu li a:hover,
    .nav-menu li a:hover,
    html body .nav-menu li.current-menu-item a,
    body .nav-menu li.current-menu-item a,
    .nav-menu li.current-menu-item a,
    html body .nav-menu li.current_page_item a,
    body .nav-menu li.current_page_item a,
    .nav-menu li.current_page_item a {
        background: #f5f5f5 !important;
        border-left-color: #c8232c !important;
        color: #c8232c !important;
        padding-left: 25px !important;
    }
    
    /* ========================================
       MENU OVERLAY/BACKDROP
       ======================================== */
    
    html body .mobile-menu-overlay,
    body .mobile-menu-overlay,
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }
    
    html body .mobile-menu-overlay.active,
    body .mobile-menu-overlay.active,
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* ========================================
       SUBMENU SUPPORT (if exists)
       ======================================== */
    
    html body .nav-menu .sub-menu,
    body .nav-menu .sub-menu,
    .nav-menu .sub-menu {
        display: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fafafa !important;
    }
    
    html body .nav-menu li.menu-item-has-children > a::after,
    body .nav-menu li.menu-item-has-children > a::after,
    .nav-menu li.menu-item-has-children > a::after {
        content: '›' !important; /* Right arrow */
        float: right !important;
        font-size: 18px !important;
        font-weight: bold !important;
        transition: transform 0.2s !important;
        line-height: 1 !important;
    }
    
    html body .nav-menu li.menu-item-has-children.open > a::after,
    body .nav-menu li.menu-item-has-children.open > a::after,
    .nav-menu li.menu-item-has-children.open > a::after {
        transform: rotate(90deg) !important; /* Rotate down when open */
    }
    
    html body .nav-menu li.menu-item-has-children.open > .sub-menu,
    body .nav-menu li.menu-item-has-children.open > .sub-menu,
    .nav-menu li.menu-item-has-children.open > .sub-menu {
        display: block !important;
    }
    
    html body .nav-menu .sub-menu li a,
    body .nav-menu .sub-menu li a,
    .nav-menu .sub-menu li a {
        padding-left: 40px !important;
        font-size: 14px !important;
    }
    
    /* ========================================
       PREVENT BODY SCROLL WHEN MENU OPEN
       ======================================== */
    
    html body.menu-open,
    body.menu-open {
        overflow: hidden !important;
    }
    
    /* ========================================
       HIDE ANY EXTRA WHITE PANELS OR ELEMENTS
       ======================================== */
    
    /* Make sure mobile-menu-close is the only direct child that's visible */
    html body #site-navigation > *:not(.mobile-menu-close):not(.nav-wrapper),
    body #site-navigation > *:not(.mobile-menu-close):not(.nav-wrapper),
    #site-navigation > *:not(.mobile-menu-close):not(.nav-wrapper) {
        display: none !important;
    }
    
    /* Ensure nav-wrapper's direct children (except container) don't create panels */
    html body #site-navigation .nav-wrapper > *:not(.container):not(.mobile-menu-close),
    body #site-navigation .nav-wrapper > *:not(.container):not(.mobile-menu-close),
    #site-navigation .nav-wrapper > *:not(.container):not(.mobile-menu-close) {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}