/**
 * Header styles.
 *
 * Global by necessity: the header is theme chrome, not a block. Raw colours and
 * the font stack come from theme.json presets; composite values (gradients,
 * shadows, sizes) are custom properties scoped to .sws-header so they cannot
 * leak into block styles.
 *
 * Mobile-first. 782px is the WordPress mobile/desktop split and the boundary the
 * theme's own collapse rules in style.css already use. The desktop steps sit
 * above the design's 1024 / 1280 / 1440 because this header carries a language
 * switcher and a wordmark logo the static template did not have; each one was
 * measured against the real Ukrainian labels, which are the widest case.
 */

.sws-header {
	--sws-header-pill-max: 82.5rem;  /* 1320px */
	--sws-header-row-max: 77.5rem;   /* 1240px */
	--sws-header-radius: 1.25rem;    /* 20px */
	--sws-header-border-color: rgba(120, 70, 255, 0.22);
	--sws-header-bg: rgba(11, 10, 24, 0.4);
	--sws-header-bg-solid: rgb(11, 10, 24);
	--sws-header-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.35);
	--sws-header-divider: rgba(255, 255, 255, 0.1);
	--sws-header-link: var(--wp--preset--color--muted, #c7c7d4);
	--sws-header-link-hover: #e6e0ff;
	--sws-header-link-current: #fff;
	--sws-header-underline: linear-gradient(90deg, var(--wp--preset--color--accent-purple, #6a00ff), var(--wp--preset--color--accent-cyan, #00d4ff));
	--sws-header-underline-glow: 0 0 0.75rem rgba(120, 70, 255, 0.8);
	--sws-header-cta-bg: linear-gradient(90deg, var(--wp--preset--color--accent-magenta, #c42bc6), var(--wp--preset--color--accent-purple, #6a00ff));
	--sws-header-cta-shadow: 0 0.75rem 1.875rem rgba(80, 25, 220, 0.5);
	--sws-header-gap: 1.5rem;
	--sws-header-nav-gap: 0.25rem;

	/*
	 * The row's vertical padding is a variable because the desktop dropdown
	 * measures its own offset with it: the panel hangs off its menu item but has
	 * to stand off the pill by the same 0.5rem the collapsed panel does.
	 */
	--sws-header-row-padding-y: 0.875rem; /* 14px */

	/*
	 * The horizontal half is a variable of its own because the collapsed panel
	 * insets the active underline by exactly that much — see the phone block below.
	 */
	--sws-header-item-padding-x: 0.875rem;
	--sws-header-item-padding: 0.5625rem var(--sws-header-item-padding-x);

	/*
	 * A variable for the same reason as the padding above: the collapsed panel
	 * cancels this exact width out on the other side of the label to keep it
	 * centred with the items that carry no button — see the phone block below.
	 */
	--sws-header-submenu-toggle-size: 1.75rem; /* 28px */

	position: sticky;
	top: 0;
	z-index: 50;
	padding: 1rem clamp(1rem, 3vw, 2.5rem) 0;
}

/* Keep the sticky header clear of the admin bar. */
.admin-bar .sws-header {
	top: 46px;
}

/*
 * Below 600px core switches the admin bar to position: absolute but leaves its
 * min-width: 600px in place, so on a phone-width viewport a logged-in editor gets
 * a 600px-wide document and a horizontal scrollbar on every page of the site.
 * Keeping it fixed removes that overflow, and it is what the offset above already
 * assumes — an absolute bar scrolls away and leaves the sticky header floating
 * 46px too low.
 *
 * `html` is there only to win the specificity tie: core's own rule is a plain
 * #wpadminbar inside the same media range, and the order the two files print in
 * is not ours to guarantee.
 */
@media screen and (max-width: 600px) {

	html #wpadminbar {
		position: fixed;
	}
}

.sws-header__pill {
	position: relative;
	max-width: var(--sws-header-pill-max);
	margin: 0 auto;
	border: 1px solid var(--sws-header-border-color);
	border-radius: var(--sws-header-radius);
	background: var(--sws-header-bg-solid);
	box-shadow: var(--sws-header-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.sws-header__pill {
		background: var(--sws-header-bg);
		-webkit-backdrop-filter: blur(0.875rem);
		backdrop-filter: blur(0.875rem);
	}
}

/* Decoration
--------------------------------------------- */

/*
 * Clipping lives on the decoration layer, not on the pill: the collapsed menu
 * panel is positioned outside the pill and must not be cut off.
 */
.sws-header__decor {
	position: absolute;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	border-radius: var(--sws-header-radius);
	pointer-events: none;
}

.sws-header__orb {
	position: absolute;
	top: -2.5rem;
	width: 17.5rem;
	height: 11.25rem;
	border-radius: 50%;
	filter: blur(1.5rem);
}

.sws-header__orb--purple {
	left: 24%;
	background: radial-gradient(closest-side, rgba(106, 0, 255, 0.28), transparent 70%);
	animation: sws-header-drift 16s ease-in-out infinite;
}

.sws-header__orb--cyan {
	right: 16%;
	width: 16.25rem;
	height: 10.625rem;
	background: radial-gradient(closest-side, rgba(0, 212, 255, 0.2), transparent 70%);
	animation: sws-header-drift-alt 19s ease-in-out infinite;
}

.sws-header__star {
	position: absolute;
	width: 0.125rem;
	height: 0.125rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0.3125rem #bfa8ff;
	animation: sws-header-twinkle 4s ease-in-out infinite;
}

.sws-header__star:nth-child(3) {
	top: 0.5rem;
	left: 38%;
}

.sws-header__star:nth-child(4) {
	top: 2.625rem;
	left: 52%;
	box-shadow: 0 0 0.3125rem #9fe8ff;
	animation-duration: 5s;
	animation-delay: 1s;
}

.sws-header__star:nth-child(5) {
	top: 0.875rem;
	left: 64%;
	width: 0.09375rem;
	height: 0.09375rem;
	animation-duration: 3.4s;
	animation-delay: 0.6s;
}

.sws-header__star:nth-child(6) {
	top: 3.125rem;
	left: 30%;
	width: 0.09375rem;
	height: 0.09375rem;
	box-shadow: 0 0 0.25rem #9fe8ff;
	animation-duration: 4.6s;
	animation-delay: 2s;
}

.sws-header__star:nth-child(7) {
	top: 1.875rem;
	left: 80%;
	animation-duration: 3.8s;
	animation-delay: 1.4s;
}

.sws-header__aurora {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

@keyframes sws-header-drift {

	0%,
	100% { transform: translateX(-2.5rem) scale(1); }

	50% { transform: translateX(3.125rem) scale(1.18); }
}

@keyframes sws-header-drift-alt {

	0%,
	100% { transform: translateX(2.5rem) scale(1.1); }

	50% { transform: translateX(-3.125rem) scale(0.92); }
}

@keyframes sws-header-twinkle {

	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.7);
	}

	50% {
		opacity: 1;
		transform: scale(1.3);
	}
}

/* Layout
--------------------------------------------- */

.sws-header__row {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sws-header-gap);
	max-width: var(--sws-header-row-max);
	margin: 0 auto;
	padding: var(--sws-header-row-padding-y) clamp(1.25rem, 4vw, 2.5rem);
}

/* Branding
--------------------------------------------- */

.sws-header__logo {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.625rem;
	color: inherit;
	text-decoration: none;
}

.sws-header__logo-media {
	display: block;
	flex: none;
}

/* Descendant selector: the image optimiser may wrap the tag in <picture>. */
.sws-header__logo-media img {
	display: block;
	width: auto;
	height: 1.875rem; /* 30px — SVG carries no usable intrinsic size. */
}

.sws-header__logo-text {
	font-size: 1.4375rem;
	font-weight: 400;
	letter-spacing: -0.03125rem;
}

/* Dividers appear only when everything sits on a single row. */
.sws-header__divider {
	display: none;
	flex: none;
	width: 1px;
	height: 1.875rem;
	background: var(--sws-header-divider);
}

/* Navigation
--------------------------------------------- */

.sws-header__nav {
	flex: none;
	margin-left: auto;
	order: 1;
}

/*
 * style.css owns when the toggle is shown (it keys off .main-navigation--js,
 * added by navigation.js, inside the same max-width query); this only swaps its
 * display value from block to flex so the bars stack.
 */
@media (max-width: 781px) {

	.main-navigation--js .sws-header__toggle {
		display: flex;
	}
}

.sws-header__toggle {
	flex-direction: column;
	justify-content: center;
	gap: 0.3125rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--sws-header-border-color);
	border-radius: 0.75rem;
	background: none;
	cursor: pointer;
}

.sws-header__toggle-bar {
	display: block;
	width: 1.25rem;
	height: 2px;
	margin: 0 auto;
	border-radius: 2px;
	background: var(--sws-header-link-current);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.toggled .sws-header__toggle-bar:nth-child(2) {
	transform: translateY(0.4375rem) rotate(45deg);
}

.toggled .sws-header__toggle-bar:nth-child(3) {
	opacity: 0;
}

.toggled .sws-header__toggle-bar:nth-child(4) {
	transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Collapsed panel below the pill on phones. */
.sws-header__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	left: 0;
	z-index: 3;
	margin: 0;
	padding: 0.5rem;
	border: 1px solid var(--sws-header-border-color);
	border-radius: var(--sws-header-radius);
	background: var(--sws-header-bg-solid);
	box-shadow: var(--sws-header-shadow);
	list-style: none;
}

.sws-header__menu a {
	position: relative;
	display: block;
	padding: var(--sws-header-item-padding);
	border-radius: 0.75rem;
	color: var(--sws-header-link);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.sws-header__menu a:hover,
.sws-header__menu a:focus-visible {
	color: var(--sws-header-link-hover);
}

.sws-header__menu .current-menu-item > a,
.sws-header__menu .current_page_item > a,
.sws-header__menu .current-menu-ancestor > a,
.sws-header__menu .current_page_ancestor > a {
	color: var(--sws-header-link-current);
}

/*
 * The bar is a top-level ornament, so it is scoped to direct children — the
 * combinator carries no weight, so the specificity is the one it always had.
 * Inside a dropdown it would be a percentage measured against a full-width block
 * under a left-aligned label, the same mismatch the phone block below already
 * fixes once, and it would be drawn twice over: an open submenu lights its
 * ancestor as well. The colour rules above stay descendant selectors on purpose,
 * because the current item is marked at every level — just differently, see the
 * submenu section.
 */
.sws-header__menu > .current-menu-item > a::after,
.sws-header__menu > .current_page_item > a::after,
.sws-header__menu > .current-menu-ancestor > a::after,
.sws-header__menu > .current_page_ancestor > a::after {
	content: "";
	position: absolute;
	bottom: 0.3125rem;
	left: 50%;
	width: 60%;
	height: 0.1875rem;
	transform: translateX(-50%);
	border-radius: 0.1875rem;
	background: var(--sws-header-underline);
	box-shadow: var(--sws-header-underline-glow);
}

/*
 * Phones only. In the collapsed panel every link is a block as wide as the row,
 * so the label sits left while a percentage underline is measured against the
 * panel — the two never line up. Shrinking the link to its own text centres the
 * label, and insetting the bar by the link's horizontal padding makes it exactly
 * as wide as that text by construction, whatever the label says.
 */
@media (max-width: 781px) {

	.sws-header__menu a {
		width: -moz-fit-content;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		text-align: center;
	}

	.sws-header__menu > .current-menu-item > a::after,
	.sws-header__menu > .current_page_item > a::after,
	.sws-header__menu > .current-menu-ancestor > a::after,
	.sws-header__menu > .current_page_ancestor > a::after {
		right: var(--sws-header-item-padding-x);
		left: var(--sws-header-item-padding-x);
		width: auto;
		transform: none;
	}
}

/* Submenu
--------------------------------------------- */

/*
 * One dropdown level, two presentations. Below 782px a submenu is an accordion
 * inside the collapsed panel; from 782px up it is a panel of its own hanging
 * under its item. The same button opens both, and it is printed on the server by
 * sws_theme_nav_menu_submenu_toggle() so its screen-reader label goes through
 * the theme's text domain and nothing shifts once the page has painted.
 *
 * The button appears only after navigation.js has run — the same contract
 * style.css has with the burger. Without the script nothing could open a panel,
 * so no button is offered and the panels are reached another way: expanded in
 * the flow on phones, on :hover and :focus-within on desktop.
 */

/*
 * The row the label and the button share, and the containing block for the
 * desktop panel — inert on phones, where nothing is positioned against it.
 * Centred because the collapsed panel centres every other item.
 */
.sws-header__menu .menu-item-has-children {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

/*
 * No gap: the button's own padding is the space between it and the label, and
 * leaving the row gap at zero is what lets the phone block cancel the button out
 * with a single margin of exactly --sws-header-submenu-toggle-size.
 */
.sws-header__submenu-toggle {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;

	/*
	 * The theme ships no global border-box — css/content.css scopes it to the
	 * content column — and this box carries a width next to its own padding.
	 */
	box-sizing: border-box;
	width: var(--sws-header-submenu-toggle-size);
	height: var(--sws-header-submenu-toggle-size);
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--sws-header-link);
	cursor: pointer;
	transition: color 0.15s ease;
}

/* Progressive enhancement, exactly as style.css does for .menu-toggle. */
.main-navigation--js .sws-header__submenu-toggle {
	display: inline-flex;
}

.sws-header__submenu-toggle:hover,
.sws-header__submenu-toggle:focus-visible {
	color: var(--sws-header-link-hover);
}

/*
 * The site's focus ring lives in css/content.css and is scoped to .site-main, so
 * it never reaches the header, where focus otherwise reads as a change of link
 * colour. On a 14px icon with no visible label that is not a signal, so the ring
 * is restated here — with content.css's own values, not a second ring invented
 * for the header.
 */
.sws-header__submenu-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-cyan, #00d4ff);
	outline-offset: 2px;
}

.sws-header__submenu-icon {
	flex: none;
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	transition: transform 0.2s ease;
}

/*
 * Keyed off the attribute rather than off the .is-open class the panel uses: the
 * arrow then cannot end up pointing the opposite way from what a screen reader
 * is being told, whatever a future handler forgets to update.
 */
.sws-header__submenu-toggle[aria-expanded="true"] .sws-header__submenu-icon {
	transform: rotate(180deg);
}

/*
 * A nested <ul> inherits neither of the outer list's resets: the UA sheet
 * re-asserts a bullet at the second level, and the indent is its own. Border-box
 * because the desktop panel below sizes itself against its item while carrying
 * padding and a border of its own.
 */
.sws-header__menu .sub-menu {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Two classes deep, which is the smallest selector that outranks
 * `.sws-header__menu a` (0-1-1) without repeating a class or reaching for an id.
 * It deliberately says nothing about width, margins or alignment, so the phone
 * rule that centres every link in the collapsed panel keeps applying here.
 */
.sws-header__menu .sub-menu a {
	padding: 0.5rem var(--sws-header-item-padding-x);
	font-size: 0.875rem; /* 14px, one rank under the top level's 16px */
	font-weight: 500;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.sws-header__menu .sub-menu a:hover,
.sws-header__menu .sub-menu a:focus-visible {
	background-color: rgba(255, 255, 255, 0.06);
}

/*
 * "You are here" inside the panel is the filled row the language switcher
 * already uses for the same job, because the gradient bar stays a top-level
 * ornament. Not colour alone: core writes aria-current="page" on this link.
 */
.sws-header__menu .sub-menu .current-menu-item > a,
.sws-header__menu .sub-menu .current_page_item > a {
	background-color: rgba(255, 255, 255, 0.1);
}

/* Phones: the accordion. */
@media (max-width: 781px) {

	/* Collapsed only once the script that can expand it is running. */
	.main-navigation--js .sws-header__menu .sub-menu {
		display: none;
	}

	.main-navigation--js .sws-header__menu .is-open > .sub-menu {
		display: block;
	}

	/*
	 * Its own line inside the item, so the children stay in the box their
	 * parent's state class applies to.
	 */
	.sws-header__menu .sub-menu {
		flex: 0 0 100%;
		padding: 0.125rem 0 0.375rem;
	}

	/*
	 * Every other label in the collapsed panel is centred by shrinking the link
	 * to its text and letting auto margins do the rest. Here the button shares
	 * the line, and centring the pair would leave the label half a button off
	 * centre from the ones below it. A margin of exactly the button's width on
	 * the far side of the label cancels that out — whatever the label says, and
	 * with no second number to keep in sync, which is why the row has no gap.
	 */
	.sws-header__menu .menu-item-has-children > a {
		margin-inline: var(--sws-header-submenu-toggle-size) 0;
	}
}

/* 782px and up: the panel. */
@media (min-width: 782px) {

	/*
	 * Hung off its item and clearing the row's own bottom padding, so it lands
	 * just under the pill the way the collapsed panel does. The two do not agree
	 * to the pixel: the offset is measured from the menu item, and the item is
	 * only flush with the bottom of the row's content box while the navigation
	 * has that line to itself, below 1280px. On one row the language switcher and
	 * the call to action are the taller pair, the item is centred against them,
	 * and the panel ends up a couple of pixels closer to the pill — 5px against
	 * the 7px it gets on its own line. Both read as the same detail; what would
	 * be visible is a row item growing tall enough to push the gap shut, so
	 * re-measure if one does.
	 *
	 * Pulled left by its own padding so a child label starts on the same pixel
	 * as its parent's, and given that padding back on both sides as a minimum
	 * width so a short list still brackets the item it belongs to.
	 *
	 * visibility, not display: display: none cannot be transitioned, and both
	 * take the links out of the tab order and out of the accessibility tree —
	 * the same trade blocks/step-card/style.css makes for its lightbox.
	 */
	.sws-header__menu .sub-menu {
		position: absolute;
		top: calc(100% + var(--sws-header-row-padding-y) + 0.5rem);
		left: -0.5rem;
		z-index: 3;
		visibility: hidden;
		width: max-content;
		min-width: calc(100% + 1rem);
		max-width: 17.5rem; /* 280px — fits the longest Ukrainian label on one line. */
		padding: 0.5rem;
		border: 1px solid var(--sws-header-border-color);
		border-radius: var(--sws-header-radius);
		background: var(--sws-header-bg-solid);
		box-shadow: var(--sws-header-shadow);
		opacity: 0;
		transform: translateY(-0.25rem);
		transition: visibility 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
	}

	.sws-header__menu .is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	/*
	 * The bridge. The offset above leaves a band of nothing between the item and
	 * its panel, and a pointer crossing it is inside neither box: pointerleave
	 * fires on the item and closes the panel that was being reached for. This
	 * fills the band to the pixel — the offset plus the panel's own border, which
	 * sits between that offset and the padding box these numbers resolve against
	 * — and being a child of the panel it counts as part of the item for that
	 * event. It inherits the panel's visibility, so while the panel is closed the
	 * strip catches nothing and blocks nothing.
	 */
	.sws-header__menu .sub-menu::before {
		content: "";
		position: absolute;
		top: calc((var(--sws-header-row-padding-y) + 0.5rem + 1px) * -1);
		right: 0;
		left: 0;
		height: calc(var(--sws-header-row-padding-y) + 0.5rem + 1px);
	}

	/*
	 * Set by navigation.js when the left-aligned panel would run past the pill.
	 * Today's menu cannot trigger it — the only item with children is the first
	 * one — but between 782px and 1280px the navigation is centred on its own
	 * row, and a panel under the last item there is about 20px short of the room
	 * it needs. Cheaper to carry the modifier than to find out from a visitor.
	 */
	.sws-header__menu .is-flipped > .sub-menu {
		right: -0.5rem;
		left: auto;
	}

	/*
	 * No script, no button — so the panel answers the pointer and the keyboard
	 * itself. Scoped to the no-JS case on purpose: running alongside the script
	 * it would hold open, through :focus-within, a panel Escape had just closed.
	 */
	.sws-header__nav:not(.main-navigation--js) .menu-item-has-children:hover > .sub-menu,
	.sws-header__nav:not(.main-navigation--js) .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
}

/* Actions: language switcher + call to action
--------------------------------------------- */

.sws-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.875rem;
	margin-left: auto;
	order: 2;
}

/*
 * Narrow phones. The switcher and the button together need 320px, and flex: none
 * left the pair no way to give: below 357px the group ran past the viewport and
 * the page picked up a horizontal scrollbar. Letting it shrink turns that into an
 * internal wrap — the button drops onto its own line, still full size, and both
 * lines stay flush right the way margin-left: auto puts them.
 *
 * 374px, not the theme's 781px step: from 375px up the pair fits on one line and
 * wrapping there would only make the header a row taller on the commonest phone
 * widths. The margin at 375px is a couple of pixels, so a longer CTA label than
 * today's "Спробувати безкоштовно" is a reason to re-measure this number.
 */
@media (max-width: 374px) {

	.sws-header__actions {
		flex: 0 1 auto;
		flex-wrap: wrap;
		justify-content: flex-end;
		min-width: 0;
	}
}

.sws-header__lang {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header__lang a {
	display: block;
	padding: 0.375rem 0.5rem;
	border-radius: 0.5rem;
	color: var(--sws-header-link);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03125rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.sws-header__lang a:hover,
.sws-header__lang a:focus-visible {
	color: var(--sws-header-link-hover);
	background-color: rgba(255, 255, 255, 0.06);
}

.sws-header__lang a[aria-current] {
	color: var(--sws-header-link-current);
	background-color: rgba(255, 255, 255, 0.1);
}

/*
 * Compact by default: on a 375px screen the full-size button plus the language
 * switcher are wider than the pill. The design's proportions come back at 782px.
 */
.sws-header__cta {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border-radius: 0.875rem;
	background: var(--sws-header-cta-bg);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sws-header__cta:hover,
.sws-header__cta:focus-visible {
	transform: translateY(-0.0625rem);
	box-shadow: var(--sws-header-cta-shadow);
	color: #fff;
}

.sws-header__cta-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* The arrow is dropped on narrow screens to keep the button compact. */
.sws-header__cta-icon--arrow {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.sws-header__orb,
	.sws-header__star {
		animation: none;
	}

	.sws-header__cta,
	.sws-header__menu a,
	.sws-header__submenu-toggle,
	.sws-header__submenu-icon,
	.sws-header__toggle-bar {
		transition: none;
	}

	/*
	 * Listed separately because the submenu link rule outranks
	 * `.sws-header__menu a` above and would keep its own transition otherwise;
	 * the panel, because it fades and slides. The chevron still turns and the
	 * panel still appears — only the motion between the two states goes.
	 */
	.sws-header__menu .sub-menu,
	.sws-header__menu .sub-menu a {
		transition: none;
	}

	.sws-header__cta:hover,
	.sws-header__cta:focus-visible {
		transform: none;
	}
}

/* Tablet: the nav drops onto its own centred row, as in the design below 1024px.
--------------------------------------------- */

@media (min-width: 782px) {

	.admin-bar .sws-header {
		top: 32px;
	}

	.sws-header__row {
		gap: 0.875rem 1.5rem;
	}

	.sws-header__nav {
		order: 3;
		flex: 1 0 100%;
		margin-left: 0;
	}

	.sws-header__menu {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--sws-header-nav-gap);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.sws-header__cta {
		gap: 0.6875rem;
		padding: 0.8125rem 1.5rem;
		font-size: 0.9375rem;
	}

	.sws-header__cta-icon--arrow {
		display: block;
	}
}

/*
 * Desktop: one row — logo, nav, actions.
 *
 * 1280px, not the design’s 1024px: the header carries a language switcher the
 * static template did not have, and below this width the four Ukrainian labels
 * plus the switcher and the CTA overflow the pill instead of fitting on one line.
 *
 * It was 1220 until the submenu chevron joined the row and made the overflow
 * visible as a scrollbar. Re-measured against the real Ukrainian labels: nothing
 * here can shrink — every item is flex: none and the row does not wrap at this
 * step — so the number has to be the width at which the content genuinely fits,
 * and at 1220 it did not, chevron or no chevron. It clears the pill by 15px at
 * 1280. Anything added to a menu label, or a fifth item, means measuring again.
 * --------------------------------------------- */

@media (min-width: 1280px) {

	.sws-header__row {
		flex-wrap: nowrap;
		gap: var(--sws-header-gap);
	}

	.sws-header__divider {
		display: block;
	}

	.sws-header__divider--actions {
		margin-left: auto;
	}

	.sws-header__nav {
		order: 0;
		flex: none;
		margin-left: 0;
	}

	.sws-header__menu {
		flex-wrap: nowrap;
	}

	.sws-header__actions {
		margin-left: 0;
	}
}

/*
 * Roomier item padding, and the gaps that go with it. 1380px for the same reason
 * the step above moved: this one widens the navigation by roughly 55px, which is
 * more than the pill gains over the 80px between the two steps, so engaging it at
 * the old 1300 pushed the call to action back out of the pill — it did so before
 * the chevron existed too, just without a scrollbar to make it obvious.
 */
@media (min-width: 1380px) {

	.sws-header {
		--sws-header-gap: 2rem;
		--sws-header-nav-gap: 0.375rem;
		--sws-header-item-padding-x: 1.25rem;
	}
}

/*
 * Widest step. The row is capped at 1240px, so the gap cannot grow to the
 * design's 44px without the logo, nav, switcher and CTA touching: 40px keeps a
 * real margin instead of the 3px the larger value leaves.
 */
@media (min-width: 1420px) {

	.sws-header {
		--sws-header-gap: 2.5rem;
		--sws-header-nav-gap: 0.625rem;
	}
}