/******************************************************************
Block: Header (mediaschneider/header)

States (custom properties on .ms-header, transitions on the real properties):
- top:     transparent, big logo with white wordmark, white menu
           (homepage on desktop; every page on mobile/tablet at the top);
           pages without a picture at the top (.ms-header--plain): dark wordmark, blue burger;
- compact: white bar with shadow, small blue square, blue menu
           (.is-scrolled, set by view.js; on desktop also .ms-header--compact on all other pages);
- open:    mobile menu panel (.is-open, set by view.js).

The logo link is the blue square. The SVG (wordmark + square) overflows it,
positioned so its square covers the link. Resizing the link resizes the logo.
Square top in the SVG: 24.65 / 47.523 = 51.87 % of the width.

Breakpoint: desktop menu from 64rem (1024px), burger menu below.
******************************************************************/

.ms-header {
	--ms-header-bg: transparent;
	--ms-header-shadow: 0 5px 5px rgb(0 0 0 / 0);
	--ms-header-color: var(--wp--preset--color--white);
	--ms-logo-size: var(--ms-logo-width);
	--ms-logo-top: calc(1.6875rem + var(--ms-logo-width) * 0.5187); /* SVG 27px from the top */
	--ms-logo-text-color: var(--wp--preset--color--white);
	--ms-logo-text-opacity: 1;
	--ms-logo-text-events: auto;
	--ms-logo-shadow: drop-shadow(0 3px 3px rgb(0 0 0 / 0.16));
	--ms-header-duration: 0.5s;

	position: fixed;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
	z-index: 100;
	color: var(--ms-header-color);
	background-color: var(--ms-header-bg);
	box-shadow: var(--ms-header-shadow);
	transition:
		color var(--ms-header-duration) ease-in-out,
		background-color var(--ms-header-duration) ease-in-out,
		box-shadow var(--ms-header-duration) ease-in-out;
}

/*
Pages without a picture behind the header (.ms-header--plain): at the top, the wordmark
is dark and the burger blue, as they would be white on white.
*/
.ms-header--plain {
	--ms-header-color: var(--wp--preset--color--blue);
	--ms-logo-text-color: var(--wp--preset--color--ink);
	--ms-logo-shadow: drop-shadow(0 3px 3px rgb(0 0 0 / 0));
}

/* Compact: white bar with the small square */
.ms-header.is-scrolled {
	--ms-header-bg: var(--wp--preset--color--white);
	--ms-header-shadow: 0 5px 5px rgb(0 0 0 / 0.1);
	--ms-header-color: var(--wp--preset--color--blue);
	--ms-logo-size: var(--ms-square-compact);
	--ms-logo-top: calc((var(--ms-header-bar) - var(--ms-square-compact)) / 2);
	--ms-logo-text-opacity: 0;
	--ms-logo-text-events: none;
	--ms-logo-shadow: drop-shadow(0 3px 3px rgb(0 0 0 / 0));
}

@media (width >= 64rem) {
	.ms-header--compact {
		--ms-header-bg: var(--wp--preset--color--white);
		--ms-header-shadow: 0 5px 5px rgb(0 0 0 / 0.1);
		--ms-header-color: var(--wp--preset--color--blue);
		--ms-logo-size: var(--ms-square-compact);
		--ms-logo-top: calc((var(--ms-header-bar) - var(--ms-square-compact)) / 2);
		--ms-logo-text-opacity: 0;
		--ms-logo-text-events: none;
		--ms-logo-shadow: drop-shadow(0 3px 3px rgb(0 0 0 / 0));
	}
}

.ms-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	block-size: var(--ms-header-bar);
}


/*********************
LOGO
*********************/

.ms-header__logo {
	position: absolute;
	z-index: 2;
	inset-inline-start: var(--ms-gutter);
	inset-block-start: var(--ms-logo-top);
	inline-size: var(--ms-logo-size);
	block-size: var(--ms-logo-size);
	transition:
		inset-block-start var(--ms-header-duration) ease-in-out,
		inline-size var(--ms-header-duration) ease-in-out,
		block-size var(--ms-header-duration) ease-in-out;

	.ms-logo {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: -51.87%;
		inline-size: 100%;
		max-inline-size: none;
		block-size: auto;
		aspect-ratio: 47.523 / 117;
		overflow: visible;
		pointer-events: none;
		filter: var(--ms-logo-shadow);
		transition: filter var(--ms-header-duration) ease-in-out;
	}

	.ms-logo__square {
		fill: var(--wp--preset--color--blue);
	}

	.ms-logo__text {
		fill: var(--ms-logo-text-color);
		opacity: var(--ms-logo-text-opacity);
		pointer-events: var(--ms-logo-text-events);
		transition:
			opacity var(--ms-header-duration) ease-in-out,
			fill var(--ms-header-duration) ease-in-out;
	}
}


/*********************
MENU AND LANGUAGE SWITCHER
*********************/

.ms-nav__list {
	display: flex;
	list-style: none;
}

