/* maitre-nav.css — Renzo's "MAÎTRE D'" nav register (house asset).
   Behavior/state attributes are set by maitre-nav.js.
   Visuals use the CONSUMING PAGE'S v1 tokens (with safe fallbacks) — no v2 tokens here:
     --bg-dark  (drawer + return-bar base)   --gold (accents/focus)
     --red      (via the page's .btn-red)     --pad-x (bar gutter)
     --cream #f4ecd8 assumed for on-dark text
   CLASS CONTRACT: .mnav / .mnav-bar / .mnav-wordmark / .mnav-reserve / .mnav-toggle
     .mnav-drawer / .mnav-drawer-links / .mnav-close
   STATES: .mnav[data-state="top|hidden|return"]  ·  .mnav-drawer[data-open="true|false"]
   CONSTANTS (DESIGN LAW · Maître d'): top<80px · delta 6px · return bar 56px. */

.mnav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding-top:env(safe-area-inset-top,0px);   /* respect the notch */
  pointer-events:none;                          /* only the bar itself is interactive */
}
.mnav-bar{
  pointer-events:auto;
  display:flex;align-items:center;gap:1rem;
  height:64px;padding:0 var(--pad-x,1.25rem);
  transition:transform .34s cubic-bezier(.4,0,.2,1), background-color .34s ease, height .34s ease;
}
.mnav-wordmark{display:flex;align-items:center;flex-shrink:0;margin-right:auto}
.mnav-wordmark img{
  height:30px;width:auto;display:block;
  /* thin white stroke so the red wordmark reads on the dark crown */
  filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff) drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff);
}
.mnav-reserve{
  flex-shrink:0;padding:.55rem 1.2rem;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.mnav-toggle{
  flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
}
.mnav-toggle span{display:block;height:2px;width:100%;background:#f4ecd8;border-radius:2px;
  transition:transform .25s ease, opacity .25s ease}

/* ── STATE: top — transparent bar over the hero, no Reserve ── */
.mnav[data-state="top"] .mnav-bar{background:transparent;height:64px}
.mnav[data-state="top"] .mnav-reserve{display:none}

/* ── STATE: hidden — steps back, slides up and away ── */
.mnav[data-state="hidden"] .mnav-bar{transform:translateY(-100%)}

/* ── STATE: return — slim 56px dark-blur bar, Reserve appears ── */
.mnav[data-state="return"] .mnav-bar{
  height:56px;transform:translateY(0);
  background:rgba(13,11,10,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.mnav[data-state="return"] .mnav-reserve{opacity:1;transform:none;pointer-events:auto}

/* ── DRAWER: full-screen overlay on the page's dark tokens ── */
.mnav-drawer{
  position:fixed;inset:0;z-index:1100;
  background:var(--bg-dark,#1C1A17);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 2rem) 1.5rem 2rem;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.mnav-drawer[data-open="true"]{opacity:1;visibility:visible;transition:opacity .3s ease}
.mnav-drawer-links{display:flex;flex-direction:column;align-items:center;gap:clamp(1.25rem,4.5vh,2.4rem);text-align:center}
.mnav-drawer-links a{
  font-size:clamp(1.5rem,6vw,2.35rem);font-weight:300;letter-spacing:.02em;text-transform:uppercase;
  color:var(--cream,#f4ecd8);transition:color .2s ease;
}
.mnav-drawer-links a:hover,.mnav-drawer-links a:focus-visible{color:var(--gold,#C9A84C)}
.mnav-close{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 1rem);right:1.25rem;
  width:44px;height:44px;border:0;background:none;color:var(--cream,#f4ecd8);
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.mnav-close:hover{color:var(--gold,#C9A84C)}

/* ── focus visibility ── */
.mnav-toggle:focus-visible,.mnav-wordmark:focus-visible,
.mnav-drawer a:focus-visible,.mnav-close:focus-visible{outline:2px solid var(--gold,#C9A84C);outline-offset:4px}

/* ── reduced motion: instant show/hide, no transforms ── */
@media(prefers-reduced-motion:reduce){
  .mnav-bar,.mnav-reserve,.mnav-toggle span,.mnav-drawer{transition:none}
}