/* HLB header. All color comes from tokens so variants are a class swap only. */

.hlb-header {
  position: var(--hlb-header-position);
  top: 0;
  left: 0;
  z-index: var(--hlb-header-z);
  width: 100%;
  background: var(--hlb-header-bg);
  color: var(--hlb-header-fg);
}

.hlb-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(32px, 20.25vw - 211px, 113px);
  width: 100%;
  max-width: calc(var(--hlb-container) + (var(--hlb-gutter) * 2));
  min-height: var(--hlb-header-height);
  margin: 0 auto;
  padding: 16px var(--hlb-gutter);
}

/* Brand */

.hlb-header__brand {
  flex: 0 0 auto;
  display: inline-block;
  line-height: 0;
}

.hlb-header__logo {
  display: block;
  width: 166px;
  height: auto;
}

/* Tagline + primary nav */

.hlb-header__nav-group {
  flex: 1 1 auto;
  min-width: 0;
}

.hlb-header__tagline {
  margin: 0 0 8px;
  font: 400 13px/1.2 var(--hlb-font-body);
  color: var(--hlb-header-muted);
}

/* nowrap is load bearing. The nav group is the only flexible child of
   .hlb-header__inner, so if these are allowed to wrap they stack into two
   rows long before anything else gives. */
.hlb-nav-primary ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(20px, 7vw - 56px, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Parent theme puts margin on menu items. Gap is doing the spacing here. */
.hlb-nav-primary li {
  margin: 0;
  padding: 0;
}

.hlb-nav-primary a {
  font: 400 12px/1.1 var(--hlb-font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hlb-header-fg);
  text-decoration: none;
}

.hlb-nav-primary a:hover,
.hlb-nav-primary a:focus-visible {
  color: var(--hlb-blue);
}

.hlb-nav-primary a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.hlb-nav-primary .current-menu-item > a,
.hlb-nav-primary .current-menu-ancestor > a {
  box-shadow: 0 2px 0 currentColor;
}

/* Actions */

/* How far the actions drop to meet the nav row. Derived from the tagline
   block: half its line box plus half its margin, 13px * 1.2 / 2 + 8 / 2.
   Retune if the tagline type or margin changes. */
:root {
  --hlb-header-actions-shift: 12px;
}

.hlb-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;

  /* The nav group is two stacked rows, tagline over nav, so its own centre
     sits well above the nav row. The actions are a single row and centre on
     the whole header. Left alone the search box floats between the two
     nav-group rows and reads as belonging to neither.
     This drops the actions so the search input's centre lands on the nav
     row's centre. Relative offset, not a margin or a transform, so it changes
     nothing about the flex sizing the nav depends on and creates no
     containing block. */
  position: relative;
  top: var(--hlb-header-actions-shift);
}

/* Search */

.hlb-search {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  width: clamp(200px, 18.4vw, 294px);
  max-width: 100%;
  height: 32px;
  border: 1px solid var(--hlb-header-rule);
}

.hlb-search__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 10px;
  color: var(--hlb-header-fg);
  pointer-events: none;
}

.hlb-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 10px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 400 13px/1 var(--hlb-font-body);
  color: var(--hlb-header-fg);
}

.hlb-search__input::placeholder {
  color: var(--hlb-header-muted);
  opacity: 1;
}

/* The input's own ring is suppressed on purpose. The indicator belongs on
   the wrapper, which is the thing that looks like the control. The wrapper
   rule below is what replaces it, so these two must be edited together. */
.hlb-search__input:focus {
  outline: none;
  box-shadow: none;
}

/* A 1px border tint was the only indicator here before. That is not a
   sufficient focus indicator: it fails 2.4.13 outright and is thin for
   2.4.7, and it was the one control in the header without a real ring while
   the nav, the toggle and the buttons all have one. */
.hlb-search:focus-within {
  border-color: var(--hlb-header-fg);
  outline: 2px solid var(--hlb-header-fg);
  outline-offset: 2px;
}

/* Visually hidden but still reachable by keyboard, so it needs a visible
   indicator of its own when it gets focus. Without this it is a focus stop
   that appears to go nowhere. */
.hlb-search__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hlb-search__submit:focus-visible {
  right: 0;
  width: auto;
  height: auto;
  padding: 0 10px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border: 0;
  background: var(--hlb-header-fg);
  color: var(--hlb-header-bg);
  font: 400 12px/32px var(--hlb-font-body);
  outline: 2px solid var(--hlb-header-fg);
  outline-offset: 2px;
}

/* Hamburger. Three right-aligned bars, 25 / 36 / 30 wide, 3px, 13px apart,
   per the components sheet. Collapses to an X on open. */

.hlb-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 36px;
  height: 29px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hlb-header__toggle span {
  display: block;
  height: 3px;
  background: var(--hlb-header-fg);
  transition: width .2s ease, transform .28s ease, opacity .15s ease;
}

