/* ===========================================================
   Fixed header
   ===========================================================
   The bar is pinned to the viewport on every page. On the front
   page it starts transparent with light ink while the hero video
   sits behind it, and returns to the solid light bar as soon as
   the hero has scrolled past.

   The state class (is-over-hero) is set by assets/js/header-overlay.js;
   the front page also prints it server-side so the first paint is never
   a white bar over the video.

   Loaded after main.css so it can override the theme's absolutely
   positioned .header-transparent bar.
   =========================================================== */

.pxp-site-header {
  /* Ink used by the bar, the nav links and the two utility buttons. */
  --pxp-header-ink: var(--at-neutral-950, #0F0F0F);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above page content; the offcanvas panels (995+) stay on top of it. */
  z-index: 100;
  color: var(--pxp-header-ink);
}

/* main.css floats the bar itself; the shell owns the fixed positioning now, so
   the bar can stay in flow and give the shell its height. */
.pxp-site-header .at-header-area.header-transparent {
  position: relative;
  z-index: auto;
}

.pxp-site-header .at-header-area {
  background-color: var(--at-neutral-0, #FEFEFE);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.07);
  transition: background-color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pxp-site-header .at-main-menu nav ul li a {
  transition: color 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
}

/* ---------- Over the hero video: no bar, light ink ---------- */
.pxp-site-header.is-over-hero {
  --pxp-header-ink: #FEFEFE;
}

.pxp-site-header.is-over-hero .at-header-area {
  background-color: transparent;
  box-shadow: none;
}

/* currentColor on the links resolves to the bar's own --pxp-header-ink. */
.pxp-site-header.is-over-hero .at-main-menu nav ul li a,
.pxp-site-header.is-over-hero .at-main-menu nav ul li.has-dropdown > a,
.pxp-site-header.is-over-hero .at-main-menu nav ul li:hover.has-dropdown > a {
  color: currentColor;
}

/* The dropdown caret is a dark inline SVG; reverse it with the ink. */
.pxp-site-header.is-over-hero .at-main-menu nav ul li.has-dropdown > a::after {
  filter: invert(1);
}

.pxp-site-header.is-over-hero .at-main-menu nav ul li a:hover {
  opacity: 0.72;
}

/* Keep the links readable wherever the video turns bright. */
.pxp-site-header.is-over-hero .at-main-menu nav ul li a {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* ---------- Logo lockup ---------- */
/* Both marks are printed in the markup; only the one matching the current
   background is rendered. */
.pxp-logo {
  display: block;
  height: 46px;
  width: auto;
}

.pxp-site-header .pxp-logo--light {
  display: none;
}

.pxp-site-header.is-over-hero .pxp-logo--dark {
  display: none;
}

.pxp-site-header.is-over-hero .pxp-logo--light {
  display: block;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.4));
}

@media (max-width: 574.98px) {
  .pxp-logo {
    height: 38px;
  }
}

/* ---------- Retired floating menu pill ---------- */
/* The bar is always on screen now, so the MENU pill the theme pins after a
   short scroll would land on top of it. */
.pxp-site-header .hamburger-sticky-menu {
  display: none;
}