/*================================================================
# Hamburger Menu Visibility Fix
# Ensures hamburger menu only shows on mobile, never on desktop
================================================================*/

/* Desktop (992px and above) - Hide hamburger menu */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none !important;
    }

    #header .navbar-collapse {
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar-expand-lg {
        flex-wrap: nowrap;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row !important;
    }

    .navbar-collapse.collapsing,
    .navbar-collapse.collapse.show {
        display: flex !important;
    }
}

/* Mobile and Tablets (below 992px) - Show hamburger menu */
@media (max-width: 991.98px) {
    .navbar-toggler {
        display: flex !important;
    }

    #header .navbar-collapse {
        display: none !important;
    }

    #header .navbar-collapse.show,
    #header .navbar-collapse.collapse.show {
        display: block !important;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column !important;
    }
}

/* Override Bootstrap's default display properties */
.navbar .navbar-nav {
    display: flex;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav {
        flex-direction: column;
    }
}

/* Ensure hamburger doesn't appear due to CSS conflicts */
.navbar-toggler.collapsed {
    display: flex !important;
}

@media (min-width: 992px) {
    .navbar-toggler.collapsed {
        display: none !important;
    }
}

/* Fix navbar animations */
.navbar-collapse {
    transition: all 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .navbar-collapse {
        width: auto !important;
        height: auto !important;
    }
}