/*
 * Nomon Theme — base stylesheet.
 *
 * Tailwind v4 (compiled by Blockstudio) handles reset and all utility styling;
 * this file owns only what doesn't fit utilities. Responsibilities and the
 * cascade contract: `docs/styling.md`.
 */

/* Self-declared so layer order can't depend on when Blockstudio's inline style
   parses. Only correct while it emits layered utilities — docs/styling.md. */
@layer theme, base, components, utilities;

/* Unlayered on purpose: wrapping this would tie with preflight's layered
   `body { line-height: inherit }` and can flip the body line-height. */
body {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.6;
}

/* Beats Tailwind's identically-named `size-full` utility, so it must stay
   unlayered. Collision table: docs/styling.md. */
.wp-block-image.size-full {
	height: auto;
}

@layer base {
	body p { margin-block: 1.5rem; }
	body figure { margin-block: 3rem; }

	/* Anton ships weight 400 only; anything heavier synthesises a fake bold. */
	body :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; }

	/* Source copy is mixed case, so Anton's uppercase is applied here rather than
	   at every call site — docs/styling.md. */
	body :is(h1, h2, h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--display); }
	body :is(h1, h2, h3, h4, h5, h6),
	body .font-display {
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	body h1 { font-size: var(--wp--preset--font-size--display-45); line-height: 1.05;  margin-block: 3rem 1.5rem; }
	body h2 { font-size: var(--wp--preset--font-size--display-45); line-height: 1.05; margin-block: 3rem 1.5rem; }
	body h3 { font-size: var(--wp--preset--font-size--display-30); line-height: 1.05; margin-block: 2rem 1.5rem; }
	body h4 { font-size: var(--wp--preset--font-size--display-25); line-height: 1.2;  margin-block: 2rem 1.5rem; }
	body h5 { font-size: var(--wp--preset--font-size--display-22); line-height: 1.25; margin-block: 1.5rem 1.5rem; }
	body h6 { font-size: var(--wp--preset--font-size--display-20); line-height: 1.3;  margin-block: 1.5rem 1.5rem; }

	body :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }

	/* core/list block: restore bullets/numbers and indent that Tailwind preflight zeroes. */
	.wp-block-list { margin-block: 1.5rem; padding-inline-start: 1.5em; }
	.wp-block-list:where(ul) { list-style: disc; }
	.wp-block-list:where(ol) { list-style: decimal; }
	.wp-block-list :where(li > *) { margin-block: 0.5rem; }
	.wp-block-list :where(li > :first-child) { margin-top: 0; }
	.wp-block-list :where(li > :last-child)  { margin-bottom: 0; }

	body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
	body p:last-child { margin-bottom: 0; }

	/* Not one rounded corner in 291 design nodes; these are the elements UA and
	   plugin stylesheets round on their own. */
	:is(button, input, select, textarea, fieldset, img, iframe) { border-radius: 0; }
}

/* A drag saves a computed `aspectRatio` the dropdown can neither show nor clear
   (docs/integrations.md). Selector length beats core's (0,3,0) rule. */
[data-type="core/image"] .components-resizable-box__container.has-show-handle .components-resizable-box__handle {
	display: none;
}

/* The prose cap and the five bg-Group section behaviors below are specified in
   docs/blocks.md, "Background-color Groups behave as full-width sections".
   `core/accordion` caps whole: cap its heading and the hairlines outrun it. */
.wp-block-group :is(p, h1, h2, h3, h4, h5, h6, ul, ol, .wp-block-pullquote, .wp-block-table, .wp-block-accordion):not(.wp-block-accordion-heading),
.site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, .wp-block-pullquote, .wp-block-table, .wp-block-accordion):not(.wp-block-accordion-heading) {
	max-width: 72ch;
	margin-inline-start: max(
		0px,
		calc((100% - var(--wp--style--global--content-size)) / 2)
	) !important;
}

