/* ====================================================================
   MEGA NAV — Only things Tailwind can't do:
   animations, pseudo-elements, FOUC, old-nav overrides
   ==================================================================== */

/* Kill white body flash behind sticky sections */
body { background: #0B1426 !important; }

/* FOUC prevention — hide old nav completely until JS replaces it */
.main-header:not(.mega-loaded) {
  background: #0B1426 !important;
  height: 64px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: none !important;
}
.main-header:not(.mega-loaded) > * {
  display: none !important;
}

/* Frosted glass on scroll — toggled by improved-main.js line 77 */
.main-header.scrolled {
  background: rgba(11, 20, 38, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(11, 20, 38, 0.4);
}

/* Mega menu fade-in */
@keyframes megaFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Show mega menu on hover (desktop only) */
@media (min-width: 769px) {
  .mega-nav-item:hover > .mega-menu {
    display: flex;
  }

  /* Backdrop dim on hover */
  .mega-nav-item:hover::after {
    content: '';
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 20, 38, 0.08);
    z-index: -1;
    pointer-events: none;
  }
}

/* Mobile accordion open state */
@media (max-width: 768px) {
  .mega-nav-item.active > .mega-menu {
    display: flex !important;
  }
}

/* Hamburger X animation */
.mega-hamburger.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mega-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.mega-hamburger.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Arrow flip on hover/active */
.mega-nav-item:hover .mega-nav-arrow,
.mega-nav-item.active .mega-nav-arrow {
  transform: rotate(180deg);
}

/* ---------- newspaper clipping — small, tight, footnote-sized ---------- */
.news-clipping {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  background: #fce4d6; /* FT salmon pink */
  border-left: 3px solid #c4713b;
  border-radius: 0 3px 3px 0;
  margin-bottom: 16px;
  font-family: 'Newsreader', Georgia, serif;
}

.news-clipping-headline {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  font-style: italic;
}

.news-clipping-source {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  color: #996633;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* On dark backgrounds */
.bg-navy .news-clipping {
  background: rgba(255, 253, 247, 0.12);
  border-left-color: #C4A040;
}
.bg-navy .news-clipping-headline {
  color: #d4c9b5;
}
.bg-navy .news-clipping-source {
  color: #C4A040;
}

@media print {
  .news-clipping { border-left-color: #333; background: transparent; }
}

/* ---------- sticky card stack ---------- */
/* Must beat #rl-app .rl-section { position: relative } */
#rl-app .rl-section.sticky-stack,
.sticky-stack {
  position: sticky;
  top: 64px; /* nav height */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  min-height: calc(100vh - 64px);
  margin-bottom: 0;
}

/* Force opaque backgrounds so previous sections can't peek through */
#rl-app .rl-section.sticky-stack.bg-navy { background-color: #0B1426; }
#rl-app .rl-section.sticky-stack.bg-offwhite { background-color: #F7F6F2; }
#rl-app .rl-section.sticky-stack:not(.bg-navy):not(.bg-offwhite) { background-color: #F7F3EE; }

/* ---------- print: flatten everything ---------- */
@media print {
  .main-header,
  .mega-hamburger {
    position: static;
    background: #fff;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }

  .mega-nav-items {
    display: none;
  }

  #rl-app .rl-section.sticky-stack,
  .sticky-stack {
    position: static;
    box-shadow: none;
    will-change: auto;
    transform: none;
  }

  .section-nav,
  .scroll-to-top,
  .mega-hamburger {
    display: none;
  }
}

/* Override old nav styles after injection */
.main-header.mega-loaded {
  background: #0B1426 !important;
  border-bottom: 2px solid #C4A040 !important;
  box-shadow: 0 2px 20px rgba(11,20,38,0.25) !important;
}
.main-header.mega-loaded .navbar-menu,
.main-header.mega-loaded .mobile-menu-toggle {
  display: none !important;
}
.main-header.mega-loaded .nav-dropdown .dropdown-menu {
  display: none !important;
}