/* Mobile Menu & Navbar Responsive Fixes */
/* Only fixes for off-canvas menu - navbar left untouched */

/* Mobile: 0-575px (Extra small devices) */
@media (max-width: 575px) {
    
    /* Off-canvas menu - Full width */
    .off-canvas {
        width: 100% !important;
        right: 0;
        transform: translateX(100%) !important;
    }
    
    .canvas-opened .off-canvas {
        transform: translateX(0) !important;
    }
    
    /* Off-canvas close button */
    .off-canvas .canvas-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        right: 10px;
        top: 10px;
    }
    
    /* Mobile menu logo */
    .off-canvas .logo {
        max-width: 150px !important;
        margin-bottom: 20px !important;
    }
    
    /* Mobile menu navigation */
    .slicknav_menu .slicknav_nav {
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    
    .slicknav_menu .slicknav_nav li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
    }
    
    .slicknav_menu .menu-item > a {
        font-size: 14px !important;
        padding: 14px 10px !important;
        min-height: 44px;
        justify-content: flex-start !important;
    }
    
    /* Sub-menu items */
    .slicknav_menu .slicknav_nav .sub-menu li {
        padding-left: 20px !important;
    }
    
    .slicknav_menu .slicknav_nav .sub-menu li a {
        font-size: 13px !important;
    }
    
    /* Off-canvas widgets */
    .off-canvas .widget-area .widget {
        padding: 15px 10px !important;
    }
    
    .off-canvas .widget-area .widget .widget-title {
        font-size: 16px !important;
        margin: -15px -10px 15px !important;
        padding: 12px 10px !important;
    }
    
    /* Search bar when open */
    .main-search .search-field {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

/* Tablet: 576px-767px (Small devices) */
@media (min-width: 576px) and (max-width: 767px) {
    
    /* Off-canvas menu - 80% width */
    .off-canvas {
        width: 80% !important;
        max-width: 320px;
        transform: translateX(100%) !important;
    }
    
    .canvas-opened .off-canvas {
        transform: translateX(0) !important;
    }
    
    /* Mobile menu - 2 columns */
    .slicknav_menu .slicknav_nav li {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .slicknav_menu .menu-item > a {
        font-size: 12px !important;
    }
}

/* Tablet landscape: 768px-991px */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* Off-canvas menu - Fixed width */
    .off-canvas {
        width: 360px !important;
    }
    
    /* Mobile menu - 2 columns for better layout */
    .slicknav_menu .slicknav_nav li {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .slicknav_menu .menu-item > a {
        font-size: 12px !important;
    }
}

/* General mobile improvements (all mobile devices) */
@media (max-width: 991px) {
    
    /* Better dimmer */
    .canvas-opened .dimmer {
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9998;
    }
    
    /* Prevent body scroll when menu is open */
    .canvas-opened {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
    
    /* Better transitions */
    .off-canvas {
        transition: transform 0.3s ease-in-out !important;
    }
    
    /* Menu item icons */
    .slicknav_menu .menu-item > a .emoji {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }
    
    /* Slicknav arrow */
    .slicknav_menu .slicknav_arrow {
        margin-left: auto;
        padding-left: 10px;
    }
    
    .slicknav_menu .slicknav_arrow:before {
        font-size: 18px !important;
    }
}

/* Dark mode adjustments for mobile menu */
.ripro-dark .off-canvas {
    background-color: #1a1a1a !important;
}

.ripro-dark .slicknav_menu .menu-item > a {
    border-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.ripro-dark .slicknav_menu .menu-item > a:hover {
    background-color: #2a2a2a !important;
}

.ripro-dark .off-canvas .widget-area .widget .widget-title {
    border-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

.ripro-dark .off-canvas .canvas-close {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}