/**
 * Site header + menu disclosure.
 *
 * Geometry is taken from Figma node 190:143 (desktop, 1440×80) and
 * 207:1448 / 190:337 (mobile, 390×72 closed / 390×761 open).
 */

.vu-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--vu-cream);
  border-block-end: var(--vu-rule-width) solid var(--vu-rule);
}
.logged-in.admin-bar .vu-header {
	top: 32px;
}

.vu-header__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: var(--vu-nav-height);
  padding-inline-start: var(--vu-space-5);
  padding-inline-end: var(--vu-space-5);
}

/* ---------------------------------------------------------------- Logo */
.vu-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Target 44×44 minimum — WCAG 2.2 SC 2.5.8 Target Size (Minimum). */
  min-height: 44px;
}

.vu-header__logo img {
  width: 201px;
  height: auto;
}

/* ------------------------------------------------------------- Actions */
/* Positioned so the open menu panel can span the full width of the
   actions group — from the Menu cell's left edge to the right edge of
   the Request Information button. */
.vu-header__actions {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 21.5px; /* 1245.5 − 1224 in the Figma frame */
}

.vu-header__cta {
  align-self: center;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- Menu */
/* Static so the panel's containing block is .vu-header__actions rather
   than the 190px Menu cell. */
.vu-menu {
  position: static;
  display: flex;
  align-items: stretch;
}

.vu-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vu-space-5);
  width: 190px;
  padding-inline: var(--vu-space-5);
  background-color: var(--vu-cream);
  border-inline: var(--vu-rule-width) solid var(--vu-rule);
  font-family: var(--vu-font-sans);
  font-weight: 500;
  font-size: var(--vu-body-size);
  letter-spacing: var(--vu-body-track);
  color: var(--vu-ink);
}

/* Keep the indicator inside the sticky bar — WCAG 2.2 SC 2.4.11. */
.vu-menu__toggle:focus-visible {
  outline-offset: -4px;
}

.vu-menu__icon {
  flex-shrink: 0;
  color: var(--vu-ink);
}

.vu-menu__icon--close {
  display: none;
}

.vu-menu__toggle[aria-expanded="true"] .vu-menu__icon--open {
  display: none;
}

.vu-menu__toggle[aria-expanded="true"] .vu-menu__icon--close {
  display: block;
}

/* --------------------------------------------------------------- Panel */
/* Spans the whole actions group, so every label sits on one line. */
.vu-menu__panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  padding: var(--vu-space-5);
  background-color: var(--vu-cream);
  border: var(--vu-rule-width) solid var(--vu-rule);
}

.vu-menu__panel[hidden] {
  display: none;
}

.vu-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--vu-space-5);
}

.vu-menu__link {
  display: block;
  font-family: var(--vu-font-sans);
  font-weight: 400;
  font-size: var(--vu-body-size);
  line-height: 1.25;
  letter-spacing: var(--vu-body-track);
  color: var(--vu-ink);
  text-decoration: none;
}

/* .vu-menu__link:hover,
.vu-menu__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
} */
.vu-menu__link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding-bottom: 4px;
}

.vu-menu__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--vu-ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.vu-menu__link:hover::after,
.vu-menu__link:focus::after {
    transform: scaleX(1);
}

/* CTAs only surface inside the panel on mobile, per the design. */
.vu-menu__ctas {
  display: none;
}

/* ================================================================
 * Mobile — Figma 207:1448 (closed) and 190:337 (open)
 * ============================================================== */
@media (max-width: 1023px) {
  :root {
    --vu-nav-height: 72px;
  }

  .vu-header__inner {
    padding-inline: 0;
  }

  .vu-header__logo {
    padding-inline-start: var(--vu-gutter);
  }

  .vu-header__logo img {
    width: 152px;
  }

  /* The standalone dark pill is menu-only on mobile. */
  .vu-header__cta {
    display: none;
  }

  .vu-header__actions {
    gap: 0;
  }

  .vu-menu__toggle {
    width: auto;
    gap: var(--vu-space-3);
    padding-inline: var(--vu-gutter);
    border-inline-end: 0;
  }

  /* Full-bleed sheet beneath the bar: static here so the panel resolves
     against .vu-header__inner and spans the whole viewport width. */
  .vu-header__actions {
    position: static;
  }

  .vu-menu__panel {
    inset-inline: 0;
    inset-block-start: var(--vu-nav-height);
    width: auto;
    max-height: calc(100dvh - var(--vu-nav-height));
    overflow-y: auto;
    padding: 0;
    border-inline: 0;
    /* Overscroll containment stops the page scrolling behind the sheet
       without locking body scroll, which breaks pinch-zoom (WCAG 1.4.4). */
    overscroll-behavior: contain;
  }

  .vu-menu__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vu-space-3);
    padding: var(--vu-space-5) var(--vu-gutter);
    border-block-end: var(--vu-rule-width) solid var(--vu-rule);
  }

  .vu-menu__ctas .vu-button--dark {
    flex: 1 1 100%;
  }

  .vu-menu__ctas .vu-button--outline {
    flex: 1 1 0;
  }

  .vu-menu__list {
    gap: 0;
  }

  .vu-menu__item + .vu-menu__item {
    border-block-start: var(--vu-rule-width) solid var(--vu-rule);
  }

  .vu-menu__link {
    /* 54px row keeps every target well past the 44px minimum. */
    padding: 15px var(--vu-gutter);
    min-height: 44px;
  }
}