:root {
	/* --mega-menu-width: var(--wp--style--global--wide-size); */
	--mega-menu-width: calc(1360px + 0em + 0em);
	--mega-menu-background: #fff;
	--mega-menu-group-background: #f1f2f2;
	--mega-menu-text: var(
		--ast-global-color-2,
		#36413f
	);
	--mega-menu-shadow:
		0 18px 45px rgb(0 0 0 / 16%);
	--mega-menu-gap: 2rem;
}

/**
 * Het custom megamenu bestaat alleen binnen de desktopnavigatie.
 */
@media (min-width: 922px) {
	/**
	 * Het menu-item mag niet zelf het positioneringsanker worden.
	 *
	 * Het JavaScript rekent de positie om naar het daadwerkelijke
	 * offsetParent dat Astra voor het paneel gebruikt.
	 */
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu {
		position: static;
	}

	/**
	 * Verberg alleen op desktop het standaard Astra-submenu.
	 * Het mobiele submenu blijft hierdoor onaangetast.
	 */
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu
		> .sub-menu {
		display: none !important;
	}

	/**
	 * Custom megamenu.
	 *
	 * --mega-menu-top wordt berekend vanaf de onderkant van de
	 * bijbehorende .ast-primary-header-bar.
	 *
	 * --mega-menu-left zorgt ervoor dat het paneel altijd ten opzichte
	 * van de volledige viewport gecentreerd blijft.
	 */
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu
		> .mega-menu {
		position: absolute;
			top: var(--mega-menu-top);
			left: var(--mega-menu-left);
		z-index: 9999;

		display: block;
		width: min(
			var(--mega-menu-width),
			calc(100vw - 48px)
		);
		margin: 0;
		padding: 2rem;

		background:
			var(--mega-menu-background);
		box-shadow:
			var(--mega-menu-shadow);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translate(-50%, 10px);

		transition:
			opacity 160ms ease,
			visibility 0s linear 160ms,
			transform 160ms ease;
	}

	/**
	 * Dynamische hoverbrug.
	 *
	 * Deze loopt alleen onder de bijbehorende navigatielink en vult
	 * precies de ruimte tot de onderkant van de primaire headerbalk.
	 */
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu
		> .mega-menu::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: var(
			--mega-menu-bridge-left,
			0
		);

		width: var(
			--mega-menu-bridge-width,
			0
		);
		height: var(
			--mega-menu-bridge-height,
			0
		);

		background: transparent;
		pointer-events: auto;
	}

	/**
	 * Open toestand.
	 */
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu.is-open
		> .mega-menu,
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu:hover
		> .mega-menu,
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu:focus-within
		> .mega-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translate(-50%, 0);

		transition:
			opacity 160ms ease,
			visibility 0s,
			transform 160ms ease;
	}

	/**
	 * Verdeling: twee derde navigatie en een derde nieuws.
	 */
	.mega-menu__inner {
		display: grid;
		grid-template-columns:
			minmax(0, 2fr)
			minmax(280px, 1fr);
		align-items: start;
		gap: 2rem;

		width: 100%;
		max-width: var(--mega-menu-width);
		margin: 0 auto;
	}

	/**
	 * Linkerkant.
	 */
	.mega-menu__navigation {
		min-width: 0;
	}

	.mega-menu__grid {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1px;
		grid-auto-flow: row dense;
		align-items: start;

		column-gap: var(--mega-menu-gap);
		row-gap: 0;
	}

	/**
	 * Menugroep.
	 */
	.mega-menu__group {
		min-width: 0;
		padding: 22px;

		background:
			var(
				--mega-menu-group-background
			);
	}

	.mega-menu__group-title {
		display: inline-block;
		margin: 0;
		padding: 0;

		color: var(--mega-menu-text);
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		text-underline-offset: 3px;
	}

	a.mega-menu__group-title {
		text-decoration: underline;
	}

	a.mega-menu__group-title:hover,
	a.mega-menu__group-title:focus-visible {
		color: var(--ast-global-color-6);
	}

	/**
	 * Links binnen een menugroep.
	 */
	.mega-menu__links {
		display: flex;
		flex-direction: column;

		margin: 12px 0 0;
		padding: 0;

		list-style: none;
	}

	.mega-menu__link-item {
		margin: 0;
		padding: 0;
		line-height: 30px;
	}

	.mega-menu__link {
		display: inline-block;
		padding: 0;

		color: var(--mega-menu-text);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
		text-decoration: none;
	}

	.mega-menu__link:hover,
	.mega-menu__link:focus-visible {
		color: var(--ast-global-color-6);
		text-decoration: underline;
	}

	/**
	 * Rechter nieuwsgebied.
	 */
	.mega-menu__latest {
		min-width: 0;
	}

	.mega-menu__navigation-label,
	.mega-menu__latest-label {
		margin: 0 0 16px;

		color: var(--mega-menu-text);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.mega-menu__latest-empty {
		margin: 0;
		color: var(--mega-menu-text);
	}

	/**
	 * Focus.
	 */
	.mega-menu__group-title:focus-visible,
	.mega-menu__link:focus-visible {
		outline: 3px solid currentColor;
		outline-offset: 4px;
	}
}

/**
 * Op tablet en mobiel wordt Astra's normale submenu gebruikt.
 */
@media (max-width: 921px) {
	.mega-menu {
		display: none !important;
	}
}

/**
 * Animaties uitschakelen wanneer de bezoeker dit heeft ingesteld.
 */
@media (prefers-reduced-motion: reduce) {
	.ast-desktop
		.main-header-menu
		> .menu-item.is-mega-menu
		> .mega-menu {
		transition: none;
		transform: translate(-50%, 0);
	}
}