/**
 * Mobile Menu Fix for RevvedUpCars
 * HIGHEST PRIORITY - Uses !important and high specificity
 */

/* Hamburger Button */
html body .revved-header .revved-menu-toggle,
html body button.revved-menu-toggle,
.revved-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 100002 !important;
    position: relative !important;
    pointer-events: auto !important;
}

@media screen and (max-width: 991px) {
    html body .revved-header .revved-menu-toggle,
    html body button.revved-menu-toggle,
    .revved-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Hamburger Lines */
.revved-menu-toggle .hamburger-line {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background-color: #C5D631 !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    transform-origin: center center !important;
}

/* X Animation When Active */
.revved-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
}

.revved-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}

.revved-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
}

/* Mobile Navigation Overlay */
@media screen and (max-width: 991px) {
    html body .revved-nav,
    html body #site-navigation,
    #site-navigation.revved-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: linear-gradient(180deg, #1a1f1a 0%, #0d0f0d 100%) !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease, visibility 0.3s ease !important;
        visibility: hidden !important;
        z-index: 100001 !important;
        padding-top: 80px !important;
        overflow-y: auto !important;
        display: block !important;
        box-shadow: -5px 0 30px rgba(0,0,0,0.5) !important;
    }
    
    html body .revved-nav.active,
    html body #site-navigation.active,
    #site-navigation.revved-nav.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    
    /* Menu Items */
    .revved-nav ul,
    #site-navigation ul,
    .revved-menu {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .revved-nav li,
    #site-navigation li {
        width: 100% !important;
        border-bottom: 1px solid rgba(197, 214, 49, 0.1) !important;
    }
    
    .revved-nav a,
    #site-navigation a {
        display: block !important;
        padding: 15px 25px !important;
        color: #fff !important;
        font-size: 16px !important;
    }
    
    .revved-nav a:hover,
    #site-navigation a:hover {
        background: rgba(197, 214, 49, 0.1) !important;
        color: #C5D631 !important;
    }
}

/* Body Lock When Menu Open */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Background Overlay */
body.mobile-menu-open::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 100000 !important;
}