/* Shared section navigation: native main-menu presentation and local renderer. */

.wp-block-sggw-navigation-megamenu,
.wp-block-sggw-section-menu-item,
.wp-block-sggw-section-navigation,
.wp-block-sggw-navigation-megamenu *,
.wp-block-sggw-section-menu-item *,
.wp-block-sggw-section-navigation * {
	box-sizing: border-box;
}

.wp-block-sggw-navigation-megamenu,
.wp-block-sggw-section-menu-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sggw-navigation-panel__group,
.sggw-section-navigation__group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--10);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sggw-site-header
	:where(
		.wp-block-navigation > .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 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.sggw-site-header
	:where(
		.wp-block-navigation > .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.has-1-columns {
	grid-template-columns: minmax(0, 1fr);
}

.sggw-site-header
	:where(
		.wp-block-navigation > .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.has-2-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sggw-site-header
	:where(
		.wp-block-navigation > .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.has-3-columns {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width < 64rem) {
	.sggw-site-header
		:where(
			.wp-block-navigation > .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:is(
			.has-3-columns,
			.has-4-columns
		) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 48rem) {
	.sggw-site-header
		:where(
			.wp-block-navigation > .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:is(
			.has-2-columns,
			.has-3-columns,
			.has-4-columns
		) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.sggw-section-menu-item--wide
	> .wp-block-navigation-submenu__toggle[aria-expanded="true"]
	~ .sggw-navigation-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--40);
}

.sggw-navigation-panel__list,
.sggw-section-navigation__list {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sggw-navigation-panel__list--level-0,
.sggw-section-navigation__list--level-0 {
	gap: 0;
}

.sggw-navigation-panel__list--level-1,
.sggw-section-navigation__list--level-1 {
	gap: 0;
}

.sggw-navigation-panel__list--level-0
	> .sggw-navigation-panel__item--parent:has(
		+ .sggw-navigation-panel__item
	)
	> .sggw-navigation-panel__list--level-1,
.sggw-section-navigation__list--level-0
	> .sggw-section-navigation__item.has-children:has(
		+ .sggw-section-navigation__item
	)
	> .sggw-section-navigation__list--level-1 {
	padding-block-end: var(--wp--preset--spacing--10);
}

.sggw-navigation-panel__item--parent,
.sggw-section-navigation__item.has-children {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.sggw-navigation-panel__link,
.sggw-section-navigation__link {
	inline-size: 100%;
	text-align: start;
}

.sggw-navigation-panel__list--level-0
	> .sggw-navigation-panel__item
	> .sggw-navigation-panel__link,
.sggw-section-navigation__list--level-0
	> .sggw-section-navigation__item
	> .sggw-section-navigation__link,
.sggw-section-navigation__root-link {
	min-block-size: 0;
	padding-block: max(6px, 0.375em);
	padding-inline: 0;
}

.sggw-navigation-panel__list--level-1
	> .sggw-navigation-panel__item
	> .sggw-navigation-panel__link,
.sggw-section-navigation__list--level-1
	> .sggw-section-navigation__item
	> .sggw-section-navigation__link {
	min-block-size: var(--wp--preset--spacing--40);
	padding-block: max(4px, 0.25em);
	padding-inline: 0;
}

/* Nested panel lists must not inherit the main Navigation's right alignment. */
.sggw-navigation-panel__list,
.sggw-section-menu-item__panel > .wp-block-navigation-submenu.open-always {
	--navigation-layout-direction: column;
	--navigation-layout-wrap: nowrap;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.sggw-navigation-panel__list--level-1,
.wp-block-navigation
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container
	.wp-block-navigation-submenu.open-always
	> .wp-block-navigation__submenu-container,
.sggw-section-navigation__list--level-1 {
	font-size: var(--wp--preset--font-size--small);
}

/* Local renderer for sidebars and in-page section navigation. */

.wp-block-sggw-section-navigation {
	--wp--custom--component--navigation--background-hover: var(--wp--custom--component--navigation--local--item-background-hover);
	--wp--custom--component--navigation--background-pressed: var(--wp--custom--component--navigation--local--item-background-active);
	--wp--custom--component--navigation--focus-color: var(--sggw-line-focus);
	--wp--custom--component--navigation--foreground: var(--sggw-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--regular);
	line-height: var(--wp--custom--typography--line-height--medium);
}

.wp-block-sggw-section-navigation a {
	color: var(--wp--custom--component--navigation--foreground);
	text-decoration: none !important;
}

.wp-block-sggw-section-navigation
	:is(.wp-block-sggw-column-heading, .sggw-column-heading) {
	color: var(--sggw-text-muted);
}

.sggw-section-navigation__root-link,
.sggw-section-navigation__link {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: var(--wp--preset--spacing--60);
	border: 0;
	border-radius: 0;
}

.sggw-section-navigation__root-link:focus:not(:focus-visible),
.sggw-section-navigation__link:focus:not(:focus-visible) {
	outline: none;
}

.sggw-section-navigation__root-link:focus-visible,
.sggw-section-navigation__link:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width) solid var(--wp--custom--component--navigation--focus-color);
	outline-offset: var(--wp--custom--line--focus-ring-offset);
}

.sggw-section-navigation__root-link:active,
.sggw-section-navigation__link:active,
.sggw-section-navigation__root-link[aria-current="page"],
.sggw-section-navigation__link[aria-current="page"],
.sggw-section-navigation__item.is-current
	> .sggw-section-navigation__link {
	background-color: var(--wp--custom--component--navigation--background-pressed);
}

.sggw-section-navigation__root-link[aria-current="page"],
.sggw-section-navigation__link[aria-current="page"] {
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

@media (hover: hover) {
	.sggw-section-navigation__root-link:hover,
	.sggw-section-navigation__link:hover {
		background-color: var(--wp--custom--component--navigation--background-hover);
		color: var(--wp--custom--component--navigation--foreground);
	}

	.sggw-section-navigation__root-link[aria-current="page"]:hover,
	.sggw-section-navigation__link[aria-current="page"]:hover,
	.sggw-section-navigation__item.is-current
		> .sggw-section-navigation__link:hover {
		background-color: var(--wp--custom--component--navigation--background-pressed);
	}
}

.sggw-section-navigation {
	display: grid;
	gap: 0;
	color: var(--wp--custom--component--navigation--foreground);
}

.sggw-section-navigation__root-link {
	padding-block: max(4px, 0.25em);
	padding-inline: var(--wp--preset--spacing--30);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

.sggw-section-navigation__groups {
	display: grid;
	gap: 0;
}

.sggw-section-navigation__group {
	gap: 0;
}

/*
 * The local group label has its own fixed recipe. It deliberately does not
 * reuse the Column Heading block's class or user-selected presentation.
 */
.sggw-section-navigation__group-heading {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-block-size: var(--wp--preset--spacing--60);
	margin-block-start: 20px;
	margin-block-end: 0;
	margin-inline-start: var(--wp--preset--spacing--30);
	border-block-start: var(--wp--custom--line--width) solid var(--sggw-line-decorative);
	padding-block: max(4px, 0.25em);
	padding-inline: 0 var(--wp--preset--spacing--30);
	color: var(--sggw-text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--typography--font-weight--semibold);
	line-height: var(--wp--custom--typography--line-height--x-small);
	text-transform: uppercase;
}

/*
 * Keep every child branch collapsed until its parent belongs to the active
 * path. `is-current` covers the parent page itself, while `is-ancestor` keeps
 * the same branch open after navigating to one of its descendants.
 */
.sggw-section-navigation__item.has-children
	> .sggw-section-navigation__list {
	display: none;
}

.sggw-section-navigation__item.has-children:is(.is-current, .is-ancestor)
	> .sggw-section-navigation__list {
	display: flex;
}

/*
 * Local groups remain useful data boundaries, but their lists form one
 * uninterrupted visual sequence. Remove the Megamenu's end spacing after a
 * nested list so every following page begins on the next 40 px row.
 */
.sggw-section-navigation__list--level-0
	> .sggw-section-navigation__item.has-children
	> .sggw-section-navigation__list--level-1 {
	padding-block-end: 0;
}

.sggw-section-navigation__item {
	margin: 0;
	padding: 0;
}

.sggw-section-navigation__link {
	inline-size: 100%;
}

/*
 * At page-zoom widths the secondary navigation gives the full row to the page
 * content. Do not give the sidebar a font-relative minimum width: under
 * text-only zoom it must retain its 25% track and wrap labels at spaces.
 * Structural selectors cover templates saved before the explicit classes.
 */
@media (width <= 64rem) {
	.sggw-page-sidebar,
	.wp-block-columns:has(.wp-block-sggw-section-navigation)
		> .wp-block-column:has(.wp-block-sggw-section-navigation) {
		display: none !important;
	}

	.sggw-page-content,
	.wp-block-columns:has(.wp-block-sggw-section-navigation)
		> .wp-block-column:not(:has(.wp-block-sggw-section-navigation)) {
		flex-basis: 100% !important;
		inline-size: 100%;
		max-inline-size: 100%;
	}
}

/*
 * Local navigation intentionally owns its row metrics instead of inheriting
 * them from the desktop Megamenu. The first page level follows the Danish
 * Design System's 16/24 typography and 40 px minimum row; nested pages use
 * 14/21 typography. The unitless line height scales with text up to 200%,
 * while both levels start on the same inline axis.
 */
.sggw-section-navigation__list--level-0
	> .sggw-section-navigation__item
	> .sggw-section-navigation__link {
	min-block-size: var(--wp--preset--spacing--60);
	padding-block: max(4px, 0.25em);
	padding-inline: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
}

.sggw-section-navigation__list--level-1
	> .sggw-section-navigation__item
	> .sggw-section-navigation__link {
	min-block-size: var(--wp--preset--spacing--60);
	padding-block: max(4px, 0.25em);
	padding-inline-end: var(--wp--preset--spacing--30);
	padding-inline-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.sggw-section-navigation__item.is-current
	> .sggw-section-navigation__link {
	font-weight: var(--wp--custom--typography--font-weight--semibold);
}

.sggw-section-navigation__root-link[aria-current="page"]::before,
.sggw-section-navigation__item.is-current
	> .sggw-section-navigation__link::before {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--wp--custom--line--width-strong);
	background-color: var(--wp--custom--component--navigation--local--selected-accent-color);
	content: "";
}

/*
 * Accessibility mode styles can be printed before an on-demand block
 * stylesheet. Rebind the complete local component at its own boundary so the
 * black/yellow contract does not depend on enqueue order or the parent
 * surface selected by the template.
 */
html.sggw-a11y-high-contrast
	.wp-site-blocks
	.wp-block-sggw-section-navigation {
	--wp--custom--component--navigation--background-hover: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	);
	--wp--custom--component--navigation--background-pressed: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	);
	--wp--custom--component--navigation--focus-color: var(--sggw-line);
	--wp--custom--component--navigation--foreground: var(--sggw-text);
	--wp--custom--component--navigation--local--selected-accent-color: var(--sggw-text);
	color: var(--sggw-text);
}

@media (forced-colors: active) {
	.wp-block-sggw-section-navigation a {
		color: LinkText;
		forced-color-adjust: none;
	}

	.sggw-section-navigation__root-link:focus-visible,
	.sggw-section-navigation__link:focus-visible {
		outline-color: Highlight;
	}

	.sggw-section-navigation__root-link[aria-current="page"]::before,
	.sggw-section-navigation__item.is-current
		> .sggw-section-navigation__link::before {
		background-color: Highlight;
	}
}