/* The native Navigation block retains control of hover, touch and keyboard. */
header.starski-mega-header {
	position: relative;
	z-index: 100;
}

/* WordPress's inline-block image link can collapse a viewBox-only SVG to 0px.
 * Use the Image block's available width without changing its saved dimensions.
 */
header.starski-mega-header .wp-block-image:where(:not(.wp-block-navigation *)) > a {
	display: block;
}

/* Give each submenu link a distinct surface within the header-colored panel. */
header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 8px;
	background-color: color-mix(in srgb, currentColor 5%, transparent);
	transition: background-color 180ms ease, border-color 180ms ease;
}

header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation__submenu-container > .current-menu-item > .wp-block-navigation-item__content {
	background-color: color-mix(in srgb, currentColor 11%, transparent);
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	transform: none;
}

/* The colored surface replaces the general navigation underline on these links. */
header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

@media (min-width: 1024px) {

	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__container > .starski-mega-item > .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		position: absolute;
		left: var(--starski-mega-left);
		right: auto;
		top: var(--starski-mega-top);
		width: var(--starski-mega-width);
		min-width: 0;
		height: auto;
		max-height: min(65vh, 640px);
		display: grid;
		grid-template-columns: repeat(var(--starski-mega-columns, 4), minmax(0, 1fr));
		gap: 12px clamp(24px, 3vw, 56px);
		align-items: stretch;
		padding: 32px max(40px, calc((var(--starski-mega-width) - var(--wp--style--global--wide-size, 1200px)) / 2)) 48px;
		padding-left: max(80px, calc((var(--starski-mega-width) - var(--wp--style--global--wide-size, 1200px)) / 2));
		margin: 0;
		border: 0;
		border-radius: 0 0 0 clamp(64px, 8vw, 120px);
		background: var(--starski-mega-background, var(--wp--preset--color--tertiary, #fff));
		color: inherit;
		box-shadow: 0 18px 24px -24px rgba(0, 40, 80, 0.3);
		overflow: auto;
		overscroll-behavior: contain;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
	}


	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__container > .starski-mega-item:has(> [aria-expanded="true"]) > .wp-block-navigation__submenu-container,
	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__container > .starski-mega-item.open-always > .wp-block-navigation__submenu-container,
	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__container > .starski-mega-item:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
		pointer-events: auto;
		transform: translateY(0);
	}

	header.starski-mega-header .starski-mega-navigation .starski-mega-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		min-width: 0;
		align-items: stretch;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
		border-radius: 0;
		/*background: transparent;*/
	}

	header.starski-mega-header .starski-mega-navigation .starski-mega-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		width: 100%;
		box-sizing: border-box;
		/* Ollie applies !important padding to dropdown links. */
		padding: 18px 20px !important;
		font-size: clamp(1rem, 1.15vw, 1.125rem);
		line-height: 1.5;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	header.starski-mega-header .starski-mega-navigation .starski-mega-item .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 5px;
	}

	/* Deeper links remain inside their column instead of opening off-screen. */
	header.starski-mega-header .starski-mega-navigation .starski-mega-item > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		border: 0;
		/*background: transparent;*/
	}
}

@media (min-width: 1024px) and (hover: hover) {
	/* Keep the pointer inside the item between its label and the panel. */
	header.starski-mega-header .starski-mega-navigation .starski-mega-item:has(> [aria-expanded="true"])::after {
		content: "";
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: calc(var(--starski-mega-bridge, 0px) + 10px);
	}

	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__container > .starski-mega-item:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
		pointer-events: auto;
		transform: translateY(0);
	}
}

