/* ════════════════════════════════════════════════════════════════
   css/header-footer.css
   Multilevel dropdown navigation styles.
   Uses the existing theme tokens defined in style.css (:root).
   ──────────────────────────────────────────────────────────────── */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-toplink {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 3px 0;
  transition: color 0.2s;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toplink:hover,
.nav-toplink.active { color: var(--orange-lt); }

.nav-caret {
  font-size: 0.6rem;
  color: var(--fg-muted);
  transition: transform 0.25s ease, color 0.2s;
}
.nav-item.dropdown-open .nav-caret { transform: rotate(180deg); color: var(--orange-lt); }

/* ══════════════════════════════════════════════════════════════
   DROPDOWN PANEL
   FIX: mega menus are now anchored to the viewport-edge using
   a fixed-position container trick so they never get clipped
   by the nav-pill's overflow/border-radius.
══════════════════════════════════════════════════════════════ */

/* Standard (small) dropdown — centred under trigger */
.dropdown-menu {
  position: fixed;           /* break out of nav-pill stacking context */
  top: var(--dd-top, 70px);  /* set by JS on open */
  left: var(--dd-left, 50%);
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 2rem;
  background: rgba(13,13,13,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-lt);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  min-width: 220px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 9999;
}

/* Mega menu — anchored to right edge of viewport with padding */
.dropdown-menu--mega {
  left: auto;
  right: 16px;
  transform: translateY(8px);  /* no X translation */
  max-width: calc(100vw - 32px);
}

/* Open states */
.nav-item.dropdown-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-item.dropdown-open .dropdown-menu--mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Light mode dropdown */
html.light-mode .dropdown-menu {
  background: rgba(255,255,255,0.98);
  border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}

/* ── Column layout ── */
.dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
}
.dropdown-col__title {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-lt);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dropdown-col__title--spaced { margin-top: 14px; }
.dropdown-col__title--hidden-label { opacity: 0; height: 0; margin: 0; padding: 0; border: none; }
.dropdown-col__title--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s;
}
.dropdown-col__title--link:hover { color: var(--fg); }

.dropdown-col a {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--fg-sub);
  text-decoration: none;
  padding: 5px 4px;
  border-radius: 6px;
  transition: color 0.18s, background 0.18s, padding-left 0.18s;
  white-space: nowrap;
}
.dropdown-col a:hover {
  color: var(--fg);
  background: rgba(255,106,26,0.08);
  padding-left: 8px;
}
html.light-mode .dropdown-col a { color: var(--fg-sub); }
html.light-mode .dropdown-col a:hover {
  color: var(--fg);
  background: rgba(255,106,26,0.07);
}

/* Mobile dropdown/accordion responsive rules now live in style.css's
   @media (max-width: 1300px) block (search "dropdowns become static
   accordions inside the mobile panel"), which also owns the burger
   breakpoint. Keeping a second, separately-breakpointed copy here
   caused a real bug: #mainNav's ID specificity outranked the class-only
   open-state rule, so tapping a dropdown trigger on mobile could never
   visually open it. Don't reintroduce a duplicate block here. */