/* --------------------------------------------------------------------------
 * Site header — fixed, glass, scroll-aware
 *
 * States (toggled in navigation.js):
 *   .site-header--transparent  overlays a dark hero; logo/nav are light
 *   .is-scrolled               solid glass surface after leaving the top
 *   .is-hidden                 slid up out of view (scrolling down)
 * ---------------------------------------------------------------------- */
.site-header {
	position: fixed;
	z-index: var(--jai-z-header);
	top: 0;
	right: 0;
	left: 0;
	/* Bar surface lives on a pseudo-element so it can fade in/out
	 * independently of the floating menu pill. Transparent by default. */
	background: transparent;
	transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* Full-width glass bar — fades in on scroll and on inner ("solid") pages. */
.site-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--jai-glass-bg-header);
	border-bottom: 1px solid var(--jai-glass-border-header);
	-webkit-backdrop-filter: var(--jai-glass-blur);
	backdrop-filter: var(--jai-glass-blur);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	opacity: 0;
	transition: opacity var(--jai-transition);
}

/* Inverted palette on the navy glass bar (scrolled, or solid inner pages):
 * branding, nav links, CTA and toggle all switch to light so they stay
 * readable against the transparent-blue surface. */
.site-header.is-scrolled .site-branding__name,
.site-header--solid .site-branding__name {
	color: var(--jai-color-white);
}

.site-header.is-scrolled .site-branding__description,
.site-header--solid .site-branding__description {
	color: rgba(255, 255, 255, 0.78);
}

