/* ==========================================================================
   Site menu overlay — full-page menu (desktop) + full-screen mobile menu
   Markup: src/overlays/menu.html · behaviour: js/menu.js · every rule is scoped to .menu.

   Figma "Full page menu" 4148:398 (1920×1154): numbers 01–04 (36px) at x=60 and the
   items (80px Blauer Nue Medium, uppercase, line 0.95, 106px pitch) at x=145 from y=195;
   the active item green, the rest white at 30%; right column at x=970, 885 wide: 36px
   rows on an ~89px pitch with 30%-white 1px rules; "Book a discovery call" pill at
   (60, 997), 315×47, 2px green stroke, 20px text, 27px logomark.
   Figma "Mobile Menu" 4148:2797 / 4148:2808 (375×812): black, 36px/1.34 items at x=37,
   the block vertically centred; tapping SERVICES turns it green and expands its
   20px/1.37 list beneath it, the other items drop to 30% white.

   The mock's 60px gutters are its own chrome: content sits on the site gutter
   (--gutter, 100px at 1920) and the right column on the page's .grid-2 column
   (x=971, 849 wide), so the menu lines up with the header (logo x=102, pill → 1820).
   Vertical values are the mock's at 1154px tall and shrink with the viewport height
   (vh clamps) so the 11 rows fit on laptop screens; the panel scrolls if they still
   cannot. Colours: #111 desktop / #000 mobile straight from the frames.
   ========================================================================== */

.menu {
  --menu-bg: #111111;
  --menu-dim: rgba(255, 255, 255, .3);       /* inactive items, numbers, rules (Figma: white @ 30%) */
  --menu-top: clamp(150px, 16.9vh, 195px);   /* y of the first item / first row text (195 @ 1154) */
  --menu-item-size: min(clamp(56px, 6.93vh, 80px), 5.2vw);     /* 80px @ 1154 tall */
  --menu-num-size: min(clamp(24px, 3.12vh, 36px), 2.3vw);       /* 36px */
  --menu-sub-size: min(clamp(24px, 3.12vh, 36px), 2.3vw);       /* 36px; row pitch = .8em + .95em + .69em + 1px = 89px */
  --menu-num-col: clamp(56px, 4.43vw, 85px);                     /* items start 85px right of the numbers */
  --menu-bottom: clamp(40px, 9.53vh, 110px);                     /* pill bottom edge: 1154 - 1044 */
  --menu-ease: cubic-bezier(.22, .61, .36, 1);

  position: fixed;
  inset: 0;
  z-index: 95;                 /* under the fixed header (100), over the side tab (90) */
  background: var(--menu-bg);
  color: var(--fg);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* The scroll container: the whole overlay scrolls when the lists are taller than
   the screen; overscroll-behavior keeps the (paused) page from moving behind it. */
.menu__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- Close (desktop): "Close ×" in the gap between the header and the lists,
   right-aligned to the rules / the header pill (x=1820) ------------------------- */
.menu__close {
  position: absolute;
  top: max(calc(var(--nav-h) + 8px), calc(var(--menu-top) - 52px));   /* never under the header on short screens */
  right: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  transition: color .25s ease;
}
.menu__close:hover,
.menu__close:focus-visible { color: var(--accent); }
.menu__close-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.menu__close-icon span {
  position: absolute;
  left: -1px;
  top: 7px;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu__close-icon span:nth-child(2) { transform: rotate(-45deg); }

/* ---- Desktop layout ----------------------------------------------------------
   .menu__inner is the page grid (860fr | 11px | 849fr) inside the site gutters and the
   containing block for the absolutely placed service lists (right column). */
.menu__inner {
  position: relative;
  display: grid;
  grid-template-columns: 860fr 849fr;
  column-gap: var(--col-gap);
  flex: 1 0 auto;
  min-height: 100%;
  padding-top: var(--menu-top);
  padding-bottom: var(--menu-bottom);
}
.menu__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--menu-item-size) * .375);   /* 30px between the 76px line boxes = 106px pitch */
}
.menu__item {
  display: flex;
  align-items: flex-start;
}
.menu__num {
  flex: 0 0 var(--menu-num-col);
  margin-top: calc(var(--menu-item-size) * .0625);   /* 01 sits 5px below the item's top (y=200 vs 195) */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--menu-num-size);
  line-height: .95;
  color: var(--menu-dim);
  transition: color .25s ease;
}
.menu__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--menu-item-size);
  line-height: .95;
  text-transform: uppercase;
  color: var(--menu-dim);
  transition: color .25s ease;
}
.menu__item.is-active .menu__num,
.menu__item.is-active .menu__link { color: var(--accent); }
.menu__link:focus-visible { outline-offset: 6px; }

/* Right column: the active item's list, positioned on the page's right grid column.
   Its top is the first row's text at --menu-top minus that row's top padding. */
