/* ============================================================
   MENU — menu.css
   The full-screen overlay menu and its trigger.

   Shared by the public site and the admin panel: both load this
   plus tokens.css and brand.css, so the two have the same way in
   and out even though everything else about them differs.
   ============================================================ */

/* ── The bar ────────────────────────────────────────────────
   Wordmark centred, trigger right, fixed to the top of every page.

   The translucent-and-blurred treatment only works if there's a tint
   over the blur: pure transparency lets bright imagery through and the
   wordmark stops being legible over a hero. --bar-h is published so
   pages can reserve the space they've lost to it. */
:root { --bar-h: 5.5rem; }

.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bar-h);
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);

  background: rgba(14, 9, 7, .55);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  /* A hairline rather than a hard edge — it should read as a pane of
     glass sitting on the page, not a header bolted to it. */
  border-bottom: 1px solid rgba(244, 238, 230, .08);
}

/* Without backdrop-filter there's no blur to hide behind, so the tint
   has to carry the legibility on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-bar { background: rgba(14, 9, 7, .92); }
}

/* Content starts below the bar rather than under it. */
body { padding-top: var(--bar-h); }

/* The wordmark carried the page's top spacing when it sat in the flow;
   inside the bar it's just a centred mark. */
.site-bar .wordmark { position: static; padding: 0; z-index: auto; }

/* ── Trigger ────────────────────────────────────────────────
   Pinned to the bar's right edge, vertically centred against the
   wordmark rather than the viewport. */
.menu-trigger {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 3vw, 2.5rem);
  transform: translateY(-50%);

  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem;
  border: none;
  background: none;
  cursor: pointer;

  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: var(--font-weight-btn);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--dur-fast) var(--ease);
}
.menu-trigger:hover { color: var(--gold-hover); }
.menu-trigger svg { display: block; width: 26px; height: 14px; }

@media (max-width: 600px) {
  /* The word is the affordance; on a narrow screen the icon alone
     next to a centred wordmark is ambiguous, so keep both and just
     tighten up. */
  .menu-trigger { gap: .5rem; font-size: var(--text-caps); }
  .menu-trigger svg { width: 20px; height: 12px; }
}

/* ── Overlay ────────────────────────────────────────────────*/
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #000;

  /* Parked above the viewport: it slides down into place, and leaves
     the same way — out through the top. */
  transform: translateY(-100%);
  /* visibility, not display, so the transform has something to animate.
     The delay holds it visible until the slide-out finishes. */
  visibility: hidden;
  transition:
    transform var(--dur-slow) cubic-bezier(.66, 0, .21, 1),
    visibility 0s linear var(--dur-slow);
}

.menu-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--dur-slow) cubic-bezier(.66, 0, .21, 1),
    visibility 0s linear 0s;
}

body.menu-is-open { overflow: hidden; }

/* ── Overlay header ─────────────────────────────────────────*/
.menu-head {
  position: relative;
  flex: 0 0 auto;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
/* The wordmark centres itself; the close button sits over the corner
   so the mark stays optically centred in the viewport, not in the
   space left beside the button. */
.menu-head .wordmark { position: static; }

.menu-close {
  position: absolute;
  top: clamp(1.1rem, 2.6vw, 1.9rem);
  right: clamp(1.25rem, 3vw, 2.5rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 6vw, 62px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gold);
  background: none;
  color: var(--gold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-close:hover { background: var(--gold); color: #000; }
.menu-close svg { width: 45%; height: 45%; }

/* ── Menu items ─────────────────────────────────────────────*/
.menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.4rem, 1.2vw, .9rem);
  padding: 0 var(--pad) clamp(3rem, 8vh, 6rem);
  text-align: center;
}

.menu-nav a {
  font-family: var(--font-body);
  font-size: clamp(2.1rem, 6.5vw, 4.25rem);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: var(--font-weight-bold);
  color: var(--cream);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.menu-nav a:hover { color: var(--gold); }

.menu-rule {
  width: clamp(60px, 8vw, 110px);
  height: 1px;
  margin: clamp(1.25rem, 3vh, 2.25rem) 0;
  background: var(--rule);
}

/* Signing out ends the session rather than going somewhere, so at the
   foot of the admin menu it takes a button rather than the navigation
   type. This restates global.css's .btn instead of reusing it: the
   admin panel loads menu.css but not global.css, and the menu has to
   look the same in both. The selector is doubled up because
   .menu-nav a would otherwise out-specify a bare class — including on
   hover, where it would leave gold text on the gold fill. */
.menu-nav a.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 160px;
  margin-top: clamp(1rem, 3vh, 2rem);
  padding: 0 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: var(--text-btn);
  line-height: var(--leading-btn);
  letter-spacing: normal;
  font-weight: var(--font-weight-btn);
  transition:
    background var(--dur-fast) var(--ease),
    color      var(--dur-fast) var(--ease);
}
.menu-nav a.menu-btn:hover { background: var(--gold); color: #fff; }

.menu-who {
  margin-bottom: .35rem;
  font-size: var(--text-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--font-weight-caps);
  color: var(--cream-dim);
}

/* Short viewports — a phone in landscape — can't afford the big type
   and the vertical rhythm at once. */
@media (max-height: 560px) {
  .menu-nav { justify-content: flex-start; padding-top: 1rem; gap: .2rem; }
  .menu-nav a { font-size: clamp(1.5rem, 5vh, 2.2rem); }
  .menu-rule { margin: .9rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay.is-open { transition: visibility 0s; }
}