/* ---------- language strip ---------- */
.langbar {
	position: relative;
	z-index: 30;
	min-height: 30px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* the whole header block is navy on inner pages, like the old template */
	background: var(--navy);
}

.header-float .langbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.langbar__inner {
	/* same 1920px + 8% box as the footer and the home sections */
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 8%;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.langbar__list {
	display: flex;
	align-items: flex-end;
}

.langbar__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1.5rem;
	padding: 13px 5px;
	line-height: 1.5;
	font-size: 0.9rem;
	color: var(--ink);
}

.langbar__list li {
	margin: 0;
}

.langbar__list .trp-ls-language-name {
	display: none;
}

.langbar__list img {
	width: 24px;
	height: auto;
	transition: transform 0.3s ease;
}

.langbar__list a:hover img {
	transform: scale(1.2);
}

/* ---------- header bar ---------- */
.site-header {
	position: relative;
	z-index: 40;
}

.site-header--float {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.site-header__bar {
	height: 90px;
	display: flex;
	align-items: center;
	background: var(--navy);
	transition: height 0.4s ease, background 0.4s ease;
}

.site-header--float .site-header__bar {
	background: transparent;
}

.site-header.is-stuck {
	/* keep the space the bar used to occupy so the page does not jump */
	height: 90px;
}

.site-header.is-stuck .site-header__bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	margin-top: 0;
	background: var(--navy);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	z-index: 60;
}

.site-header.is-stuck .site-header__logo img {
	transform: scale(0.8);
}

.site-header__inner {
	/* same 1920px + 8% box as .site-header__inner */
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 8%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__logo {
	display: block;
	width: 20%;
}

.site-header__logo img {
	width: 90%;
	max-width: 217px;
	height: auto;
	transition: transform 0.4s ease;
	transform-origin: left center;
}

.site-header__tools {
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mainnav__list {
	display: flex;
	align-items: center;
}

.mainnav__list a {
	position: relative;
	display: block;
	padding: 13px 1rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--white);
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.mainnav__list a:hover {
	opacity: 0.85;
}

/* current item keeps the white label and gets the orange bar, like the old site */
.mainnav__list .current-menu-item > a {
	color: var(--white);
}

.mainnav__list .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--orange);
}

.iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	margin-left: 0;
	color: var(--white);
}

.iconbtn--burger {
	display: none;
	width: 40px;
	height: 40px;
}

/* ---------- search panel ---------- */
.site-search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 70;
	background: var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	padding: 1.5rem 0;
}

.site-search__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	gap: 0.6rem;
	box-sizing: border-box;
}

.site-search__inner input {
	flex: 1;
}

/* ---------- mobile drawer ---------- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	justify-content: flex-end;
}

.drawer[hidden] {
	display: none;
}

.drawer__panel {
	position: relative;
	/* above the backdrop: they are siblings and the backdrop spans the whole
	   drawer, so without this it swallows every tap on the links */
	z-index: 1;
	width: min(360px, 84vw);
	height: 100%;
	background: var(--navy);
	color: var(--white);
	padding: 4rem 1.5rem 1.5rem;
	box-sizing: border-box;
	overflow-y: auto;
}

.drawer__close {
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	font-size: 2rem;
	line-height: 1;
	color: var(--white);
}

.drawer__list a {
	display: block;
	padding: 0.9rem 0;
	font-size: 1.2rem;
	color: var(--white);
	border-bottom: 2px solid var(--orange);
}

.drawer__search {
	display: flex;
	margin-top: 1.5rem;
	gap: 0.4rem;
}

.drawer__search input {
	flex: 1;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(0, 0, 0, 0.55);
	border: 0;
}

body.drawer-open {
	overflow: hidden;
}

/* ---------- drawer: sub-lists + language strip ---------- */
.drawer__list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 2px solid var(--orange);
}

.drawer__list .menu-item-has-children > a {
	flex: 1;
	border-bottom: 0;
}

/* the caret is its own button so the category link itself still navigates */
.drawer__sub-toggle {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	position: relative;
	color: var(--white);
}

.drawer__sub-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.menu-item-has-children.is-open > .drawer__sub-toggle::after {
	transform: rotate(-135deg);
}

.drawer__list .sub-menu {
	display: none;
	flex: 0 0 100%;
	padding: 0 0 0.8rem 0.6rem;
}

.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.drawer__list .sub-menu a {
	padding: 0.6rem 0;
	font-size: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.drawer__langs {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.drawer__langs .langbar__list {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.2rem;
}

.drawer__langs .langbar__list a {
	padding: 5px 4px;
}

.drawer__langs .langbar__list img {
	width: 20px;
}

.drawer__langs .langbar__list a:hover img {
	transform: none;
}

/* floating header: the bar overlays the first band, so the band keeps its own
   background under the bar while its content starts below it. The ported bands
   carry their own top padding, which is dropped for the first band only, so the
   heading lands on the same line on every page (bar 90px + gap). */
.header-float {
	--mx-hdr: 90px;
	--mx-hdr-gap: 72px;
}

.header-float .site-main > .sec:first-child,
.header-float .acat-hero,
.header-float .page-hero {
	padding-top: calc(var(--mx-hdr) + var(--mx-hdr-gap)) !important;
}

.header-float .site-main > .sec:first-child > .box,
.header-float .site-main > .sec:first-child > .box > .box,
.header-float .acat-hero > .acat-hero__inner,
.header-float .page-hero > .wrap {
	padding-top: 0 !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.header-float {
		--mx-hdr: 60px;
		--mx-hdr-gap: 40px;
	}

	.langbar__list a {
		padding: 13px 2px;
	}


	.site-header--float .site-header__bar {
		margin-top: 0;
		background: var(--navy);
	}

	.site-header__logo {
		width: 50%;
	}

	.site-header__logo img {
		width: 100%;
		max-width: 241px;
	}

	.site-header__tools {
		width: 50%;
	}

	.mainnav {
		display: none;
	}

	/* tablet and below: the search lives in the drawer, like the old site */
	.iconbtn--search {
		display: none;
	}

	.iconbtn--burger {
		display: flex;
	}
}

@media (max-width: 767px) {
	/* language strip is desktop-only on the old site */
	.langbar {
		display: none;
	}

	.site-header--float .site-header__bar,
	.site-header:not(.site-header--float) .site-header__bar {
		height: 60px;
		margin-top: 0;
	}

	.site-header.is-stuck,
	.site-header:not(.site-header--float).is-stuck {
		height: 60px;
	}

	.site-header__logo {
		width: 50%;
	}

	.site-header__tools {
		width: 50%;
	}
}

/* ---------- wide screens ---------- */
/* the 1rem per side on each link made the menu row look cramped past 1440:
   let the spacing grow with the viewport (39 / 52 / 69px between items) */
@media (min-width: 1440px) {
	.mainnav__list a {
		padding-left: clamp(1rem, 1.35vw, 36px);
		padding-right: clamp(1rem, 1.35vw, 36px);
	}
}