/* ==========================================================================
   Full-screen menu overlay — the panel behind the nav hamburger.

   Layering
   --------
     #stage-bg   z 0   green morph panel
     #scroll-root z 1  pinned deck
     #stage      z 4   phone, floating CTA
     #after-deck z 6   grid + footer
     #site-menu  z 40  THIS FILE — an opaque white sheet over all of it
     #site-nav   z 50  stays on top and stays clickable, so the hamburger can
                       morph into the close X without moving

   Because the sheet is opaque white, the nav has to leave whatever theme the
   scroll engine put it in and take the light look while the menu is open. The
   overrides at the bottom of this file do that with an id in the selector, so
   they beat every body[data-nav-theme] rule in nav.css whatever the engine set.

   Three tiers of content:
     primary   — six large feature tiles, 3 columns wide / 2 columns narrow
     secondary — six plain text links
     tertiary  — small company links plus three social circles

   Motion is CSS transitions only, never keyframes: every value has a closed
   and an open state, so a close halfway through an open reverses cleanly.
   The stagger lives in transition-delay on the OPEN rule only — closing drops
   all delays, so the panel leaves as one piece instead of unravelling.
   ========================================================================== */

.site-menu {
  /* ---- geometry ---------------------------------------------------------- */

  /* first safe row under the fixed nav: nav margin + pill height + breathing */
  --menu-top: calc(
    var(--nav-margin) + max(var(--pill-h), 40px) + clamp(16px, 3.2vh, 46px)
  );
  --menu-gap: clamp(10px, 0.94vw, 18px);
  /* two rows of tiles plus the two text tiers have to clear a 720px-tall
     reference viewport, which caps the tile height at roughly a quarter of it */
  --menu-card-h: clamp(132px, 23vh, 250px);
  --menu-card-radius: clamp(18px, 1.9vw, 30px);
  --menu-block-gap: clamp(26px, 4.2vh, 64px);

  /* ---- motion ------------------------------------------------------------ */
  --menu-in: 420ms;
  --menu-out: 260ms;
  --menu-lead: 80ms;    /* delay before the first tile moves */
  --menu-step: 38ms;    /* per-tile stagger, multiplied by --i */

  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--white);
  color: var(--black);

  /* closed: invisible, unclickable, and out of the tab order. `visibility`
     switches only after the fade has finished, hence the transition delay. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--menu-out) var(--ease-out),
    visibility 0s linear var(--menu-out);
}

body.menu-open .site-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--menu-in) var(--ease-out),
    visibility 0s;
}

/* Scroll lock. On the home page the engine owns scrolling and menu.js already
   hides wheel and touch from it, but the subpages are ordinary scrolling
   documents: there the reader's wheel would run the page along behind the
   sheet. `overscroll-behavior` on .menu-scroll does not cover it, because a
   sheet that fits the viewport is not a scroll container and has nothing to
   contain. Locking the body does, and the position is only frozen, never
   moved, so closing the sheet puts the reader back exactly where they were.

   `html` in the selector is what makes this win: the page sheets load after
   this one and each sets its own `body { overflow: visible }` to undo
   base.css. Two class-level selectors beat one, so no !important is needed. */
html body.menu-open { overflow: hidden; }

/* The nav is fixed on top of the sheet, so on a short viewport the tiles slide
   under the logo and the pills. This scrim fades them out first. It is only a
   veil: pointer-events stay off so the sheet still scrolls under it. */
.site-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-margin) + max(var(--pill-h), 40px) + 10px);
  background: linear-gradient(
    to bottom,
    var(--white) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* The sheet scrolls on its own when the three tiers do not fit — a short
   laptop or a handset in landscape. `contain` keeps the gesture off the page
   underneath, which is doubly safe: menu.js already hides wheel and touch from
   the scroll engine while the menu is open. */
.menu-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-inner {
  max-width: 2000px;
  margin: 0 auto;
  padding:
    var(--menu-top)
    var(--nav-margin)
    clamp(24px, 5vh, 72px);
  display: flex;
  flex-direction: column;
  gap: var(--menu-block-gap);

  transform: translateY(-14px);
  transition: transform var(--menu-out) var(--ease-out);
}
body.menu-open .menu-inner {
  transform: none;
  transition: transform var(--menu-in) var(--ease-out);
}

/* --------------------------------------------------------------------------
   shared entrance — one class for everything that staggers in
   -------------------------------------------------------------------------- */

.menu-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--menu-out) var(--ease-out),
    transform var(--menu-out) var(--ease-out);
  transition-delay: 0s;               /* leaving: everything at once */
}
body.menu-open .menu-item {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--menu-in) var(--ease-out),
    transform var(--menu-in) var(--ease-out);
  transition-delay: calc(var(--menu-lead) + var(--i, 0) * var(--menu-step));
}