.has-global-padding > .wp-block-group.has-background {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* No padding restored: these blocks nest their own `.container-*` gutter. */
.has-global-padding > .nomon-bleed {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}

.wp-block-group.has-background {
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* The bleed rule un-pads root-level Groups only, so a nested one needs its own. */
.wp-block-group .wp-block-group.has-background {
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.wp-block-group:is(
	.has-black-background-color,
	.has-footer-line-background-color,
	.has-logo-ink-background-color,
	.has-burgundy-background-color,
	.has-accent-strong-background-color
) {
	color: var(--wp--preset--color--white);
}

.wp-block-group.has-accent-background-color {
	color: var(--wp--preset--color--black);
}

/* Owl selector, so the first section sits flush with the page top. `core/group`
   is named directly because it can carry no class of its own. The
   `[data-blockstudio-render-marker]` branches step over the hidden span the
   editor puts before every Blockstudio block. */
.has-global-padding
	> :is(.wp-block-group, .is-duplo, :is(.wp-block-group, .is-duplo) + [data-blockstudio-render-marker])
	+ :is(.wp-block-group, .is-duplo, .nomon-section-heading),
.has-global-padding > .nomon-section-heading:first-child,
.has-global-padding > [data-blockstudio-render-marker]:first-child + .nomon-section-heading {
	margin-top: clamp(2rem, 3.90625vw, 75px);
}

/* Not an `mb-*` utility: WP's unlayered
   `.is-layout-constrained > * { margin-block-end: 0 }` would silently win. */
.nomon-section-heading { margin-bottom: clamp(1.75rem, 2.4vw, 47px); }

/* A black top edge reads as the separator, so those rows sit closer. */
.nomon-section-heading:has(
	+ :is(.nomon-category-cards, .nomon-stat-cards, .has-top-edge),
	+ [data-blockstudio-render-marker] + :is(.nomon-category-cards, .nomon-stat-cards, .has-top-edge)
) {
	margin-bottom: clamp(1rem, 1.3vw, 25px);
}

:is(.nomon-section-heading, .nomon-section-heading + [data-blockstudio-render-marker]) + .nomon-stat-cards > ul {
	border-top: 3px solid var(--wp--preset--color--black);
}

/* Unlayered and `body`-prefixed because core's block stylesheets are unlayered. */

body .wp-block-list.is-style-dash {
	list-style: none;
	padding-inline-start: 0;
}

body .wp-block-list.is-style-dash > li {
	position: relative;
	padding-inline-start: 1.75em;
	line-height: 1.55;
}

body .wp-block-list.is-style-dash > li + li {
	margin-top: 0.75rem;
}

/* `accent-strong`, not `accent`: an em-dash is a glyph, and #ef4123 is 3.85:1. */
body .wp-block-list.is-style-dash > li::before {
	content: '—';
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--accent-strong);
	font-weight: 700;
}

/* Restated because core ships `margin: 0 0 1em` and `padding: 4em 0` here. */
body .wp-block-pullquote {
	margin: 3rem 0;
	padding: 0.375rem 0 0.375rem 1.75rem;
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	/* Core's `1.5em` on the figure inflates the `ch` the prose cap measures in. */
	font-size: inherit;
	text-align: start;
}

body .wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-30);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

body .wp-block-pullquote cite {
	margin-top: 0.875rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-15);
	font-style: normal;
}

/* 14px `muted` on white is 4.68:1 — passing, with nothing to spare. */
body .wp-element-caption {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-14);
	line-height: 1.5;
	text-align: start;
}

body .wp-block-table :is(thead, tfoot) {
	border: 0;
}

body .wp-block-table :is(th, td) {
	padding: 0.9375rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--body-16);
	text-align: start;
	vertical-align: top;
}

body .wp-block-table table > :first-child > tr:first-child :is(th, td) {
	border-top: 1px solid var(--wp--preset--color--black);
}

/* Two-cell rows are the design's label/value pair; wider tables stay a data grid. */
body .wp-block-table tr > :is(th, td):first-child:nth-last-child(2) {
	font-weight: 500;
}

body .wp-block-table tr > :is(th, td):nth-child(2):last-child {
	color: var(--wp--preset--color--muted);
	text-align: end;
}

body .wp-block-accordion {
	border-top: 1px solid var(--wp--preset--color--black);
}

