/************************
 Mega Menu 1.17 on Bootstrap 5
 menu.css was written for Mega Menu 1.16 on Bootstrap 3. Mega Menu 1.17
 lays the menu out as a flex row and keeps Bootstrap classes on it
 (.nav, .nav-tabs, .dropdown-menu) that behave differently in Bootstrap 5.
 These rules undo those differences so menu.css lays the menu out as it
 does on the live site: logo first, then a 200px slot per item.
 Loads after menu.css.

 Every rule is limited to .navbar-we-mega-menu:not(.admin). The Mega Menu
 editor (admin UI) draws its preview with the same classes plus "admin",
 and these front-end fixes must not change how the editor lays it out.
************************/

/* Bootstrap 5 styles .dropdown-menu as a floating panel (border, padding,
   background, rounded corners). Mega Menu puts that class on each top-level
   item, so reset it back to a plain menu item. */
.navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .dropdown-menu {
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: inherit;
  color: inherit;
}

/* Bootstrap 5 .nav-tabs adds a grey bottom border. */
.navbar-we-mega-menu:not(.admin) .we-mega-menu-ul.nav-tabs,
.navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu .nav-tabs {
  border-bottom: 0;
}

/* Inside the dropdowns, each column's links are a <ul class="nav nav-tabs">.
   Bootstrap 3 .nav was a plain block, so the links stacked. Bootstrap 5 .nav
   is a wrapping flex row, which lines links and grouped sub-lists up side
   by side. Put the block layout back. */
.navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu ul.nav {
  display: block;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu ul.nav > li {
  display: block;
  width: auto;
}

/* Same .dropdown-menu panel reset as the top level, for grouped items
   inside a dropdown. */
.navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu .dropdown-menu {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: inherit;
  color: inherit;
  min-width: 0;
}

/* Grouped sub-lists show inline inside their column, not as a pop-out. */
.navbar-we-mega-menu:not(.admin) .we-mega-menu-group > .we-mega-menu-submenu {
  display: block !important;
  position: static;
}

@media only screen and (min-width: 970px) {
  /* Dropdown panel width. Panels are positioned against Mega Menu's inner
     <nav>, and size themselves to their columns within the room it gives
     them. On live (Bootstrap 3) that <nav> is the full header width
     (measured: 1510px at a 1512px window), so the About us panel is about
     720px with 223px columns. Here it sits in Mega Menu's flex wrapper and
     only takes the width of its contents, which squeezed the panels. Make
     it full width again. */
  .region-we-mega-menu > .navbar-we-mega-menu:not(.admin) {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Dropdown columns. A panel sizes itself to its columns. Measured at a
     1512px window, live's three-column panels (About us) have 223px columns
     and the panel is 719px; under Bootstrap 5 the browser works out a far
     smaller natural width (113px columns), so labels wrap.
     - Rows never wrap: each Mega Menu row's columns add up to 12, so they
       always belong side by side.
     - Only three-column layouts (span4) get live's minimum width; other
       layouts, such as Library, keep their own natural width. */
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu .we-mega-menu-row {
    flex-wrap: nowrap;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu .we-mega-menu-col.span4 {
    min-width: 223px;
  }

  /* Keep the logo and all menu items on one row. Bootstrap 5 .nav wraps. */
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul {
    flex-wrap: nowrap;
  }

  /* menu.css gives each item a 200px slot, with the arrow at the slot's
     right edge. Keep that, but let a slot shrink on narrower screens rather
     than push the row off the edge. A slot never gets narrower than its
     label. */
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li:not(:nth-of-type(1)) {
    flex: 0 1 200px;
  }

  /* The first item is the logo (drawn as its background image in menu.css,
     scaled to fit). It starts at its percentage width but shrinks, down to
     180px, when the window narrows, so the six menu items keep fitting
     instead of Donate running off the right of the screen. */
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li:nth-of-type(1) {
    flex: 0 1 auto;
    min-width: 180px;
  }

  /* Link height as on the live site. Bootstrap 5 and Mega Menu 1.17 make the
     links taller (body line-height 160% plus 18px padding). That also made
     the logo larger, because it is scaled to fit the first item. */
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > a,
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > span {
    line-height: 1.42857143;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* Keep each label on one line once there is room for it. Below 1200px the
   labels may wrap onto two lines rather than overflow. */
@media only screen and (min-width: 1200px) {
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > a,
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > span {
    white-space: nowrap;
  }
}

/* Compact desktop menu, 992px to 1199px. Mega Menu only switches to the
   hamburger at 991px and below, but from about 1200px down the logo (30%
   wide plus a 5% gap) and six 200px slots no longer fit, and Donate ran
   off the right of the screen. In this range: a narrower logo, less
   padding, slightly smaller labels, and slots that shrink to their label. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul {
    padding-left: 0 !important;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li:nth-of-type(1) {
    width: 22% !important;
    margin-right: 2% !important;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li:not(:nth-of-type(1)) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }

  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > a,
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > span {
    font-size: 16px !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
  }

  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .dropdown-menu > a,
  html .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .dropdown-menu > span {
    padding-right: 1.875rem;
  }
}

/* Mobile menu, 991px and below (Mega Menu's own mobile breakpoint).
   - Bootstrap 5 .nav makes the top-level list a wrapping flex row, so items
     paired up side by side and each link was only as wide as its label,
     with the arrow on top of it. Stack them full width, as on live, so the
     arrow sits at the right.
   - The desktop reset above removes padding from dropdown lists; put back
     Mega Menu's mobile indent for sub-menus. */
@media only screen and (max-width: 991px) {
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul {
    display: block;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li {
    display: block;
    width: 100%;
    position: relative;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > a,
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul > .we-mega-menu-li > span {
    display: block;
    width: 100%;
    position: relative;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-submenu ul.nav {
    padding: 10px 0 10px 30px;
  }
}

/* Mobile panel. Mega Menu fixes it at 250px.
   - Bootstrap 5 makes the .container-fluid inside a .navbar a flex row, so
     the menu list shrank to its content (about 250px) even when the panel
     was full width. Bootstrap 3's container was a plain block.
   - Mega Menu puts its close button 270px from the right, just outside its
     250px panel, which lands on top of a wider panel. Move it to the
     panel's top-right corner. */
@media only screen and (max-width: 991px) {
  /* Half-width drawer from the right (Mega Menu's own is a fixed 250px),
     never narrower than 280px so labels fit on small phones. */
  .navbar-we-mega-menu:not(.admin).navbar {
    width: 50%;
    min-width: 280px;
    left: auto;
  }

  /* style.css right-aligns the mobile menu bar (for the menu button), and
     the panel items inherited it, so Donate sat on the right. */
  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul {
    text-align: left;
  }

  .navbar-we-mega-menu:not(.admin) > .container-fluid {
    display: block;
    width: 100%;
  }

  .navbar-we-mega-menu:not(.admin) .we-mega-menu-ul {
    width: 100%;
  }

  /* Mega Menu pushes the whole page 250px to the left when the drawer
     opens. The drawer is no longer 250px, so the push no longer lines up;
     leave the page where it is and let the drawer cover it. */
  body.toggled {
    right: 0 !important;
  }

  body.toggled .btn-close {
    right: 15px;
    left: auto;
    z-index: 1001;
  }
}