/*
The underline is a pseudo-element, not text-decoration: Chrome doesn't repaint a
transitioned text-decoration-color when the underline lies below the link box
(hover showed nothing, the underline only flashed on mouse out).
*/
.ms-nav__link {
	position: relative;
	display: block;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;

	&::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: calc(100% + 0.2em);
		block-size: 2px;
		background-color: currentColor;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}

	&:is(:hover, :focus-visible, .is-active, [aria-current="page"])::after {
		opacity: 1;
	}
}

.ms-lang {
	display: flex;
	align-items: center;
	list-style: none;
	font-size: 0.875rem;
	line-height: normal;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ms-lang__item + .ms-lang__item {
	margin-inline-start: 0.5rem;
	padding-inline-start: 0.5rem;
	border-inline-start: 1px solid var(--ms-lang-divider, currentColor);
}

.ms-lang__link {
	display: block;
	font-weight: 300;
	color: inherit;
	text-decoration: none;

	.is-active & {
		font-weight: 700;
	}

	&:is(a):hover {
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}
}


/*********************
DESKTOP (≥ 64rem)
*********************/

@media (width >= 64rem) {

	.ms-header__toggle {
		display: none;
	}

	.ms-header__menu {
		display: flex;
		align-items: center;
		gap: var(--ms-nav-gap);
	}

	.ms-nav__list {
		gap: var(--ms-nav-gap);
	}

	.ms-nav__link {
		font-size: 0.875rem;
	}

	/* Homepage intro: the menu slides down and fades in, 0.35s after the hero animation started (hero/style.css) */
	@media (prefers-reduced-motion: no-preference) {
		.ms-header--home .ms-header__menu {
			animation: ms-header-menu-in 0.6s var(--ms-ease-out) calc(var(--ms-intro-start) + 0.35s) both;
		}
	}
}

@keyframes ms-header-menu-in {
	from {
		opacity: 0;
		translate: 0 -2.6875rem;
	}
}


/*********************
MOBILE AND TABLET (< 64rem)
*********************/

@media (width < 64rem) {

	/* Burger: three 30 × 4px bars, 11px apart. Open: an X. Centred on the logo square. */
	.ms-header__toggle {
		position: absolute;
		z-index: 2;
		inset-inline-end: calc(var(--ms-gutter) - 0.5625rem);
		inset-block-start: calc(var(--ms-logo-top) + var(--ms-logo-size) / 2 - 1.5rem);
		display: grid;
		place-items: center;
		inline-size: 3rem;
		block-size: 3rem;
		padding: 0;
		color: var(--wp--preset--color--blue);
		background: none;
		border: 0;
		cursor: pointer;
		transition: inset-block-start var(--ms-header-duration) ease-in-out;
	}

	.ms-header__burger,
	.ms-header__burger::before,
	.ms-header__burger::after {
		display: block;
		inline-size: 1.875rem;
		block-size: 0.25rem;
		background-color: currentColor;
		transition:
			translate 0.3s ease-in-out,
			rotate 0.3s ease-in-out,
			background-color 0.3s ease-in-out;
	}

	.ms-header__burger {
		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-inline-start: 0;
		}

		&::before {
			translate: 0 -0.6875rem;
		}

		&::after {
			translate: 0 0.6875rem;
		}
	}

	.is-open .ms-header__burger {
		background-color: transparent;

		&::before {
			translate: 0;
			rotate: 45deg;
		}

		&::after {
			translate: 0;
			rotate: -45deg;
		}
	}

	/* Menu panel */
	.ms-header__menu {
		--ms-lang-divider: var(--wp--preset--color--navy);

		position: absolute;
		z-index: 1;
		inset-block-start: 0;
		inset-inline: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3.0625rem;
		max-block-size: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		overflow-y: auto;
		padding: 10.0625rem var(--ms-gutter) 2.625rem;
		color: var(--wp--preset--color--blue);
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 3px 5.5px rgb(6 34 64 / 0.1);
		visibility: hidden;
		opacity: 0;
		translate: 0 -1rem;
		transition:
			opacity 0.3s ease-in-out,
			translate 0.3s ease-in-out,
			visibility 0s 0.3s;
	}

	.ms-header.is-open {
		--ms-logo-text-color: var(--wp--preset--color--ink);
		--ms-logo-shadow: drop-shadow(0 3px 3px rgb(0 0 0 / 0));

		.ms-header__menu {
			visibility: visible;
			opacity: 1;
			translate: 0;
			transition-delay: 0s;
		}
	}

	.ms-nav__list {
		flex-direction: column;
		align-items: flex-end;
		gap: 1.5rem;
	}

	.ms-nav__link {
		font-size: 0.75rem;
		text-align: end;
	}
}


/*********************
EDITOR
The site editor shows the header in its compact look, in the flow.
*********************/

.editor-styles-wrapper .ms-header {
	position: relative;
	inset-block-start: 0;
	--ms-header-bg: var(--wp--preset--color--white);
	--ms-header-color: var(--wp--preset--color--blue);
	--ms-logo-size: var(--ms-square-compact);
	--ms-logo-top: calc((var(--ms-header-bar) - var(--ms-square-compact)) / 2);
	--ms-logo-text-opacity: 0;

	.ms-header__menu {
		animation: none;
	}
}