.site-header.is-scrolled .site-header__toggle,
.site-header--solid .site-header__toggle {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.site-header.is-scrolled .site-header__toggle-line,
.site-header.is-scrolled .site-header__toggle-line::before,
.site-header.is-scrolled .site-header__toggle-line::after,
.site-header--solid .site-header__toggle-line,
.site-header--solid .site-header__toggle-line::before,
.site-header--solid .site-header__toggle-line::after {
	background: var(--jai-color-white);
}

.site-header.is-scrolled::after,
.site-header--solid::after,
.site-header.has-panel-open::after {
	opacity: 1;
}

/* Hide on scroll-down, reveal on scroll-up. */
.site-header.is-hidden {
	transform: translateY(-100%);
}

/* Transparent overlay state (homepage hero, before scrolling):
 * branding sits directly on the hero, so it is light. */
.site-header--transparent .site-branding__name {
	color: var(--jai-color-white);
}

.site-header--transparent .site-branding__description {
	color: rgba(255, 255, 255, 0.78);
}

.site-header--transparent .site-header__toggle {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.site-header--transparent .site-header__toggle-line,
.site-header--transparent .site-header__toggle-line::before,
.site-header--transparent .site-header__toggle-line::after {
	background: var(--jai-color-white);
}

/* Offsets so fixed header never covers content. */
.has-fixed-header {
	padding-top: var(--jai-header-height);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--jai-header-height);
	padding-block: var(--jai-space-sm);
	gap: var(--jai-space-lg);
}

.site-branding {
	display: grid;
	gap: 0.1rem;
}

.site-branding__name {
	display: inline-flex;
	align-items: baseline;
	color: var(--jai-color-primary);
	font-family: var(--jai-font-heading);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	/* Per-letter stagger step; drives the left-to-right wave. */
	--jai-wordmark-step: 0.05s;
}

/* Accent dot at the end of the wordmark for a true logo feel. */
.site-branding__name::after {
	content: "";
	width: 0.34em;
	height: 0.34em;
	margin-left: 0.12em;
	border-radius: 50%;
	background-color: var(--jai-color-accent-2);
	align-self: flex-end;
	transform: translateY(-0.08em);
}

/* Fallback (no JS): keep a gentle hover color shift on the whole wordmark. */
.site-branding__name:not(.site-branding__name--split):hover,
.site-branding__name:not(.site-branding__name--split):focus-visible {
	color: var(--jai-color-primary-hover);
}

/* Split wordmark: each glyph is its own animatable cell. */
.site-branding__letter {
	display: inline-block;
	white-space: pre;
	transform-origin: center bottom;
}

/* Letter wave: grows then shrinks while sweeping toward the accent color.
 * Color is omitted at 0%/100% so the resting hue (primary, or white over the
 * transparent hero) is preserved and only the mid-frame tints to accent. */
@keyframes jai-wordmark-letter {
	0% {
		transform: translateY(0) scale(1);
	}
	45% {
		transform: translateY(-0.16em) scale(1.34);
		color: var(--jai-color-accent-2);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes jai-wordmark-dot {
	0% {
		transform: translateY(-0.08em) scale(1);
	}
	45% {
		transform: translateY(-0.24em) scale(1.45);
		background-color: var(--jai-color-accent-soft);
	}
	100% {
		transform: translateY(-0.08em) scale(1);
	}
}

.site-branding__name--split:hover .site-branding__letter,
.site-branding__name--split:focus-visible .site-branding__letter {
	animation: jai-wordmark-letter 0.6s ease both;
	animation-delay: calc(var(--jai-letter-index) * var(--jai-wordmark-step));
}

/* Dot fires last, right after the final letter, completing the sweep. */
.site-branding__name--split:hover::after,
.site-branding__name--split:focus-visible::after {
	animation: jai-wordmark-dot 0.6s ease both;
	animation-delay: calc(var(--jai-letter-count) * var(--jai-wordmark-step));
}

@media (prefers-reduced-motion: reduce) {
	.site-branding__name--split:hover .site-branding__letter,
	.site-branding__name--split:focus-visible .site-branding__letter,
	.site-branding__name--split:hover::after,
	.site-branding__name--split:focus-visible::after {
		animation: none;
	}

	.site-branding__name--split:hover,
	.site-branding__name--split:focus-visible {
		color: var(--jai-color-primary-hover);
	}
}

.site-branding__description {
	margin: 0;
	color: var(--jai-color-muted);
	font-size: 0.78rem;
	line-height: 1.3;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	max-height: 3rem;
	width: auto;
}

.site-header__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-md);
	background: var(--jai-color-white);
}

.site-header__toggle-line {
	position: relative;
}

.site-header__toggle-line,
.site-header__toggle-line::before,
.site-header__toggle-line::after {
	display: block;
	width: 1.2rem;
	height: 2px;
	background: var(--jai-color-primary);
	border-radius: 99px;
	transition: transform var(--jai-transition), opacity var(--jai-transition);
}

.site-header__toggle-line::before,
.site-header__toggle-line::after {
	content: "";
	position: absolute;
	left: 0;
}

.site-header__toggle-line::before {
	transform: translateY(-0.42rem);
}

.site-header__toggle-line::after {
	transform: translateY(0.42rem);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line {
	background: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line::before {
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-line::after {
	transform: rotate(-45deg);
}

.site-header__nav {
	position: fixed;
	z-index: var(--jai-z-menu);
	inset: var(--jai-header-height) 0 auto;
	display: grid;
	gap: var(--jai-space-xs);
	max-height: calc(100vh - var(--jai-header-height));
	overflow-y: auto;
	padding: var(--jai-space-lg) var(--jai-space-md) var(--jai-space-xl);
	/* Navy glass surface matching the desktop header bar. Opaque enough to fully
	 * hide the page content scrolling beneath the open panel. */
	background: var(--jai-color-primary);
	border: 0;
	border-bottom: 1px solid var(--jai-glass-border-header);
	border-radius: 0 0 var(--jai-radius-xl) var(--jai-radius-xl);
	box-shadow: var(--jai-shadow-soft);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.5rem);
	transition: opacity var(--jai-transition), transform var(--jai-transition);
}

.site-header__nav.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* When the mobile panel is open the bar must be opaque navy to match the
 * panel — they read as one continuous solid surface. */
.site-header.has-panel-open::after {
	background: var(--jai-color-primary);
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Open panel uses light-on-navy content: the bar + panel are navy while the
 * mobile menu is open, so branding/nav/toggle switch to light to stay readable
 * — regardless of the underlying transparent/scrolled/solid state. */
.site-header.has-panel-open .site-branding__name {
	color: var(--jai-color-white);
}

.site-header.has-panel-open .site-branding__description {
	color: rgba(255, 255, 255, 0.78);
}

.site-header.has-panel-open .menu a {
	color: rgba(255, 255, 255, 0.92);
}

.site-header.has-panel-open .menu a:hover {
	color: var(--jai-color-white);
	background: rgba(255, 255, 255, 0.1);
}

.site-header.has-panel-open .site-header__toggle {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
}

.site-header.has-panel-open .site-header__toggle-line,
.site-header.has-panel-open .site-header__toggle-line::before,
.site-header.has-panel-open .site-header__toggle-line::after {
	background: var(--jai-color-white);
}

.menu {
	display: flex;
	flex-direction: column;
	gap: var(--jai-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	padding-inline: var(--jai-space-sm);
	color: var(--jai-color-primary);
	font-size: var(--jai-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--jai-radius-md);
	transition: color var(--jai-transition), background-color var(--jai-transition);
}

.menu a:hover {
	color: var(--jai-color-accent);
	background: var(--jai-color-surface);
}

.site-header__cta {
	width: 100%;
	margin-top: var(--jai-space-lg);
}

/* On the navy glass bar a navy CTA would vanish — flip it to a white pill
 * with navy text so it pops against the transparent-blue surface. */
.site-header.is-scrolled .site-header__cta,
.site-header--solid .site-header__cta {
	background: var(--jai-color-white);
	border-color: var(--jai-color-white);
	color: var(--jai-color-primary);
}

.site-header.is-scrolled .site-header__cta:hover,
.site-header--solid .site-header__cta:hover {
	background: rgba(255, 255, 255, 0.88);
	border-color: rgba(255, 255, 255, 0.88);
	color: var(--jai-color-primary);
}

/* Inside the open navy mobile panel the CTA becomes a white pill with navy
 * text so it pops against the navy surface (a navy fill would vanish).
 * Placed after the scrolled/solid rules so it wins when both states apply. */
.site-header.has-panel-open .site-header__cta {
	background: var(--jai-color-white);
	border-color: var(--jai-color-white);
	color: var(--jai-color-primary);
}

.site-header.has-panel-open .site-header__cta:hover {
	background: rgba(255, 255, 255, 0.88);
	border-color: rgba(255, 255, 255, 0.88);
	color: var(--jai-color-primary);
}

.site-header__lang:empty {
	display: none;
}

/* Bar-level actions: language switcher + mobile toggle, always visible. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--jai-space-sm);
}

/* Language flag dropdown. The trigger is flag-only; the panel floats below it
 * on every breakpoint and reveals on hover / focus / click. */
.jai-lang {
	position: relative;
	display: inline-flex;
}

.jai-flag {
	display: block;
	width: 1.6rem;
	height: 1.2rem;
	border-radius: var(--jai-radius-sm);
	/* Trims the UK flag's overflowing diagonals and rounds every flag's corners. */
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	flex: 0 0 auto;
}

.jai-lang__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0.3rem 0.45rem;
	margin: 0;
	background: transparent;
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-md);
	color: var(--jai-color-primary);
	line-height: 1;
	cursor: pointer;
	transition: color var(--jai-transition), border-color var(--jai-transition), background var(--jai-transition);
}

/* Floating language panel — anchored to the trigger on every breakpoint. */
.jai-lang__menu {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	list-style: none;
	min-width: 11rem;
	margin: 0;
	padding: var(--jai-space-2xs);
	display: grid;
	gap: 0.15rem;
	background: var(--jai-color-white);
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-md);
	box-shadow: var(--jai-shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.35rem);
	transition: opacity var(--jai-transition), transform var(--jai-transition), visibility var(--jai-transition);
	z-index: var(--jai-z-menu);
}

.jai-lang:hover .jai-lang__menu,
.jai-lang:focus-within .jai-lang__menu,
.jai-lang.is-open .jai-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.jai-lang__option {
	display: flex;
	align-items: center;
	gap: var(--jai-space-xs);
	min-height: 2.6rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--jai-radius-sm);
	color: var(--jai-color-primary);
	font-size: var(--jai-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--jai-transition), background var(--jai-transition);
}

.jai-lang__option:hover {
	background: var(--jai-color-surface);
	color: var(--jai-color-accent);
}

.jai-lang__option.is-active {
	color: var(--jai-color-accent);
}

/* Trigger colors follow the bar state (all breakpoints):
 * light on the transparent hero, the navy glass bar, and the open navy panel. */
.site-header--transparent .jai-lang__trigger,
.site-header.is-scrolled .jai-lang__trigger,
.site-header--solid .jai-lang__trigger,
.site-header.has-panel-open .jai-lang__trigger {
	color: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.28);
}

