/*
 * Header and footer menus (core/navigation resolved by slug, see parts/*.html).
 * The <ul> of a core/navigation repeats the classes of the <nav>: selectors name the tag.
 */

/* Burger menu: open button and side panel (native overlay) */
.mainNavigation nav.wp-block-navigation {
	gap: 0;
}

.mainNavigation .wp-block-navigation__responsive-container-open {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 2rem 0 1.2rem;
	padding: 0;
	background: url("../../svg/burger-menu.svg") center / 24px 24px no-repeat;
}

.mainNavigation .wp-block-navigation__responsive-container-open svg {
	visibility: hidden;
}

/*
 * Backdrop: grey-300 at 50 % opacity, the site stays visible behind the panel (legacy .mainNavigation__overlay).
 * Same selector as core's white default overlay, scoped under .mainNavigation so that it wins.
 * Shown and hidden at once, as before: core's fade-in animation is dropped.
 */
.mainNavigation .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--grey-300) 50%, transparent);
	color: var(--wp--preset--color--grey-900);
	animation: none;
}

/*
 * Side panel sliding in from the left edge (legacy .mainNavigation__menu).
 * Not scoped to .is-menu-open: the panel keeps its place while it slides back out on close.
 */
.mainNavigation .wp-block-navigation__responsive-close {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 75%;
	max-width: 400px;
	margin: 0;
	overflow-y: auto;
	background: var(--wp--preset--color--afb-white);
	box-shadow: 0 0 25px var(--wp--preset--color--grey-900);
	transform: translateX(-120%);
}

/* At rest no transform, so that the backdrop below is fixed to the viewport, not to the panel */
.mainNavigation .is-menu-open .wp-block-navigation__responsive-close {
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* Keep the closed overlay displayed (above the page, inert to clicks) until the panel is out */
	.mainNavigation .wp-block-navigation__responsive-container {
		z-index: 100000;
		transition: display 0.5s allow-discrete;
	}

	.mainNavigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		pointer-events: none;
	}

	.mainNavigation .wp-block-navigation__responsive-close {
		transition: transform 0.5s ease-out;
	}

	/* Start of the opening slide: the panel enters from off-screen */
	@starting-style {
		.mainNavigation .is-menu-open .wp-block-navigation__responsive-close {
			transform: translateX(-120%);
		}
	}
}

.mainNavigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
	position: relative;
	padding-top: 8rem;
}

.mainNavigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
	top: 2.4rem;
	right: 0.8rem;
	z-index: auto;
	padding: 0.4rem;
	transform: none;
}

/*
 * A click on the backdrop closes the menu, as the legacy overlay button did: the close button
 * spreads an empty hit area over the viewport, painted under the panel.
 */
.mainNavigation .is-menu-open .wp-block-navigation__responsive-container-close::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
}

/* Panel layout and link text, kept while the panel slides out (core drops its own with .is-menu-open) */
.mainNavigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.2rem;
	border-top: 1px solid var(--wp--preset--color--grey-400);
	color: var(--wp--preset--color--grey-900);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.8;
}

.mainNavigation .wp-block-navigation__responsive-container ul.wp-block-navigation__container {
	align-items: flex-start;
	gap: 0;
}

.mainNavigation .is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--grey-900);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.8;
}

@media (min-width: 990px) {
	.mainNavigation .wp-block-navigation__responsive-close {
		width: 30%;
	}
}

/* Topics menu: one uppercase line, overflowing links under "more" (priority-plus variation) */
.themeMenu {
	position: relative;
	z-index: 2;
}

.themeMenu > nav.wp-block-navigation {
	display: none;
}

@media (min-width: 1280px) {
	.themeMenu {
		width: 1200px;
		margin: 0 auto;
	}

	.themeMenu > nav.wp-block-navigation {
		display: flex;
		gap: 2rem;
		margin: 2rem 2rem 3.2rem 40px;
		font-size: 1.3rem;
		font-weight: 500;
		text-transform: uppercase;
	}
}

.themeMenu ul.wp-block-navigation__container {
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.themeMenu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--grey-900);
	text-decoration: none;
}

.themeMenu .current-menu-item {
	border-bottom: 3px solid var(--wp--preset--color--afb-light-blue);
}

/*
 * Topic links (bar and "more" panel, not the "more" button): the 3px underline is an outer box-shadow, painted
 * below the link without taking any room, transparent at rest. It sits exactly on the border of the current item.
 * Hover thickens the text with a text-shadow instead of a bolder weight, which would widen the link.
 */
