/* ══════════════════════════════════════════════════════════════════════════
   SoulxDoll — Mega-menu navigation  (v5.0)
   ──────────────────────────────────────────────────────────────────────────
   Extends the existing unified header nav (assets/css/styles.css → body[class]
   .ni / .drop / .drop-link). Only the wide multi-column MEGA panels are styled
   here; the simple single-column dropdowns keep their original styling.

   Enabled per menu item by adding the CSS class `mega-menu` in
   Appearance → Menus. Rendered by LUXE_Nav_Walker (inc/nav-walker.php).

   Scoping uses body[class] (specificity 0,2,0) to match the theme's own
   convention and to apply on every template without a page-specific body class.
   Loaded after styles.css so these rules win on ties.
   ══════════════════════════════════════════════════════════════════════════ */

/* The mega parent is a positioning context (already set globally, restated
   here so this file is self-sufficient). */
body[class] .ni.has-mega { position: relative; }

/* ── Mega panel shell ─────────────────────────────────────────────────────
   Reuses the .drop panel chrome (white card, border, shadow, show/hide) but
   overrides width + alignment: left-aligned under the trigger, not centred. */
body[class] .ni .drop.mega {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(-4px);
  width: max-content;
  max-width: min(720px, 92vw);
  padding: 18px;
}

/* Match the reveal transform of the base .drop so hover-in feels identical. */
body[class] .ni:hover .drop.mega,
body[class] .ni:focus-within .drop.mega {
  transform: translateX(0) translateY(0);
}

/* Eyebrow line (from the menu item's Description field). Optional. */
body[class] .drop.mega .mega-intro {
  padding: 2px 10px 12px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted, #86868B);
  border-bottom: 1px solid var(--line, #E8E8ED);
}

/* ── Column grid ──────────────────────────────────────────────────────────
   Two columns by default; a wider parent (Accessories = 6 links) still reads
   as a tidy 2×N block. Bump to 3 columns when there is room. */
body[class] .drop.mega .mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 1px 14px;
}

/* Give parents with many links a third column on roomy viewports. */
@media (min-width: 1180px) {
  body[class] .ni.has-mega.mega-3 .drop.mega .mega-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

/* Links inherit .drop-link styling from styles.css; nudge spacing for the grid. */
body[class] .drop.mega .drop-link {
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px;
}

/* ── Optional promo / feature card ────────────────────────────────────────
   A child menu item flagged with the CSS class `mega-feature` renders as a
   full-height accent tile that spans the grid's last column. */
body[class] .drop.mega .drop-link.mega-feature {
  grid-column: -2 / -1;
  grid-row: 1 / 99;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  min-width: 180px;
  padding: 16px;
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%),
    var(--brand, #FF2D55);
  background-size: cover;
  background-position: center;
}
body[class] .drop.mega .drop-link.mega-feature:hover {
  color: #fff;
  filter: brightness(1.04);
}

/* ── Safety: keep the panel on-screen for right-most mega items ──────────── */
body[class] .ni.has-mega.mega-right .drop.mega {
  left: auto;
  right: 0;
}

/* ── Desktop only. Below the nav breakpoint the mobile drawer takes over, so
   neutralise any leftover mega positioning to avoid layout surprises. ────── */
@media (max-width: 900px) {
  body[class] .ni .drop.mega {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    box-shadow: none;
    border: 0;
  }
  body[class] .drop.mega .mega-grid { grid-template-columns: 1fr; }
  body[class] .drop.mega .drop-link.mega-feature { grid-column: auto; grid-row: auto; }
}