/* ============================================================================
   nav-mega.css — Clay.com-style mega dropdown for the top navigation.

   Used ONLY by pages that opt in (currently /index-menu.html). No selector
   here touches existing markup, so pages that don't link this sheet are
   unaffected. To port to another page:
     1. <link rel="stylesheet" href="/assets/css/nav-mega.css">  (after style.css)
     2. <script src="/assets/js/nav-mega.js"></script>           (after app.js)
     3. Add class="nav-mega-trigger" (+ aria attrs) to the nav's Download link,
        paste the .nav-mega panel markup before </nav>, and optionally the
        .mm-group block inside the mobile menu.

   The nav strip itself (height, colors, blur) is untouched: the trigger keeps
   the stock .nav-links sizing, and the panel hangs below the bar.
   Everything is driven by the site's theme tokens, so dark mode just works.
   ============================================================================ */

/* ---- Menu typeface ------------------------------------------------------------
   Inter (variable, latin subset, self-hosted, SIL OFL — license next to the
   file). Closest free stand-in for clay.com's Roobert; scoped to the menu so
   the rest of the site stays on the system stack. */
@font-face {
  font-family: 'Inter Menu';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.nav-mega, .mm-sub { font-family: 'Inter Menu', var(--font-sans); }

/* ---- Trigger: the stock nav link, visually unchanged ------------------------- */
/* Keep the green underline while the pointer is down in the panel */
.nav-links a.nav-mega-trigger[aria-expanded="true"] {
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* ---- Panel ------------------------------------------------------------------ */
.nav-mega {
  position: absolute;             /* .nav is position:fixed → anchors here */
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(820px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px var(--color-shadow-heavy), 0 4px 16px var(--color-shadow);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
}
.nav-mega.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
/* Invisible bridge over the gap between the bar and the panel, so the pointer
   can travel down without the hover being lost. */
.nav-mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* ---- Link columns ------------------------------------------------------------ */
.nav-mega-cols {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.nav-mega-col { flex: 1; padding-right: 18px; }
.nav-mega-col + .nav-mega-col {
  position: relative;
  padding-left: 24px;
  padding-right: 0;
}
/* Column divider that fades out toward the top and bottom */
.nav-mega-col + .nav-mega-col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
              transparent, var(--color-border) 28%,
              var(--color-border) 72%, transparent);
}
/* Group titles — clay.com's exact metrics (.nav__content--header-label):
   10px / 600 / 0.08em tracking / uppercase. They use Roobert (commercial);
   the site's system stack stands in. */
.nav-mega-heading {
  margin: 2px 0 12px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* Item rows — rounded hover highlight, roomy spacing */
.nav-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;         /* 14px — clay's label size */
  font-weight: 550;            /* clay's label weight (variable font) */
  letter-spacing: -0.01em;     /* clay's label tracking */
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.nav-mega-item:hover { background: var(--color-bg); }
/* Icon slot — the real product icons float free (rounding is baked into the
   images) with the same drop shadow the homepage pill icons use. */
.nav-mega-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-mega-icon img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));   /* same as .pill-app .tile */
}
[data-theme="dark"] .nav-mega-icon img { filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.45)); }
/* light/dark icon pairs (same pattern as the homepage pill) */
.nav-mega-icon .ico-dark { display: none; }
[data-theme="dark"] .nav-mega-icon .ico-light { display: none; }
[data-theme="dark"] .nav-mega-icon .ico-dark { display: block; }

/* ---- "Latest from the news" card (right side, like Clay's) ------------------- */
.nav-mega-news {
  width: 248px;
  display: block;
  padding: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.nav-mega-news:hover { border-color: var(--color-primary); }
.nav-mega-news-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius-lg) - 4px);
  background: var(--color-surface);
}
.nav-mega-news-body { display: block; padding: 10px 4px 4px; }
.nav-mega-news-eyebrow {
  display: block;
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.nav-mega-news-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.nav-mega-news:hover .nav-mega-news-title { color: var(--color-primary); }

/* ---- Mid widths: news card drops below the columns --------------------------- */
@media (max-width: 920px) {
  .nav-mega {
    grid-template-columns: 1fr;
    width: min(560px, calc(100vw - 32px));
    gap: 20px;
  }
  .nav-mega-news {
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-mega-news-img { width: 128px; aspect-ratio: 16 / 11; flex-shrink: 0; }
  .nav-mega-news-body { padding: 0 4px; }
}

/* ---- Narrow screens: the bar collapses to the hamburger, so the hover panel
       retires and the same links live in the mobile menu accordion below. ----- */
@media (max-width: 768px) {
  .nav-mega { display: none; }
}

/* ---- Mobile menu accordion (inside the existing .mobile-menu) ----------------- */
.mm-group { display: flex; align-items: center; }
.mobile-menu .mm-group > a { flex: 1; }
.mm-toggle {
  width: 44px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.mm-toggle svg { width: 14px; height: 14px; transition: transform 180ms var(--ease-out); }
.mm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-sub { display: none; padding: 0 0 8px; }
.mm-sub.open { display: block; }
.mm-sub-heading {
  margin: 8px 0 2px;
  padding-left: 16px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.mobile-menu .mm-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  font-size: 0.9063rem;
  color: var(--color-text-secondary);
}
.mm-sub .nav-mega-icon { width: 30px; height: 30px; }
.mm-sub .nav-mega-icon img { width: 22px; height: 22px; }