body .wp-block-accordion-item {
	margin-block-start: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Core renders the question at `headingLevel`, which our h3 rule would set in Anton. */
body .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-19);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

body .wp-block-accordion-heading__toggle {
	gap: 1.25rem;
	padding: 1.25rem 0;
	transition: color 0.15s ease;
}

body .wp-block-accordion-heading__toggle:hover {
	color: var(--wp--preset--color--accent-strong);
}

/* The colour change is the whole hover affordance; core also underlines. */
body .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

body .wp-block-accordion-heading__toggle-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--wp--preset--color--accent-strong);
}

body .wp-block-accordion-panel {
	margin-top: 0;
	padding-bottom: 1.375rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-16);
}

body .wp-block-accordion-panel > :first-child {
	margin-top: 0;
}

/* `hidden="until-found"` is content-visibility, not display: none — the padding still renders. */
body .wp-block-accordion-panel[hidden] {
	padding-bottom: 0;
}

/* Each `max-width` is `content + 2 × root padding`, so below ~1880 both widths
   converge — that convergence is the responsive rule. */
@layer components {
	.container-default,
	.container-wide {
		width: 100%;
		margin-inline: auto;
		padding-inline: var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem));
	}

	.container-default { max-width: calc(1660px + 2 * var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem))); }
	.container-wide    { max-width: calc(1720px + 2 * var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem))); }

	/* Bands query this, not their inner box — DESIGN.md §9.4. */
	.container-wide { container-type: inline-size; }

	/* The design's fixed 158 is a minimum (DESIGN.md §9.5). */
	.nomon-band {
		min-height: 158px;
		padding: clamp(1.25rem, 1.5625vw, 30px);
	}

	/* SEOPress owns the markup; renaming the `ol` unhooks its own separator. */
	.site-breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--wp--preset--font-size--body-15);
		font-weight: 500;
		color: var(--wp--preset--color--muted);
	}

	.site-breadcrumbs__item + .site-breadcrumbs__item::before {
		content: "/";
		margin-inline: 0.4em;
	}

	.site-breadcrumbs__item--current { color: var(--wp--preset--color--black); }

	.site-breadcrumbs a { color: inherit; text-decoration: none; }
	.site-breadcrumbs a:hover { text-decoration: underline; }

	/* Not a `[&_a]:` variant: esc_attr() writes it `&`, which Blockstudio's
	   scanner reads back verbatim and fails to compile. Hover is undesigned. */
	.footer-links a { text-decoration: none; }
	.footer-links a:hover { color: var(--wp--preset--color--white); }

	:is(.footer-links, .site-footer__legal) a:focus-visible {
		outline: 2px solid var(--wp--preset--color--accent);
		outline-offset: 2px;
	}

	/* Clipped into the glyphs, so it must be a background — no `<img>` equivalent
	   for `background-clip: text`. Blacks ship lifted to a 3:1 floor; re-export
	   without that lift and the row fails 1.4.3 (DESIGN.md §10.1). `cover` would
	   crop this ~10:1 band to one flat slice, hence the stretch. */
	@supports (background-clip: text) or (-webkit-background-clip: text) {
		.site-footer__statement {
			background-image: url("../img/footer-statement-texture.jpg");
			background-size: 100% 100%;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke: 1px rgb(255 255 255 / 0.35);
		}

		/* The parallax `background-attachment: fixed` used to give, without handing
		   the positioning area to the viewport — the oversize is the pan's slack. */
		@supports (animation-timeline: view()) {
			@media (prefers-reduced-motion: no-preference) {
				.site-footer__statement {
					background-size: 100% 200%;
					animation: footer-statement-pan linear both;
					animation-timeline: view();
				}
			}
		}
	}

	@keyframes footer-statement-pan {
		from { background-position-y: 0%; }
		to { background-position-y: 100%; }
	}
}

