/* Site header / navbar */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--neutral-10);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-row) var(--space-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap);
}
@media (max-width: 639px) {
  .site-header__inner {
    padding: var(--space-row) var(--space-gutter-phone);
    /* Logo + CTA + the hamburger button no longer fit at 24px gap on a
       375px screen (measured overflow, not a guess) — tighten it up only
       at this width rather than shrinking any one element awkwardly. */
    gap: var(--space-tight);
  }
}

.site-header__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--accent-display);
  text-decoration: none;
}
@media (max-width: 639px) {
  .site-header__logo { font-size: 22px; }
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .site-header__nav { display: flex; }
}

/* Underline grows in left-to-right on hover rather than appearing instantly
   — confirmed from the reference recording (a scaleX reveal, not a static
   underline) and matched exactly to Framer's actual Transition config for
   the Nav Button (Physics spring, Stiffness 500 / Damping 60 / Mass 1) via
   --ease-nav-spring, rather than a generic ease approximation. Retracts
   the same way on mouse-leave (Framer's "Line OUT" variant runs the same
   spring). Current page gets the underline permanently shown. */
.site-header__nav a {
  position: relative;
  text-decoration: none;
  color: var(--neutral-04);
  padding-bottom: 2px;
}

/* Text roll: two identical copies of the label stacked in a clipped
   window; hovering slides the stack up by exactly one item's height,
   swapping in the duplicate for a "slot machine" repeat rather than any
   real content change. Matches the Framer layer structure (Text > Label,
   Label) and reuses the same nav spring as the underline. */
.nav-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  height: 1.6em; /* Nav Link line-height */
}
.nav-roll__track {
  display: block;
  transition: transform var(--duration-nav-spring) var(--ease-nav-spring);
}
.nav-roll__item {
  display: block;
  height: 1.6em;
  line-height: 1.6em;
}
.site-header__nav a:hover .nav-roll__track {
  transform: translateY(-50%); /* track holds 2 stacked items — 50% of its own height is exactly one */
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-nav-spring) var(--ease-nav-spring);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  color: var(--neutral-02);
}
.site-header__nav a:hover::after,
.site-header__nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Font/weight/size/color/letter-spacing come from the .text-medium class
   applied alongside this in HTML — the guide names Medium as the CTA style,
   so this only adds layout, not a competing type treatment. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  white-space: nowrap;
}


/* Mobile menu toggle — shown under 768px. Hamburger animates into an X on
   open using the same nav spring as the underline/roll, so opening the
   menu feels like the same interaction language as the rest of the nav. */
.site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--neutral-08);
  border-radius: var(--radius);
  color: var(--neutral-02);
  cursor: pointer;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .site-header__menu-toggle { display: none; }
}

/* Touch targets. The CTA and the logo are text links whose rendered height
   is the text itself — 19px and 36px — which is fine under a cursor and
   too small for a thumb (44px is the floor in Apple's HIG, 48dp in
   Material); the toggle was a deliberate 40px square, 4px short. The
   padding is vertical only and the header row is 72px tall, so the header
   does not grow, only the tappable box does. Scoped to the phone
   breakpoint to match the rest of this pass — (pointer: coarse) is the
   more precise query if touch tablets should get it too. */
@media (max-width: 639px) {
  .site-header__cta { padding: 13px 0; }
  .site-header__logo { padding: 4px 0; }
  .site-header__menu-toggle { width: 44px; height: 44px; }
}

.site-header__menu-icon {
  position: relative;
  width: 18px;
  height: 12px;
}
.site-header__menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration-nav-spring) var(--ease-nav-spring),
              opacity var(--motion-state) ease;
}
.site-header__menu-icon span:nth-child(1) { top: 0; }
.site-header__menu-icon span:nth-child(2) { top: 5px; }
.site-header__menu-icon span:nth-child(3) { top: 10px; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon span:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

/* Slide-down panel. Animated with the CSS grid 0fr->1fr technique rather
   than a hardcoded max-height, so it opens to exactly the content's real
   height (works regardless of how many links end up in it) — the inner
   wrapper needs its own overflow: hidden for the row-size transition to
   clip correctly. Same nav spring as the rest of the header's motion.
   inert (toggled in JS) keeps the closed panel's links out of tab order
   and off screen readers without fighting the transition the way
   display: none would. */
.site-header__mobile-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-nav-spring) var(--ease-nav-spring);
  background: var(--neutral-10);
  border-bottom: 0 solid var(--neutral-06);
}
.site-header__mobile-panel.is-open {
  grid-template-rows: 1fr;
  border-bottom-width: 1px;
}
@media (min-width: 768px) {
  .site-header__mobile-panel { display: none; }
}
.site-header__mobile-panel-inner {
  overflow: hidden;
}
.site-header__mobile-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-tight) var(--space-gutter-phone) var(--space-gap);
}
.site-header__mobile-nav a {
  text-decoration: none;
  color: var(--neutral-04);
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-06);
}
.site-header__mobile-nav a:last-child { border-bottom: none; }
.site-header__mobile-nav a:hover,
.site-header__mobile-nav a[aria-current="page"] {
  color: var(--neutral-02);
}

/* The open panel ended on the last nav link, so the menu had three places
   to go and nothing to do. The header's own "Get in Touch" is still there
   above it, but it is a 16px underlined text link sat between the logo and
   the toggle, and next to three 20px nav links it does not read as the
   thing to press.

   A sibling of the nav rather than a child of it: it is a call to action
   that happens to live in the menu, not a fourth destination, so it stays
   out of the nav landmark and off the nav link styling (which would give
   it the divider rule the links share). js/mobile-nav.js closes the panel
   on a click on any <a> inside it, so this needs nothing from the JS.
   Styled as .fyf__volume-cta and .hero__cta are — --main is the primary
   button everywhere on the site. */
.site-header__mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 var(--space-gutter-phone) var(--space-gap);
  padding: var(--space-row) var(--space-gap);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--main);
  color: var(--neutral-01);
  letter-spacing: normal;
  transition: background-color var(--motion-state) ease;
}
.site-header__mobile-cta:hover {
  background: var(--neutral-02);
}
.site-header__mobile-cta:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 3px;
}
/* The nav's own bottom padding was the panel's end margin; the button
   supplies that now, so this only needs to space the two apart. */
.site-header__mobile-nav {
  padding-bottom: var(--space-row);
}