/* ─────────────────────────────────────────
   COMPONENT — MOBILE MENU
   Full-screen green overlay menu.
───────────────────────────────────────── */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 40px;
  font-size: var(--text-lead);
  color: var(--cream-50);
  letter-spacing: 0;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-menu-link {
  /* text style: H2 (css/foundations/text-styles.css). The padding keeps the
     menu's original spacing now the H2 line-height is tighter, and gives
     each link a taller tap target. */
  padding-block: 0.4em;
  color: var(--cream-50);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.mobile-menu-link:hover {
  color: var(--cream-300);
}


/* ─────────────────────────────────────────
   MENU OVERLAY — the new pages (home, weekend, travel, story), from Figma
   node 127:1218. Clay screen, cream logo + "close" where the nav sits,
   numbered links set large and left-aligned, the date running up the right
   edge. Opening: the screen fades in (above), then the links rise in one
   after another (24px, 700ms, 60ms apart). index.html keeps the old menu.
───────────────────────────────────────── */

.menu-overlay {
  display: block;
  overflow-y: auto;
}

/* logo + close sit exactly where the nav's logo + "menu" are */
.menu-overlay-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}

.menu-overlay-logo {
  display: inline-block;
  width: 48px;
}

.menu-overlay-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.menu-overlay .mobile-menu-close {
  position: static;
  letter-spacing: 0.08em;   /* same as the nav's "menu" (nav.css) */
}

.menu-overlay .mobile-menu-nav {
  display: block;
  padding: clamp(120px, 22svh, 200px) 70px 64px;
}

.menu-overlay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, 4svh, 52px);
}

.menu-overlay .mobile-menu-link {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 0;
  /* rises in when the menu opens */
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease) calc(120ms + var(--i, 0) * 60ms),
    transform 700ms var(--ease) calc(120ms + var(--i, 0) * 60ms),
    color 200ms var(--ease);
}

.menu-overlay.open .mobile-menu-link {
  opacity: 1;
  transform: none;
}

/* closing: no cascade, everything goes with the screen */
.menu-overlay:not(.open) .mobile-menu-link {
  transition-delay: 0ms;
  transition-duration: 200ms;
}

.menu-overlay-num {
  color: var(--clay-200);
  min-width: 2.4em;
}

.menu-overlay-date {
  position: absolute;
  right: 64px;
  bottom: 64px;
  color: var(--on-inverse-muted);
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);  /* reads bottom to top */
}

@media (prefers-reduced-motion: reduce) {
  .menu-overlay .mobile-menu-link { transform: none; transition: opacity 200ms linear, color 200ms var(--ease); }
}

/* responsive — mobile */
@media (max-width: 640px) {
  .menu-overlay-bar { padding: 16px 20px; }
  .menu-overlay .mobile-menu-nav { padding: 120px 20px 48px; }
  .menu-overlay .mobile-menu-link { gap: 12px; }
  .menu-overlay-date { right: 28px; bottom: 40px; }
}

/* ── hover (desktop): a dashed line draws under the page name and the page's
   sections appear beside it in handwriting, like the "soon" tag. ── */
.menu-overlay-list > li {
  position: relative;
  width: fit-content;
}

.menu-overlay-label { position: relative; }

.menu-overlay .mobile-menu-link:not(.is-soon):hover { color: var(--cream-50); }   /* the line marks the hover, the name stays white */

.menu-overlay-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  border-top: 1.5px dashed var(--on-inverse-muted);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 400ms var(--ease);
}

.menu-overlay-sections {
  position: absolute;
  left: 100%;
  top: 50%;
  margin: 0;
  padding: 0 0 0 28px;          /* the gap is part of the list, so the mouse can cross it */
  list-style: none;
  display: grid;
  gap: 2px;
  white-space: nowrap;
  transform: translateY(-62%) rotate(-4deg);
  transform-origin: left center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
}

.menu-overlay-sections a {
  display: inline-block;
  color: var(--cream-200);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), color 200ms var(--ease);
}

.menu-overlay-sections li:nth-child(2) a { transition-delay: 50ms; }
.menu-overlay-sections li:nth-child(3) a { transition-delay: 100ms; }
.menu-overlay-sections a:hover,
.menu-overlay-sections a:focus-visible { color: var(--cream-50); }

@media (hover: hover) and (min-width: 641px) {
  .menu-overlay-list > li:hover .mobile-menu-link:not(.is-soon) .menu-overlay-label::after,
  .menu-overlay .mobile-menu-link:focus-visible .menu-overlay-label::after { transform: scaleX(1); }

  .menu-overlay-list > li:hover .menu-overlay-sections,
  .menu-overlay-list > li:focus-within .menu-overlay-sections {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms var(--ease), visibility 0s;
  }

  .menu-overlay-list > li:hover .menu-overlay-sections a,
  .menu-overlay-list > li:focus-within .menu-overlay-sections a {
    opacity: 1;
    transform: none;
  }
}

/* phones have no hover: tapping a name just opens the page */
@media (max-width: 640px) {
  .menu-overlay-sections { display: none; }
}