@layer base {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: var(--scroll-offset, 2rem);
	}

	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* Gutenberg can't hide the bold/italic buttons on `core/heading`, so the
	   effect is cancelled instead — heading type is theme-controlled. */
	:where(h1, h2, h3, h4, h5, h6) :is(strong, b, em, i) {
		font-weight: inherit;
		font-style: inherit;
	}

	/* Same for the alignment toolbar, which core also offers no way to hide. */
	:is(p, h1, h2, h3, h4, h5, h6):is(
		.has-text-align-left,
		.has-text-align-center,
		.has-text-align-right
	) {
		text-align: inherit;
	}

	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}

	/* The nested screen-reader text is what satisfies WCAG 2.4.4, not the glyph —
	   restyle or hide the icon freely, never the text. */
	a.is-external-link::after,
	a.is-new-window::after {
		content: " ↗";
		display: inline-block;
		font-size: 0.85em;
		vertical-align: super;
		line-height: 1;
	}
	a.is-new-window::after {
		content: " ⧉";
	}
	a.is-external-link.is-new-window::after {
		content: " ⧉";
	}

	/* Glyph only; the screen-reader text stays, so 2.4.4 still holds. */
	:is(.site-footer, .nomon_footer, [data-share]) a.is-external-link::after,
	:is(.site-footer, .nomon_footer, [data-share]) a.is-new-window::after,
	:is(.site-footer, .nomon_footer, [data-share]) a.is-external-link.is-new-window::after {
		content: none;
	}
}

/* Critical pre-init Swiper layout. Deliberately no `visibility: hidden` here —
   it costs the page its LCP preload. Reasoning: docs/runtimes.md. */
.swiper { overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; width: 100%; }

/* FlyingPress lazy-render stamps an inline `content-visibility` with a guessed
   `contain-intrinsic-size`; in the flex row that guess becomes the slider's
   height. `!important` is the only thing that outranks an inline style. */
.swiper-slide,
.swiper-slide * {
	content-visibility: visible !important;
}

/* Editor-only: dresses the post title as page metadata so it doesn't read as
   the body's first H1. Scoped through the wrapper class to outweigh the generic
   `body h1` rules, which add_editor_style rewrites to (0,1,1). */
body {
	padding-top: 0;
}

