/* Core Navigation uses the mockup's header row and overlay drawer. */
.site-header nav.wp-block-navigation.site-nav {
	margin: 0;
	gap: 0;
}

.site-header .wp-block-navigation.site-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-s);
}

.site-header .wp-block-navigation.site-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding-block: var(--space-xs);
	color: var(--ink);
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

.site-header .wp-block-navigation.site-nav .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation.site-nav .wp-block-navigation-item__content[aria-current] {
	border-bottom-color: var(--crimson);
}

.site-header .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	width: 5.625rem;
	min-width: 5.625rem;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	padding: var(--space-2xs) var(--space-3xs);
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: var(--step--1);
	font-weight: 800;
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--stone);
}

.site-header .wp-block-navigation__responsive-container-open.always-shown {
	font-size: var(--step--1);
	font-weight: 800;
}

.site-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px currentColor, 0 6px currentColor;
}

.site-header .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

/* Keep member actions and Menu on one aligned row on narrow screens. */
@media (width < 40rem) {
	.site-header .brand__logo img {
		width: 3rem;
		height: 3rem;
	}

	.site-header .site-header__utility {
		align-items: center;
		padding-inline-end: 0;
	}

	.site-header .site-header__utility .agora-auth-actions {
		flex: 0 0 auto;
		min-width: max-content;
	}

	.site-header .site-header__utility .agora-auth-actions--guest .wp-block-button.btn {
		display: none;
	}

	.site-header .site-header__utility .agora-auth-actions--member .header-actions {
		align-items: center;
		flex-wrap: nowrap;
		gap: var(--space-3xs);
	}

	.site-header .site-header__utility .agora-auth-actions--member .wp-block-button.btn {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.site-header .site-header__utility .agora-auth-actions--member .wp-block-button__link {
		min-height: 44px;
		padding-inline: var(--space-2xs);
		font-size: var(--step--2);
		white-space: nowrap;
	}
}

@media (width < 24rem) {
	.site-header .brand__logo img {
		width: 2.5rem;
		height: 2.5rem;
	}

	.site-header .site-header__utility .agora-auth-actions--member .wp-block-button:has(> .wp-block-button__link[href*="action=logout"]) {
		display: none;
	}
}

@media (min-width: 40rem) {
	.site-header .site-header__utility {
		grid-column: 2 / -1;
	grid-row: 1;
	width: 100%;
	justify-self: stretch;
	justify-content: flex-end;
	padding-inline-end: calc(5.625rem + var(--space-s));
	}

	.site-header .wp-block-navigation.site-nav {
		grid-column: 2 / -1;
		grid-row: 1;
		width: 100%;
		justify-self: stretch;
	}

	.site-header .wp-block-navigation__responsive-container-open.always-shown {
		margin-left: auto;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--scrim);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 0;
}

.drawer {
	width: min(26rem, 100%);
	min-height: 100%;
	max-height: 100vh;
	overflow-y: auto;
	margin-left: auto;
	padding: var(--space-m) var(--space-l) var(--space-xl);
	border-left: var(--ring) solid var(--blue);
	background: var(--paper);
	text-align: left;
}

.drawer .wp-block-navigation-overlay-close {
	display: flex;
	position: static;
	width: 9.0625rem;
	min-width: 9.0625rem;
	min-height: 3.0625rem;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: var(--space-2xs) var(--space-s);
	border: var(--rule) solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-weight: 800;
}

.drawer .wp-block-navigation-overlay-close svg {
	display: none;
}

.drawer .wp-block-navigation-overlay-close::after {
	content: "Chiudi menu";
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation__container {
	display: grid;
	gap: 1px !important;
	margin-top: var(--space-s);
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding-block: var(--space-2xs);
	color: var(--ink);
	font-size: var(--step-1);
	font-weight: 800;
	text-decoration: none;
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	position: static;
	display: block;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	transform: none;
	transition: none;
	visibility: visible;
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-submenu {
	display: block;
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-submenu__toggle {
	display: none;
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation-item__content {
	padding-left: 0;
	padding-right: 0;
	font-size: var(--step-1);
	font-weight: 800;
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-left: var(--space-m);
	padding-right: var(--space-m);
	font-size: var(--step-0);
	font-weight: 700;
}

@media (max-width: 39.999rem) {
	.drawer .wp-block-navigation.drawer__menu .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		max-width: 20rem;
		white-space: normal;
	}
}

.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-item__content:hover,
.drawer .wp-block-navigation.drawer__menu .wp-block-navigation-item__content[aria-current] {
	color: var(--blue-ink);
}

.site-footer .wp-block-navigation.footer-menu .wp-block-navigation__container {
	display: block;
	columns: 2 12rem;
	column-gap: var(--space-l);
	column-fill: balance;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .wp-block-navigation.footer-menu .wp-block-navigation-item {
	display: block;
	break-inside: avoid;
	padding-block: var(--space-3xs);
}

.site-footer .wp-block-navigation.footer-menu .wp-block-navigation__submenu-container {
	position: static;
	display: block;
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0 0 0 var(--space-s);
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	columns: 1;
	opacity: 1;
	transform: none;
	transition: none;
	visibility: visible;
}

.site-footer .wp-block-navigation.footer-menu .wp-block-navigation__submenu-icon {
	display: none;
}

.site-footer .footer-menu .wp-block-navigation-item__content {
	color: var(--blue-light);
	font-size: var(--step--1);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wp-block-navigation-item__content .lock {
	flex: none;
}

@media (min-width: 70rem) {
	.site-header {
		position: relative;
	}

	.site-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
		background: transparent;
		visibility: visible;
	}

	.site-header .site-header__utility {
		position: absolute;
		top: var(--space-l);
		right: max(
			calc(var(--gutter) + 5.625rem + var(--space-s)),
			calc((100% - var(--container)) / 2 + 5.625rem + var(--space-s))
		);
		z-index: 1;
		width: auto;
		min-height: 44px;
		align-items: center;
		justify-self: auto;
		justify-content: flex-end;
		padding-inline-end: 0;
	}

	.site-header .wp-block-navigation.site-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		justify-self: stretch;
		position: static;
	}

	.site-header .wp-block-navigation__responsive-container-open.always-shown {
		display: inline-flex;
		position: absolute;
		top: var(--space-l);
		right: max(var(--gutter), calc((100% - var(--container)) / 2));
		z-index: 1;
	}

	.site-header .wp-block-navigation.site-nav .wp-block-navigation__container {
		gap: var(--space-l);
		justify-content: flex-start;
	}
}