/* --------------------------------------------------------------------------
   tier 1 — six feature tiles
   -------------------------------------------------------------------------- */

.menu-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--menu-gap);
}

/* The tile is a floor, not a fixed height: a label that wraps to one more line
   than expected grows its row instead of spilling out of the colour field. The
   flex wrapper is what keeps the rest of that row the same height. */
.menu-cards .menu-item { display: flex; }

.menu-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(10px, 1.2vw, 20px);
  min-height: var(--menu-card-h);
  padding: clamp(14px, 1.35vw, 26px);
  border-radius: var(--menu-card-radius);
  background: var(--menu-tile, var(--offwhite));
  color: var(--black);
  transition:
    transform 320ms var(--ease-out),
    filter 320ms var(--ease-out);
}
.menu-card:hover {
  transform: translateY(-3px);
  filter: brightness(0.97);
}
.menu-card:active { transform: translateY(-1px); }

/* tile tints — soft field, deeper ink for the motif drawn on it */
.menu-card[data-tone="mint"]   { --menu-tile: #D7F0DA; --menu-ink: #0A7C24; }
.menu-card[data-tone="lilac"]  { --menu-tile: #E4DFF7; --menu-ink: #5341B5; }
.menu-card[data-tone="sky"]    { --menu-tile: #D9E8F8; --menu-ink: #1D5FA6; }
.menu-card[data-tone="butter"] { --menu-tile: #F6EECB; --menu-ink: #8A6B0C; }
.menu-card[data-tone="sand"]   { --menu-tile: #EAE6DE; --menu-ink: #5F574A; }
.menu-card[data-tone="blush"]  { --menu-tile: #F8E0E3; --menu-ink: #B23E55; }

/* motif — hand-drawn geometry, top right of the tile */
.menu-card-art {
  align-self: flex-end;
  width: clamp(42px, 5vw, 80px);
  height: clamp(42px, 5vw, 80px);
  display: block;
  flex: none;
  color: var(--menu-ink, var(--black));
  transition: transform 380ms var(--ease-out);
}
.menu-card:hover .menu-card-art { transform: scale(1.07) rotate(-3deg); }

/* the knob sits on the track and hides the line behind it */
.menu-art-knob { fill: var(--menu-tile, var(--white)); }
.menu-art-ghost { opacity: 0.28; }

.menu-card-label {
  font-size: clamp(15px, 1.5vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   tier 2 — six text links
   -------------------------------------------------------------------------- */

.menu-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vh, 26px) var(--menu-gap);
}

.menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(15px, 1.32vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  transition: opacity 260ms var(--ease-out);
}
.menu-link:hover { opacity: 0.55; }

.menu-link-arrow {
  font-size: 0.86em;
  transform: translateX(-2px);
  opacity: 0;
  transition:
    transform 300ms var(--ease-out),
    opacity 300ms var(--ease-out);
}
.menu-link:hover .menu-link-arrow,
.menu-link:focus-visible .menu-link-arrow {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   tier 3 — company links left, social circles right
   -------------------------------------------------------------------------- */

.menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(16px, 2.4vh, 34px);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.menu-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.7vw, 34px);
}

.menu-meta-link {
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.2;
  color: var(--black);
  transition: opacity 260ms var(--ease-out);
}
.menu-meta-link:hover { opacity: 0.55; }

.menu-social {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 12px);
}

/* Same glyph language as the footer circles, inverted for the white sheet. */
.menu-social-circle {
  display: grid;
  place-items: center;
  width: clamp(36px, 3.1vw, 50px);
  height: clamp(36px, 3.1vw, 50px);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--black);
  transition:
    background-color 320ms var(--ease-out),
    color 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.menu-social-circle:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}
.menu-social-ico {
  width: 45%;
  height: 45%;
  display: block;
}

/* --------------------------------------------------------------------------
   focus
   -------------------------------------------------------------------------- */

.site-menu a:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
}
.menu-card:focus-visible { outline-offset: 4px; }

/* --------------------------------------------------------------------------
   nav while the menu is open

   The sheet is white whatever section the reader was on, so the nav has to
   drop the hero and dark themes and take the light look. An id in the
   selector outranks every body[data-nav-theme] rule in nav.css.
   -------------------------------------------------------------------------- */

body.menu-open #site-nav .nav-logo {
  background: var(--green);
  color: var(--white);
}
body.menu-open #site-nav .pill-signup {
  background: var(--green);
  color: var(--black);
}
body.menu-open #site-nav .pill-login {
  background: var(--black);
  color: var(--white);
  border-color: transparent;
}
body.menu-open #site-nav a:focus-visible,
body.menu-open #site-nav button:focus-visible {
  outline-color: var(--black);
}