.edit-post-visual-editor__post-title-wrapper {
	background-color: #f0f0f0;
	color: #1e1e1e;
	margin-block-start: 0 !important;
	margin-block-end: 3rem;
	padding-inline: var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem));
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title {
	color: inherit;
	margin: 0 auto;
	max-width: var(--wp--style--global--content-size, 1440px);
	padding-block: 3rem;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title::before {
	content: "Sivun otsikko";
	display: block;
	color: #666;
	font-size: 0.875rem;
	font-weight: 500;
	margin-block-end: 0.75rem;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title [data-rich-text-placeholder]::after {
	color: #666;
	opacity: 1;
}

/* Unlayered `a.`: core's own `.screen-reader-text:focus` otherwise wins. */
a.skip-link:focus {
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: auto;
	padding: 1rem;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: auto;
	z-index: 100000;
	background: #000;
	color: #fff;
	text-decoration: underline;
}

/* Finnish compounds run a single Anton word past a 320 viewport (1.4.10). */
:is(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Two bands, because one ring colour cannot clear 3:1 on both the white page
   and the black band. Unlayered to beat the `focus-visible:outline-*`
   utilities; `outline` survives forced-colors mode. */
.nomon-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--black);
}

/* A button never shares its band's colour. Resolved here, not from block
   context: the editor caches a block's render on its attributes alone, so a
   context-aware template shows the wrong colour there. Unlayered to beat the
   variant utilities. */
.nomon-surface-orange .nomon-button--primary,
.nomon-surface-orange .nomon-button--outline {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.nomon-surface-orange .nomon-button--primary:hover,
.nomon-surface-orange .nomon-button--outline:hover,
.nomon-surface-black .nomon-button--on-orange {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.nomon-surface-black .nomon-button--on-orange:hover {
	border-color: var(--wp--preset--color--accent-strong);
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--white);
}

/* WS Form retheme. The plugin's styler emits its defaults under a
   zero-specificity `:where([data-wsf-style-id])`, so one class beats it. */
.wsf-form {
	--wsf-form-font-family: var(--wp--preset--font-family--body);
	--wsf-form-font-size: var(--wp--preset--font-size--body-16);
	--wsf-form-font-size-small: var(--wp--preset--font-size--body-14);
	--wsf-form-line-height: 1.4;
	--wsf-form-grid-gap: 24px;
	--wsf-form-color-primary: var(--wp--preset--color--accent-strong);
	--wsf-form-color-accent: var(--wp--preset--color--accent-strong);
	--wsf-form-color-danger: var(--wp--preset--color--accent-strong);

	--wsf-field-border-radius: 0;
	--wsf-field-border-width: 1px;
	--wsf-field-border-color: var(--wp--preset--color--black);
	--wsf-field-border-color-hover: var(--wp--preset--color--black);
	--wsf-field-border-color-focus: var(--wp--preset--color--black);
	--wsf-field-box-shadow-color-focus: var(--wp--preset--color--accent-strong);
	--wsf-field-box-shadow-width-focus: 2px;
	--wsf-field-padding-horizontal: 16px;
	--wsf-field-padding-vertical: 12px;
	--wsf-field-color-placeholder: var(--wp--preset--color--muted);
	--wsf-field-label-font-weight: 600;
	--wsf-field-label-gap: 8px;
	--wsf-field-help-color: #494949;
	--wsf-field-help-gap: 8px;
	--wsf-field-select-arrow-color: var(--wp--preset--color--accent-strong);

	--wsf-field-checkbox-border-radius: 0;
	--wsf-field-checkbox-size: 20px;
	--wsf-field-checkbox-checked-color-background: var(--wp--preset--color--accent-strong);

	--wsf-field-button-width: auto;
	--wsf-field-button-font-family: var(--wp--preset--font-family--display);
	--wsf-field-button-font-size: var(--wp--preset--font-size--display-17);
	--wsf-field-button-font-weight: 400;
	--wsf-field-button-line-height: 1;
	--wsf-field-button-text-transform: uppercase;
	--wsf-field-button-letter-spacing: 0.02em;
	--wsf-field-button-border-width: 2px;
	--wsf-field-button-padding-vertical: 12px;
	--wsf-field-button-padding-horizontal: 25px;
	--wsf-field-button-primary-color-background-hover: var(--wp--preset--color--black);
	--wsf-field-button-primary-border-color-hover: var(--wp--preset--color--black);
	--wsf-field-button-primary-color-background-focus: var(--wp--preset--color--black);
	--wsf-field-button-primary-border-color-focus: var(--wp--preset--color--black);
}

.wsf-form :is([type='checkbox'], [type='radio']) + .wsf-label {
	font-weight: 400;
}

/* Navigation. Adapted from air-light; markup contract and runtime live in
   docs/runtimes.md. Per-site retheme = override the :root block below. */

:root {
	/* Breakpoint at which mobile drawer hands off to desktop bar. JS reads
	 * this value via getComputedStyle to make matchMedia decisions, so it
	 * must stay numeric (no `var()` lookups inside). */
	--breakpoint-nav: 1029px;

	/* Toggle sits on the header, not the drawer — the X needs header contrast. */
	--hamburger-color: var(--wp--preset--color--white);
	--hamburger-color-active: var(--wp--preset--color--white);
	--hamburger-width: 2rem;
	--hamburger-layer-height: 3px;

	/* DESIGN.md §6.2, resized per §10.5. `accent` is only 3.85:1 on white. */
	--color-main-level: var(--wp--preset--color--black);
	--color-hover-main-level: var(--wp--preset--color--accent-strong);
	--color-current: var(--wp--preset--color--accent-strong);
	--typography-size-main-level: 1.0625rem;
	--typography-weight-main-level: 500;
	--padding-main-level-vertical: 0.375rem;
	--gap-main-level-horizontal: 2.5rem;
	--gap-between-dropdown-toggle: 0.625rem;
	--dropdown-toggle-size: 1rem;
	--color-dropdown-toggle: var(--wp--preset--color--accent);

	/* Dropdowns, drawer and nav focus rings are undesigned — awaiting sign-off. */
	--color-sub-menu: var(--wp--preset--color--black);
	--color-hover-sub-menu: var(--wp--preset--color--accent-strong);
	--color-background-sub-menu: var(--wp--preset--color--white);
	--typography-size-sub-menu: 1rem;
	--typography-weight-sub-menu: 500;
	--padding-sub-menu-vertical: 0.625rem;
	--padding-sub-menu-link-vertical: 0.625rem;
	--padding-sub-menu-link-horizontal: 1.25rem;
	--width-sub-menu: 16rem;
	--gap-dropdown: 1.25rem;

	--width-navigation: 80%;
	--color-background-menu-items: var(--wp--preset--color--white);
	--color-separator-nav-mobile: var(--wp--preset--color--border);
	--color-main-level-menu-item-mobile: var(--wp--preset--color--black);
	--color-main-level-menu-item-hover-focus-mobile: var(--wp--preset--color--accent-strong);
	--color-sub-menu-mobile: var(--wp--preset--color--muted);
	--color-current-menu-item: var(--wp--preset--color--accent);
	--color-dropdown-toggle-mobile: var(--wp--preset--color--accent);
	--typography-size-main-level-mobile: 1.1875rem;
	--typography-weight-main-level-mobile: 500;
	--padding-main-level-vertical-mobile: 0.9375rem;
	--typography-size-sub-menu-mobile: 1rem;
	--typography-weight-sub-menu-mobile: 400;
	--margin-left-sub-menu: 0.9375rem;
	--padding-sub-menu-vertical-mobile: 0.625rem;
	--padding-sub-menu-horizontal-mobile: var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem));
}

