/* AMME — site header */
/* ------------------------------------------------------------------
   HEADER
-------------------------------------------------------------------*/
/* Full-width at the top of the page; once you scroll it shrinks into a floating pill (.is-pill, set in common.js).
   Only width / padding / colours change here: page intros animate .header__inner's transform and opacity with GSAP. */
.header {
  position: fixed;
  inset: 27px 0 auto 0;
  z-index: 50;
  transition: inset .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
/* scrolling down: slides up out of view (set in common.js) */
.header.is-hidden { transform: translateY(calc(-100% - 30px)); }
.header__inner {
  width: min(1660px, 92vw);
  margin-inline: auto;
  padding: 20px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;   /* the menu takes the space between logo and button and centres in it */
  align-items: center;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1),
              background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.logo { display: inline-flex; align-items: flex-start; gap: 5px; justify-self: start; }
.logo__mark { position: relative; width: 63.557px; height: 66.537px; overflow: hidden; flex: none; transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); }
.logo__mark img { position: absolute; top: -0.07%; left: 0; width: 100%; height: 100%; max-width: none; }
.logo__word { width: 125.38px; height: 67px; flex: none; transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); }
.logo__word img { width: 100%; height: 100%; }

/* floating pill */
.header.is-pill { inset-block-start: 14px; }
.header.is-pill .header__inner {
  width: min(1340px, calc(100vw - 28px));   /* wide enough for the menu + "Reserve Your Spot" (longer "Living Cost Calculator" label) */
  padding: 12px;                       /* same on every side */
  background-color: rgba(var(--white-rgb), .82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-color: rgba(var(--black-rgb), .08);
  box-shadow: 0 12px 40px rgba(var(--black-rgb), .1);
}
.header.is-pill .logo__mark { width: 42px; height: 44px; }
.header.is-pill .logo__word { width: 83px; height: 44px; }
.header.is-pill .nav { gap: clamp(16px, calc((100vw - 1281px) * 0.1 + 16px), 30px); }   /* tighter on small laptops so the button never spills out */
@media (min-width: 1281px) {
  /* the links' own vertical padding would make the row taller than the button; drop it so the gap is even all round */
  .header.is-pill .nav { padding-block: 0; }
}

.nav { display: flex; align-items: center; gap: 40px; padding: 20px 15px; font-size: var(--fs-sm); letter-spacing: 0.16px; white-space: nowrap; transition: gap .45s cubic-bezier(.2,.8,.2,1); }
.nav { justify-self: center; }
/* small laptops (1281–1480px): the gaps between links shrink with the screen (18px → 40px) so the button always fits */
@media (min-width: 1281px) and (max-width: 1480px) {
  .nav { padding-inline: 0; gap: clamp(18px, calc((100vw - 1281px) * 0.14 + 18px), 40px); }
}
.nav a { opacity: .9; transition: opacity .2s ease, color .2s ease; }
.nav a:hover { color: var(--purple); opacity: 1; }
.nav a[aria-current="page"] { font-weight: 700; opacity: 1; }

.header__cta { justify-self: end; }

.nav-toggle {
  display: none;
  justify-self: end;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: var(--grey-900);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute; left: 50%; width: 20px; height: 2px; background: var(--white);
  transform: translateX(-50%); transition: transform .25s ease, top .25s ease, opacity .2s ease;
  content: "";
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* responsive */
@media (max-width: 1280px) {
  .header__inner { grid-template-columns: 1fr auto auto; }
  .nav-toggle { display: block; order: 3; }
  .header__cta { order: 2; }
  .nav { position: absolute; top: 100%; left: 4vw; right: 4vw; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 24px; background: var(--white); border-radius: 25px; box-shadow: 0 20px 50px rgba(var(--black-rgb), .15); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { width: 100%; padding: 14px 0; font-size: var(--fs-body); }
  .nav a + a { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .header { inset-block-start: 10px; }
  .header.is-pill { inset-block-start: 10px; }
  .header.is-pill .header__inner { padding: 8px; }
  .logo__mark { width: 48px; height: 50px; }
  .logo__word { width: 94px; height: 50px; }
}
@media (max-width: 560px) {
  .header__cta { display: none; }
  .btn--outline { padding: 12px 22px; }
}