/* =====================================================================
   CHAVANS — MEGA NAVIGATION (header drop-down)
   Mirrors the live chavans.ai mega menu: light-grey panel attached under
   the header, mono intro line, title + one-line items in a 4-column grid,
   vertical divider + close (×) on the right, rounded bottom corners.
   Everything BELOW the panel is blurred (scrim with backdrop-filter);
   the header itself stays sharp.
   Injected by mega-nav.js — works on every page (both nav variants).
   Units: --mu = 1px on the 1600 reference canvas.
===================================================================== */
.mg-root{ --mu: calc(100vw / 1600); position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 900; }

/* ---------- blur scrim (everything under the panel) ---------- */
.mg-scrim{
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--mg-scrim-top, 0px);
  background: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
          backdrop-filter: blur(7px) saturate(.9);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  z-index: 1;
}
.mg-root.is-open .mg-scrim{ opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* ---------- panel ---------- */
.mg-panel{
  position: absolute; left: 0; right: 0; top: var(--mg-top, 120px);
  z-index: 2;
  background: #D9D9D9;
  border-top: 1px solid #7F7F7F;
  border-radius: 0 0 calc(var(--mu) * 28) calc(var(--mu) * 28);
  box-shadow: 0 calc(var(--mu) * 18) calc(var(--mu) * 40) rgba(0,0,0,.08);
  color: #262626;
  opacity: 0; visibility: hidden;
  transform: translateY(calc(var(--mu) * -10));
  transition: opacity .28s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s linear .4s;
}
.mg-root.is-open .mg-panel{ opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s; }

.mg-inner{
  position: relative;
  min-height: calc(var(--mu) * 250);
  padding: calc(var(--mu) * 38) 0 calc(var(--mu) * 46) calc(var(--mu) * 281);
}
/* right rail: divider + close */
.mg-inner::after{
  content: ""; position: absolute;
  left: calc(var(--mu) * 1273); top: calc(var(--mu) * 26); bottom: calc(var(--mu) * 26);
  width: 1px; background: #BFBFBF;
}
.mg-close{
  position: absolute; left: calc(var(--mu) * 1305); top: calc(var(--mu) * 30);
  width: calc(var(--mu) * 30); height: calc(var(--mu) * 30);
  display: grid; place-items: center; color: #000; border-radius: 50%;
  transition: background .2s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.mg-close:hover{ background: rgba(0,0,0,.08); transform: rotate(90deg); }
.mg-close svg{ width: calc(var(--mu) * 16); height: calc(var(--mu) * 16); }

/* one content block per top-level item; only the active one shows */
.mg-sec{ display: none; }
.mg-sec.is-active{ display: block; }

.mg-intro{
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: calc(var(--mu) * 15);
  line-height: calc(var(--mu) * 20);
  letter-spacing: 0.01em;
  color: #262626;
}
.mg-grid{
  margin-top: calc(var(--mu) * 20);
  display: grid;
  grid-template-columns: repeat(4, calc(var(--mu) * 245));
  row-gap: calc(var(--mu) * 30);
}
.mg-item{
  display: block; padding-right: calc(var(--mu) * 34);
  opacity: 0; transform: translateY(calc(var(--mu) * 8));
}
.mg-root.is-open .mg-sec.is-active .mg-item{
  opacity: 1; transform: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(60ms + var(--i, 0) * 35ms);
}
.mg-t{
  display: flex; align-items: center; gap: calc(var(--mu) * 8);
  font-family: var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-weight: 500;
  font-size: calc(var(--mu) * 19);
  line-height: calc(var(--mu) * 24);
  color: #262626;
}
.mg-t svg{ flex: none; width: calc(var(--mu) * 18); height: calc(var(--mu) * 8); opacity: 0; transform: translateX(calc(var(--mu) * -6)); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
.mg-d{
  display: block; margin-top: calc(var(--mu) * 8);
  font-family: var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-weight: 300;
  font-size: calc(var(--mu) * 15.5);
  line-height: calc(var(--mu) * 21);
  color: #7F7F7F;
  text-wrap: pretty;
}
.mg-sub{ margin-top: calc(var(--mu) * 14); display: grid; gap: calc(var(--mu) * 5); }
.mg-sub span{
  font-family: var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  font-size: calc(var(--mu) * 14.5); line-height: calc(var(--mu) * 19); color: #595959;
  padding-left: calc(var(--mu) * 12); position: relative;
}
.mg-sub span::before{ content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--mu) * 5); height: 1px; background: #7F7F7F; }
a.mg-item:hover .mg-t{ color: #000; }
a.mg-item:hover .mg-t svg{ opacity: 1; transform: none; }
a.mg-item:hover .mg-d{ color: #404040; }
a.mg-item:focus-visible{ outline: 2px solid #000; outline-offset: calc(var(--mu) * 6); border-radius: 4px; }

/* Resources: Insights (2×2) | divider | News */
.mg-groups{ display: flex; margin-top: calc(var(--mu) * 20); }
.mg-group h5{
  margin: 0 0 calc(var(--mu) * 16);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 400; font-size: calc(var(--mu) * 12.4); letter-spacing: 0.06em;
  text-transform: uppercase; color: #595959;
}
.mg-group .mg-grid{ margin-top: 0; grid-template-columns: repeat(2, calc(var(--mu) * 245)); }
.mg-group--news .mg-grid{ grid-template-columns: calc(var(--mu) * 245); }
.mg-vr{ width: 1px; background: #BFBFBF; margin: 0 calc(var(--mu) * 30) 0 calc(var(--mu) * 0); }

/* active top-level pill while its panel is open */
.mg-on{ background: rgba(0,0,0,.28) !important; }
.mg-on-light{ background: rgba(255,255,255,.32) !important; }

@media (max-width: 900px){ .mg-root{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .mg-panel, .mg-scrim, .mg-item, .mg-close{ transition: none !important; }
}