.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  transition: all 0.3s ease;
}

.header.static-header {
  position: static;
  background-color: var(--wp--preset--color--primary);
}

.header.static-header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.header-placeholder {
  visibility: hidden;
}

.header .container {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  max-width: calc(1332px + 32px);
  padding: 0.75rem 1rem;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.header > .container {
  z-index: 4;
}

.header__logo img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  width: auto;
  height: 56px;
}

.header__cta-wrapper {
  display: flex;
  gap: 0.75rem;
  margin: 1.25rem 1rem;
}

@media (min-width: 992px) {
  .header__cta-wrapper {
    margin: 0;
  }
}

@media (min-width: 992px) {
  .header__nav-menu .menu-primary-container {
    margin: 0 auto;
  }
}

.header__nav-wrapper {
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  .header__nav-wrapper {
    flex-grow: 1;
  }
}

/* The bar row: on a phone it holds the search button and the hamburger (the
   menu panel itself is absolutely positioned out of this flow); on a desktop
   .header__nav-menu is flattened into it and it holds the menu, the search
   button and the CTA. */
.header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-grow: 1;
}

.header .menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  list-style: none;
}

@media (min-width: 992px) {
  .header .menu {
    flex-direction: row;
  }
}

/* Submenu panel: a dark card of informative items (icon, title, subtitle).
   Items are not links - see includes/navigation.php. */
.header .sub-menu {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1rem;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.header.toggled .menu-item-toggled .sub-menu {
  display: flex;
}

@media (min-width: 992px) {
  /* The panel is positioned against the menu list, whose bottom edge is the
     links' bottom edge, so the space between link and panel is exactly the
     24px margin below - and nothing else. */
  .header .menu {
    position: relative;
  }

  .header .menu-item:has(.sub-menu) {
    position: static;
  }

  .header .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 24px;
    width: min(940px, calc(100vw - 2rem));
    display: none;
    columns: 2;
    column-gap: 4rem;
    column-rule: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.5rem;
    /* Opaque: once the header is scrolled the panel overlays whatever the
       page shows, and a translucent ground loses the white text on light
       sections. */
    background-color: var(--wp--preset--color--primary-dark);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 0.75rem;
  }

  /* Invisible bridge over the 24px margin so the item stays hovered while
     the pointer moves down to the panel. */
  .header .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
  }

  /* Items fill the left column top to bottom, then the right column. */
  .header .sub-menu > .menu-item {
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .header .sub-menu > .menu-item:last-child {
    margin-bottom: 0;
  }

  .header .menu-item:hover > .sub-menu {
    display: block;
  }
}

.header .menu-item__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--wp--preset--color--background);
  text-decoration: none;
  transition: color 0.3s ease;
}

.header .menu-item__card:hover {
  color: var(--wp--preset--color--secondary);
}

.header .menu-item__card:hover .menu-item__icon {
  border-color: currentColor;
}

.header .menu-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.375rem;
  background-color: var(--wp--preset--color--primary);
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.3s ease;
}

.header .menu-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.header .menu-item__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.header .menu-item__description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--wp--preset--color--background);
}

.header .menu-item {
  position: relative;
}

/* Secondary panel (Appearance > Menus, "Submenu style"): the same card on an
   opaque secondary-tinted ground (secondary mixed into the dark primary, so
   the white text keeps its contrast over any page section) with a secondary
   border, icons filled in the secondary colour. */
.header .menu-item--submenu-secondary > .sub-menu {
  background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 40%, var(--wp--preset--color--primary-dark));
  border-color: var(--wp--preset--color--secondary);
  column-rule-color: color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent);
}

.header .menu-item--submenu-secondary .menu-item__icon {
  background-color: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
}

.header .menu-item--submenu-secondary .menu-item__card:hover {
  color: var(--wp--preset--color--border);
}

.header .menu-item--submenu-secondary .menu-item__card:hover .menu-item__icon {
  border-color: var(--wp--preset--color--background);
}

/* One class heavier than ".header .menu a:not(.menu-item__card)" below, which
   otherwise ties on specificity and resets this to display: block. */
.header .menu .menu-item:has(.sub-menu) > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.header .menu-item:has(.sub-menu) > a::after {
  content: "\E136";
  font-family: Phosphor !important;
  display: flex;
  align-items: center;
  width: 15px;
  height: 15px;
  transition: 0.25s ease;
  transition: all 0.3s ease;
}

.header .menu-item:hover > a {
  color: var(--wp--preset--color--border);
}

.header .menu-item:hover a::after,
.header .menu-item-toggled a::after {
  transform: rotate(180deg);
}

@media (min-width: 992px) {
  .header .menu-item:hover a::after {
    color: var(--wp--preset--color--border);
  }

}

.header .menu a:not(.menu-item__card) {
  color: var(--wp--preset--color--background);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.01em;
  display: block;
  transition: all 0.3s ease;
}

.header .menu a:hover:not(.menu-item__card) {
  color: var(--wp--preset--color--border);
}

.header__nav-menu {
  display: none;
  flex-direction: column;
  width: 100%;
}

