/* ============================================================================
   delEat — the Product mega menu (new file; see tools/build-nav.py's
   concurrency note for why this is not in css/site.css).
   The outer shell (.nav-menu) is already glass — css/site.css gives it the
   blur, the hairline and the tinted shadow, and the Solutions menu keeps
   using it unmodified. Everything below is the NEW inside of the Product
   menu: a left rail of five areas with mono numerals, a two-column list of
   that area's modules, and a feature column with the area's photograph.
   ========================================================================= */

.mm2-in {
  width: 100%; max-width: var(--page-wide); margin-inline: auto;
  padding: var(--s-6) var(--gutter) var(--s-7);
  display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: var(--s-7);
}

/* ---- the Product panel uses the SAME glass as Solutions -------------------
   Both mega menus now read as one material: the shared .nav-menu shell in
   css/site.css (white 86%, blur 34 / saturate 1.9, the same radius, border
   and shadow) is left untouched here, on purpose, so Product and Solutions
   are visually identical panels. A bone-tinted variant used to be scoped to
   .mm2-in to fight hero bleed-through; that read as two different menus and
   is gone -- the shared recipe already holds up over the hero. */
/* site.css already drops the pill's own backdrop-filter while a menu is open
   on :hover/:focus-within -- a nested backdrop-filter would otherwise blur
   the pill's own near-empty paint instead of the real page, which is what
   let the hero headline show through sharp underneath the glass above. The
   headless ?menu=product hook opens the panel via .force-open rather than
   real hover, so it never triggered that fix; this mirrors it for that
   state so the capture matches what a hovering visitor actually sees. */
.nav-in:has(.has-menu.force-open) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
}

/* ---- the rail: five areas, mono numerals, a moving accent bar ----------- */
.mm2-rail { display: grid; gap: 2px; align-content: start; border-right: 1px solid var(--n-200); padding-right: var(--s-5); }
.mm2-rail button {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px 10px 0; color: var(--ink-3); transition: color var(--d-1) var(--snap);
}
.mm2-rail .mm2-n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--n-300); flex: none; transition: color var(--d-1) var(--snap);
}
.mm2-rail button span { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; }
.mm2-rail button::after {
  content: ""; position: absolute; right: calc(-1 * var(--s-5) - 1px); top: 8px; bottom: 8px;
  width: 3px; background: var(--o-500); border-radius: 2px; opacity: 0; transition: opacity var(--d-1) var(--snap);
}
.mm2-rail button[aria-selected="true"] { color: var(--n-900); }
.mm2-rail button[aria-selected="true"] .mm2-n { color: var(--o-600); }
.mm2-rail button[aria-selected="true"]::after { opacity: 1; }
.mm2-rail button:hover { color: var(--n-700); }

/* ---- the panel: two columns of rows + a feature column ------------------ */
.mm2-panel { display: none; }
.mm2-panel.is-on { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: var(--s-6); animation: mm2In var(--d-2) var(--glide) both; }
@keyframes mm2In { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.mm2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); align-content: start; }
.mm2-col { display: grid; }

.mm2-row {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 12px; gap: 11px;
  /* Round 14, item 3: with the plate gone the glyph has to hang off the
     title's own line, not float in the middle of a three-line row. */
  align-items: start;
  padding: 10px 6px; border-radius: var(--r-2); border-bottom: 1px solid var(--n-100);
  transition: background var(--d-1) var(--snap);
}
.mm2-col .mm2-row:last-child { border-bottom: 0; }
.mm2-row:hover { background: var(--o-50); }
.mm2-row .ic-tile { margin-top: 1px; }
.mm2-t b { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--n-900); line-height: 1.3; }
.mm2-t small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; line-height: 1.4; }
.mm2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--o-500); opacity: 0; margin-top: 6px; }
.mm2-row.is-here { background: var(--o-50); }
.mm2-row.is-here .mm2-dot { opacity: 1; }
.mm2-row.is-here .mm2-t b { color: var(--o-800); }
/* Round 14, item 3: the one orange glyph in this group is the row you are on. */
.mm2-row.is-here .ic-tile { color: #FF6B3D; }

/* ---- the feature column: the area's photograph + the way out ------------ */
.mm2-feat { display: grid; align-content: start; gap: var(--s-4); }
.mm2-feat-img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-4);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.4);
}
.mm2-feat-link {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 700; color: var(--n-900);
}
.mm2-feat-link svg { transition: transform var(--d-1) var(--snap); }
.mm2-feat-link:hover svg { transform: translateX(3px); }

/* forces the panel open without :hover, for the ?menu=product screenshot hook */
.has-menu.force-open > .nav-menu { opacity: 1 !important; visibility: visible !important; transform: none !important; }

@media (max-width: 1180px) {
  .mm2-panel.is-on { grid-template-columns: 1fr; }
  .mm2-feat { display: none; }
}

/* ---- mobile: the rail becomes an accordion of the five areas ------------ */
@media (max-width: 1020px) {
  .mm2-in { display: block; padding: 0; max-width: none; }
  .mm2-rail { display: grid; gap: 0; border-right: 0; padding-right: 0; }
  .mm2-rail button {
    justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); border-radius: 0;
    color: var(--ink);
  }
  .mm2-rail button .mm2-n { order: -1; color: var(--ink-3); }
  .mm2-rail button::after { content: "+"; position: static; width: auto; height: auto; background: none;
    font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); opacity: 1; }
  .mm2-rail button[aria-selected="true"]::after { content: "\2212"; color: var(--o-400); }
  .mm2-panel.is-on { display: block; grid-template-columns: 1fr; padding: var(--s-3) 0 var(--s-5); animation: none; }
  .mm2-cols { grid-template-columns: 1fr; }
  /* round 30, item 5: the glyph column is the top-level rows' own 22px and
     14px, so every glyph in the sheet sits on one vertical line and every
     label on another; the area headers start on the label line. */
  .mm2-row { grid-template-columns: 22px minmax(0,1fr) 10px; column-gap: 14px; padding: 10px 0; border-bottom-color: var(--line); }
  .nav.is-open .mm2-rail button {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px;
    justify-content: stretch; text-align: left;
  }
  .nav.is-open .mm2-rail button .mm2-n { order: 0; }
  .mm2-t b { color: var(--ink); } .mm2-t small { color: var(--ink-3); }
  .mm2-feat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm2-panel.is-on { animation: none; }
}

/* ---- Round 30, item 5: the nav's glyphs carry their own drawing rules ----
   Six pages that carry the nav do not load css/apple.css, where `.ic` and
   `.ic-tile` are defined, so their menu glyphs had no stroke at all. The
   same rules, at zero extra specificity through :where(), so css/apple.css
   still decides wherever it is loaded. */
:where(.nav) .ic { display: inline-block; width: 1em; height: 1em; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:where(.nav) .ic-tile { --ic-tile-s: 28px; width: var(--ic-tile-s); height: var(--ic-tile-s); flex: none;
  display: grid; place-items: center; background: none; color: #000000; }
:where(.nav) .ic-tile.sm { --ic-tile-s: 22px; }
:where(.nav) .ic-tile .ic { width: var(--ic-tile-s); height: var(--ic-tile-s); stroke-width: 1.75; }