/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--c-white) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* On pages with a dark hero, header starts transparent + light text */
.site-header--overlay {
  position: fixed; left: 0; right: 0;
  background: transparent;
  border-color: transparent;
  color: var(--c-white);
}
.site-header--overlay .menu > li > a { color: var(--c-white); }
.site-header--overlay.is-stuck {
  position: fixed;
  background: color-mix(in srgb, var(--c-ink) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--c-white);
}
.site-header--overlay.is-stuck .menu > li > a { color: var(--c-white); }
/* hide header on scroll-down, reveal on scroll-up */
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-brand { display: inline-flex; align-items: center; }
.site-brand img, .site-brand svg { height: clamp(54px, 4vw, 66px); width: auto; }
.site-brand .brand-default { display: block; }
.site-brand .brand-reverse { display: none; }
/* The overlay header is dark in both states (transparent over the dark hero,
   and a dark fill once stuck), so it always uses the white/reverse logo. */
.site-header--overlay .brand-default { display: none; }
.site-header--overlay .brand-reverse { display: block; }

/* --- Primary menu ----------------------------------------------------- */
.primary-nav { display: flex; align-items: center; gap: var(--sp-6); }
.menu { display: flex; align-items: center; gap: clamp(.75rem, .2rem + 1.4vw, 2rem); }
.menu > li { position: relative; }
.menu > li > a {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 700;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink);
  padding: .5rem 0;
}
.menu > li > a:hover,
.menu > li.current-menu-item > a { color: var(--c-green-text); }
.site-header--overlay:not(.is-stuck) .menu > li > a:hover { color: var(--c-green); }
/* Centred peak under the word, grows up on hover / active. */
.menu > li > a::after {
  content: ""; position: absolute; bottom: .1rem; left: 50%;
  width: 16px; height: 8px; background: var(--c-green);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur) var(--ease-out);
}
.menu > li:hover > a::after,
.menu > li.current-menu-item > a::after { transform: translateX(-50%) scaleY(1); }

/* Submenus */
.menu .sub-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.menu > li:hover .sub-menu,
.menu > li:focus-within .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu .sub-menu a {
  display: block; padding: .6rem .8rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .9rem; color: var(--c-ink); text-transform: none; letter-spacing: 0;
}
.menu .sub-menu a:hover { background: var(--c-grey-50); color: var(--c-green-text); }

/* Header CTA */
.site-header .btn { padding: .6em 1.3em; font-size: .8rem; }

/* --- Mobile toggle ---------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 26px; height: 2.5px;
  background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars::before { transform: translateY(-8px); }
.nav-toggle__bars::after { transform: translateY(5.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg) translateY(-1.7px); }

/* --- Mobile drawer ---------------------------------------------------- */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  /* A backdrop-filter makes the header the containing block for the fixed
     drawer, clipping it to the header's height. Drop it on mobile so the
     drawer is sized against the viewport (full height). */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto;
    height: 100dvh;
    width: min(86vw, 380px);
    background: var(--c-ink); color: var(--c-white);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--sp-5)) var(--sp-6) var(--sp-7);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  .primary-nav.is-open { transform: none; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1px solid var(--c-border-dark); }
  .menu > li > a { color: var(--c-white); padding: 1rem 0; font-size: 1rem; }
  .menu > li > a::after { display: none; }
  .menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; box-shadow: none; padding: 0 0 var(--sp-3) var(--sp-4);
  }
  .menu .sub-menu a { color: rgba(255,255,255,.75); }
  .site-header .btn { margin-top: var(--sp-5); justify-content: center; }
  /* backdrop */
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(17,17,17,.5);
    opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
    z-index: calc(var(--z-header) - 1);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}