/* Nav card mega
   A floating white nav card (inset from the window edges) whose "Menu" pill grows THE SAME CARD downward into a
   mega panel: four labelled link columns + a preview tile. The panel's content is already laid out in its final
   place and the card's growing bottom edge uncovers it (overflow clip, no slide, no fade); a dark veil fades over
   the page at the same time and the chevron turns over. Leaving the card closes it the same way.
   Rewritten from the Forerunner nav (~/Dev/forerunner-recreate/PARTS.md "Mega menu (desktop)"). Needs part.js for
   the height (auto heights can't be transitioned), the hover/keyboard wiring and html.is-menu-open. */
.ncm {
  --ncm-top: 16px;                    /* distance from the window top */
  --ncm-inset: 32px;                  /* distance from the left and right edges */
  --ncm-radius: 16px;
  --ncm-card: #fff;
  --ncm-shadow: 0 8px 24px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.08);
  --ncm-pad: 12px 16px 12px 24px;     /* card padding: the bar is 40px tall, so the closed card is 64px */
  --ncm-ink: #181e25;
  --ncm-accent: #d6fd70;              /* the one call-to-action colour */
  --ncm-pill-open: rgba(24, 30, 37, 0.08);   /* the Menu pill's fill while open */
  --ncm-veil-from: rgba(24, 30, 37, 0.16);   /* the veil's colour at rest (invisible: opacity 0) ... */
  --ncm-veil: rgba(24, 30, 37, 0.64);        /* ... and open; colour and opacity move together, as in the source */
  --ncm-dur: 1s;
  /* Framer spring duration 1 s / bounce .1 as linear() (spring-to-linear bake): 54% at 200 ms, 77% at 300 ms,
     90% at 400 ms, a 0.15% overshoot peaking at 850 ms (half a pixel on a 337px grow), lands at exactly 1 s */
  --ncm-spring: linear(0, 0.0034, 0.013, 0.0278, 0.047, 0.0698, 0.0956, 0.1238, 0.1538, 0.1852, 0.2176, 0.2506, 0.284, 0.3174, 0.3506, 0.3835, 0.4158, 0.4474, 0.4782, 0.5082, 0.5372, 0.5651, 0.592, 0.6178, 0.6426, 0.6662, 0.6886, 0.71, 0.7303, 0.7495, 0.7677, 0.7848, 0.8009, 0.8161, 0.8304, 0.8438, 0.8563, 0.868, 0.8789, 0.8891, 0.8986, 0.9074, 0.9156, 0.9232, 0.9302, 0.9367, 0.9427, 0.9482, 0.9533, 0.958, 0.9623, 0.9663, 0.9699, 0.9732, 0.9762, 0.9789, 0.9814, 0.9837, 0.9858, 0.9876, 0.9893, 0.9908, 0.9922, 0.9934, 0.9945, 0.9954, 0.9963, 0.9971, 0.9978, 0.9983, 0.9989, 0.9993, 0.9997, 1.0001, 1.0004, 1.0006, 1.0008, 1.001, 1.0011, 1.0013, 1.0013, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1.0014, 1.0013, 1.0013, 1.0012, 1.0012, 1.0011, 1.0011, 1.001, 1.001, 1);
  position: fixed; z-index: 50; top: var(--ncm-top); left: var(--ncm-inset); right: var(--ncm-inset);
  color: var(--ncm-ink);
}
@supports not (transition-timing-function: linear(0, 1)) { .ncm { --ncm-spring: cubic-bezier(0.22, 1, 0.36, 1); } }

/* the veil over the page: under the card, catches the pointer only while open (pointing at it = leaving the card) */
.ncm__veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--ncm-veil-from); opacity: 0;
  transition: opacity var(--ncm-dur) var(--ncm-spring), background-color var(--ncm-dur) var(--ncm-spring);
}
.ncm.is-open .ncm__veil { opacity: 1; background: var(--ncm-veil); pointer-events: auto; }

