/* 
 * Navbar Fix CSS
 * This file overrides the conflicting styles in app.css that cause the navbar to open from the bottom
 * and fixes the toggle button not working after scrolling
 */

/* Override the app.css styles that position the menu at the top 110% */
.navbar .navbar-toggle-content {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    left: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    background-color: #ffffff !important;
    transition: left 0.4s cubic-bezier(0.43, 0.83, 0.54, 1.02), opacity 0.4s linear !important;
    padding: 20px !important;
    display: block !important;
    visibility: visible !important;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.15) !important;
}

/* Override the show class to slide from left */
.navbar .navbar-toggle-content.show,
.navbar .navbar-toggle-content.mobile-menu-open {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
}

/* Fix for toggle button not working after scrolling */
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure the close button is aligned to the left */
.navbar-toggle-header {
    display: flex !important;
    justify-content: flex-start !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Fix for mobile menu showing when scrolling */
@media (max-width: 991px) {
    html:not(.menu-open) .navbar-toggle-content:not(.mobile-menu-open):not(.show) {
        visibility: hidden !important;
        left: -100% !important;
    }
}

/* Ensure proper desktop display */
@media (min-width: 992px) {
    .navbar .navbar-toggle-content {
        position: static !important;
        left: auto !important;
        height: auto !important;
        box-shadow: none !important;
        overflow-y: visible !important;
        padding: 0 !important;
        visibility: visible !important;
        width: auto !important;
        max-width: none !important;
        background-color: transparent !important;
        display: flex !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    .navbar-toggle-header {
        display: none !important;
    }
}