.menu__sub-wrap {
  position: absolute;
  top: calc(var(--menu-top) - var(--menu-sub-size) * .8);
  right: var(--gutter);
  width: calc((100% - 2 * var(--gutter) - var(--col-gap)) * .4968);   /* 849 / 1709 of the content width */
  /* Services is the only sub-list, so it stays on screen the whole time the menu is open —
     full strength while Services is active, dimmed when the pointer is on Work/About/Contact. */
  visibility: visible;
  opacity: .32;
  transition: opacity .25s ease;
}
.menu__item.is-active .menu__sub-wrap {
  opacity: 1;
}
.menu__sub-item {
  border-bottom: 1px solid var(--menu-dim);
}
.menu__sub-link {
  display: block;
  padding: calc(var(--menu-sub-size) * .8) 0 calc(var(--menu-sub-size) * .69);   /* 29 / 25 at 36px */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--menu-sub-size);
  line-height: .95;
  text-transform: capitalize;
  color: var(--fg);
  transition: color .25s ease, transform .35s var(--menu-ease);
}
/* Spotlight (Figma: the hovered row white, the rest 30%): the list dims as a whole
   while the pointer or keyboard focus is inside it and the current row stays white. */
@media (hover: hover) and (pointer: fine) {
  .menu__sub:hover .menu__sub-link { color: var(--menu-dim); }
  .menu__sub .menu__sub-item:hover .menu__sub-link { color: var(--fg); }
}
.menu__sub:focus-within .menu__sub-link { color: var(--menu-dim); }
.menu__sub .menu__sub-link:focus-visible { color: var(--fg); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .menu__sub .menu__sub-item:hover .menu__sub-link,
  .menu__sub .menu__sub-link:focus-visible { transform: translateX(10px); }
}

/* ---- "Book a discovery call" pill (Figma Group 71: 315×47, 2px stroke, 20px text,
   27px green logomark between the words) — bottom-left, pushed down by the column */
.menu__list { margin-bottom: 40px; }   /* the pill never touches CONTACT on short screens */
.menu .menu__book {
  align-self: flex-start;
  margin-top: auto;
  height: 47px;
  min-width: 315px;
  padding: 0 21px;
  gap: 8px;
  font-size: 20px;
  line-height: .98;
  text-transform: none;                              /* the data's casing: "Book a Discovery Call", like the hero / CTA pills (#23) */
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: menu-pulse 2.6s ease-in-out infinite;   /* outlined buttons pulse subtly (client note) */
}
.menu .menu__book img { width: 27px; height: 27px; }
.menu .menu__book:hover,
.menu .menu__book:focus-visible { animation: none; }   /* base.css: green fill + black text + black logomark */
@keyframes menu-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 rgba(99, 249, 162, .35); }
  50%      { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 7px rgba(99, 249, 162, 0); }
}

/* ---- Mobile / tablet (≤1024): full-screen black list, block centred ----------- */
@media (max-width: 1024px) {
  .menu { --menu-bg: #000000; }
  .menu__close,
  .menu__num,
  .menu .menu__book { display: none; }

  .menu__panel { padding: var(--nav-h) 0; }   /* symmetric, so the block centres on the viewport as in the mock */
  .menu__inner {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    margin: auto 0;                            /* centred when short, scrolls from the top when tall */
    padding: 0 var(--gutter) 0 calc(var(--gutter) + 17px);   /* Figma x=37 = 20px gutter + 17 */
  }
  .menu__col { display: block; }
  .menu__list { display: block; margin-bottom: 0; }
  .menu__item { display: block; }
  .menu__link {
    display: inline-block;
    font-size: 44px;
    line-height: 1.34;
    color: var(--fg);
  }
  /* Services expanded: it turns green and the rest drop to 30% (Figma 4148:2808) */
  .menu__item.is-expanded .menu__link { color: var(--accent); }
  .menu__list.has-expanded .menu__item:not(.is-expanded) .menu__link { color: var(--menu-dim); }

  /* Inline disclosure: grid-rows 0fr → 1fr so the list unfolds under its item */
  .menu__sub-wrap {
    position: static;
    width: auto;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: hidden;
    transition: grid-template-rows .45s var(--menu-ease), visibility 0s linear .45s;
  }
  .menu__item.is-expanded .menu__sub-wrap {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .45s var(--menu-ease), visibility 0s linear 0s;
  }
  .menu__sub {
    min-height: 0;
    overflow: hidden;
  }
  .menu__sub::before { content: ""; display: block; height: 5px; }    /* SERVICES box ends 215, list starts 220 */
  .menu__sub::after  { content: ""; display: block; height: 10px; }   /* list ends 490, WORK starts 500 */
  .menu__sub-item { border-bottom: 0; }
  .menu__sub-link {
    padding: 0;
    font-size: 24px;
    line-height: 1.37;
    color: var(--fg);
    transform: none;
  }
  .menu__sub:hover .menu__sub-link,
  .menu__sub:focus-within .menu__sub-link { color: var(--fg); }
  .menu__sub-link:active { color: var(--accent); }
}
@media (max-width: 640px) {
  .menu__link { font-size: 36px; }      /* Figma Mobile Menu: 36px / 1.34 */
  .menu__sub-link { font-size: 20px; }  /* 20px / 1.37 */
}

/* ---- Reduced motion: instant states, no transforms ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .menu .menu__book { animation: none; }
  .menu__sub-link { transform: none !important; }
}