Main header background overlay transition (Mega Menu)

				
					<script>
document.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("mouseenter", function(e) {
    if (e.target.matches("li.e-n-menu-item")) {
      // Check if any .e-n-menu-content has e-active
      const activeMenu = document.querySelector('.e-n-menu-content.e-active');
      if (activeMenu) {
        let overlay = document.querySelector('.custom-overlay');
        if (!overlay) {
          overlay = document.createElement('div');
          overlay.className = 'custom-overlay';
          document.body.appendChild(overlay);
        }
      }
    }
  }, true);

  document.addEventListener("mouseleave", function(e) {
    if (e.target.matches("li.e-n-menu-item")) {
      // Remove overlay only if exists
      const overlay = document.querySelector('.custom-overlay');
      if (overlay) overlay.remove();
    }
  }, true);
});
</script>

<style>
.custom-overlay {
  margin-top: 9.8rem;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
  pointer-events: none;
}
</style>