.hlb-header__toggle span:nth-child(1) { width: 25px; }
.hlb-header__toggle span:nth-child(2) { width: 36px; }
.hlb-header__toggle span:nth-child(3) { width: 30px; }

.hlb-header__toggle[aria-expanded="true"] span {
  width: 36px;
}

.hlb-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}

.hlb-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hlb-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
}

.hlb-header__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* The label span is hidden by the parent theme's .screen-reader-text. If that
   class ever stops taking the element out of flow, it becomes a fourth flex
   item and the 10px gap pushes the bars apart. */
.hlb-header__toggle .screen-reader-text {
  position: absolute;
}

/* Skip link */

.hlb-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--hlb-navy);
  color: var(--hlb-white);
  font: 400 13px/1 var(--hlb-font-body);
}

.hlb-skip-link:focus {
  left: var(--hlb-gutter);
  top: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 959px) {
  .hlb-header__inner {
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 12px var(--hlb-gutter);
  }

  .hlb-header__logo {
    width: 132px;
  }

  .hlb-header__nav-group,
  .hlb-header__actions .hlb-search {
    display: none;
  }

  /* Nothing left to align to once the nav group is hidden. */
  .hlb-header__actions {
    top: 0;
  }
}

/* ---------- Overlay menu ---------- */
/* Slides in from the right, scrim over the page, page itself shifts left.
   Matches the movement of the SideMenu plugin it replaces. Rendered in
   footer.php outside .box-wrapper, because .box-wrapper gets a transform
   while open and that would capture any fixed child. */

.hlb-nav {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

.hlb-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}

.hlb-nav__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  cursor: pointer;
  transition: opacity .25s ease;
}

.hlb-nav.is-open .hlb-nav__scrim {
  opacity: 1;
}

.hlb-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0 0 48px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hlb-navy);
  color: var(--hlb-white);
  transform: translateX(100%);
  transition: transform .25s ease-in-out;
}

.hlb-nav.is-open .hlb-nav__panel {
  transform: translateX(0);
}

.admin-bar .hlb-nav {
  top: 32px;
}

/* The page slides left behind the panel. */
.box-wrapper {
  transition: transform .25s ease-in-out;
}

body.hlb-nav-open .box-wrapper {
  transform: translateX(-15%);
}

/* Close button */

.hlb-nav__close {
  display: block;
  margin: 0 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 32px 32px 0 0;
  box-sizing: content-box;
  border: 0;
  background: transparent;
  color: var(--hlb-white);
  cursor: pointer;
}

.hlb-nav__close svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .2s ease-in-out;
}

.hlb-nav__close:hover svg {
  transform: rotate(180deg);
}

/* Sections, ruled like the plugin's */

