/* 8UP · Nav menus: one solid panel, one clean fade (no shattered close) */

.mega-menu,
.dropdown {
  background: #fff !important;
  isolation: isolate;
  z-index: 1200 !important;
  /* Open/close owned by .open (site-chrome.js). No CSS :hover open. */
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease !important;
}

.mega-menu {
  transform: translateX(-50%) translateY(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06) !important;
}

.mega-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.dropdown {
  transform: translateX(-50%) translateY(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dropdown.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Kill rival CSS :hover openers that fight JS and cause multi-phase close */
.nav-links > li:hover > .mega-menu:not(.open),
.nav-links > li:hover > .dropdown:not(.open),
body.standalone-page .nav-links > li:hover .mega-menu:not(.open),
body.standalone-page .nav-links > li:hover .dropdown:not(.open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.standalone-page .nav-links .mega-menu.open,
body.standalone-page .nav-links .dropdown.open,
body.standalone-page .mega-menu.open,
body.standalone-page .dropdown.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Children must NOT animate opacity/transform on close (was: text then icons then gone) */
.mm-item,
.mm-icon,
.mm-icon svg,
.mm-text,
.mm-title,
.mm-sub,
.mm-footer,
.mm-footer-cta,
.dropdown a,
.dropdown-icon,
.menu-wide-item,
.menu-sector-item {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
  opacity: 1 !important;
}

.mm-item:hover .mm-icon,
.mm-item:hover .mm-icon svg {
  transform: none !important;
}

.mm-grid,
.mm-footer {
  background: #fff !important;
}

.mm-footer {
  background: #fafafa !important;
}