/* Mobile Menu Fix CSS */

/* Override SlickNav default dark theme */
.slicknav_menu {
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.slicknav_nav {
    background: #fff !important;
    color: #333 !important;
}

.slicknav_nav a {
    color: #333 !important;
}

.slicknav_nav a:hover {
    background: #f8f9fa !important;
    color: #0078d4 !important;
}

@media (max-width: 991px) {
    /* Hide desktop menu on mobile */
    #menu {
        display: none !important;
    }
    /* Ensure SlickNav button is visible and clickable */
    .slicknav_btn {
        display: block !important;
        position: relative;
        float: right;
        padding: 0.5rem 1rem;
        background-color: #0078d4;
        cursor: pointer;
        z-index: 1001;
        border: none;
        border-radius: 4px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Style the hamburger icon */
    .slicknav_icon-bar {
        display: block;
        width: 22px;
        height: 3px;
        background-color: #fff;
        margin: 4px 0;
        transition: 0.3s;
    }
    
    /* Ensure menu is hidden by default */
    .slicknav_nav {
        display: none;
        clear: both;
        width: 100%;
        background-color: #fff !important;
        position: relative;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin: 0 !important;
        padding: 10px 0 !important;
    }
    
    /* Show menu when button has open class */
    .slicknav_open ~ .slicknav_nav,
    .slicknav_btn.slicknav_open + .slicknav_nav,
    .slicknav_open + .slicknav_nav,
    .slicknav_nav.slicknav_open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Menu items styling */
    .slicknav_nav {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .slicknav_nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .slicknav_nav li {
        display: block !important;
        border-bottom: 1px solid #eee;
        margin: 0 !important;
    }
    
    .slicknav_nav a {
        display: block !important;
        padding: 14px 20px;
        text-decoration: none;
        color: #333;
        transition: background-color 0.3s;
    }
    
    .slicknav_nav a:hover {
        background-color: #f8f9fa;
        color: #0078d4;
    }
    
    /* Submenu styling */
    .slicknav_nav ul ul {
        background-color: #f8f9fa;
        display: none;
    }
    
    .slicknav_nav ul ul li {
        border-bottom: 1px solid #e9ecef;
    }
    
    .slicknav_nav ul ul a {
        padding-left: 40px;
    }
    
    /* Arrow styling */
    .slicknav_arrow {
        float: right;
        margin-top: -2px;
    }
    
    /* Animation for menu */
    .slicknav_nav {
        transition: all 0.3s ease;
    }
    
    /* Fix z-index issues */
    .slicknav_menu {
        position: relative;
        z-index: 1000;
    }
    
    /* Override any conflicting styles */
    .slicknav_nav.slicknav_hidden {
        display: none !important;
    }
    
    /* Ensure responsive menu container is visible */
    .responsive-menu {
        display: block !important;
        position: relative;
    }
    
    /* Hide desktop navigation */
    .navbar-collapse {
        display: none !important;
    }
    
    /* Fix for navbar toggler */
    .navbar-toggler {
        display: inline-block !important;
        padding: 0.375rem 0.75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: #0078d4;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        cursor: pointer;
    }
    
    /* Override any transform or position issues */
    .slicknav_btn,
    .slicknav_menu,
    .slicknav_nav {
        -webkit-transform: none !important;
        transform: none !important;
    }
    
    /* Fallback mobile menu styles */
    .mobile-menu-fallback {
        position: relative;
    }
    
    .mobile-menu-toggle {
        display: block;
        float: right;
        background: #0078d4;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: white;
        margin: 5px 0;
        transition: 0.3s;
    }
    
    .mobile-menu-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .mobile-nav {
        clear: both;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-top: 10px;
    }
    
    .mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .mobile-menu-list li {
        border-bottom: 1px solid #eee;
    }
    
    .mobile-menu-list a {
        display: block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
    }
    
    .mobile-menu-list a:hover {
        background: #f8f9fa;
        color: #0078d4;
    }
}