/**
 * rkl/header — the site header.
 *
 * Mobile first. The drawer is the default layout; the bar with the horizontal
 * menu is the enhancement above the breakpoint, which is a plain number here
 * on purpose: a media query cannot read a custom property, and threading the
 * value through an inline stylesheet would mean printing this whole file twice.
 *
 * BREAKPOINT — 1280px, and it is a measured number, not a round one. The bar has
 * to hold the logo, the whole menu on one line and the right-hand controls; with
 * the eight top-level links the design shows, that needs about 1220px once the
 * gaps have shrunk to their floor. **A longer menu needs this raised** — here and
 * in the WIDE constant in view.js, which must always agree with it. The symptom
 * of leaving it too low is the menu running into the right-hand controls.
 *
 * The gap and the side padding are fluid between 1280 and 1440 so the spacing is
 * at its design value on a wide screen and tightens instead of colliding below it.
 * The content column caps at 1344px, with the padding outside that — see the
 * `--rkl-header-pad` token and the max-width in the BREAKPOINT block.
 *
 * The menu markup exists once. On the phone `.rkl-header__flyout` is a fixed
 * panel; above the breakpoint it is `display: contents`, so its children become
 * children of the bar's grid and the parts that belong only to the drawer are
 * hidden rather than printed a second time.
 */

/* ---------------------------------------------------------------- sticky */

/*
 * The bar sticks; the notice above it does not.
 *
 * `position: sticky` is bounded by the element's own parent, and the parent
 * here is the header template part, which is exactly as tall as the header —
 * so a sticky bar inside it would travel nowhere. The sticky element is the
 * template part itself, pulled up by the notice's height: the notice scrolls
 * out of view and the bar comes to rest at the top.
 *
 * `view.js` adds the class and writes the measured height; the :has() selector
 * covers browsers with JavaScript off, and 28px is the design's notice height.
 */
.rkl-header-sticky-host,
.wp-block-template-part:has(> .rkl-header--sticky) {
	position: sticky;
	top: 0;
	z-index: 900;
}

.rkl-header-sticky-host.has-notice,
.wp-block-template-part:has(> .rkl-header--sticky.rkl-header--has-notice) {
	top: calc(-1 * var(--rkl-header-notice-h, 28px));
}

/*
 * The admin bar is fixed on a desktop and scrolls away below 783px, so the
 * offset is only needed on the wide side.
 */
@media (min-width: 783px) {
	body.admin-bar .rkl-header-sticky-host,
	body.admin-bar .wp-block-template-part:has(> .rkl-header--sticky) {
		top: 32px;
	}

	body.admin-bar .rkl-header-sticky-host.has-notice,
	body.admin-bar .wp-block-template-part:has(> .rkl-header--sticky.rkl-header--has-notice) {
		top: calc(32px - var(--rkl-header-notice-h, 28px));
	}
}

/* ------------------------------------------------------------------ root */

.rkl-header {
	box-sizing: border-box;
	color: var(--rkl-black);
	font-family: var(--rkl-font);
	position: relative;
	/*
	 * The bar's side padding, as a token because the content cap is expressed in
	 * terms of it: 1344px of content plus this on each side.
	 */
	--rkl-header-pad: 16px;
}

.rkl-header *,
.rkl-header *::before,
.rkl-header *::after {
	box-sizing: inherit;
}

/*
 * A class-level `display` beats the user-agent rule for [hidden], and every
 * part of this block sets one. Without this the scrim would never hide.
 */
.rkl-header [hidden] {
	display: none !important;
}

.rkl-header a {
	color: inherit;
	text-decoration: none;
}

/*
 * :where() so the reset carries no class weight. A branch row without a link
 * of its own IS a button, and `.rkl-header button` would have out-specified
 * `.rkl-header__link` — the row lost its padding and its font size, and the
 * bar measured 56px narrower than the design for no visible reason.
 */
:where(.rkl-header) button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	padding: 0;
}

.rkl-header :focus-visible {
	border-radius: var(--rkl-radius);
	outline: 2px solid var(--rkl-green-03);
	outline-offset: 2px;
}

