/* ===========================================================================
   nav.css: the fixed top bar and the full-screen overlay menu.
   Built by shared/js/nav.js. Imported by base.css, so a page never links it.

   The bar has no background. Everything in it is drawn in currentColor, so the
   single .on-light class that nav.js toggles flips the whole thing from cream
   to ink in one move.
   =========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);

  padding: var(--s-2) var(--gutter);
  color: var(--cream);

  /* The accent is the underline on the active voice and any other highlight
     inside the bar. Gold over the dark world, green over paper. */
  --nav-accent: var(--gold);

  /* The bar is a wide invisible strip across the top of the film. Let clicks
     fall through it, and switch pointer events back on for the controls. */
  pointer-events: none;

  transition: color var(--t-med) var(--ease-smoke);
}

.nav.on-light {
  color: var(--ink);
  --nav-accent: var(--green);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
}

/* The wordmark, which is also the link home. Design system: Fraunces 600,
   1.25rem, line-height 0.85. No underline: it is the name of the shop, and the
   bar has no background for an underline to sit against. */
.nav__mark {
  pointer-events: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: var(--fraunces-soft);
  font-size: 1.25rem;
  line-height: 0.85;
  letter-spacing: var(--track-display);
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

/* --- the voice switch ----------------------------------------------------- */

.nav__voice {
  display: flex;
  align-items: center;
}

.nav__voicebtn {
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 0.5rem;

  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;

  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;

  position: relative;
}

/* The active voice is marked with a rule in the accent colour. Both buttons
   stay at full contrast: the underline carries the state, not a dimming. */
.nav__voicebtn.is-active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.6rem;
  height: 2px;
  background: var(--nav-accent);
}

/* --- the call pill and the menu button ------------------------------------ */

.nav__call {
  pointer-events: auto;
  padding: 0.625rem 1.125rem;
}

.nav__menubtn {
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 0.5rem;

  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;

  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* On a narrow phone the Call pill and the Menu button together are too much.
   The pill wins, because calling ahead is the thing the shop wants. */
@media (max-width: 460px) {
  .nav {
    padding: var(--s-1) var(--gutter);
  }

  .nav__mark {
    font-size: 1.0625rem;
  }

  .nav__voicebtn,
  .nav__menubtn {
    padding: 0.75rem 0.375rem;
  }

  .nav__call {
    padding: 0.5rem 0.875rem;
  }
}

/* ---------------------------------------------------------------------------
   The overlay menu.
   --------------------------------------------------------------------------- */

/* The page behind an open dialog must not scroll. */
.pde-lock,
.pde-lock body {
  overflow: hidden;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  display: flex;
  align-items: center;

  background: var(--char);
  color: var(--cream);

  opacity: 0;
  transition: opacity var(--t-med) var(--ease-smoke);
}

.nav-overlay.is-open {
  opacity: 1;
}

.nav-overlay[hidden] {
  display: none;
}

.nav-overlay__inner {
  width: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  padding: calc(var(--s-7) + 2rem) var(--gutter) var(--s-6);
}

.nav-overlay__close {
  position: absolute;
  top: var(--s-2);
  right: var(--gutter);

  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 0.5rem;

  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;

  font-family: var(--font-sign);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.nav-overlay__link {
  display: block;
  width: max-content;
  max-width: 100%;

  /* Six links, not the four the first draft had, so the size is capped
     against the viewport HEIGHT as well as its width: at --fs-d1's full 8rem
     six lines would run off the bottom of a laptop screen. min() picks
     whichever is smaller, so a phone still gets the 2.75rem floor from
     --fs-d1 and a tall desktop gets a headline that fits six times over. */
  font-size: min(var(--fs-d1), 9.5vh);

  text-decoration: none;
  color: inherit;

  /* The links slide in from the left edge as the dialog opens. */
  opacity: 0;
  transform: translateX(-0.35em);
  transition: opacity var(--t-slow) var(--ease-smoke),
    transform var(--t-slow) var(--ease-smoke), color var(--t-fast) linear;
}

.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger the six links so they arrive one after another, like smoke. */
.nav-overlay.is-open .nav-overlay__link:nth-child(1) {
  transition-delay: 40ms;
}
.nav-overlay.is-open .nav-overlay__link:nth-child(2) {
  transition-delay: 100ms;
}
.nav-overlay.is-open .nav-overlay__link:nth-child(3) {
  transition-delay: 160ms;
}
.nav-overlay.is-open .nav-overlay__link:nth-child(4) {
  transition-delay: 220ms;
}
.nav-overlay.is-open .nav-overlay__link:nth-child(5) {
  transition-delay: 280ms;
}
.nav-overlay.is-open .nav-overlay__link:nth-child(6) {
  transition-delay: 340ms;
}

.nav-overlay__link:hover,
.nav-overlay__link:focus-visible {
  color: var(--gold);
}

/* You are here. The overlay is always the dark world, so the accent is gold at
   12.4:1 on char. The underline carries the state as well as the colour, so it
   is never colour alone that says which page you are on. */
.nav-overlay__link[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay__link {
    opacity: 1;
    transform: none;
  }
}