/* Mega items must NOT establish their own positioning context, so the
   panel below positions relative to .site-header (edge-to-edge) instead
   of just the width of the triggering <li>. */
.primary-menu > li.mega-menu { position: static; }

.mega-menu__panel {
	position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	z-index: 20;
}
.primary-menu > li:hover > .mega-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu__panel-inner { padding: var(--gap-lg) 0; }
.mega-menu__columns { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); margin: 0; padding: 0; }
.mega-menu__columns .sub-menu { position: static; border: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; padding: 0; }