/**
 * Neytri Mobile Menu - Left Side Override
 * 
 * This CSS file overrides the default Neytri theme mobile menu behavior
 * to make it slide in from the LEFT side instead of the RIGHT side.
 * 
 * Target elements:
 * - div.mobile-menu.nav-is-visible
 * - ul#menu-main-menu-2.wdt-primary-nav (and similar menu IDs)
 * 
 * @package Neytri_Mobile_Menu
 * @version 1.0.0
 */

/* ============================================
   MOBILE MENU - LEFT SIDE POSITIONING
   ============================================ */

/**
 * Override default mobile menu positioning
 * Change from RIGHT side to LEFT side
 * Added smooth transitions with cubic-bezier easing
 */
.mobile-menu {
    left: 0 !important;
    right: auto !important;
    -webkit-transform: translateX(-100%) !important;
    transform: translateX(-100%) !important;
    /* Smooth transition with custom easing */
    -webkit-transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}

/**
 * When menu is visible, slide to center (translateX(0))
 * Override the animation to slide from left with smooth easing
 */
.mobile-menu.nav-is-visible {
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    animation-name: anime-slidein-left-smooth !important;
    -webkit-animation-name: anime-slidein-left-smooth !important;
    animation-duration: 0.5s !important;
    -webkit-animation-duration: 0.5s !important;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important;
}

/**
 * Override hidden state to slide left instead of right
 * Added smooth transitions for closing animation
 */
.mobile-menu.is-hidden,
.mobile-menu > ul.is-hidden,
.mobile-menu > ul li ul.is-hidden,
.mobile-menu ul.sub-menu.is-hidden,
.mobile-menu ul.sub-menu li ul.is-hidden {
    -webkit-transform: translateX(-100%) !important;
    transform: translateX(-100%) !important;
    -webkit-transition: transform 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) !important;
    transition: transform 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53) !important;
}

/**
 * All menu levels should be positioned from left
 * Added smooth transitions for all menu levels
 */
.mobile-menu,
.mobile-menu > ul,
.mobile-menu > ul ul.children,
.mobile-menu > ul ul.sub-menu,
.mobile-menu > ul ul.children > li > ul,
.mobile-menu > ul ul.sub-menu > li > ul {
    left: 0 !important;
    right: auto !important;
    -webkit-transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/**
 * Smooth transitions for menu items
 */
.mobile-menu ul li a {
    -webkit-transition: all 0.25s ease-in-out !important;
    transition: all 0.25s ease-in-out !important;
}

/**
 * Smooth transitions for menu item icons/arrows
 */
.mobile-menu ul li a:before,
.mobile-menu ul li a:after {
    -webkit-transition: all 0.25s ease-in-out !important;
    transition: all 0.25s ease-in-out !important;
}

/* ============================================
   ANIMATIONS - SMOOTH SLIDE FROM LEFT
   ============================================ */

/**
 * Smooth animation for sliding in from LEFT
 * Uses multiple keyframes for smoother motion
 * Optimized with will-change for better performance
 */
@keyframes anime-slidein-left-smooth {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    1% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/**
 * Webkit prefix version for older browsers
 */
@-webkit-keyframes anime-slidein-left-smooth {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    1% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

/**
 * Performance optimization
 * Tell browser to optimize for transform and opacity changes
 */
.mobile-menu {
    will-change: transform, opacity !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000px !important;
    perspective: 1000px !important;
}

/**
 * Smooth overlay transition
 */
.mobile-menu-overlay {
    -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s ease-in-out !important;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s ease-in-out !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/**
 * Ensure proper positioning on all screen sizes
 */
@media only screen and (max-width: 1024px) {
    .mobile-menu {
        left: 0 !important;
        right: auto !important;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-menu {
        left: 0 !important;
        right: auto !important;
    }
}

@media only screen and (max-width: 479px) {
    .mobile-menu {
        left: 0 !important;
        right: auto !important;
    }
}