/* Shift Bootstrap's xxl breakpoint from 1400px to 1600px.
   The navbar has many menu items, so even at Bootstrap's default
   xxl (1400px) they overlap. We force the collapsed/mobile layout
   to stay until 1600px, then expand.

   IMPORTANT: Bootstrap's own xxl rules at 1400px use !important,
   so the overrides in this file must use !important too to win
   the cascade. */

/* >= 1600px — expand horizontally */
@media (min-width: 1600px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }

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

  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xxl .navbar-toggler {
    display: none !important;
  }
}

/* < 1600px — keep the mobile/collapsed layout (overrides Bootstrap 1400px).
   At 1400–1599px Bootstrap's own `@media (min-width: 1400px)` rules still
   apply (`flex-direction: row`, `dropdown-menu { position: absolute }`,
   `.navbar-collapse { display: flex !important }`, etc.), so every one of
   those has to be explicitly reset here or the collapsed menu renders with
   horizontal nav-items and absolutely-positioned dropdowns that overlap
   the rest of the page. This is the size range where the issue was
   reported. */
@media (max-width: 1599.98px) {
  .navbar-expand-xxl {
    flex-wrap: wrap !important;
  }

  /* Bootstrap's collapse plugin temporarily swaps `.collapse` for
     `.collapsing` and transitions `height: 0` → auto over 0.35s. The
     selector below intentionally excludes that mid-animation state so the
     element stays visible while it animates open or closed. Without the
     :not(.collapsing) part, our display:none would override Bootstrap's
     mid-animation rule and the slide would never appear. */
  .navbar-expand-xxl .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }

  .navbar-expand-xxl .navbar-collapse.show,
  .navbar-expand-xxl .navbar-collapse.collapsing {
    display: block !important;
    flex-basis: 100% !important;
    width: 100%;
  }

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

  /* Without this, Bootstrap's 1400px rule keeps dropdowns absolutely
     positioned — they end up floating over the navbar instead of
     pushing the items below them down inside the collapsed panel.
     Once it's in flow, the show/hide is animated below — display:block
     stays on always so max-height/opacity can transition cleanly
     (display itself isn't animatable). */
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100%;
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height 0.25s ease, opacity 0.2s ease,
                padding 0.25s ease, margin 0.25s ease;
    pointer-events: none;
  }

  .navbar-expand-xxl .navbar-nav .dropdown-menu.show {
    max-height: 600px;
    opacity: 1;
    margin-top: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-width: 1px !important;
    pointer-events: auto;
  }

  .navbar-expand-xxl .navbar-toggler {
    display: block !important;
  }
}