/* assets/css/offcanvas-menu.css */
.offcanvas-menu-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
body .offcanvas-menu-wrapper .offcanvas-toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    padding: 0;
}
.offcanvas-menu-container {
    position: fixed;
    top: 0;
    width: 300px;
    height: 100vh;
    z-index: 999999;
    visibility: hidden;
    transition: all 0.4s ease;
}
.offcanvas-position-right {
    right: -100vw;
}
.offcanvas-position-right.is-open {
    right: 0;
    visibility: visible;
}
.offcanvas-position-left {
    left: -100vw;
}
.offcanvas-position-left.is-open {
    left: 0;
    visibility: visible;
}

.offcanvas-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.offcanvas-menu-container.is-open .offcanvas-menu-overlay {
    opacity: 1;
    visibility: visible;
}
.offcanvas-menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff; 
    overflow-y: auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.offcanvas-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    z-index: 999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.offcanvas-close-btn:hover {
    opacity: 0.7;
}

.offcanvas-inner-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.offcanvas-logo {
    padding: 30px 20px 20px;
    text-align: center;
}
.offcanvas-logo img {
    max-width: 100%;
    height: auto;
}

/* Custom Walker WP Nav Menu Styles */
.custom-mobile-menu {
    width: 100%;
}
.mobile-menu-list, .sub-menu { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.menu-item { 
    padding: 15px 20px; 
    /* Default border if not styled in Elementor */
    border-bottom: 1px solid rgba(0,0,0,0.05); 
} 
.menu-item a {
    text-decoration: none; 
    display: block;
    transition: color 0.3s ease;
}
.menu-item-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.toggle-icon {
    width: 30px; 
    height: 30px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    cursor: pointer; 
    transition: all 0.3s ease;
}
.toggle-icon svg {
    transition: transform 0.3s ease;
}
.menu-item.active-dropdown > .menu-item-inner .toggle-icon svg { 
    transform: rotate(180deg); 
}
.sub-menu { 
    display: none; 
}
.sub-menu li { 
    padding: 10px 15px; 
    border: none; 
}
.menu-item.active-dropdown .sub-menu { 
    display: block; 
}

/* Desktop Menu Styles - Only applies if the switcher is enabled in Elementor */
@media (min-width: 1025px) {
    body .has-desktop-inline .offcanvas-toggle-btn {
        display: none !important;
    }
    
    .has-desktop-inline + .offcanvas-menu-container,
    .has-desktop-inline.offcanvas-menu-container, 
    .offcanvas-menu-container {
        /* We need to be careful with targeting here since the container is separate from the wrapper. 
           Wait, in the PHP structure:
           <div class="offcanvas-menu-wrapper has-desktop-inline"> ... </div>
           <div id="offcanvas-menu-..." class="offcanvas-menu-container"> ... </div>
           
           Ah! The wrapper and the container are siblings. 
           Let's use the adjacent sibling selector to target the container when the wrapper has the class.
        */
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
        /* z-index is now handled by elementor control */
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .offcanvas-menu-overlay {
        display: none !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .offcanvas-menu-content {
        background-color: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        display: block !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .offcanvas-close-btn {
        display: none !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .offcanvas-inner-content {
        padding: 0 !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .offcanvas-logo {
        display: none !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .mobile-menu-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .menu-item {
        border-bottom: none !important;
        position: relative;
        /* Padding is handled by Elementor control now */
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .menu-item-inner {
        display: inline-flex;
        align-items: center;
    }
    
    /* Show dropdown toggle on desktop if it has the class? The user specifically asked for an icon to make it elegant.
       So we shouldn't hide it, we should just disable the JS click and let CSS hover handle it, or keep the icon visible. */
    
    /* Sub-menu Dropdown on Hover */
    .has-desktop-inline ~ .offcanvas-menu-container .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        /* Background color, shadow etc are handled by Elementor controls but we add defaults here */
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        display: none !important;
        z-index: 999;
        /* padding handled by Elementor */
        border-radius: 4px;
        margin-top: 0;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .menu-item.has-dropdown:hover > .sub-menu {
        display: block !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .menu-item.has-dropdown:hover > .menu-item-inner .toggle-icon svg,
    .has-desktop-inline ~ .offcanvas-menu-container .menu-item.has-dropdown:hover > .menu-item-inner .toggle-icon i {
        transform: rotate(180deg);
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .sub-menu li {
        border: none !important;
    }
    
    .has-desktop-inline ~ .offcanvas-menu-container .sub-menu li a {
        display: block;
    }
}