/* Switch earlier than Gutenberg's default so the header links have room. */
@media (max-width: 1023px) {
	/* Let the composition's logo shrink before the menu button leaves the screen. */
	header.starski-mega-header .wp-block-group:has(> .starski-mega-navigation) > :is(.wp-block-image, .wp-block-site-logo) {
		flex-shrink: 1;
		min-width: 0;
	}

	header.starski-mega-header .starski-mega-navigation {
		flex-shrink: 0;
	}

	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__responsive-container.is-menu-open {
		--starski-mobile-gutter: clamp(20px, 5vw, 40px);
		padding: 0;
		background: rgba(0, 0, 0, 0.35);
		color: var(--starski-mobile-menu-color, inherit);
		overflow-x: hidden;
		overscroll-behavior: contain;

		/* The native dialog remains responsible for focus and scrolling. */
		&:not(.disable-default-overlay) .wp-block-navigation__responsive-close {
			flex: 1 0 auto;
			width: 100%;
			max-width: 640px;
			min-height: 100%;
			margin: 0 0 0 auto;
			padding: max(20px, env(safe-area-inset-top)) max(var(--starski-mobile-gutter), env(safe-area-inset-right)) max(56px, env(safe-area-inset-bottom)) max(var(--starski-mobile-gutter), env(safe-area-inset-left));
			border-radius: 0 0 0 clamp(48px, 10vw, 80px);
			background: var(--starski-mobile-menu-background, var(--starski-mega-background, #fff));
			box-shadow: -12px 16px 40px rgba(0, 0, 0, 0.15);
		}

		& .wp-block-navigation__responsive-container-close {
			position: sticky;
			top: max(20px, env(safe-area-inset-top));
			z-index: 5;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;
			margin: 0 0 0 auto;
			padding: 12px;
			border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
			border-radius: 50%;
			background: var(--starski-mobile-menu-background, var(--starski-mega-background, #fff));
			color: inherit;
		}

		& .wp-block-navigation__responsive-container-content {
			align-items: stretch;
			gap: 0;
			padding-top: 20px;
		}

		& .wp-block-navigation__container {
			width: 100%;
			align-items: stretch;
			gap: inherit !important; /* Override Ollie while retaining the Navigation block's gap. */
		}

		& .wp-block-navigation__container > .wp-block-navigation-item {
			align-items: stretch;
			flex-direction: column;
			min-width: 0;
			border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
		}

		& .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			min-height: 56px;
			padding: 16px;
			border-radius: 8px;
			font-size: inherit;
			line-height: inherit;
			text-align: left;
			white-space: normal;
			overflow-wrap: anywhere;
			transform: none;
			transition: background-color 180ms ease;
		}

		& .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
			padding-right: 60px;
		}

		/* A tinted row replaces the desktop underline on touch screens. */
		& .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
			content: none;
		}

		& .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-expanded="true"], [aria-current="page"]) {
			background-color: color-mix(in srgb, currentColor 8%, transparent);
			text-decoration: none;
		}

		& .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			top: 6px;
			right: 8px;
			width: 44px;
			height: 44px;
			margin: 0;
			padding: 0;
			border-radius: 50%;
			background: color-mix(in srgb, currentColor 5%, transparent);
		}

		/* The decorative span must not intercept taps on the full-width button. */
		& .wp-block-navigation__container > .has-child > span.wp-block-navigation__submenu-icon {
			pointer-events: none;
		}

		& .wp-block-navigation__submenu-icon svg {
			width: 14px;
			height: 14px;
		}

		& .starski-mega-item > .wp-block-navigation__submenu-container {
			box-sizing: border-box;
			position: static;
			width: 100%;
			height: auto;
			min-width: 0;
			opacity: 1;
			visibility: visible;
			overflow: visible;
			gap: 10px;
			margin: 0;
			padding: 12px 0 20px;
			align-items: stretch;
			border: 0;
			background: transparent;
			color: inherit;
		}

		& .starski-mega-item > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
			min-height: 48px;
			padding: 14px 18px;
			line-height: 1.5;
		}

		& :is(a, button):focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 3px;
		}

		/* The editable Group, not this structural shell, owns the mobile surface. */
		&.disable-default-overlay .wp-block-navigation__responsive-close {
			max-width: none;
			margin: 0;
		}

		&.disable-default-overlay .wp-block-navigation__responsive-container-content {
			padding: 0;
		}

		&.disable-default-overlay .wp-block-navigation__overlay-container {
			width: 100%;
		}

		&.disable-default-overlay .starski-mobile-navigation {
			--navigation-layout-justification-setting: flex-start;
			--navigation-layout-align: stretch;
		}
	}

	/* On banner pages, repeat the desktop's dark surface and white navigation.
	 * Other headers retain the colors chosen in their composition.
	 */
	header.starski-mega-header.starski-overlay-header .starski-mega-navigation {
		--starski-mobile-menu-background: linear-gradient(160deg, #090f12, #161e22);
		--starski-mobile-menu-color: #fff;
	}

}

@media (prefers-reduced-motion: reduce) {
	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__submenu-container,
	header.starski-mega-header .starski-mega-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	header.starski-mega-header .starski-mega-navigation .is-menu-open .wp-block-navigation-item__content {
		transition: none !important;
	}
}