/* Navigation ===============================================================
   Figma: navigation · H 96 (hug) · padding 48/24 desktop, 24/24 mobile
   horizontal auto layout, gap Auto (= space-between), fill Grey (12)
   ========================================================================== */

/* The nav floats over the hero rather than pushing it down, so the hero fills
   the full visible height and its text box lands in the middle of the screen.
   Same dark colour as the hero, so there is no visible seam. */
.site-nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  background: var(--color-bg-inverse);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Figma: gap Auto */
  gap: var(--space-24);
  min-height: var(--nav-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* From 1024 the nav is no longer held to the 1280 frame: the logo hugs the
   left outer margin and the button the right. Padding provides the margin, so
   a scrollbar cannot shift it (unlike a vw-based calculation). */
@media (width >= 64rem) {
  .site-nav__inner { max-width: none; }
}

.site-nav__logo {
  display: block;
  flex-shrink: 0;
}

.site-nav__logo img {
  /* 48px — the nav's content height (96 − 2 × 24 padding) */
  height: 3rem;
  width: auto;
}