/* display: contents rather than flex: the menu container, the search button and
   the CTA become siblings in .header__nav, which is the only way they can be
   ordered menu, search, CTA while the search button lives in the bar for the
   phone layout. The gap moves up to .header__nav with the children. */
@media (min-width: 992px) {
  .header__nav-menu {
    display: contents;
  }

  /* The gap is stated per pair rather than once on the row: the menu stands
     off from the two controls, which sit close together as one set. */
  .header__nav {
    gap: 0;
  }

  .header__nav-menu .menu-primary-container {
    order: 1;
  }

  .header__search {
    order: 2;
    margin-left: 1rem;
  }

  .header__cta-wrapper {
    order: 3;
    margin-left: 0.5rem;
  }
}

@media (min-width: 1072px) {
  .header__search {
    margin-left: 2.5rem;
  }
}

.header.toggled,
.header.scrolled.toggled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--wp--preset--color--foreground);
}

.header.toggled .header__nav-menu,
.header.scrolled.toggled .header__nav-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  right: 0;
  /* The header is fixed, so the page cannot scroll the panel into view. Size
     it to the space under the header (100% is the header's own height here)
     and scroll inside it instead. */
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--wp--preset--color--foreground);
  animation: drop 0.2s ease-in-out forwards;
  padding-top: 32px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.header.toggled .menu,
.header.scrolled.toggled .menu {
  background: var(--wp--preset--color--foreground);
  gap: 0;
}

.header.toggled .menu a:not(.menu-item__card),
.header.scrolled.toggled .menu a:not(.menu-item__card) {
  color: var(--wp--preset--color--background);
  padding: 1.25rem 1rem;
  border-bottom: 1px solid #F2F7F51F;
}

.header.toggled .menu a:hover:not(.menu-item__card),
.header.scrolled.toggled .menu a:hover:not(.menu-item__card) {
  background-color: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Search
   ========================================================================== */

/* The wrapper is deliberately left unpositioned so the panel anchors to
   .header .container instead: inset by the same gutter as the bar's own
   content, it cannot leave the viewport at any width. Anchored to the button it
   would hang off the right edge on a phone. */
.header__search {
  display: flex;
  align-items: center;
}

.header__search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 36px: the height of the CTA beside it (a 14px label at 1.6 line height
     plus 6px and 8px of padding), so the two read as one row. */
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* The same hover as the CTA beside it (.header .btn:hover below): white fill,
   primary glyph. The open state holds it so the button reads as pressed. */
.header__search-toggle:hover,
.header__search-toggle[aria-expanded="true"] {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

/* Page Settings > Header CTA style: Dark. The circle follows the CTA beside it
   so the two controls stay one set. */
.header--cta-dark .header__search-toggle {
  background-color: var(--wp--preset--color--primary);
}

.header--cta-dark .header__search-toggle:hover,
.header--cta-dark .header__search-toggle[aria-expanded="true"] {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

.header__search-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--wp--preset--spacing--sm);
  z-index: 100;
  width: min(400px, calc(100% - 2 * var(--wp--preset--spacing--sm)));
  padding: 0.75rem;
  background-color: var(--wp--preset--color--primary-dark);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--wp--custom--border-radius--lg);
  box-shadow: var(--wp--preset--shadow--lg);
}

/* Field and its submit share a row; the field takes whatever the button leaves. */
.header__search-panel form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.header__search-panel input[type="search"] {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.6rem 1rem;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--wp--custom--border-radius--md);
  color: var(--wp--preset--color--background);
  font-family: inherit;
  /* 16px: anything smaller and iOS Safari zooms the page when the field takes
     focus. */
  font-size: var(--wp--preset--font-size--base);
}

.header__search-panel input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

/* The browser draws the type="search" clear button in its own accent colour,
   which lands as a blue X on this panel. Replaced with the glyph as a mask so
   it takes the field's colour. */
.header__search-panel input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background-color: var(--wp--preset--color--background);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.header__search-panel input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* Submits the form, which Enter already did; this just makes it visible. */
.header__search-submit {
  flex: 0 0 auto;
  padding: 0.6rem 1rem;
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--background);
  border-radius: var(--wp--custom--border-radius--md);
  color: var(--wp--preset--color--background);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header__search-submit:hover,
.header__search-submit:focus-visible {
  background-color: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
}

.header__search-results {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.header__search-results:not(:empty) {
  margin-top: 0.5rem;
}

.header__search-results a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--wp--custom--border-radius--md);
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.header__search-results a:hover,
.header__search-results a:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

.header__search-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* Which list a result came from: with articles, courses, campaigns, podcasts
   and blog posts in one dropdown, a title alone often does not say. */
.header__search-type {
  flex: 0 0 auto;
  color: var(--wp--preset--color--primary-light);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.header__search-results .no-results {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--wp--preset--color--primary-light);
  font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 575.98px) {
  .header__search-panel {
    right: 0.75rem;
    width: min(400px, calc(100% - 1.5rem));
  }

  .header__search-panel form {
    flex-wrap: wrap;
  }

  .header__search-submit {
    width: 100%;
  }
}