/*
 * WordPress paints a plain `:focus` outline, which fires on a tap as well — so
 * closing the drawer with a finger left a dark ring around the X that is not in
 * the design. Keyboard focus keeps the ring above.
 */
.rkl-header :focus:not(:focus-visible) {
	outline: none;
}

/* Scroll lock while the drawer is open. */
html.rkl-header-locked {
	overflow: hidden;
}

/* ---------------------------------------------------------------- notice */

.rkl-header__notice {
	align-items: center;
	background: var(--rkl-green-02);
	color: var(--rkl-black);
	display: flex;
	justify-content: center;
	min-height: 28px;
	padding: 3px 16px;
}

.rkl-header__notice-inner {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: center;
}

.rkl-header__notice-text {
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

/*
 * The graphic is the design's motion trail, exported as a transparent PNG
 * because the effect is a Figma shader, not vector paths. The narrow phone bar
 * does not carry it — that is the design, not an omission.
 */
.rkl-header__notice-graphic {
	display: none;
	flex: none;
	height: 28px;
	object-fit: contain;
	width: 82px;
}

a.rkl-header__notice:hover .rkl-header__notice-text,
a.rkl-header__notice:focus-visible .rkl-header__notice-text {
	text-decoration: underline;
}

/* ------------------------------------------------------------------- bar */

.rkl-header__bar {
	background: var(--rkl-white);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rkl-header__inner {
	align-items: center;
	display: flex;
	gap: 24px;
	min-height: 64px;
	padding: 0 var(--rkl-header-pad);
}

.rkl-header__burger {
	align-items: center;
	display: flex;
	flex: none;
	height: 32px;
	justify-content: center;
	width: 32px;
}

/*
 * The link box, not the logo, carries the tap target.
 *
 * On a phone the box used to be exactly as tall as the logo — 36px, then 32px
 * once the cap below landed — which is under the 44px minimum every touch
 * guideline names, and this is the one link on the page a visitor reaches for
 * blind. 44px fits inside the 64px bar with 10px to spare, the row is
 * centre-aligned, and the extra height is transparent, so the bar does not grow
 * and nothing moves: only the hit area changes. The desktop block puts it back
 * to content height, where the pointer is precise and the design record's
 * 135.6x40 logo box is the measured number.
 */
.rkl-header__logo-link {
	align-items: center;
	display: flex;
	flex: none;
	min-height: 44px;
}

/*
 * PHONE LOGO HEIGHT — 32px, and the `min()` is a ceiling, not a preference.
 *
 * `--rkl-header-logo-h` is an admin setting (RKL nustatymai › Antraštė, 24-56px,
 * default 40). The phone height was a flat 0.9x of it, so the setting's own
 * maximum put a 50.4px lockup in a 64px bar — 79% of the bar, with 7px of air
 * above and below it. That is the height the client flagged. Capping at 32px
 * makes it unreachable whatever the setting says, while a setting *below* 35.5px
 * still scales the logo down as it always did: honoured downwards, capped up.
 *
 * Why 32 and not the design record's 36: 32 is the burger's box height, so the
 * two objects on the left of the bar are one height and the logo stops
 * out-weighing the control next to it; it is exactly half the 64px bar, which
 * leaves 16px of clearance top and bottom — the same 16px as the bar's side
 * padding; and the width follows the 136:40 artboard to 108.8px, 29% of a 375px
 * viewport instead of 32.5%. The asset is vector (`assets/rkl-logo.svg`, a
 * 136x40 artboard), so a smaller box re-renders sharp — there is nothing to
 * blur and nothing being upscaled.
 */
.rkl-header__logo {
	display: block;
	height: min(32px, calc(var(--rkl-header-logo-h, 40px) * 0.9));
	width: auto;
}

.rkl-header__actions {
	align-items: center;
	align-self: stretch;
	display: flex;
	gap: 16px;
	margin-left: auto;
}

.rkl-header__actions .rkl-header__lang {
	align-items: center;
	align-self: stretch;
}

/* Inline on the bar above the breakpoint only; the drawer has the pill. */
.rkl-header__actions .rkl-header__live {
	display: none;
}

/* ------------------------------------------------------- live stats, lang */

.rkl-header__live,
.rkl-header__lang--static,
.rkl-header__lang-toggle {
	align-items: center;
	border-radius: var(--rkl-radius);
	display: inline-flex;
	font-size: 16px;
	font-weight: 500;
	gap: 10px;
	line-height: 1.4;
	padding: 8px;
}

/*
 * The language switcher is a dropdown wherever it appears — in the bar and at
 * the head of the drawer — never the phone accordion the menu rows use. An
 * accordion in the drawer's head row would push the whole menu down to answer
 * a three-line question.
 */
.rkl-header__lang {
	display: inline-flex;
	flex: none;
	position: relative;
}

.rkl-header__lang-toggle {
	transition: background-color 0.12s ease;
	white-space: nowrap;
}

.rkl-header__lang-toggle:hover,
.rkl-header__lang[data-open="true"] > .rkl-header__lang-toggle {
	background: var(--rkl-grey-03);
}

.rkl-header__lang[data-open="true"] .rkl-header__icon--caret {
	transform: rotate(180deg);
}

/*
 * The card. These are the same declarations the menu dropdown gets inside the
 * BREAKPOINT media query — repeated rather than shared because the menu panel
 * is an accordion below that width and this one never is, and CSS has no way
 * to apply one rule at one width and another at all widths.
 *
 * The leading `.rkl-header` is load-bearing: the generic `.rkl-header__sub`
 * accordion rules are further down this file and would otherwise win on source
 * order, collapsing the card to the height of its own padding.
 */
.rkl-header .rkl-header__sub--lang {
	background: var(--rkl-white);
	border-radius: var(--rkl-radius);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
	display: block;
	/* Right-aligned: this one sits at the right edge of the bar. The only
	   declaration in this rule that differs from the menu card. */
	left: auto;
	right: 0;
	margin-top: 8px;
	max-width: 360px;
	min-width: 100%;
	opacity: 0;
	padding: 16px;
	pointer-events: none;
	position: absolute;
	top: 100%;
	transform: translateY(-4px);
	transition: opacity 0.1s ease-in, transform 0.1s ease-in, visibility 0s linear 0.1s;
	visibility: hidden;
	width: max-content;
	z-index: 20;
}

.rkl-header .rkl-header__sub--lang > .rkl-header__sub-inner {
	overflow: visible;
	transition: none;
	visibility: inherit;
}

.rkl-header .rkl-header__sub--lang .rkl-header__sublist {
	padding-bottom: 0;
}

/* In the drawer it is an accordion, so it keeps the accordion's trailing gap. */
.rkl-header .rkl-header__flyout-head .rkl-header__sub--lang .rkl-header__sublist {
	padding-bottom: 24px;
}

.rkl-header:not(.is-js) .rkl-header__lang:hover > .rkl-header__sub--lang,
.rkl-header:not(.is-js) .rkl-header__lang:focus-within > .rkl-header__sub--lang,
.rkl-header.is-js .rkl-header__lang[data-open="true"] > .rkl-header__sub--lang {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s;
	visibility: visible;
}

/*
 * The language being read gets the same mark as the page being read — the
 * shared `.is-current` rule below. Nothing language-specific: a second grey
 * would read as a different kind of state.
 */

.rkl-header__dot {
	background: var(--rkl-green-02);
	border-radius: 50%;
	flex: none;
	height: 10px;
	width: 10px;
}

a.rkl-header__live {
	transition: background-color 0.12s ease;
}

a.rkl-header__live:hover {
	background: var(--rkl-grey-03);
}

.rkl-header__live--pill {
	background: var(--rkl-grey-04);
	border: 1px solid var(--rkl-grey-02);
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.3;
	margin-bottom: 12px;
	min-height: 32px;
	padding: 6px 16px;
	width: 100%;
}

/* ----------------------------------------------------------------- icons */

.rkl-header__icon {
	display: block;
	flex: none;
}

.rkl-header__icon--caret {
	transition: transform 0.2s ease;
}

.rkl-header__item[data-open="true"] > .rkl-header__link > .rkl-header__icon--caret,
.rkl-header__item[data-open="true"] > .rkl-header__toggle > .rkl-header__icon--caret {
	transform: rotate(180deg);
}

/* ---------------------------------------------------- drawer (mobile) */

.rkl-header__flyout {
	background: var(--rkl-white);
	border-radius: 0 var(--rkl-radius) 0 0;
	bottom: 0;
	box-shadow: 4px 0 4px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	left: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px 24px 16px;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.26s;
	visibility: hidden;
	width: min(344px, 86vw);
	z-index: 1000;
}

.rkl-header.is-open .rkl-header__flyout {
	transform: none;
	transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
	visibility: visible;
}

.rkl-header__flyout-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	min-height: 40px;
	/*
	 * The head is the drawer's own stacking context for the language card,
	 * which has to paint over the Live stats pill below it.
	 */
	position: relative;
	z-index: 2;
}

/*
 * In the drawer the switcher pushes the menu down instead of floating over it.
 *
 * As a card it landed on top of the Live stats pill and cut the next menu row in
 * half — an overlay reads as deliberate on a wide bar and as a misplaced tooltip
 * in a 344px panel. `display: contents` lifts the toggle and the panel into the
 * head row, which wraps: the toggle and the close button share the first line,
 * the panel takes the second.
 */
.rkl-header__flyout-head {
	flex-wrap: wrap;
}

.rkl-header__flyout-head .rkl-header__lang {
	display: contents;
}

.rkl-header .rkl-header__flyout-head .rkl-header__sub--lang {
	box-shadow: none;
	display: grid;
	flex: 1 0 100%;
	grid-template-rows: 0fr;
	left: auto;
	margin-top: 0;
	opacity: 1;
	order: 1;
	padding: 0;
	position: static;
	right: auto;
	transform: none;
	transition: grid-template-rows 0.24s ease, visibility 0s linear 0.24s;
	width: auto;
}

.rkl-header .rkl-header__flyout-head .rkl-header__sub--lang > .rkl-header__sub-inner {
	overflow: hidden;
}

.rkl-header.is-js .rkl-header__flyout-head .rkl-header__lang[data-open="true"] > .rkl-header__sub--lang,
.rkl-header:not(.is-js) .rkl-header__flyout-head .rkl-header__sub--lang {
	grid-template-rows: 1fr;
	pointer-events: auto;
	transition: grid-template-rows 0.24s ease, visibility 0s;
	visibility: visible;
}

.rkl-header__close {
	align-items: center;
	border-radius: var(--rkl-radius);
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	margin-left: auto;
	width: 40px;
}

.rkl-header__close:hover {
	background: var(--rkl-grey-03);
}

.rkl-header__scrim {
	background: rgba(30, 32, 30, 0.34);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 0.2s ease;
	z-index: 999;
}

.rkl-header.is-open .rkl-header__scrim {
	opacity: 1;
}

/*
 * The same notice again, as the card at the foot of the drawer. It reaches 8px
 * wider than the rest of the content on each side, which is the design's
 * 312px card inside a 344px panel.
 */
.rkl-header__promo {
	background: var(--rkl-green-02);
	border-radius: var(--rkl-radius);
	color: var(--rkl-black);
	display: block;
	margin: auto -8px 0;
	padding: 8px 16px;
}

.rkl-header__promo .rkl-header__notice-graphic {
	display: block;
	height: 44px;
	margin-bottom: 8px;
	width: 128px;
}

.rkl-header__promo-text {
	display: block;
	font-size: 14px;
	line-height: 1.5;
}

a.rkl-header__promo:hover .rkl-header__promo-text {
	text-decoration: underline;
}

/* ------------------------------------------------------- menu (mobile) */

.rkl-header__nav {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
	margin-top: 20px;
}

.rkl-header__menu {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The drawer follows the menu's own order, exactly as the bar does.
 *
 * It used to put the rows with children first and the plain links after them
 * (`order: 1` / `order: 2`), which is what the Figma drawer draws. The
 * consequence was one menu reading in two different orders depending on the
 * device: „Apie RKL" jumped ahead of „Naujienos" and „Sveikatos partneriai" on
 * the phone and sat after them on the bar. The client asked for one order, so
 * nothing sets `order` any more and source order wins in both layouts.
 *
 * The gap survives, but it now separates the drawer-only secondary list from
 * the primary menu instead of opening a second group inside it.
 */
.rkl-header__menu--extra.is-group-start {
	margin-top: 32px;
}

.rkl-header__item {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.rkl-header__link {
	align-items: center;
	border-radius: var(--rkl-radius);
	display: flex;
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 400;
	gap: 8px;
	line-height: 1.5;
	min-width: 0;
	padding: 8px;
	text-align: left;
}

.rkl-header__item--branch > .rkl-header__link {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

.rkl-header__link--button {
	justify-content: space-between;
	width: 100%;
}

/*
 * The caret column down the drawer's right edge is one column, drawn by two
 * different elements.
 *
 * A branch item with a link of its own renders `.rkl-header__link` plus a
 * separate 40x40 `.rkl-header__toggle`, which centres its 14px caret at
 * (40 - 14) / 2 = 13px from the row's right edge. A branch item with children
 * only renders a single `.rkl-header__link--button` carrying both label and
 * caret, and `space-between` puts that caret on the content-box edge — 8px in,
 * the link's own padding. Four rows at 13 and two at 8 read as a ragged column
 * on every phone width.
 *
 * 5px brings the inline caret out to the toggle's 13px rather than pulling the
 * toggle in to 8: 13 is the majority of the column and it keeps the toggle's
 * 40px tap target intact. The margin goes on the caret, not as padding on the
 * button — this rule sits outside the >=1280 media query, so padding would
 * widen the two label-only items in the desktop bar too. The caret cannot:
 * the bar hides this exact selector (see the `display: none` further down).
 */
.rkl-header__link--button > .rkl-header__icon--caret {
	margin-inline-end: 5px;
}

.rkl-header__toggle {
	align-items: center;
	border-radius: var(--rkl-radius);
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	width: 40px;
}

/*
 * Accordion without measuring anything: a grid row animated from 0fr to 1fr,
 * with the overflow clipped by the inner wrapper.
 */
.rkl-header__sub {
	display: grid;
	flex: 1 0 100%;
	grid-template-rows: 0fr;
	/*
	 * A closed panel is not a target. `visibility: hidden` already does this,
	 * but only while every descendant leaves it alone — and one that did not
	 * made the closed dropdowns clickable once already.
	 */
	pointer-events: none;
	transition: grid-template-rows 0.24s ease;
}

.rkl-header__item[data-open="true"] > .rkl-header__sub {
	grid-template-rows: 1fr;
	pointer-events: auto;
}

.rkl-header:not(.is-js) .rkl-header__sub {
	pointer-events: auto;
}

/*
 * A collapsed row is 0fr tall, but its links would still be in the tab order —
 * a keyboard user would walk into four invisible links. `visibility` takes them
 * out and comes back the moment the row opens; it is delayed on the way out so
 * the closing animation still has something to draw.
 */
.rkl-header__sub-inner {
	min-height: 0;
	overflow: hidden;
	transition: visibility 0s linear 0.24s;
	visibility: hidden;
}

.rkl-header__item[data-open="true"] > .rkl-header__sub > .rkl-header__sub-inner {
	transition: visibility 0s;
	visibility: visible;
}

.rkl-header:not(.is-js) .rkl-header__sub-inner {
	transition: none;
	visibility: visible;
}

/*
 * The gap under an open submenu is padding on the list, not on the clipped
 * wrapper: a grid item cannot be shorter than its own padding, so 24px there
 * would sit under every closed row for ever.
 */
.rkl-header__sublist {
	list-style: none;
	margin: 0;
	padding: 0 0 24px;
}

.rkl-header__sublink {
	align-items: center;
	border-radius: var(--rkl-radius);
	display: flex;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	min-height: 40px;
	padding: 8px;
	transition: background-color 0.12s ease;
}

a.rkl-header__sublink:hover,
.rkl-header__subitem.is-current > .rkl-header__sublink {
	background: var(--rkl-grey-03);
}

.rkl-header__link--plain {
	cursor: default;
}

/* --------------------------------------------- no JavaScript, small screen */

/*
 * Without JavaScript the drawer can never open, so it is not a drawer: the
 * menu unfolds under the bar with every group already open. Tall, but every
 * link is reachable — the same degradation the footer's accordion makes.
 */
.rkl-header:not(.is-js) .rkl-header__inner {
	flex-wrap: wrap;
	padding-bottom: 8px;
}

.rkl-header:not(.is-js) .rkl-header__burger,
.rkl-header:not(.is-js) .rkl-header__close,
.rkl-header:not(.is-js) .rkl-header__scrim {
	display: none;
}

.rkl-header:not(.is-js) .rkl-header__flyout {
	border-radius: 0;
	box-shadow: none;
	flex: 1 0 100%;
	overflow: visible;
	padding: 0 0 16px;
	position: static;
	transform: none;
	visibility: visible;
	width: auto;
}

.rkl-header:not(.is-js) .rkl-header__sub {
	grid-template-rows: 1fr;
}

.rkl-header:not(.is-js) .rkl-header__promo {
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------ BREAKPOINT — the bar */

@media (min-width: 1280px) {
	.rkl-header__notice {
		padding: 0 16px;
	}

	.rkl-header__notice-text {
		font-size: 14px;
	}

	.rkl-header__notice-graphic {
		display: block;
	}

	/*
	 * Three columns with equal outer tracks, so the menu is centred on the bar
	 * rather than in the space left over — which is where the design puts it,
	 * the logo and the right-hand controls not being the same width.
	 */
	/*
	 * 1344px of content, plus the side padding outside it. `box-sizing` is
	 * border-box here, so the cap has to carry the padding too — otherwise the
	 * content column would be 1344 minus 80 on a wide screen.
	 *
	 * The padding is fluid, so the cap is fluid with it: it only starts to bite
	 * once the viewport passes 1344 + 2 × padding, which is 1424px at the full
	 * 40px. Below that the bar is edge-to-edge and nothing jumps.
	 */
	.rkl-header__inner {
		--rkl-header-pad: clamp(16px, (100vw - 1200px) / 6, 40px);

		display: grid;
		gap: 24px;
		grid-template-columns: 1fr auto 1fr;
		margin: 0 auto;
		max-width: calc(1344px + 2 * var(--rkl-header-pad));
		min-height: 72px;
		padding: 0 var(--rkl-header-pad);
	}

	.rkl-header__burger {
		display: none;
	}

	/*
	 * Desktop is deliberately unchanged: the full setting value, no cap, and the
	 * link box back to content height. The phone's 44px tap floor and 32px
	 * ceiling are both touch concessions — a mouse needs neither, and the design
	 * record's verified desktop numbers (135.6x40 logo at x48) are these.
	 */
	.rkl-header__logo-link {
		min-height: 0;
	}

	.rkl-header__logo {
		height: var(--rkl-header-logo-h, 40px);
	}

	/*
	 * The panel stops being a panel: its children join the bar's grid.
	 *
	 * `visibility` is inherited and `display: contents` does not break that
	 * chain, so the drawer's hidden state has to be undone here explicitly —
	 * otherwise the whole menu is laid out correctly and painted nowhere.
	 */
	.rkl-header__flyout {
		display: contents;
		visibility: visible;
	}

	.rkl-header__flyout-head,
	.rkl-header__live--pill,
	.rkl-header__promo,
	.rkl-header__menu--extra,
	.rkl-header__scrim {
		display: none;
	}

	/*
	 * Never two lines. Wrapped, it grows the bar and drags the sticky offset out
	 * with it, which is a far worse failure than a tight gap.
	 */
	.rkl-header__actions {
		flex-wrap: nowrap;
		justify-self: end;
		margin-left: 0;
		white-space: nowrap;
	}

	.rkl-header__actions .rkl-header__live {
		display: inline-flex;
	}

	/*
	 * The row is the full height of the bar, not the height of its pill.
	 *
	 * `top: 100%` on the panel then lands on the bar's own bottom edge, which
	 * is where the design puts it — 8px under the bar, not 8px under a 32px
	 * pill floating in the middle of it. It also closes the dead strip between
	 * the pill and the panel that a pointer would otherwise fall through.
	 */
	.rkl-header__nav {
		align-self: stretch;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 0;
		margin-top: 0;
		min-width: 0;
	}

	.rkl-header__menu {
		align-items: stretch;
		flex-direction: row;
		gap: clamp(4px, (100vw - 1280px) / 10, 16px);
		height: 100%;
	}

	.rkl-header__item {
		align-items: center;
		flex-wrap: nowrap;
		height: 100%;
		margin-top: 0;
		order: 0;
	}

	.rkl-header__link {
		flex: none;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		min-height: 32px;
		padding: 5px 8px;
		transition: background-color 0.12s ease;
		white-space: nowrap;
	}

	.rkl-header__item--branch > .rkl-header__link {
		font-size: 16px;
	}

	/*
	 * No caret on the bar — the design has none. The button still exists for
	 * the drawer, and the inline caret inside a label-only button is hidden
	 * rather than the button, which carries the label.
	 */
	.rkl-header__toggle {
		display: none;
	}

	.rkl-header__link--button > .rkl-header__icon--caret {
		display: none;
	}

	.rkl-header__item:hover > .rkl-header__link,
	.rkl-header__item.is-current > .rkl-header__link,
	.rkl-header__item.is-current-ancestor > .rkl-header__link,
	.rkl-header__item[data-open="true"] > .rkl-header__link {
		background: var(--rkl-grey-03);
	}

	/*
	 * `:not(--lang)` throughout this block. The language card is already a card
	 * at every width, and it right-aligns to its trigger; without the exclusion
	 * the menu panel's `left: 0` won on source order and pushed it 18px past the
	 * edge of the viewport.
	 */
	.rkl-header__sub:not(.rkl-header__sub--lang) {
		background: var(--rkl-white);
		border-radius: var(--rkl-radius);
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
		display: block;
		left: 0;
		margin-top: 8px;
		max-width: 360px;
		min-width: 100%;
		opacity: 0;
		padding: 16px;
		position: absolute;
		top: 100%;
		transform: translateY(-4px);
		transition: opacity 0.1s ease-in, transform 0.1s ease-in, visibility 0s linear 0.1s;
		visibility: hidden;
		width: max-content;
		z-index: 20;
	}

	/*
	 * `inherit`, not `visible`.
	 *
	 * A descendant can undo an inherited `visibility: hidden` — that is the one
	 * way it differs from `display`. Setting `visible` here re-showed the
	 * contents of every *closed* dropdown: invisible under `opacity: 0`, but
	 * still hit-testable, so the pointer opened the panel from 150px below the
	 * bar and could click links nobody could see.
	 */
	.rkl-header__sub:not(.rkl-header__sub--lang) > .rkl-header__sub-inner {
		overflow: visible;
		transition: none;
		visibility: inherit;
	}

	.rkl-header__sub:not(.rkl-header__sub--lang) .rkl-header__sublist {
		padding-bottom: 0;
	}

	/*
	 * Two ways in, never both at once. With JavaScript the open state is the
	 * data attribute and nothing else, so a panel closed by a click cannot be
	 * reopened by the pointer that is still resting on the item.
	 */
	.rkl-header:not(.is-js) .rkl-header__item--branch:hover > .rkl-header__sub:not(.rkl-header__sub--lang),
	.rkl-header:not(.is-js) .rkl-header__item--branch:focus-within > .rkl-header__sub:not(.rkl-header__sub--lang),
	.rkl-header.is-js .rkl-header__item--branch[data-open="true"] > .rkl-header__sub:not(.rkl-header__sub--lang) {
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: opacity 0.14s ease-out, transform 0.14s ease-out, visibility 0s;
		visibility: visible;
	}

	.rkl-header:not(.is-js) .rkl-header__inner {
		flex-wrap: nowrap;
		padding-bottom: 0;
	}

	.rkl-header:not(.is-js) .rkl-header__flyout {
		display: contents;
	}
}

/* -------------------------------------------------------------- motion off */

/*
 * Delay as well as duration: the drawer and the accordion hold `visibility`
 * back until their movement finishes, and a 0.26s wait with no movement to
 * cover is just a lag.
 */
@media (prefers-reduced-motion: reduce) {
	.rkl-header,
	.rkl-header * {
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}