/* the card: its height is set in px by part.js (closed = padding + bar, open = + panel) and springs between them;
   overflow clip makes the growing bottom edge the reveal */
.ncm__card {
  position: relative; z-index: 1; box-sizing: border-box; overflow: hidden;
  padding: var(--ncm-pad); background: var(--ncm-card); border-radius: var(--ncm-radius); box-shadow: var(--ncm-shadow);
  container-type: inline-size;
  transition: height var(--ncm-dur) var(--ncm-spring);
}
.ncm__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; }
.ncm__logo { justify-self: start; color: inherit; text-decoration: none; }
.ncm__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.ncm__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ncm__link, .ncm__pill, .ncm__cta {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 40px; padding: 8px 16px;
  border: 0; border-radius: 32px; background: transparent; color: inherit; text-decoration: none; white-space: nowrap;
  font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.5px; cursor: pointer;
}
.ncm__pill { transition: background-color var(--ncm-dur) var(--ncm-spring); }
.ncm__chev { width: 16px; height: 16px; flex: none; transition: transform var(--ncm-dur) var(--ncm-spring); }
.ncm.is-open .ncm__pill { background: var(--ncm-pill-open); }
.ncm.is-open .ncm__chev { transform: rotate(180deg); }
.ncm__cta { background: var(--ncm-accent); }
.ncm :is(.ncm__link, .ncm__pill, .ncm__cta, .ncm__panel a):focus-visible { outline: 2px solid var(--ncm-ink); outline-offset: 2px; }

/* the panel sits under the bar in its final layout; while closed it is clipped away and hidden from tab/AT */
.ncm__panel { display: none; }
.ncm.is-ncm-ready .ncm__panel { display: grid; }
.ncm.is-ncm-ready:not(.is-showing) .ncm__panel { visibility: hidden; }
.ncm__panel {
  grid-template-columns: minmax(0, 324fr) minmax(0, 229fr) minmax(0, 230fr) minmax(0, 237fr) minmax(0, 316fr);
  grid-template-areas: "a b c d t";
  padding: 40px 0 32px;                 /* 8px under the bar, then the panel's own 32px */
}
.ncm__col { padding-right: 24px; min-width: 0; }
.ncm__col:nth-of-type(1) { grid-area: a; } .ncm__col:nth-of-type(2) { grid-area: b; }
.ncm__col:nth-of-type(3) { grid-area: c; } .ncm__col:nth-of-type(4) { grid-area: d; }
.ncm__tile { grid-area: t; min-width: 0; }
.ncm__tag {
  display: inline-block; margin: 0 0 24px; padding: 8px 12px; border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(24, 30, 37, 0.16);
  font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.ncm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ncm__list li { display: flex; }
.ncm__list a { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 16px; line-height: 24px; letter-spacing: -0.25px; }
.ncm__list--icons { gap: 24px; }
.ncm__list--icons a { font-weight: 500; }
.ncm__list svg { width: 24px; height: 24px; flex: none; }
.ncm__pic { display: block; aspect-ratio: 316 / 201; border-radius: 8px; overflow: hidden; }
.ncm__cap { margin: 12px 0 4px; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.25px; }
.ncm__all { color: inherit; font-size: 16px; line-height: 24px; text-decoration: underline; text-underline-offset: 2px; }

/* a narrow card (tablets, gallery frames): two columns over two, the tile beside them */
@container (max-width: 900px) {
  .ncm__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "a b t" "c d t"; row-gap: 28px; }
}

/* below data-ncm-min (part.js sets .is-ncm-compact): no pill, no panel; put a phone menu in .ncm__compact */
.ncm__compact { display: none; }
.ncm.is-ncm-compact .ncm__links, .ncm.is-ncm-compact .ncm__panel { display: none; }
.ncm.is-ncm-compact .ncm__compact { display: contents; }

@media (prefers-reduced-motion: reduce) {
  .ncm { --ncm-dur: 0.01s; }
}