.themeMenu .wp-block-navigation-item__content:not(.afb-navigation-more__toggle) {
	box-shadow: 0 3px 0 0 transparent;
}

.themeMenu .wp-block-navigation-item__content:not(.afb-navigation-more__toggle):hover,
.themeMenu .wp-block-navigation-item__content:not(.afb-navigation-more__toggle):focus-visible {
	box-shadow: 0 3px 0 0 var(--wp--preset--color--afb-light-blue);
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.themeMenu .wp-block-navigation-item__content:not(.afb-navigation-more__toggle) {
		transition: box-shadow 0.3s ease-in-out;
	}
}

/* Grey footer: two levels, submenus always open */
.mainFooter__body {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-weight: 300;
}

.mainFooter__body nav.wp-block-navigation {
	display: block;
}

.mainFooter__body ul.wp-block-navigation__container {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	gap: 0;
	padding-left: 40px;
}

.mainFooter__body ul.wp-block-navigation__container > .wp-block-navigation-item {
	display: block;
	width: 100%;
	max-width: calc(50% - 1.2rem);
	margin: 0 1.2rem 2rem 0;
}

.mainFooter__body ul.wp-block-navigation__container > .wp-block-navigation-item:nth-child(odd) {
	margin-right: 0;
}

.mainFooter__body .wp-block-navigation .has-child.open-always > .wp-block-navigation__submenu-container {
	display: flex;
	flex-flow: column wrap;
	gap: 0;
	min-width: 0;
	padding: 0 0 0 40px;
}

.mainFooter__body .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	display: inline-block;
	margin-bottom: 1.2rem;
	padding: 0;
	color: var(--wp--preset--color--grey-900);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.6;
}

.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	font-size: 1.4rem;
	font-weight: 700;
}

@media (min-width: 990px) {
	.mainFooter__body ul.wp-block-navigation__container > .wp-block-navigation-item,
	.mainFooter__body ul.wp-block-navigation__container > .wp-block-navigation-item:nth-child(odd) {
		max-width: calc(25% - 2rem);
		margin-right: 2rem;
	}

	.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
		margin-bottom: 0;
		font-size: 1.6rem;
	}

	.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		font-size: 2rem;
	}
}

/* Black footer: footer-secondary menu and cookie link on the same line */
.mainFooter__footer .mainFooter__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: calc(1.2rem + 40px);
	font-size: 1.2rem;
}

.mainFooter__footer nav.wp-block-navigation,
.mainFooter__footer ul.wp-block-navigation__container {
	display: contents;
}

.mainFooter__footer .wp-block-navigation-item {
	display: block;
	width: 50%;
}

.mainFooter__footer .wp-block-navigation-item__content {
	display: inline-block;
	margin-bottom: 1.2rem;
	padding: 0;
	color: var(--wp--preset--color--afb-white);
}

@media (min-width: 990px) {
	.mainFooter__footer .mainFooter__inner {
		font-size: 1.4rem;
	}

	.mainFooter__footer .wp-block-navigation-item {
		width: auto;
	}

	.mainFooter__footer .wp-block-navigation-item__content {
		margin-bottom: 0;
	}
}

/*
 * Burger, grey footer, black footer and cookie links: the underline is always drawn, transparent at rest, and only
 * its colour changes on hover, so the layout never moves.
 */
.mainNavigation .is-menu-open .wp-block-navigation-item__content,
.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content,
.mainFooter__footer .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: transparent;
}

.mainNavigation .is-menu-open .wp-block-navigation-item__content:hover,
.mainNavigation .is-menu-open .wp-block-navigation-item__content:focus-visible,
.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:focus-visible,
.mainFooter__footer .wp-block-navigation-item__content:hover,
.mainFooter__footer .wp-block-navigation-item__content:focus-visible {
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	.mainNavigation .is-menu-open .wp-block-navigation-item__content,
	.mainFooter__body nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content,
	.mainFooter__footer .wp-block-navigation-item__content {
		transition: text-decoration-color 0.3s ease-in-out;
	}
}

/* Former compiled theme stylesheet: these rules used to load after the ones above, keep them last. */

.themeMenu {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.themeMenu .current-menu-item {
	border-bottom: 3px solid var(--wp--preset--color--afb-light-blue);
}