.header__menu-toggle {
  display: block;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  transition: 0.25s ease;
  width: 24px;
  height: 37px;
}

.header__menu-toggle .lines {
  position: relative;
  width: 100%;
  height: 16px;
  display: block;
}

.header__menu-toggle .lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--wp--preset--color--background);
  transition: all 0.25s ease;
}

.scrolled .header__menu-toggle .lines span {
  background-color: var(--wp--preset--color--background);
}

.toggled .header__menu-toggle .lines span {
  background-color: var(--wp--preset--color--background);
}

.header__menu-toggle .lines span:nth-child(1) {
  top: 0;
}

.header__menu-toggle .lines span:nth-child(2) {
  bottom: 0;
}

.header__menu-toggle .lines span:nth-child(3) {
  top: 7px;
}

@media (min-width: 992px) {
  .header__menu-toggle {
    display: none;
  }
}

.header.toggled .header__menu-toggle .lines span:nth-child(1),
.header.toggled.scrolled .header__menu-toggle .lines span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.header.toggled .header__menu-toggle .lines span:nth-child(2),
.header.toggled.scrolled .header__menu-toggle .lines span:nth-child(2) {
  top: 7px;
  width: 100%;
  transform: rotate(-45deg);
}

.header.scrolled.toggled .header__menu-toggle .lines span {
  background: var(--wp--preset--color--background);
}

.header.toggled .header__menu-toggle .lines span:nth-child(3) {
  display: none;
}

.header.scrolled {
  background: var(--wp--preset--color--primary);
}

.header.scrolled .menu > a {
  color: var(--wp--preset--color--background);
}

.header.scrolled .menu > a:hover {
  color: var(--wp--preset--color--secondary);
}

.header .btn {
  /* 2px shy at the top, as the theme.json button tokens are: the bottom stays
     where it was and the label lifts onto the optical centre of the pill. */
  padding: 6px 1.5rem 8px;
  border-radius: 30px;
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--background);
  transition: all 0.3s ease;
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  line-height: 1.6;
  font-weight: 600;
}

/* Arrow icon: a 16x16 box with the Phosphor arrow-right at its natural size,
   masked so it follows the CTA's text colour. */
.header .btn::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.header .btn:hover {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

/* Page Settings > Header CTA style: Dark. Primary fill for pages whose hero
   is the secondary colour; the hover stays the same as the default. */
.header--cta-dark .btn {
  background-color: var(--wp--preset--color--primary);
}

.header--cta-dark .btn:hover {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

/* Once the bar has scrolled onto its primary background, or opened the phone
   menu onto the dark one, a primary button would sink into it: both controls
   go back to the default secondary, as on every other page. */
.header--cta-dark.scrolled .btn,
.header--cta-dark.toggled .btn,
.header--cta-dark.scrolled .header__search-toggle,
.header--cta-dark.toggled .header__search-toggle {
  background-color: var(--wp--preset--color--secondary);
}

.header--cta-dark.scrolled .btn:hover,
.header--cta-dark.toggled .btn:hover {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

.header--cta-dark.scrolled .header__search-toggle:hover,
.header--cta-dark.toggled .header__search-toggle:hover,
.header--cta-dark.scrolled .header__search-toggle[aria-expanded="true"],
.header--cta-dark.toggled .header__search-toggle[aria-expanded="true"] {
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
}

@keyframes drop {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Hover and active states ------------------------------------------------
   Submenu cards: the title turns the secondary colour on hover and the icon
   outline follows it (the description stays white for readability). One
   class heavier than ".header .menu-item:hover > a" above, which otherwise
   wins and only nudges the card to the border colour. */
.header .sub-menu .menu-item:hover > .menu-item__card,
.header .sub-menu .menu-item > .menu-item__card:focus-visible {
  color: var(--wp--preset--color--secondary);
}

.header .sub-menu .menu-item:hover > .menu-item__card .menu-item__icon,
.header .sub-menu .menu-item > .menu-item__card:focus-visible .menu-item__icon {
  border-color: currentColor;
}

/* Current page: the top-level item (or the parent of the current submenu
   item) and the submenu card itself in the light primary tint. Heavy enough
   to beat the toggled (mobile) link rules, which tie on specificity and would
   otherwise win by source order. */
.header .menu .current-menu-item > a:not(.menu-item__card),
.header .menu .current-menu-ancestor > a:not(.menu-item__card),
.header.toggled .menu .current-menu-item > a:not(.menu-item__card),
.header.toggled .menu .current-menu-ancestor > a:not(.menu-item__card),
.header .sub-menu .current-menu-item > .menu-item__card {
  color: var(--wp--preset--color--primary-light);
}

.header .sub-menu .current-menu-item > .menu-item__card .menu-item__icon {
  border-color: var(--wp--preset--color--primary-light);
}

/* Secondary panel icons are filled in the secondary colour, so their glyph
   stays white whatever colour the card text takes on hover or when active. */
.header .menu-item--submenu-secondary .sub-menu .menu-item > .menu-item__card .menu-item__icon {
  color: var(--wp--preset--color--background);
}