/* ==========================================================================
   04-NAV.CSS  —  the sticky navbar, the hamburger button, the slide-in menu
   --------------------------------------------------------------------------
   Written mobile-first: everything here is the phone layout.
   The desktop changes live in 99-responsive.css.
   ========================================================================== */

/* ==========================================================================
   1. THE BAR
   Fixed to the top of the window, thin, and genuinely glassy — the cream
   background is only 55% opaque and the page blurs through it.
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h-mobile);

  background-color: var(--nav-glass);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid transparent;

  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out),
    height           var(--dur-base) var(--ease-out);
}

/* Safari on older iOS, and any browser without blur support, gets a nearly
   solid cream bar instead — so it never looks like a mistake. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .nav--scrolled {
    background-color: var(--nav-glass-solid);
  }
}

/* State 2: the hero has scrolled past. The bar firms up. */
.nav--scrolled {
  background-color: var(--nav-glass-scrolled);
  border-bottom-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

/* ==========================================================================
   2. BRAND — mark + wordmark, one single link back to the top
   ========================================================================== */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.nav__mark {
  height: var(--mark-h);
  width: auto;
  flex: none;
}

.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-brand);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* The placeholder ribbon mark's gradient. Colours come from the tokens file
   via stop-color, so there is no hex code sitting inside the HTML. */
.brand-grad-start { stop-color: var(--orange-bright); }
.brand-grad-mid   { stop-color: var(--orange); }
.brand-grad-end   { stop-color: var(--orange-deep); }

/* ==========================================================================
   3. RIGHT-HAND GROUP — inline links + hamburger
   ========================================================================== */
.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Hidden on phones in both states — the hamburger is the only way in.
   Turned on at 900px in 99-responsive.css. */
.nav__links {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--ink-soft);
  padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Orange underline sweeping in from the left on hover or keyboard focus */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* Once the hero is behind us the inline links fade up and out of the way,
   and out of the keyboard tab order (JavaScript also sets tabindex="-1"). */
.nav--scrolled .nav__links {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
}

.nav__links {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity    var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out),
    visibility 0s linear 0s;
}

.nav--scrolled .nav__links {
  transition:
    opacity    var(--dur-base) var(--ease-out),
    transform  var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}

/* ==========================================================================
   4. HAMBURGER — three lines that fold into a cross
   ========================================================================== */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  /* pull it flush with the gutter without losing the tap area */
  margin-right: calc(var(--space-2) * -1);
}

.hamburger__box {
  position: relative;
  width: var(--burger-w);
  /* three bars + two gaps */
  height: calc((var(--burger-bar) * 3) + (var(--burger-gap) * 2));
}

.hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--burger-bar);
  background-color: var(--ink);
  border-radius: var(--burger-bar);
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity   var(--dur-fast) var(--ease-out);
}

.hamburger__bar:nth-child(1) { top: 0; }
.hamburger__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger__bar:nth-child(3) { bottom: 0; }

/* Open: top bar drops to the middle and rotates, middle fades, bottom rises */
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(calc(var(--burger-bar) + var(--burger-gap))) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.4);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(calc((var(--burger-bar) + var(--burger-gap)) * -1)) rotate(-45deg);
}

/* ==========================================================================
   5. THE SLIDE-IN MENU
   On a phone this is a full-screen cream panel.
   On desktop (see 99-responsive.css) it becomes a 420px white panel on the
   right with a dimmed, blurred backdrop over the rest of the page.
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  /* Delay the visibility flip until the slide-out has finished */
  transition: visibility 0s linear var(--dur-base);
}

.menu.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.menu__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--menu-backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  /* No backdrop on phones — the panel covers the whole screen anyway */
  display: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.menu.is-open .menu__backdrop {
  opacity: 1;
}

.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  overflow-y: auto;
  overscroll-behavior: contain;

  padding-top: var(--space-3);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));

  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.menu.is-open .menu__panel {
  transform: translateX(0);
}

/* --- close button ------------------------------------------------------ */
.menu__head {
  display: flex;
  justify-content: flex-end;
  flex: none;
}

.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--ink);
  margin-right: calc(var(--space-2) * -1);
  transition: transform var(--dur-base) var(--ease-out);
}

.menu__close:hover {
  transform: rotate(90deg);
}

.menu__close svg {
  width: 20px;
  height: 20px;
}

/* --- links -------------------------------------------------------------- */
.menu__nav {
  margin-top: var(--space-4);
}

.menu__item + .menu__item {
  border-top: 1px solid var(--hairline);
}

/* Each link fades up in turn as the panel opens, 55ms apart, starting 120ms
   in. --i is the link's position in the list, set by js/nav.js. */
.menu__item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.menu.is-open .menu__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(120ms + (var(--i, 0) * var(--stagger-menu)));
}

.menu__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-menu-link);
  line-height: 1.25;
  color: var(--ink);
  /* Keeps all six links plus the footer on screen without the panel needing
     to scroll. Each link is still ~60px tall, well over the 44px tap floor. */
  padding-block: var(--space-1);
}

.menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-1) - 2px);
  height: 1px;
  background-color: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.menu__link:hover::after,
.menu__link:focus-visible::after {
  transform: scaleX(1);
}

/* --- footer of the panel ------------------------------------------------ */
.menu__foot {
  margin-top: auto;
  padding-top: var(--space-5);
}

.menu__rule {
  margin-bottom: var(--space-4);
}

.menu__social {
  display: flex;
  align-items: center;
  gap: var(--social-gap);
  margin-left: calc(var(--tap) / -2 + var(--social-size) / 2);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  transition:
    transform var(--dur-base) var(--ease-out),
    filter    var(--dur-base) var(--ease-out);
}

.social-link svg {
  width: var(--social-size);
  height: var(--social-size);
  /* --icon-color is set on each link by js/nav.js, from the colorToken named
     in js/data/site-config.js. Instagram ignores it and uses its own
     gradient, defined inside the icon. */
  fill: var(--icon-color, currentColor);
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.12);
}

/* Instagram uses its official four-stop gradient, declared inside the SVG
   and coloured from the tokens file */
.ig-stop-1 { stop-color: var(--ig-1); }
.ig-stop-2 { stop-color: var(--ig-2); }
.ig-stop-3 { stop-color: var(--ig-3); }
.ig-stop-4 { stop-color: var(--ig-4); }

.menu__tagline {
  margin-top: var(--space-5);
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ==========================================================================
   6. BODY SCROLL LOCK
   While the menu is open the page behind must not scroll. Removing the
   scrollbar would make the page jump sideways, so we pad the gap it leaves.
   --scrollbar-w is measured and set by js/nav.js.
   ========================================================================== */
body.is-locked {
  overflow: hidden;
  padding-right: var(--scrollbar-w, 0px);
}

body.is-locked .nav {
  padding-right: var(--scrollbar-w, 0px);
}