/*
Sticky NavBar: clear over the hero, solid green once you scroll past it
---------------------------------------------------------------------------
Loaded after application.css and overrides the NavBar rules there.

States
  default        transparent bar over the hero, large badge logo
  .is-solid      set by assets/js/navbar.js once the hero has scrolled out of
                 view (or right away on pages without a hero): green bar,
                 compact white logo, shorter bar
  .js-nav-active (on <html>, set by responsiveNav when the mobile menu is open)
                 treated the same as .is-solid so the open menu sits on green
------------------------------------------------------------------------------*/

:root {
  --nav-green: #127F3F;
  --nav-h: 60px;            /* compact bar height on mobile */
  --nav-badge: 84px;        /* badge logo size over the hero on mobile */
  --nav-mark-h: 30px;       /* compact white logo height on mobile */
  --nav-ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 62em) {
  :root {
    --nav-h: 72px;
    --nav-badge: 170px;
    --nav-mark-h: 40px;
  }
}

/* ---------- Bar ---------- */
.NavBar {
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transition: background-color 300ms var(--nav-ease), box-shadow 300ms var(--nav-ease), transform 250ms ease-out;
}

/* old shadow pseudo-element is replaced by box-shadow on the solid bar */
.NavBar:after {
  display: none;
}

.NavBar.is-solid,
.js-nav-active .NavBar {
  background-color: var(--nav-green);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

/* Keep the bar below the WordPress admin bar for logged-in users */
.admin-bar .NavBar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .NavBar { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* WP's admin bar scrolls away at this size, so pin the nav to the very top */
  .admin-bar .NavBar { top: 0; }
}

/* Pages with no hero start solid, so push the content down below the bar */
body.NavBar--noHero {
  padding-top: var(--nav-h);
}

/* ---------- Logo ---------- */
.NavBar .NavBar-anchor {
  position: relative;
  float: left;
  overflow: visible;
  width: var(--nav-badge);
  height: var(--nav-h);
  margin: 0 0 0 1.47619rem;
  opacity: 1;
  transition: height 300ms var(--nav-ease), margin 300ms var(--nav-ease);
}

/* Large badge logo, shown over the hero */
.NavBar .NavBar-anchor .NavBar-logo--full {
  display: block;
  position: absolute;
  top: 12px;
  left: 0;
  width: var(--nav-badge);
  height: auto;
  opacity: 1;
  transform: none;
  transform-origin: top left;
  transition: transform 350ms var(--nav-ease), opacity 250ms var(--nav-ease);
}

/* Compact mark (logo.svg) shown in white on the green bar */
.NavBar .NavBar-anchor .Navbar-logo {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  height: var(--nav-mark-h);
  max-width: none;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: translateY(-50%) scale(1.15);
  transform-origin: left center;
  transition: transform 350ms var(--nav-ease), opacity 250ms var(--nav-ease);
  pointer-events: none;
}

.NavBar.is-solid .NavBar-anchor .NavBar-logo--full,
.js-nav-active .NavBar .NavBar-anchor .NavBar-logo--full {
  opacity: 0;
  transform: scale(.35);
  pointer-events: none;
}

.NavBar.is-solid .NavBar-anchor .Navbar-logo,
.js-nav-active .NavBar .NavBar-anchor .Navbar-logo {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ---------- Mobile toggle (hamburger) ---------- */
.NavBar .NavBar-mobileToggle {
  margin-top: calc((var(--nav-h) - 20px) / 2);
}

.NavBar .NavBar-mobileToggle span,
.NavBar .NavBar-mobileToggle span::before,
.NavBar .NavBar-mobileToggle span::after {
  background-color: #ffffff;
}

/* the middle bar disappears to form the X when the menu is open */
.js-nav-active .NavBar .NavBar-mobileToggle span {
  background-color: transparent;
}

/* ---------- Mobile menu panel ---------- */
@media (max-width: 61.99em) {
  .NavBar .NavBar-link {
    color: #ffffff;
  }

  .NavBar .NavBar-item.active .NavBar-link,
  .NavBar .NavBar-link.active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }

  /* menu opens below the bar; scroll inside it on short screens */
  .NavBar .NavBar-menuWrapper.opened {
    max-height: calc(100vh - var(--nav-h)) !important;
    overflow-y: auto;
  }
}

/* ---------- Desktop menu ---------- */
@media (min-width: 62em) {
  .NavBar .NavBar-anchor {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--nav-h);
    margin: 0 0 0 1.47619rem;
  }

  .NavBar .NavBar-anchor .NavBar-logo--full {
    top: 1.47619rem;
  }

  /* links sit lower over the hero (beside the big badge) and move up into the bar */
  .NavBar .NavBar-menuWrapper {
    padding-top: 82px;
    transition: padding-top 300ms var(--nav-ease);
  }

  .NavBar.is-solid .NavBar-menuWrapper {
    padding-top: 0;
  }

  .NavBar .NavBar-link {
    color: #ffffff;
    transition: color 250ms ease-out, line-height 300ms var(--nav-ease);
  }

  .NavBar.is-solid .NavBar-link {
    line-height: var(--nav-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* active indicator: green over the hero, white on the green bar */
  .NavBar.is-solid .NavBar-item.active {
    box-shadow: inset 0 3px 0 0 #ffffff;
  }

  .NavBar .NavBar-link:hover,
  .NavBar .NavBar-link:focus-visible {
    opacity: .8;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .NavBar,
  .NavBar * {
    transition-duration: 1ms !important;
  }
}