/* Header menu: hover colour and a white dropdown card. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--color-1);
}
.wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 240px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--color-7) !important;
	border-radius: var(--wp--preset--border-radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
	background: var(--wp--preset--color--color-10);
	color: var(--wp--preset--color--color-3);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--color-8);
}
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	width: 10px;
	height: 10px;
}

/* Footer menus: one link per line, no dropdowns. */
.wp-block-navigation.is-style-footer-menu {
	gap: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 2.05;
}
.wp-block-navigation.is-style-footer-menu .wp-block-navigation__container {
	gap: 0;
}

/*
 * Main menu on small screens. Below 1100px the full menu no longer fits next to the logo, phone
 * and button, so the hamburger takes over (core only does that below 600px). The hamburger sits
 * at the right edge of the header, and the overlay uses the dark colours of the site with
 * submenus that fold open with their own button.
 */
@media (max-width: 1099px) {
	.wp-block-group.is-style-site-header .wp-block-navigation.is-style-site-menu {
		order: 3;
	}
	/* Phone and Contact button move to the right, next to the hamburger. */
	.wp-block-group.is-style-site-header .wp-block-navigation.is-style-site-menu + .wp-block-group {
		margin-left: auto;
	}
	.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--color-8);
	color: var(--wp--preset--color--color-3);
}
.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
}

/* The open overlay. */
.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 18px clamp(20px, 3.9vw, 56px) 40px; /* 18px puts the close button exactly where the hamburger was. */
}
.wp-block-navigation.is-style-site-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0; /* Positioned in the dialog, which already has the side padding of the overlay. */
	right: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--color-5);
	border-radius: 50%;
	color: var(--wp--preset--color--color-10);
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 72px;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch !important; /* The desktop menu is centred; in the overlay the items run full width. */
	gap: 0;
	text-align: left;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--color-5);
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.2;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-site-menu .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--color-1);
}

/* Submenu buttons and opened submenus; folding them is done by the Blueprint Blocks plugin. */
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation-submenu__toggle {
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--color-5);
	border-radius: 50%;
	color: inherit;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .has-child.is-expanded > .wp-block-navigation-submenu__toggle {
	border-color: var(--wp--preset--color--color-1);
	background: var(--wp--preset--color--color-1);
}
.wp-block-navigation.is-style-site-menu .is-menu-open .has-child.is-expanded > .wp-block-navigation__submenu-container {
	gap: 0;
	min-width: 0;
	padding: 8px 0 0 !important; /* Core pads the submenu inside the overlay with a more specific rule. */
	border: 0 !important; /* The desktop dropdown card above sets a border with !important. */
	box-shadow: none;
	background: transparent;
	color: inherit;
	align-items: flex-start !important; /* Core centres submenu items in a centred menu. */
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0;
	font-size: var(--wp--preset--font-size--medium-large);
	font-weight: 500;
	opacity: 0.8;
}
.wp-block-navigation.is-style-site-menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	opacity: 1;
}