/* ============================================================
   NAV MEGA DROPDOWN — Product & Service
   Hover-gap fixed via JS delay + invisible bridge
   Ideals Bhagwan Moorti
   ============================================================ */

/* ── NAV OVERRIDES ──────────────────────────────── */
.nav-links li.has-mega { position: static; }

.nav-links li.has-mega > a { color: var(--blue); }
.nav-links li.has-mega > a::after {
  content: '▾';
  font-size: 0.6rem;
  margin-left: 4px;
  vertical-align: 1px;
}

/* ── MEGA PANEL ─────────────────────────────────── */
/* Controlled by JS (.open class). No CSS hover — avoids the gap problem. */
.mega-panel {
  display: none;
  position: fixed;
  top: 0;       /* set by JS each time to nav.getBoundingClientRect().bottom */
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 3px solid var(--blue);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 60px -10px rgba(15,42,107,0.16);
}
.mega-panel.open {
  display: block;
  animation: megaSlide 0.18s ease;
}
@keyframes megaSlide {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Invisible hover bridge — sits in the gap between the nav and the panel
   so moving the mouse downward doesn't lose the hover state mid-air.     */
.mega-bridge {
  position: fixed;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
  z-index: 9998;
  display: none;
  pointer-events: all;
}
.mega-bridge.open { display: block; }

/* ── INNER LAYOUT ───────────────────────────────── */
.mega-panel-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.5rem 1.8rem;
  display: grid;
  grid-template-columns: 230px 1fr 230px;
  gap: 0 2.5rem;
  align-items: start;
}

/* ── COLUMN HEADINGS ────────────────────────────── */
.mpanel-col-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--blue);
  border-bottom: 2px solid var(--pale-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ── COLUMN BASE ────────────────────────────────── */
.mpanel-col {
  border-right: 1px solid var(--line);
  padding-right: 2rem;
}
.mpanel-col:last-child { border-right: none; padding-right: 0; }

/* God statues: spans middle, uses 2-column inner grid */
.mpanel-col-god {
  border-right: 1px solid var(--line);
  padding-right: 2rem;
}
.mpanel-col-god .mpanel-col-title { color: var(--blue-deep); }
.mpanel-god-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}

/* ── LIST ITEMS ─────────────────────────────────── */
.mpanel-col ul,
.mpanel-col-god ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mpanel-col li,
.mpanel-col-god li {
  border-bottom: 1px dashed var(--line);
}
.mpanel-col li:last-child,
.mpanel-col-god li:last-child { border-bottom: none; }

.mpanel-col li a,
.mpanel-col-god li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.15s, padding-left 0.15s;
}
.mpanel-col li a::before,
.mpanel-col-god li a::before {
  content: '—';
  color: var(--blue-light);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.mpanel-col li a:hover,
.mpanel-col-god li a:hover {
  color: var(--blue);
  padding-left: 4px;
}
.mpanel-col li a:hover::before,
.mpanel-col-god li a:hover::before { color: var(--blue); }

/* Goddess column — purple accent */
.mpanel-col.goddess .mpanel-col-title { color: #7c3f91; }
.mpanel-col.goddess li a::before     { color: #c084db; }
.mpanel-col.goddess li a:hover       { color: #7c3f91; }

/* ── FOOTER BAR ─────────────────────────────────── */
.mega-footer {
  background: var(--pale-blue);
  padding: 0.6rem 2.5rem;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--blue-deep);
  letter-spacing: 0.04em;
}
.mega-footer a {
  color: var(--blue);
  text-decoration: none;
  font-style: normal;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.mega-footer a:hover { text-decoration: underline; }

/* ── MOBILE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .mega-panel {
    position: static;
    top: auto !important;
    box-shadow: none;
    border-top: none;
    border-bottom: 1px solid var(--line);
    animation: none;
  }
  .mega-panel.open { display: block; }
  .mega-bridge { display: none !important; }

  .mega-panel-inner {
    grid-template-columns: 1fr;
    padding: 1rem 1.5rem;
    gap: 1rem 0;
  }
  .mpanel-col,
  .mpanel-col-god {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .mpanel-god-grid { grid-template-columns: 1fr; }

  /* Accordion titles */
  .mpanel-col-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
  }
  .mpanel-col-title::after { content: '+'; font-size: 1rem; font-family: sans-serif; }
  .mpanel-col.open .mpanel-col-title::after,
  .mpanel-col-god.open .mpanel-col-title::after { content: '−'; }

  .mpanel-col-body,
  .mpanel-god-grid { display: none; padding-top: 0.5rem; }
  .mpanel-col.open .mpanel-col-body,
  .mpanel-col-god.open .mpanel-god-grid { display: block; }

  .mega-footer { display: none; }
  .nav-links li.has-mega > a::after { content: ''; }
}