/* Render twice (header.php), but only one copy is ever displayed. */
.nav-drawer-cta,
.nav-drawer-logo { display: none; }

.hamburger {
	display: block;
	width: var(--hamburger-width);
	height: var(--hamburger-layer-height);
	background-color: var(--hamburger-color);
	position: relative;
	transition: all 0.2s ease 0s;
	flex-shrink: 0;
}
.hamburger::before,
.hamburger::after {
	content: "";
	display: block;
	width: var(--hamburger-width);
	height: var(--hamburger-layer-height);
	background-color: var(--hamburger-color);
	position: absolute;
	transition: all 0.2s ease 0s;
}
.hamburger::before { top: -0.5625rem; }
.hamburger::after  { bottom: -0.5625rem; }

body:not(.js-nav-active) .nav-toggle .hamburger::after,
body:not(.js-nav-active) .nav-toggle:focus .hamburger::after { width: 80%; }
body:not(.js-nav-active) .nav-toggle:hover .hamburger::after { width: 100%; }

.js-nav-active .hamburger { background-color: transparent; }
.js-nav-active .hamburger::before,
.js-nav-active .hamburger::after {
	background-color: var(--hamburger-color-active);
	left: 0;
	top: 0;
}
.js-nav-active .hamburger::before { transform: rotate(-45deg); }
.js-nav-active .hamburger::after  { transform: rotate(45deg); }

.nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	position: relative;
	z-index: 99999;
}

body.js-nav-active { overflow: hidden; }

.nav-primary a:focus-visible,
.nav-toggle:focus-visible,
.nav-primary .dropdown-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 2px;
}