.site-header--transparent .jai-lang__trigger:hover,
.site-header.is-scrolled .jai-lang__trigger:hover,
.site-header--solid .jai-lang__trigger:hover,
.site-header.has-panel-open .jai-lang__trigger:hover,
.site-header--transparent .jai-lang.is-open .jai-lang__trigger,
.site-header.is-scrolled .jai-lang.is-open .jai-lang__trigger,
.site-header--solid .jai-lang.is-open .jai-lang__trigger,
.site-header.has-panel-open .jai-lang.is-open .jai-lang__trigger {
	color: var(--jai-color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Sub-menus: mobile (collapsible accordion inside the open panel). */
.site-header__menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--jai-space-2xs);
	margin: 0 0 0 var(--jai-space-md);
	padding: 0 0 0 var(--jai-space-md);
	border-left: 2px solid var(--jai-color-border);
	list-style: none;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height var(--jai-transition), opacity var(--jai-transition), margin var(--jai-transition);
}

.site-header__menu .menu-item-has-children.is-expanded > .sub-menu {
	max-height: 30rem;
	margin: var(--jai-space-2xs) 0 var(--jai-space-xs) var(--jai-space-md);
	opacity: 1;
}

.site-header__menu .sub-menu a {
	min-height: 2.6rem;
	font-size: var(--jai-font-size-sm);
	font-weight: 600;
}