/* hamburger -> X.
   The two bars are 2px tall with a 5px gap, so their centres are 7px apart:
   each one travels 3.5px inward and then rotates onto the diagonal. */
body.menu-open .nav-burger span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
body.menu-open .nav-burger span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
body.menu-open .nav-burger:hover span:first-child {
  transform: translateY(3.5px) rotate(45deg) scaleX(1.06);
}
body.menu-open .nav-burger:hover span:last-child {
  transform: translateY(-3.5px) rotate(-45deg) scaleX(1.06);
}

/* --------------------------------------------------------------------------
   narrow — two tile columns, two link columns, stacked bottom row
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .site-menu {
    --menu-gap: 10px;
    --menu-block-gap: 26px;
  }
  /* square tiles read better than a fixed height once they get this narrow */
  .menu-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .menu-card-label { font-size: 15px; }
  .menu-link { font-size: 16px; }
  .menu-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .menu-meta { gap: 12px 20px; }
}

/* --------------------------------------------------------------------------
   touch — 44px hit boxes for the two text tiers and the social circles

   Tier 2 and tier 3 are single lines of 12–16px type, so their hit boxes are
   only 19px and 14px tall, and the shortest company label ("Help") is 25px
   wide. Each label grows to 44px, and the gap around it gives back what the
   label just took, so the reader still sees the spacing the sheet was drawn
   with and the boxes meet edge to edge instead of leaving dead strips:

     tier 2  padding-block 13px, row-gap 12.18px -> 0   (26px between lines,
             which is where the row-gap clamp tops out on a tall viewport)
     tier 3  min-height 44px + 10px of inline padding, gap 12px 20px -> 0
             (still 20px between labels, the figure the ≤560 rule sets)

   The company row then pulls itself back out by the 10px of padding it just
   added, so every label stays on the exact x it had and the row still starts
   on the left edge the tiers above it use. The 10px lands inside .menu-inner's
   own padding, so nothing overflows.

   This block sits AFTER the width blocks on purpose: it shares selectors with
   them at the same specificity, so it has to be last to win.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .menu-links { row-gap: 0; }
  .menu-link { padding-block: 13px; }

  .menu-meta {
    gap: 0;
    margin-inline: -10px;
  }
  .menu-meta-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 10px;
  }

  .menu-social-circle {
    width: 44px;
    height: 44px;
  }
}

/* very short viewports: let the sheet scroll instead of squeezing the tiles */
@media (max-height: 560px) and (min-width: 561px) {
  .site-menu { --menu-card-h: 128px; }
}

/* --------------------------------------------------------------------------
   reduced motion — open and close instantly, no stagger, no hover travel

   Each selector below mirrors one above at the same specificity, so source
   order alone decides. No !important needed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .menu-inner,
  .menu-item,
  .menu-card,
  .menu-card-art,
  .menu-link,
  .menu-link-arrow,
  .menu-meta-link,
  .menu-social-circle {
    transition: none;
  }
  body.menu-open .site-menu { transition: none; }
  body.menu-open .menu-inner { transition: none; }
  body.menu-open .menu-item {
    transition: none;
    transition-delay: 0s;
  }

  .menu-card:hover,
  .menu-card:active,
  .menu-social-circle:hover {
    transform: none;
  }
  .menu-card:hover .menu-card-art { transform: none; }
  .menu-link-arrow { opacity: 1; transform: none; }
}