@media (max-width: 1029.98px) {
	.nav-primary .menu-items ul { display: none; }
	.nav-primary ul .sub-menu.toggled-on { display: block; }

	.nav-primary { align-self: center; }

	.site-header ul,
	.site-header li,
	.site-header a { position: relative; }

	.nav-primary .menu-items-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--width-navigation);
		height: calc(100dvh - 7.2rem); /* JS recalculates from actual header height */
		background-color: var(--color-background-menu-items);
		transform: translate3d(-100%, 0, 0);
		transition: transform 220ms cubic-bezier(0.19, 1, 0.22, 1), opacity 180ms ease-in-out;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		overflow: auto;
		padding-bottom: 7.5rem;
		backface-visibility: hidden;
		z-index: 5;
	}

	.site-header .header-cta { display: none; }

	.nav-primary .menu-items-wrapper .nav-drawer-cta {
		display: flex;
		margin: var(--padding-sub-menu-horizontal-mobile);
		width: auto;
	}

	/* Below the drawer's own z-index 5, above everything the page paints. */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgb(0 0 0 / 0.5);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 220ms ease, visibility 220ms;
		z-index: 4;
	}
	body.js-nav-active::before { opacity: 1; visibility: visible; }

	.nav-primary .menu-items { margin: 0; padding: 0; list-style: none; }
	.nav-primary .menu-item {
		margin: 0 var(--padding-sub-menu-horizontal-mobile);
		border-top: 1px solid var(--color-separator-nav-mobile);
	}
	.nav-primary .sub-menu .menu-item { margin-inline: 0; }

	.nav-primary .menu-items-wrapper :is(a, .dropdown-toggle):focus-visible {
		outline-color: var(--wp--preset--color--black);
		outline-offset: -2px;
	}

	/* Lands on the header's own logo, which the drawer opens over. */
	.nav-primary .menu-items-wrapper .nav-drawer-logo {
		display: flex;
		align-items: center;
		min-height: 90px;
		padding-inline: var(--padding-sub-menu-horizontal-mobile);
		color: var(--wp--preset--color--logo-ink);
	}

	.nav-primary .menu-item a {
		display: block;
		padding-block: var(--padding-main-level-vertical-mobile);
		color: var(--color-main-level-menu-item-mobile);
		font-size: var(--typography-size-main-level-mobile);
		font-weight: var(--typography-weight-main-level-mobile);
		text-decoration: none;
		position: relative;
		z-index: 0;
	}
	.nav-primary .menu-item a:hover,
	.nav-primary .menu-item a:focus { color: var(--color-main-level-menu-item-hover-focus-mobile); }
	.nav-primary .menu-item.current-menu-parent > a,
	.nav-primary .menu-item.current-menu-item > a { color: var(--color-current-menu-item); }

	.nav-primary .sub-menu { margin: 0; padding: 0; list-style: none; }
	.nav-primary .sub-menu a {
		color: var(--color-sub-menu-mobile);
		font-size: var(--typography-size-sub-menu-mobile);
		font-weight: var(--typography-weight-sub-menu-mobile);
		padding-block: var(--padding-sub-menu-vertical-mobile);
		padding-left: var(--margin-left-sub-menu);
	}
	.nav-primary .sub-menu .sub-menu a {
		padding-left: calc(var(--margin-left-sub-menu) * 2);
	}

	.nav-primary .dropdown-toggle {
		position: absolute;
		top: 2px;
		right: 0;
		height: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding-block: var(--padding-sub-menu-vertical-mobile);
		padding-left: var(--padding-sub-menu-horizontal-mobile);
		padding-right: 0;
		background: transparent;
		border: 0;
		color: var(--color-dropdown-toggle-mobile);
		cursor: pointer;
		z-index: 100;
	}
	.nav-primary .dropdown-toggle svg {
		width: var(--dropdown-toggle-size);
		height: auto;
		transition: transform 150ms;
		pointer-events: none;
	}
	.nav-primary .dropdown-toggle.toggled-on svg { transform: rotate(180deg); }
	.nav-primary .sub-menu .dropdown-toggle { color: var(--color-sub-menu-mobile); }

	.js-nav-active .nav-primary .menu-items-wrapper {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 782px) {
	.logged-in.admin-bar .nav-primary .menu-items-wrapper { margin-top: 46px; }
}