/* Mobile submenu toggle (injected by navigation.js next to the parent link). */
.site-header__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	border: 1px solid var(--jai-color-border);
	border-radius: var(--jai-radius-md);
	background: var(--jai-color-white);
	color: var(--jai-color-primary);
	cursor: pointer;
}

.site-header__submenu-toggle::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.1em) rotate(45deg);
	transition: transform var(--jai-transition);
}

.site-header__submenu-toggle[aria-expanded="true"]::after {
	transform: translateY(0.1em) rotate(225deg);
}

/* On the navy open panel, the accordion rail and submenu toggle go light. */
.site-header.has-panel-open .site-header__menu .sub-menu {
	border-left-color: rgba(255, 255, 255, 0.24);
}

.site-header.has-panel-open .site-header__submenu-toggle {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--jai-color-white);
}

/* Parent rows that carry a toggle lay the link + button on one line. */
.site-header__menu .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-header__menu .menu-item-has-children > a {
	flex: 1 1 auto;
}

.site-header__menu .menu-item-has-children > .sub-menu {
	flex: 1 0 100%;
}

/* CSS caret (used on desktop); hidden on mobile where the button drives it. */
.site-header__menu .menu-item-has-children > a::after {
	content: "";
	display: none;
}

body.has-open-menu {
	overflow: hidden;
}

