/* =====================================================================
   StefMag — fullscreen overlay menu (aizrn-finish, themed to StefMag)
   The nav gains one word ("Menu"); it opens a full-screen dark panel of
   oversized numbered section links that stagger in. Clip-path curtain,
   ESC/link-click/toggle close, scroll lock, aria managed (js/menu.js).
   Panel z-index 240: above the ribbon (60) + consent (200), below the
   loading screen (300). While open, html.menu-open lifts the nav to 241
   and forces its over-dark color scheme so the wordmark/toggle/lang sit
   legibly on the panel.
   ===================================================================== */

/* Toggle: progressive enhancement — hidden without JS (panel needs JS) */
.menu-toggle { display: none; }
.js .menu-toggle {
  /* 44px min tap target, matching .lang__btn beside it. The old padding of
     4px 2px on a 0.78rem label gave roughly 23px of height, under WCAG 2.2
     SC 2.5.8's 24px floor. inline-flex + centring keeps the label where it was. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-dim);
  transition: color .3s var(--ease);
}
.menu-toggle:hover { color: var(--on-dark); }
.nav.is-solid .menu-toggle { color: var(--ink-dim); }
.nav.is-solid .menu-toggle:hover { color: var(--ink); }

/* Panel: closed = clipped away from the top */
.menu {
  position: fixed; inset: 0; z-index: 240;
  background: #0b0b0d;
  color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--topbar-h) + 70px + clamp(1.2rem, 4vh, 3rem)) var(--gutter) clamp(1.4rem, 5vh, 3rem);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s .7s;
}
.menu.is-open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path .7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0s;
}

/* Links: oversized heavy display type + small gold spec index */
.menu__links { display: flex; flex-direction: column; gap: 0.12em; }
.menu__links a {
  display: flex; align-items: baseline; gap: clamp(0.8rem, 2.5vw, 1.6rem);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
  opacity: 0; transform: translateY(0.6em);
  transition: opacity .5s ease, transform .6s var(--ease), color .3s var(--ease);
}
.menu.is-open .menu__links a { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .15s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .22s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .29s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .36s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .43s; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: .50s; }
.menu__links a:hover { color: var(--gold-bright); }
.menu__links a:focus-visible { outline-color: var(--gold); }

.menu__num {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  color: var(--gold); font-feature-settings: "tnum" 1;
  flex: 0 0 auto;
}

/* Foot: the real channels, spec-sheet register */
.menu__foot {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-dark-dim);
}
.menu__foot a { color: inherit; transition: color .3s var(--ease); }
.menu__foot a:hover { color: var(--gold-bright); }

/* While open: lift the nav above the panel + force its over-dark scheme */
html.menu-open .nav {
  z-index: 241;
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.menu-open .nav::before { opacity: 0; }
html.menu-open .nav .nav__brand { color: var(--on-dark); }
html.menu-open .nav .nav__brand b { color: var(--gold); }
html.menu-open .nav .menu-toggle { color: var(--on-dark); }
html.menu-open .nav .lang__btn { color: var(--on-dark-dim); }
html.menu-open .nav .lang__btn[aria-pressed="true"],
html.menu-open .nav .lang__btn:hover { color: var(--on-dark); }
html.menu-open .nav .lang__sep { color: var(--on-dark-dim); }

/* Scroll lock while open (class set by js/menu.js) */
html.menu-open, html.menu-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu { clip-path: none; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
  .menu.is-open { opacity: 1; transition: opacity .2s ease, visibility 0s 0s; }
  .menu__links a { transition: none; opacity: 1; transform: none; }
}