:root{
  --dc-mega-width: 650px; /* this is now just a fallback for the panel width if JS hasn’t run yet (or if JS errors) */
  --dc-mega-gap: 1rem;
  --dc-mega-left-col: 300px;
	--dc-mega-right-col: 300px;
  --dc-mega-gutter: 40px;

  --dc-mega-open-delay: 150ms;
  --dc-mega-fade: 80ms;
	
	--dc-mega-panel-bg: #2e2e2e;

}

/* Top-level mega parent */
.main-navigation ul li.mega-menu{
  position: relative;
}

/* Hide GP dropdown toggles INSIDE the mega panel only */
.main-navigation ul li.mega-menu > ul.sub-menu .dropdown-menu-toggle{
  display: none;
}

/* Keep the TOP-level arrow beside "Tools" */
.main-navigation ul li.mega-menu > a > .dropdown-menu-toggle{
  display: inline-flex;
}

/* =========================================================
   MEGA PANEL (2nd level UL)
   ========================================================= */

.main-navigation ul li.mega-menu > ul.sub-menu{
  position: fixed;

  /* Closed state (GP style) */
  left: -99999px;
  top: var(--dc-mega-top, 0px);

  width: var(--dc-mega-w, var(--dc-mega-width));
  max-width: calc(100vw - (var(--dc-mega-gutter) * 2));

  margin: 0;
  padding: var(--dc-mega-gap) !important;

  display: block;
  background: var(--contrast);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);

  z-index: 99999;
  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;

  transition: opacity var(--dc-mega-fade) linear;
  transition-delay: 0s;

  /* JS-controlled height (when present) */
  height: var(--dc-mega-h, 0px);
}

/* Open state */
.main-navigation:not(.toggled) ul li.mega-menu:hover > ul.sub-menu,
.main-navigation:not(.toggled) ul li.mega-menu.focus > ul.sub-menu{
  left: var(--dc-mega-left, 0px);

  opacity: 1;
  pointer-events: auto;
  overflow: visible;

  transition-delay: var(--dc-mega-open-delay);
}

/* =========================================================
   LEFT COLUMN (2nd level items)
   ========================================================= */

.main-navigation ul li.mega-menu > ul.sub-menu > li{
  position: static;
  margin: 0;
  width: var(--dc-mega-left-col);
  box-sizing: border-box;
}

.main-navigation ul li.mega-menu > ul.sub-menu > li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.6rem 0.75rem;
  margin: 0;

  font-weight: 600;
  line-height: 1.2;
}

/* Mega menu 2nd level hover + active background */

.main-navigation ul li.mega-menu > ul.sub-menu > li:hover > a,
.main-navigation ul li.mega-menu > ul.sub-menu > li:focus-within > a,
.main-navigation ul li.mega-menu > ul.sub-menu > li.is-active > a{
  background: #2e2e2e;
}
	

/* keep the link above the pseudo background */
.main-navigation ul li.mega-menu > ul.sub-menu > li > a{
  position: relative;
  z-index: 1;
}


/* =========================================================
   RIGHT PANEL (3rd level UL)
   - Fixed width right column (Option B)
   - Positioned directly beside left column (no middle gap)
   ========================================================= */

.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu{
  display: none;

  position: absolute;
  top: var(--dc-mega-gap);
  bottom: var(--dc-mega-gap);

  /* Sit directly next to left column */
	left: calc(var(--dc-mega-gap) + var(--dc-mega-left-col) - 1px);
  right: auto;

	width: calc(var(--dc-mega-right-col-effective, var(--dc-mega-right-col)) + 1px);

  margin: 0;
  padding: 0.75rem 0.75rem;
  box-sizing: border-box;

  background: #2e2e2e;
  overflow: visible;

  /* HARD RESET vs GP .main-navigation ul ul */
  float: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
}

/* Show right panel for active 2nd-level item */
.main-navigation ul li.mega-menu > ul.sub-menu > li.is-active > ul.sub-menu{
  display: block;
}

/* Fallback (no JS) */
.main-navigation ul li.mega-menu > ul.sub-menu > li:hover > ul.sub-menu,
.main-navigation ul li.mega-menu > ul.sub-menu > li:focus-within > ul.sub-menu{
  display: block;
}

/* Right panel links */
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a{
  display: block;
  padding: 0.45rem 0;
  margin: 0;
}

/* Remove any divider pseudo elements */
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu::before,
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu::after{
  content: none;
  display: none;
}

/* No hover background on 3rd level, keep orange hover text */
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu li a:hover,
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu li a:focus,
.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu li a:focus-visible{
  background: transparent;
}

.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu li a:hover{
  color: var(--accent-highlight);
}

/* When clamped to viewport, allow scrolling inside right panel only */
.main-navigation ul li.mega-menu.dc-mega-clamped > ul.sub-menu > li > ul.sub-menu{
  overflow: auto !important;
}

/* =========================================================
   4th level safety: don't let anything fly out
   ========================================================= */

.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li{
  position: static;
}

.main-navigation ul li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu{
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Optional: override any global submenu padding rules inside mega menu */
.main-navigation ul li.mega-menu > ul.sub-menu,
.main-navigation ul li.mega-menu > ul.sub-menu ul{
  padding-left: 0;
  padding-right: 0;
}
	
	.main-navigation ul li.mega-menu > ul.sub-menu > li.is-active > a{
  color: var(--accent-highlight);
}
	
	/* Mega menu, left column (2nd level) hover + active */
.main-navigation ul li.mega-menu > ul.sub-menu > li:hover > a,
.main-navigation ul li.mega-menu > ul.sub-menu > li:focus-within > a,
.main-navigation ul li.mega-menu > ul.sub-menu > li.is-active > a{
  background: var(--dc-mega-panel-bg) !important; /* #2e2e2e */
}

/* Non-mega dropdowns: default-highlight first item ONLY when nothing else is hovered */
.main-navigation:not(.toggled):not(.slideout-navigation) .main-nav > ul > li:not(.mega-menu):hover > ul.sub-menu:not(:has(> li:hover)) > li:first-child > a,
.main-navigation:not(.toggled):not(.slideout-navigation) .main-nav > ul > li:not(.mega-menu).sfHover > ul.sub-menu:not(:has(> li:hover)) > li:first-child > a,
.main-navigation:not(.toggled):not(.slideout-navigation) .main-nav > ul > li:not(.mega-menu):focus-within > ul.sub-menu:not(:has(> li:focus-within)) > li:first-child > a{
  background: #2e2e2e !important;
  color: var(--accent-highlight) !important;
}

/* Non-mega dropdowns: hovered/focused item gets the dark background too */
.main-navigation:not(.toggled):not(.slideout-navigation) .main-nav > ul > li:not(.mega-menu) > ul.sub-menu > li:hover > a,
.main-navigation:not(.toggled):not(.slideout-navigation) .main-nav > ul > li:not(.mega-menu) > ul.sub-menu > li:focus-within > a{
  background: #2e2e2e !important;
}