/*
 * WordPress Navigation integration.
 *
 * This stylesheet is loaded after wp-block-navigation. The :is() boundary
 * deliberately outranks Core's hover, focus-within, expanded and alignment
 * rules while remaining limited to a first-level desktop Megamenu in Header.
 */

/*
 * Core paints desktop Submenu containers with its own fallback colors. This
 * post-Core adapter restores the current Header surface for native Submenus
 * and SGGW Megamenus while preserving explicit Navigation or panel colors.
 */
.sggw-site-header
	:is(
		.wp-block-navigation:not(.has-background):not(
			.sggw-navigation-overlay__menu
		)
			> .wp-block-navigation__container,
		.wp-block-navigation:not(.has-background)
			.wp-block-navigation__responsive-container:not(.is-menu-open)
			.wp-block-navigation__responsive-container-content
			> .wp-block-navigation__container
	)
	> .wp-block-navigation-submenu
	> .wp-block-navigation__submenu-container:not(.has-background) {
	background-color: var(--wp--custom--component--navigation--panel--background);
}

.sggw-site-header
	:is(
		.wp-block-navigation:not(.has-text-color):not(
			.sggw-navigation-overlay__menu
		)
			> .wp-block-navigation__container,
		.wp-block-navigation:not(.has-text-color)
			.wp-block-navigation__responsive-container:not(.is-menu-open)
			.wp-block-navigation__responsive-container-content
			> .wp-block-navigation__container
	)
	> .wp-block-navigation-submenu
	> .wp-block-navigation__submenu-container:not(.has-text-color) {
	color: var(--wp--custom--component--navigation--panel--foreground);
}

/* The native Core overlay is used only when no custom overlay is assigned. */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open:not(
		.disable-default-overlay
	):not(.has-background) {
	background-color: var(--wp--custom--component--navigation--overlay--background);
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open:not(
		.disable-default-overlay
	):not(.has-text-color) {
	color: var(--wp--custom--component--navigation--overlay--foreground);
}

/*
 * A custom Core overlay replaces the original Navigation list with a template
 * part. Keep the two layers mutually exclusive even when component CSS loads
 * after Core's inline overlay adapter.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__responsive-container-content
	> .wp-block-navigation__container {
	display: none;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay
	.wp-block-navigation__overlay-container {
	inline-size: 100%;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
	.wp-block-navigation__overlay-container {
	display: block;
}

/*
 * The template part owns the custom overlay surface. Native color classes are
 * authoritative; component roles supply the default only when the author has
 * not selected a background or foreground.
 */
.sggw-navigation-overlay,
.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay
	.wp-block-navigation__overlay-container
	> .wp-block-group:first-child {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 100dvh;
	max-block-size: 100dvh;
	overflow-x: clip;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sggw-navigation-overlay:not(.has-background),
.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay
	.wp-block-navigation__overlay-container
	> .wp-block-group:first-child:not(.has-background) {
	background-color: var(--wp--custom--component--navigation--overlay--background);
}

.sggw-navigation-overlay:not(.has-text-color),
.wp-block-navigation
	.wp-block-navigation__responsive-container.disable-default-overlay
	.wp-block-navigation__overlay-container
	> .wp-block-group:first-child:not(.has-text-color) {
	color: var(--wp--custom--component--navigation--overlay--foreground);
}

.sggw-site-header
	:is(
		.wp-block-navigation:not(.sggw-navigation-overlay__menu)
			> .wp-block-navigation__container,
		.wp-block-navigation
			.wp-block-navigation__responsive-container:not(.is-menu-open)
			.wp-block-navigation__responsive-container-content
			> .wp-block-navigation__container
	)
	> .sggw-section-menu-item--wide
	> .sggw-navigation-panel__grid:not(.sggw-navigation-editor-panel) {
	display: grid;
}

.sggw-site-header
	:is(
		.wp-block-navigation:not(.sggw-navigation-overlay__menu)
			> .wp-block-navigation__container,
		.wp-block-navigation
			.wp-block-navigation__responsive-container:not(.is-menu-open)
			.wp-block-navigation__responsive-container-content
			> .wp-block-navigation__container
	)
	> .sggw-section-menu-item--wide.has-sggw-megamenu-geometry
	> .sggw-section-menu-item__panel {
	position: absolute;
	inset-block-start: var(--sggw-navigation-megamenu-block-start);
	inset-inline-start: calc(
		var(--sggw-navigation-megamenu-header-inline-start) +
			(
				var(--sggw-navigation-megamenu-header-inline-size) -
					min(
						var(--sggw-navigation-megamenu-header-inline-size),
						var(--wp--style--global--wide-size)
					)
			) /
			2
	);
	inset-inline-end: auto;
	inline-size: min(
		var(--sggw-navigation-megamenu-header-inline-size),
		var(--wp--style--global--wide-size)
	);
	min-inline-size: 0;
	max-inline-size: var(--wp--style--global--wide-size);
}