/* ==========================================================================
   HEADER  ·  Fixed masthead + mobile overlay menu
   Transparent over the forest hero; once the page scrolls it settles onto
   a frosted forest bar (`.is-scrolled`, set by nav.js).
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  color: var(--cream);
  transition:
    background-color var(--dur-mid) ease,
    box-shadow var(--dur-mid) ease;
}

.header.is-scrolled {
  background-color: rgba(10, 48, 46, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-on-forest);
}

/* The bar must sit ABOVE the overlay menu. Both live inside the header's
   own stacking context (it is fixed with a z-index), where a positioned,
   z-indexed .menu would otherwise paint over this unpositioned bar and hide
   the close control. Positioning the bar and ranking it above the menu
   keeps the logo and the toggle (now an X) visible while the menu is open. */
.header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  block-size: 4.5rem;
}

@media (min-width: 64rem) {
  .header__bar { block-size: 5.25rem; }
}

/* The supplied signature, height-led so its ratio is never distorted. */
.header__logo img {
  block-size: 2.1rem;
  inline-size: auto;
}

@media (min-width: 64rem) {
  .header__logo img { block-size: 2.5rem; }
}

/* --- Desktop navigation -------------------------------------------------- */
.nav {
  display: none;
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
    gap: clamp(1.25rem, 0.5rem + 1.4vw, 2.25rem);
    margin-inline-start: auto;
  }
}

.nav__link {
  position: relative;
  padding-block: 0.4rem;
  font-size: var(--step-small);
  color: rgba(var(--cream-rgb), 0.86);
  transition: color var(--dur-fast) ease;
}

/* The active link is underlined by a short copper stroke, echoing the
   signature's underline. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1.5px;
  background-color: var(--copper);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease-out);
}

[dir="rtl"] .nav__link::after {
  transform-origin: 100% 50%;
}

.nav__link:hover,
.nav__link.is-current {
  color: var(--cream);
}

.nav__link:hover::after,
.nav__link.is-current::after {
  transform: scaleX(1);
}

/* --- Actions ------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__cta {
  display: none;
}

@media (min-width: 40rem) {
  .header__cta { display: inline-flex; }
}

/* --- Menu toggle: two lines that cross into an X ------------------------ */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-inline-end: -0.5rem;
}

@media (min-width: 64rem) {
  .menu-toggle { display: none; }
}

.menu-toggle__lines {
  position: relative;
  inline-size: 1.5rem;
  block-size: 0.75rem;
}

.menu-toggle__lines span {
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background-color: currentColor;
  transition:
    transform var(--dur-mid) var(--ease-out),
    inset-block-start var(--dur-mid) var(--ease-out);
}

.menu-toggle__lines span:first-child { inset-block-start: 0; }

.menu-toggle__lines span:last-child {
  inset-block-start: calc(100% - 1.5px);
  /* The lower line is shorter and copper: the signature's underline. */
  inset-inline-start: 35%;
  background-color: var(--copper);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child {
  inset-block-start: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child {
  inset-block-start: calc(50% - 0.75px);
  inset-inline-start: 0;
  transform: rotate(-45deg);
}

/* --- Overlay menu --------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  /* Ranked within the header's stacking context, beneath .header__bar. */
  z-index: 1;
  display: flex;
  align-items: center;
  background-color: var(--forest-deep);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-mid) ease,
    visibility 0s linear var(--dur-mid);
}

.menu[hidden] {
  display: none;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-mid) ease;
}

.menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-block: 6rem var(--space-xl);
}

.menu__link {
  font-size: clamp(1.75rem, 1.4rem + 2vw, 2.4rem);
  font-weight: 300;
  color: var(--cream);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-mid) ease,
    transform var(--dur-mid) var(--ease-out);
}

.menu__cta {
  margin-block-start: var(--space-md);
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}

/* Links arrive in sequence once the panel is open. */
.menu.is-open .menu__link,
.menu.is-open .menu__cta {
  opacity: 1;
  transform: none;
}

.menu.is-open .menu__link:nth-child(1) { transition-delay: 0.08s; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: 0.13s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: 0.23s; }
.menu.is-open .menu__link:nth-child(5) { transition-delay: 0.28s; }
.menu.is-open .menu__cta              { transition-delay: 0.36s; }

/* While the menu is open the header bar sits above it, transparent. */
.header.is-menu-open {
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}