.hlb-nav__section {
  margin: 0 40px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.hlb-nav__section:last-child {
  border-bottom: 0;
}

.hlb-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hlb-nav li {
  margin: 0;
  padding: 0;
}

.hlb-nav > .hlb-nav__panel .menu > li + li {
  margin-top: 20px;
}

.hlb-nav .menu > li > a {
  display: inline-block;
  font: 400 22px/1.2 var(--hlb-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hlb-white);
  text-decoration: none;
}

.hlb-nav .sub-menu {
  margin-top: 14px;
}

.hlb-nav .sub-menu li + li {
  margin-top: 6px;
}

/* Composites to about #DAE1E6 on navy, 9.58:1. */
.hlb-nav .sub-menu a {
  font: 400 15px/1.5 var(--hlb-font-body);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.hlb-nav a:hover,
.hlb-nav a:focus-visible {
  color: var(--hlb-mint);
}

.hlb-nav a:focus-visible,
.hlb-nav button:focus-visible {
  outline: 2px solid var(--hlb-white);
  outline-offset: 3px;
}

/* Top-level label hover. A mint rule wipes in from the left while the label
   holds position and stays white, so nothing reflows and the line is the only
   thing that moves.
 *
 * Scoped away from the social and CTA items, which are not text links and get
 * their own treatment further down. The label sits inside a literal <h2>, so
 * the rule is hung off the anchor, which is the inline-block box.
 *
 * On a two line label the rule spans the whole anchor box and sits under both
 * lines, not per line. Per line would mean a background-image on the heading
 * instead. */

.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a {
  position: relative;
}

.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--hlb-mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a:hover::after,
.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a:focus-visible::after {
  transform: scaleX(1);
}

/* The label itself stays white. The rule carries the state, so the two are
   not both changing at once. This overrides the shared .hlb-nav a:hover mint
   above, which still applies to submenu links. */
.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a:hover,
.hlb-nav .menu > li:not(.social_links):not(.menu-cta) > a:focus-visible {
  color: var(--hlb-white);
}

/* Panel search. Reuses .hlb-search with white-on-navy tokens. */

.hlb-nav__search .hlb-search {
  width: 100%;
  height: 40px;
  border-color: rgba(255, 255, 255, 0.6);
}

.hlb-nav__search .hlb-search__icon,
.hlb-nav__search .hlb-search__input {
  color: var(--hlb-white);
}

.hlb-nav__search .hlb-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* The header's focus ring is ink on white. In the panel it has to be white
   on navy or it disappears. */
.hlb-nav__search .hlb-search:focus-within {
  border-color: var(--hlb-white);
  outline-color: var(--hlb-white);
}

.hlb-nav__search .hlb-search__submit:focus-visible {
  background: var(--hlb-white);
  color: var(--hlb-navy);
  outline-color: var(--hlb-white);
}

/* Panel footer brand */

.hlb-nav__brand img {
  display: block;
  width: 154px;
  height: auto;
}

.hlb-nav__copyright {
  margin: 16px 0 0;
  font: 400 13px/1.5 var(--hlb-font-body);
  color: var(--hlb-white);
}

body.hlb-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .hlb-nav__panel {
    width: 45%;
    min-width: 420px;
  }
}

@media (max-width: 767px) {
  body.hlb-nav-open .box-wrapper {
    transform: none;
  }

  .hlb-nav__section {
    margin: 0 24px;
    padding: 24px 0;
  }

  .hlb-nav__close {
    padding: 24px 24px 0 0;
  }
}

/* The existing Side Menu items wrap their labels in literal <h2> markup, so
   the type has to be set on the heading, not just the anchor. */

.hlb-nav .menu > li > a h2 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* CTA button. The markup is produced by the walker filter in
   parts/header/nav-overlay.php, so the label and URL are still edited in
   Appearance > Menus while the rendering is the real component. */

.hlb-nav .menu li.menu-cta {
  margin-top: 24px;
}

/* .hlb-nav a:hover above sets mint on every anchor in the panel, which would
   beat the button's own --hlb-button-fg-hover. This puts it back.
   Hover ONLY. The focus ring stays on the rule below, because an outline is
   painted outside the box and on hover it reads as a second ring around the
   button rather than the component's own edge. */
.hlb-nav .menu li.menu-cta .hlb-button:hover,
.hlb-nav .menu li.menu-cta .hlb-button:focus-visible {
  color: var(--hlb-button-fg-hover);
}

/* .hlb-nav a:focus-visible sets a white outline on every anchor in the panel.
   The button supplies its own, offset to match the component. */
.hlb-nav .menu li.menu-cta .hlb-button:focus-visible {
  outline: 2px solid var(--hlb-button-focus);
  outline-offset: 3px;
}

/* ---- Customizer shim ----
 * Additional CSS in the Customizer styles the old SUBSCRIBE item at
 * `#menu-side-menu-part-2 .menu-cta > a`, which is an ID selector and beats
 * anything the component can declare, and it lands on our output because
 * wp_nav_menu derives that ul id from the menu slug.
 *
 * Left unchecked it forces the coral fill through the hover and adds a second
 * arrow glyph. These are the only !important declarations in the file and
 * they exist solely to outrank that block.
 *
 * DELETE THIS WHOLE SECTION once the Customizer rule is removed. Nothing else
 * depends on it. */

.hlb-nav .menu li.menu-cta > a.hlb-button::after,
.hlb-nav .menu li.menu-cta > a.hlb-button::before {
  content: none !important;
}

.hlb-nav .menu li.menu-cta > a.hlb-button {
  padding: 13px 16px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: var(--hlb-button-bg) !important;
  color: var(--hlb-button-fg) !important;
  box-shadow: inset 0 0 0 1px var(--hlb-button-rule) !important;
}

.hlb-nav .menu li.menu-cta > a.hlb-button:hover,
.hlb-nav .menu li.menu-cta > a.hlb-button:focus-visible {
  background: var(--hlb-button-bg-hover) !important;
  color: var(--hlb-button-fg-hover) !important;
  box-shadow: inset 0 0 0 1px var(--hlb-button-rule-hover) !important;
}

/* Social uses the shared .hlb-social component from footer.css, so the panel
   and the site footer cannot drift apart again. Spacing comes from the
   .hlb-nav__section wrapper it sits in, so there is nothing to add here. */

/* ---------- Reduced motion ---------- */
/* The panel slide and the 15% page shift are large scale movement. 2.3.3 is
   AAA rather than AA, but a whole page translating sideways is the standard
   vestibular trigger, so it comes out entirely. The panel still appears and
   the scrim still covers the page, they just do it instantly. */

@media (prefers-reduced-motion: reduce) {
  .hlb-nav .menu > li > a::after,
  .hlb-nav__scrim,
  .hlb-nav__panel,
  .hlb-nav__close svg,
  .box-wrapper {
    transition: none;
  }

  body.hlb-nav-open .box-wrapper {
    transform: none;
  }

  .hlb-nav__close:hover svg {
    transform: none;
  }
}