/* Navigation
----------------------------------------------------------------------------- */
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);

	&:hover {
		color: var(--wp--preset--color--accent);
	}
}

/* Drop nav link padding
----------------------------------------------------------------------------- */

header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a,
header .wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
}

/* Active navigation links
----------------------------------------------------------------------------- */
.wp-block-navigation__container .current-menu-item > a,
.wp-block-navigation__container .has-child button:hover,
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

/* Drop nav
----------------------------------------------------------------------------- */
header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--normal);
	border-radius: var(--wp--custom--radius--md);
	min-width: 14.0625rem !important;
	margin-left: calc(var(--wp--preset--spacing--30) * -1);
	padding: 0;
	z-index: 20 !important;
	box-shadow: var(--wp--preset--shadow--md);
}

header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Add margin to sub menu icon
----------------------------------------------------------------------------- */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--30);
}

/* Desktop dropdown and hover bridge
----------------------------------------------------------------------------- */
@media (min-width: 921px) {

	header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 1.75rem);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		clip-path: inset(0 0 100% 0);
		transition: clip-path 280ms ease, opacity 200ms ease;
	}

	header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		clip-path: inset(0 0 0 0);
	}

	/* Invisible hover bridge across the gap between the item and the dropdown.
	------------------------------------------------------------------------- */
	header .wp-block-navigation .has-child::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 1.75rem;
	}
}

/* Mobile navigation
----------------------------------------------------------------------------- */

@media only screen and (max-width: 920px) {

	/* The header bar is the positioning context for the slide-down menu.
	------------------------------------------------------------------------- */
	.site-header > .wp-block-group {
		position: relative;
		z-index: 30;
	}

	.site-header nav.wp-block-navigation {
		position: static;
	}

	/* Keep panel geometry stable while its display state transitions.
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container {
		position: absolute;
		inset: 100% 0 auto 0;
		display: none;
		width: 100%;
		height: auto;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		background-color: transparent;
		animation: none;
		transform: none;
		z-index: 50;
		pointer-events: none;
		transition: display 220ms allow-discrete;
	}

	/* Collapse to a hamburger at this width (overrides core's 37.5rem).
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

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

	/* Keep the hidden toggle focusable for core's return-focus behavior.
	------------------------------------------------------------------------- */
	.site-header nav.wp-block-navigation:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
		opacity: 0;
		pointer-events: none;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: block;
		pointer-events: auto;
	}

	.site-header .wp-block-navigation__responsive-container-content {
		clip-path: inset(0 0 100% 0);
		transition: clip-path 220ms ease;
	}

	.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
		clip-path: inset(0);
	}

	@starting-style {

		.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
			clip-path: inset(0 0 100% 0);
		}
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
		width: 100%;
	}

	/* Toggle icon colors override core SVG selectors.
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container-open svg,
	.site-header .wp-block-navigation__responsive-container-open svg path,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close svg,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close svg path {
		fill: var(--wp--preset--color--primary) !important;
		color: var(--wp--preset--color--primary) !important;
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	/* The sliding panel itself.
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
		max-height: 80dvh;
		overflow-y: auto;
		padding: var(--wp--preset--spacing--60) !important;
		box-shadow: var(--wp--preset--shadow--md);
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__container,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		flex-direction: column;
		align-items: stretch !important;
		justify-content: flex-start;
		gap: 0;
		width: 100% !important;
		text-align: left;
		background-color: transparent;
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
		width: 100%;
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: var(--wp--preset--spacing--30) 0;
	}

	/* Mobile link colors override the desktop navigation rule.
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--wp--preset--color--base-soft);
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--preset--color--base);
	}

	/* Submenus: flatten + indent inside the dark panel.
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		position: static;
		min-width: 0 !important;
		margin: 0;
		padding: 0 0 0 var(--wp--preset--spacing--40);
		border: none;
		background-color: transparent;
		box-shadow: none !important;
		padding-top: var(--wp--preset--spacing--40) !important;
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-bottom: none;
		color: var(--wp--preset--color--base-soft);
	}

	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--base);
	}

	/* Close control aligned with the menu toggle
	------------------------------------------------------------------------- */
	.site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 1.5625rem;
		right: 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		color: var(--wp--preset--color--contrast);
		z-index: 60;
	}

	body.admin-bar .site-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5625rem);
	}

	.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}
}

/* Reduced motion
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.site-header .wp-block-navigation__responsive-container,
	.site-header .wp-block-navigation__responsive-container-content,
	header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		transition: none;
	}
}