@media (min-width: 1030px) {
	.nav-toggle { display: none; }

	.nav-primary { line-height: 0; padding-block: 0; flex: 1; }

	.nav-primary .menu-items {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: var(--gap-main-level-horizontal);
		row-gap: 0.625rem;
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;
	}

	.nav-primary .menu-item { margin: 0; position: relative; }

	.nav-primary .menu-item > a {
		display: inline-flex;
		align-items: center;
		color: var(--color-main-level);
		font-size: var(--typography-size-main-level);
		font-weight: var(--typography-weight-main-level);
		padding-block: var(--padding-main-level-vertical);
		white-space: nowrap;
		text-decoration: none;
	}
	.nav-primary .menu-item > a:hover,
	.nav-primary .menu-item > a:focus { color: var(--color-hover-main-level); }
	.nav-primary .menu-item.current-menu-parent > a,
	.nav-primary .menu-item.current-menu-item > a { color: var(--color-current); }

	.nav-primary .menu-item.menu-item-has-children {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap-between-dropdown-toggle);
	}

	/* Bridges the gap to the submenu so hover survives the empty space. Only live
	   while hovered, so it never captures clicks at rest. */
	.nav-primary .menu-item.menu-item-has-children::after {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		width: 100%;
		max-width: var(--width-sub-menu);
		height: var(--gap-dropdown);
		visibility: hidden;
	}
	.nav-primary .menu-item.menu-item-has-children.hover-intent::after {
		visibility: visible;
		z-index: 100;
	}
	.nav-primary .sub-menu .menu-item-has-children::after { display: none; }

	.nav-primary .sub-menu {
		--color-current: var(--color-sub-menu);
		position: absolute;
		top: 100%;
		left: 0;
		width: var(--width-sub-menu);
		margin: 0;
		margin-top: var(--gap-dropdown);
		padding: 0;
		list-style: none;
		background-color: var(--color-background-sub-menu);
		border: 1px solid var(--wp--preset--color--border);
		border-top: 3px solid var(--wp--preset--color--accent);
		padding-block: var(--padding-sub-menu-vertical);
		opacity: 0;
		visibility: hidden;
		transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
		z-index: 9;
	}
	.nav-primary .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		margin-top: calc(-1 * var(--padding-sub-menu-vertical));
	}

	.nav-primary .sub-menu.is-out-of-viewport { left: auto; right: 0; }
	.nav-primary .sub-menu.is-out-of-viewport .sub-menu,
	.nav-primary .sub-menu .sub-menu.is-out-of-viewport { left: auto; right: 100%; }

	.nav-primary .menu-item .sub-menu a {
		display: inline-flex;
		align-items: center;
		width: 100%;
		color: var(--color-sub-menu);
		font-size: var(--typography-size-sub-menu);
		font-weight: var(--typography-weight-sub-menu);
		line-height: 1.5;
		padding-block: var(--padding-sub-menu-link-vertical);
		padding-inline: var(--padding-sub-menu-link-horizontal);
		text-decoration: none;
		white-space: normal;
	}
	.nav-primary .menu-item .sub-menu a:hover,
	.nav-primary .menu-item .sub-menu a:focus {
		color: var(--color-hover-sub-menu);
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}
	.nav-primary .sub-menu .menu-item.current-menu-item > a {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}

	.nav-primary .menu-item-has-children:hover > .sub-menu,
	.nav-primary .menu-item-has-children:focus-within > .sub-menu,
	.nav-primary .menu-item-has-children.hover-intent > .sub-menu {
		opacity: 1;
		visibility: visible;
		z-index: 12;
	}

	/* Beats the `:focus-within` above at equal specificity by position — Escape
	   fires while the trigger still holds focus. Keep it below that rule. */
	.nav-primary .menu-item-has-children.is-esc-closed > .sub-menu {
		opacity: 0;
		visibility: hidden;
		z-index: 9;
	}

	/* Dropdown toggle on desktop is decorative — pointer-events: none lets
	 * clicks fall through to the parent <a>. The svg is the visual cue. */
	.nav-primary .dropdown-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--color-dropdown-toggle);
		pointer-events: none;
	}
	.nav-primary .dropdown-toggle svg {
		width: var(--dropdown-toggle-size);
		height: auto;
		transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
	}
	.nav-primary .menu-item-has-children.hover-intent > .dropdown-toggle svg {
		transform: rotateX(180deg);
	}
	.nav-primary .sub-menu .dropdown-toggle svg { transform: rotate(-90deg); }
	.nav-primary .sub-menu .hover-intent > .dropdown-toggle svg {
		transform: rotate(-90deg) rotateX(180deg);
	}
}