@media (min-width: 1024px) {
	body.has-open-menu {
		overflow: auto;
	}

	.site-header__inner {
		min-height: var(--jai-header-height-lg);
	}

	.has-fixed-header {
		padding-top: var(--jai-header-height-lg);
	}

	.site-header__toggle {
		display: none;
	}

	.site-header__nav {
		position: static;
		max-height: none;
		overflow: visible;
		display: flex;
		align-items: center;
		/* Grow into the available space and sit to the right of the wordmark. */
		flex: 1 1 auto;
		justify-content: flex-end;
		/* Breathing room between the nav menu and the CTA button. */
		gap: var(--jai-space-xl);
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.menu {
		flex-direction: row;
		align-items: center;
		gap: var(--jai-space-xs);
	}

	/* Constant padding keeps the menu from reflowing when the pill toggles. */
	.site-header__menu {
		padding: 0.35rem 0.6rem;
		border: 1px solid transparent;
		border-radius: 999px;
		transition: background-color var(--jai-transition), border-color var(--jai-transition);
	}

	/* Floating frosted "pill" behind the menu — only at the hero top.
	 * On scroll JS removes --transparent, the pill fades to nothing, and the
	 * full-width glass bar (.site-header::after) takes over. */
	.site-header--transparent .site-header__menu {
		background: rgba(18, 26, 64, 0.32);
		-webkit-backdrop-filter: var(--jai-glass-blur);
		backdrop-filter: var(--jai-glass-blur);
		border-color: rgba(255, 255, 255, 0.18);
	}

	/* Light menu text on the transparent hero AND on the navy glass bar
	 * (scrolled / solid inner pages) — both surfaces are dark now. */
	.site-header--transparent .menu > li > a,
	.site-header.is-scrolled .menu > li > a,
	.site-header--solid .menu > li > a {
		color: rgba(255, 255, 255, 0.92);
	}

	.site-header--transparent .menu > li > a:hover,
	.site-header.is-scrolled .menu > li > a:hover,
	.site-header--solid .menu > li > a:hover {
		color: var(--jai-color-white);
	}

	.site-header__menu > .menu-item > a {
		position: relative;
		min-height: 2.5rem;
	}

	.site-header__menu > .menu-item > a:hover {
		background: transparent;
	}

	.site-header__menu > .menu-item > a::before {
		content: "";
		position: absolute;
		left: var(--jai-space-sm);
		right: var(--jai-space-sm);
		bottom: 0.35rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		opacity: 0.85;
		transition: transform var(--jai-transition);
	}

	.site-header__menu > .menu-item:hover > a::before,
	.site-header__menu > .menu-item.current-menu-item > a::before,
	.site-header__menu > .menu-item.current-menu-ancestor > a::before {
		transform: scaleX(1);
	}

	.site-header__cta {
		width: auto;
		margin-top: 0;
		margin-left: 0;
	}

	/* Language dropdown sits at the far right of the bar on desktop. */
	.site-header__lang {
		display: flex;
		align-items: center;
	}

	.jai-lang__trigger {
		min-height: 2.4rem;
		padding: 0.3rem 0.45rem;
	}

	/* Mobile accordion controls are irrelevant on desktop. */
	.site-header__submenu-toggle {
		display: none;
	}

	/* Restore the inline caret on desktop parents. */
	.site-header__menu .menu-item-has-children > a::after {
		display: inline-block;
		width: 0.4rem;
		height: 0.4rem;
		margin-left: 0.4rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.1em) rotate(45deg);
		opacity: 0.7;
		transition: transform var(--jai-transition);
	}

	/* Desktop dropdown — CSS only via :hover / :focus-within. */
	.site-header__menu .menu-item-has-children {
		position: relative;
		display: block;
	}

	.site-header__menu .menu-item-has-children > a {
		flex: none;
	}

	.site-header__menu .sub-menu {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 0;
		z-index: var(--jai-z-menu);
		flex: none;
		flex-direction: column;
		gap: var(--jai-space-2xs);
		min-width: 15rem;
		max-height: none;
		margin: 0;
		padding: var(--jai-space-sm);
		overflow: visible;
		border: 1px solid var(--jai-color-border);
		border-left: 1px solid var(--jai-color-border);
		border-radius: var(--jai-radius-lg);
		background: var(--jai-color-white);
		box-shadow: var(--jai-shadow-card);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.4rem);
		transition: opacity var(--jai-transition), transform var(--jai-transition), visibility var(--jai-transition);
	}

	/* On desktop the expanded class must not force the accordion open;
	 * hover/focus still drives visibility. */
	.site-header__menu .menu-item-has-children.is-expanded > .sub-menu {
		margin: 0;
		max-height: none;
		opacity: 0;
		visibility: hidden;
	}

	.site-header__menu .menu-item-has-children.is-expanded:hover > .sub-menu,
	.site-header__menu .menu-item-has-children.is-expanded:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.site-header__menu .sub-menu::before {
		content: "";
		position: absolute;
		top: -0.75rem;
		left: 0;
		right: 0;
		height: 0.75rem;
	}

	.site-header__menu .menu-item-has-children:hover > .sub-menu,
	.site-header__menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-header__menu .sub-menu a {
		min-height: 2.4rem;
		padding-inline: var(--jai-space-sm);
		border-radius: var(--jai-radius-sm);
	}

	.site-header__menu .sub-menu a:hover {
		background: var(--jai-color-surface);
	}
}

/* Desktop dropdown caret flips when its parent is open. */
@media (min-width: 1024px) {
	.site-header__menu .menu-item-has-children:hover > a::after,
	.site-header__menu .menu-item-has-children:focus-within > a::after {
		transform: translateY(-0.1em) rotate(225deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__nav,
	.site-header__menu .sub-menu,
	.site-header__menu > .menu-item > a::before {
		transition: none;
	}

	.site-header.is-hidden {
		transform: none;
	}
}