/* -------------------------------------------------------------------
   CUSTOM CSS OVERRIDES FOR SITE.MASTER COLLAPSING MENU
   These rules override Bootstrap's desktop view rules.
------------------------------------------------------------------- */

/* 1. Force the hamburger button (navbar-toggle) to always be visible.
   Bootstrap normally hides this on large screens (min-width: 768px). */
.navbar-header .navbar-toggle {
    display: block !important;
    visibility: visible !important;
}

/* 2. Force the menu items (.navbar-collapse) to be hidden by default.
   Bootstrap normally displays this on large screens. */
.navbar-collapse.collapse {
    display: none !important;
}

/* 3. Ensure the menu items are displayed when the "in" class is added by the 
   Bootstrap JavaScript (when the hamburger button is clicked). */
.navbar-collapse.in {
    display: block !important;
}

/* 4. Hide the menu items on large screens when the menu is NOT active, 
   ensuring the menu is not visible side-by-side with the button. */
@media (min-width: 768px) {
    .navbar-collapse {
        max-height: 0; /* Ensures content is collapsed on desktop */
        overflow-x: visible;
    }
}