/* ============================================================
 * nav-mega-hover.css — pure CSS hover open with grace period.
 * Loaded after nav-mega.css. Uses :has() for cross-tree hover.
 *
 * Two key tricks to prevent the menu from disappearing when the
 * cursor crosses the gap between trigger and panel:
 *   1. invisible "bridge" pseudo-element above the panel
 *   2. transition-delay on close so hover-loss has grace period
 * ============================================================ */

@media (min-width: 901px) {
	/* Hover on the trigger wrapper OR on the panel itself keeps the panel open */
	.site-header:has(div[data-d13a-nav="nuisibles"]:hover) #d13a-mega-nuisibles,
	.site-header:has(#d13a-mega-nuisibles:hover) #d13a-mega-nuisibles,
	.site-header:has(div[data-d13a-nav="services"]:hover) #d13a-mega-services,
	.site-header:has(#d13a-mega-services:hover) #d13a-mega-services,
	.site-header:has(div[data-d13a-nav="zones"]:hover) #d13a-mega-zones,
	.site-header:has(#d13a-mega-zones:hover) #d13a-mega-zones,
	.site-header:has(div[data-d13a-nav="conseils"]:hover) #d13a-mega-conseils,
	.site-header:has(#d13a-mega-conseils:hover) #d13a-mega-conseils {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			opacity 200ms ease-out,
			transform 200ms ease-out,
			visibility 0s;
		transition-delay: 0s;
	}

	/* Default closed state — DELAY the close transition so a brief
	 * hover-loss (e.g. crossing the trigger->panel gap) does not
	 * immediately collapse the menu. Hover-intent grace period: 250ms. */
	.d13a-mega {
		transition:
			opacity 200ms ease-out 250ms,
			transform 200ms ease-out 250ms,
			visibility 200ms step-end 250ms;
	}

	/* Invisible "bridge" above each panel — extends hover area upward
	 * to cover the gap between trigger and panel so the cursor never
	 * leaves the hoverable region while moving down. */
	.d13a-mega::before {
		content: "";
		position: absolute;
		top: -24px;
		left: 0;
		right: 0;
		height: 24px;
		/* fully transparent, but pointer-events: auto when panel is hovered
		 * (auto by default — this bridge IS the panel's hoverable extension) */
	}
	/* The bridge should NOT capture pointer events when the panel is closed,
	 * otherwise it would block clicks on header elements behind. */
	.d13a-mega:not(.is-open)::before {
		pointer-events: none;
	}
	/* When :has() opens the panel via hover, re-enable bridge pointer events
	 * so the cursor can travel through it without losing hover. */
	.site-header:has(div[data-d13a-nav]:hover) .d13a-mega::before,
	.site-header:has(.d13a-mega:hover) .d13a-mega::before {
		pointer-events: auto;
	}

	/* Trigger active state on hover (color, caret) */
	.d13a-nav__item:hover .d13a-nav__trigger {
		color: var(--color-text-primary, #190f0a);
	}
	.d13a-nav__item:hover .d13a-nav__caret {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* Scrim shows while hovering any panel/trigger */
	.site-header:has(div[data-d13a-nav]:hover) ~ * .d13a-mega__scrim,
	.site-header:has(.d13a-mega:hover) ~ * .d13a-mega__scrim {
		opacity: 1;
		visibility: visible;
	}
}