/**
 * Sticky compact header.
 *
 * At the top of the page the header keeps its normal 94px height over the
 * hero. Once assets/scripts/sticky-header.js adds .is-compact, the header
 * is fixed to the top of the viewport at 60px, on a solid charcoal-green
 * bar, and slides in from above.
 *
 * This replaces the old theme.js behaviour (.scrolling nudged the header up
 * 20% at 250px, .headerscroll pinned it at 400px). Those classes are still
 * toggled by dist/scripts/theme.js, so the rules below override them.
 * Plain CSS outside the Sass build; enqueued by AssetsServiceProvider.
 */

.o-header.is-compact {
  position: fixed !important;
  top: 0;
  transform: none !important;
  background-color: rgba(22, 32, 29, 0.96) !important;
  box-shadow: 0 1px 0 rgba(0, 206, 124, 0.35);
  animation: xpt-header-drop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (backdrop-filter: blur(8px)) {
  .o-header.is-compact {
    background-color: rgba(22, 32, 29, 0.94) !important;
    backdrop-filter: blur(8px);
  }
}

/* Light-banner pages use a white header; keep it white when compact. */
body.service-light-banner .o-header.is-compact {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 1px 0 rgba(90, 90, 90, 0.2);
}

/* Clear the WordPress admin bar for logged-in users. */
body.logged-in > .o-header.is-compact {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.logged-in > .o-header.is-compact {
    top: 46px;
  }
}

/* Below 600px the admin bar scrolls away with the page. */
@media screen and (max-width: 600px) {
  body.logged-in > .o-header.is-compact {
    top: 0;
  }
}

/* 94px to 60px: smaller logo, tighter menu items. */
.o-header.is-compact .o-header__logo-link {
  width: 56px;
  height: 42px;
  margin: 9px 0;
}

@media only screen and (min-width: 889px) {
  .o-header.is-compact .o-menu--main > ul > li.menu-item {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

.o-header.is-compact .o-header__top-bar {
  display: none;
}

/* Animates `translate`, not `transform`: the transform: none !important
   above would override an animated transform. */
@keyframes xpt-header-drop {
  from { translate: 0 -100%; }
  to   { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .o-header.is-compact {
    animation: none;
  }
}