/* Nav support rules — copied VERBATIM from the JS site's css/styles.css.
   nav.html has always depended on these site-level rules (mobile-menu
   off-screen default, primary-nav overlap fix, responsive reveal); they
   were never part of the JS reusable-library, so the port carries them
   here to make the component actually self-contained. Loaded by
   {% bs_head %}. */

/* --- Mobile Menu --- */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-menu.open {
    transform: translateX(0);
}

/* --- Primary nav overlap fix ---
   The desktop nav was viewport-centred while position:absolute, so it overlapped the
   logo (until ~1024px) and the right-hand controls (until ~1330px) — collapsing on
   resize. Centre it in the FLOW instead (between the logo and the controls, so it can
   never overlap them), and only reveal the desktop nav + CTA when everything actually
   fits (>=1200px). The hamburger menu handles every width below that. */
#primary-nav {
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}
@media (max-width: 1199px) {
    #primary-nav { display: none !important; }
    #nav-cta { display: none !important; }
    #mobile-menu-btn { display: flex !important; }
}
@media (min-width: 1200px) {
    #primary-nav { display: flex !important; }
    #nav-cta { display: block !important; }
    #mobile-menu-btn { display: none !important; }
}