/* The navigation itself spans the same page width as the hero photograph. */
body .site-header,
body.home-page .site-header {
  --menu-gutter: 2vw;
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .site-header > a.brand,
body.home-page .site-header > a.brand {
  margin-left: var(--menu-gutter) !important;
}

body .site-header > .mobile-toggle,
body.home-page .site-header > .mobile-toggle {
  margin-right: var(--menu-gutter);
}

body .site-header > nav,
body.home-page .site-header > nav,
body .site-header.nav-open > nav,
body.home-page .site-header.nav-open > nav {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex-basis: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--menu-gutter);
  padding-right: var(--menu-gutter);
  background: #061827 !important;
}

@media (max-width: 760px) {
  body .site-header,
  body.home-page .site-header {
    --menu-gutter: 3.5vw;
  }
}

/* Keep the light logo band separate on wide desktop screens too. */
@media (min-width: 1601px) {
  body .site-header,
  body.home-page .site-header {
    --menu-gutter: 1.1vw;
    height: auto;
    flex-wrap: wrap;
  }

  body .site-header > .brand,
  body.home-page .site-header > .brand {
    min-height: 80px;
  }

  body .site-header > nav,
  body.home-page .site-header > nav {
    order: 10;
    width: 100%;
    flex: 0 0 100%;
    height: 58px;
    justify-content: center;
  }

  body .site-header nav .mega {
    top: 100%;
  }

  body .site-header nav > .nav-item:nth-child(4) {
    position: static;
  }

  body .site-header nav > .nav-item:nth-child(4) .mega {
    position: absolute;
    top: 100%;
    max-height: calc(100vh - 158px);
  }
}