/*
 * Nomon Theme — base stylesheet.
 *
 * Tailwind v4 (compiled by Blockstudio) owns the reset and all utility
 * styling. This file owns only what utilities can't express: typography
 * defaults on core-block markup, accessibility shells, the WCAG 2.4.4 link
 * decorators, editor-only chrome, and the navigation layer.
 */

/* Declared here rather than racing Blockstudio's inline style. Holds only while Blockstudio
 * emits layered utilities — the smoke-test in docs/styling.md is the canary. */
@layer theme, base, components, utilities;

/* Layered so utilities win per-instance; unlayering these would make them unbeatable.
 * The bare `body` rule stays unlayered — layered it ties with preflight and flips leading. */
body {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.75;
	--prose-cap: 72ch;
}

/* Registered so `ch` resolves against body's font here, not per heading at the point of use. */
@property --prose-cap { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* WP's `size-full` marker collides with Tailwind's utility of that name; unlayered on
 * purpose so it beats the layered utility. See docs/styling.md. */
.wp-block-image.size-full {
	height: auto;
}

/* core/table: unlayered, and one element more specific than core's per-block table stylesheet, which loads after this file. */
.wp-block-table__scroll { overflow-x: auto; }
.wp-block-table table { width: 100%; }
.wp-block-table table.has-fixed-layout { table-layout: auto; }
.wp-block-table table.has-fixed-layout :is(th, td) { word-break: normal; }
.wp-block-table table thead { border-block-end: 0; }

.wp-block-table caption {
	margin-block-end: 0.75rem;
	text-align: start;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-table table :is(th, td) {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding: 0.75rem 1rem;
	text-align: start;
	vertical-align: top;
}

.wp-block-table table th { font-weight: 600; }
.wp-block-table table thead th { border-block-end-width: 2px; }
.wp-block-table table tbody tr:last-child :is(th, td) { border-block-end: 0; }

/* core/quote, unlayered for the same reason: one centred sentence on an inset ink card, the process block's shape. */
.wp-block-quote {
	margin-block: 0;
	border: 0;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
	border-radius: 1.25rem;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-align: center;
}

.wp-block-quote > p {
	max-width: 40ch;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.5;
}

.wp-block-quote > p:first-child::before,
.wp-block-quote > p:last-child::after { content: "\201D"; }

/* Inset cards that widen to full bleed as they scroll through; main.js tints the page while they are full width.
 * The inset is measured from the viewport so it holds whether the card is full width itself or bleeds out of a Group. */
.has-global-padding > .nomon-process.nomon-bleed {
	padding-inline: 0;
}

.site-content > .wp-block-quote,
.site-content > .wp-block-group:not(.has-background) > .wp-block-quote {
	max-width: none;
	margin-inline: calc(50% - 50vw + var(--nomon-scrollbar, 0px) / 2) !important;
}

.nomon-process__card,
.site-content > .wp-block-quote,
.site-content > .wp-block-group:not(.has-background) > .wp-block-quote {
	--bleed-inset: max(var(--wp--style--root--padding-left), (100vw - var(--nomon-scrollbar, 0px) - var(--wp--style--global--content-size)) / 2);
	/* Text sits on the content edge like every other block; the inset card reaches past it instead. */
	--bleed-outdent: min(clamp(1.5rem, 4vw, 4rem), var(--bleed-inset) / 2);
	padding-inline: var(--bleed-inset);
	border-radius: 0;
	clip-path: inset(0 calc(var(--bleed-inset) - var(--bleed-outdent)) round 1.25rem);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nomon-process__card,
		.site-content > .wp-block-quote,
		.site-content > .wp-block-group:not(.has-background) > .wp-block-quote {
			animation: nomon-bleed linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

/* main.js switches the page tone on the 30%–70% plateau; keep the two in step. */
@keyframes nomon-bleed {
	27%, 73% { clip-path: inset(0 0 round 1.25rem); }
	30%, 70% { clip-path: inset(0 0 round 0); }
}

/* Unlayered: WordPress's `:where(figure)` margin outranks layered Tailwind utilities. */
.nomon-post-grid__card > figure {
	margin: 0;
}

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

	body :is(h1, h2, h3, h4, h5, h6) { color: var(--nomon-heading-color, #000); font-weight: 500; }

	/* Light-on-dark containers hand their colour back; `inherit` is a no-op as a custom-property value. */
	:is(.text-paper, .has-ink-background-color, .has-ink-soft-background-color, .wp-block-quote, .site-footer) { --nomon-heading-color: currentColor; }

	/* Finnish compounds can exceed a narrow column at heading sizes. main.js hyphenates only
	   those headings (`<html lang="fi">` supplies the rules); break-word is the fallback. */
	body :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }
	body :is(h1, h2, h3, h4, h5, h6).is-hyphenated { hyphens: auto; }
	body :is(h1, h2, h3, h4, h5, h6).is-measuring { overflow-wrap: normal; }

	body :is(p, li, dd, dt, figcaption) { overflow-wrap: break-word; }

	/* Lead paragraphs run at body leading otherwise, which is loose at 28px. */
	body .has-lead-font-size { line-height: 1.55; }

	body h1 { font-size: var(--wp--preset--font-size--heading-1); line-height: 1.15; margin-block: 3rem 1.5rem; }
	body h2 { font-size: var(--wp--preset--font-size--heading-2); line-height: 1.1; letter-spacing: -0.035em; margin-block: 3rem 1.5rem; }
	body h3 { font-size: var(--wp--preset--font-size--heading-3); line-height: 1.25;  margin-block: 2rem 1.5rem; }
	body h4 { font-size: var(--wp--preset--font-size--heading-4); line-height: 1.35; margin-block: 2rem 1.5rem; }
	body h5 { font-size: var(--wp--preset--font-size--heading-4); line-height: 1.35;  margin-block: 1.5rem 1.5rem; }
	body h6 { font-size: var(--wp--preset--font-size--heading-4); line-height: 1.35;  margin-block: 1.5rem 1.5rem; }

	:is(.type-post, .type-case) .entry-content :is(h2, h3, h4, h5, h6) { line-height: 1.35; letter-spacing: normal; }

	:is(.type-post, .type-case) .entry-content h2 { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); }
	:is(.type-post, .type-case) .entry-content h3 { font-size: var(--wp--preset--font-size--heading-3); }
	:is(.type-post, .type-case) .entry-content :is(h4, h5, h6) { font-size: var(--wp--preset--font-size--heading-4); font-weight: 600; }
	:is(.type-post, .type-case) .entry-content > p:first-child { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; }

	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; }

	.wp-block-list.is-style-check { list-style: none; padding-inline-start: 0; }
	.wp-block-list.is-style-check > li { position: relative; padding-inline-start: 2.1875rem; margin-block: 0.875rem; }
	.wp-block-list.is-style-check > li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: calc((1lh - 1.25rem) / 2);
		width: 1.25rem;
		height: 1.25rem;
		background-color: var(--wp--preset--color--accent);
		mask: url("../icons/check-badge.svg") no-repeat center / contain;
	}

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

/* Descendant so nested prose is capped too; `nomon/*` roots that are lists (tiles, stats) are layout, not prose, and a quote centres its own text. */
.wp-block-group :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl):not([class*="wp-block-nomon-"], .wp-block-quote > *),
.nomon-hero :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl):not([class*="wp-block-nomon-"], .wp-block-quote > *),
.nomon-content-media :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl):not([class*="wp-block-nomon-"], .wp-block-quote > *),
.site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl):not([class*="wp-block-nomon-"]) {
	max-width: var(--prose-cap);
	/* Half the parent's overflow past contentSize, so prose starts on the same edge whether
	 * the parent is constrained or full-bleed. `!important` beats WP's own. */
	margin-inline-start: max(
		0px,
		calc((100% - var(--wp--style--global--content-size)) / 2)
	) !important;
}

/* WordPress's block gap is unlayered, so it beats the heading margins in `@layer base`; content headings take them back here. */
.is-layout-constrained > h2.wp-block-heading:not(:first-child) { margin-block-start: 3rem; }
.is-layout-constrained > :is(h3, h4, h5, h6).wp-block-heading:not(:first-child) { margin-block-start: 2rem; }
.is-layout-constrained > .wp-block-heading + * { margin-block-start: 1.5rem; }
.is-layout-constrained > .wp-block-heading + .wp-block-heading { margin-block-start: 0.75rem; }

.wp-block-group > :is(h2, h3) + [class*="wp-block-nomon-"],
.wp-block-group > * + .wp-block-columns {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

/* Mirrors native `.alignfull`; composite blocks opt in with `.nomon-bleed`, since `.has-background` only matches Groups. */
.has-global-padding > .wp-block-group.has-background,
.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;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Bands round their top like the footer. Two that touch share one seam with no gap,
 * and a band that ends the page docks onto the footer. */
.has-global-padding > :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)) {
	border-start-start-radius: 1.75rem;
	border-start-end-radius: 1.75rem;
}

.site-content > :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)) + :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)) {
	margin-top: 0;
}

/* Fills the lower band's rounded top corners with the upper band's colour instead of the page's. */
.site-content > :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)):has(+ :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface))) {
	position: relative;
}

.site-content > :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)):has(+ :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)))::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 100%;
	height: 1.75rem;
	background: inherit;
	z-index: -1;
}

body:has(.site-content > :is(.wp-block-group.has-background, .nomon-bleed:is(.bg-ink, .bg-surface)):last-child) .site-footer {
	margin-top: 0;
}

/* The footer's rounded corners expose what sits behind them; over a docked band that must be the band's colour. */
body:has(.site-content > .bg-surface:last-child) .site-footer { --footer-notch: var(--wp--preset--color--surface); }
body:has(.site-content > :is(.bg-ink, .has-ink-background-color):last-child) .site-footer { --footer-notch: var(--wp--preset--color--ink); }

/* theme.json disables spacing controls on `core/group`, so the padding has to live here. */
.wp-block-group.has-background {
	padding-block: clamp(2rem, 6vw, 4rem);
}

.wp-block-group.has-background:not(.has-global-padding > *) {
	padding-inline: var(--wp--style--root--padding-left);
}

/* Descendants inherit: base styles set no explicit color and preflight resets links. */
.wp-block-group.has-ink-background-color,
.wp-block-group.has-ink-soft-background-color {
	color: var(--wp--preset--color--paper);
}

/* Composite blocks join the rhythm by carrying `.nomon-section` beside their own class. */
.has-global-padding > :is(.wp-block-group, .wp-block-quote, .nomon-section) + :is(.wp-block-group, .wp-block-quote, .nomon-section) {
	margin-top: var(--wp--preset--spacing--section);
}

/* The hero is sized so the row shows at the fold; the full rhythm undoes that. */
.has-global-padding > .nomon-hero--statement + .nomon-case-grid--row {
	margin-top: 0;
}

/* A title-only Group sits as close to its content as the archive blocks' own headings do. */
.has-global-padding > .wp-block-group:not(.has-background):has(> h1:only-child) + :is(.wp-block-group, .nomon-section) {
	margin-top: var(--wp--preset--spacing--xxl);
}

/* The hero has its own top padding; stacked with this one it sits too low. */
.site-content > .nomon-hero--statement:first-child {
	margin-block-start: calc(var(--wp--preset--spacing--section) * -1);
}

.site-content {
	padding-block-start: var(--wp--preset--spacing--section);
}

@layer base {
	html {
		scroll-padding-top: calc(var(--nomon-header-h) + 1rem);
		scrollbar-gutter: stable;
	}

	/* Not on `html` itself: reload scroll restoration would animate too. */
	html:focus-within {
		scroll-behavior: smooth;
	}

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

	/* Gutenberg can't hide the bold/italic toolbar on core blocks, so cancel its effect instead. `:is`, not `:where`: preflight's later `b, strong` ties otherwise. */
	:is(h1, h2, h3, h4, h5, h6) :is(strong, b, em, i) {
		font-weight: inherit;
		font-style: inherit;
	}

	: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;
	}

	.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: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
		text-decoration: underline;
	}

	/* Inheriting colour and carrying the underline keeps links legible on light and ink alike. */
	body a:where(:not([class*="wp-block-button"])) {
		color: inherit;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	body a:where(:not([class*="wp-block-button"])):hover {
		text-decoration-thickness: 2px;
	}

	:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* WCAG 2.4.4 decorators. The screen-reader text carries compliance — restyle or hide the
	 * glyph 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 injected .screen-reader-text stays so WCAG 2.4.4 still announces it. */
	:is(.site-footer, .nomon_footer, .nomon-share) a.is-external-link::after,
	:is(.site-footer, .nomon_footer, .nomon-share) a.is-new-window::after,
	:is(.site-footer, .nomon_footer, .nomon-share) a.is-external-link.is-new-window::after,
	a.nomon-button:is(.is-external-link, .is-new-window)::after {
		content: none;
	}
}

/* Critical Swiper layout before the lazy vendor CSS lands. No pre-init `visibility: hidden`
 * — that hid the hero from FlyingPress's above-the-fold pass (docs/runtimes.md). */
.swiper { overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; width: 100%; }
/* Overrides FlyingPress Lazy Render's inline style — see docs/runtimes.md. */
.swiper-slide,
.swiper-slide * { content-visibility: visible !important; }

/* Swiper's unlayered `.swiper-slide { height: 100% }` outranks `h-auto`, and a
   percentage height is not `auto`, which is what flex stretch needs. */
.swiper-wrapper.items-stretch > .swiper-slide { height: auto; }

/* The whole right gutter; `vw` counts the scrollbar, which main.js measures into `--nomon-scrollbar`. */
.swiper-bleed-end {
	margin-inline-end: calc(50% - 50vw + var(--nomon-scrollbar, 0px) / 2);
}

/* Core supplies layout and icon rotation; this adds the reference hairline and rhythm. */
.wp-block-accordion-item {
	/* Rows sit flush; the hairline is the separator, so the flow layout's
	   blockGap between items has to go. */
	margin-block-start: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.wp-block-accordion-item:last-child {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.wp-block-accordion-heading__toggle {
	gap: var(--wp--preset--spacing--md);
	padding-block: 1.25rem;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -0.015em;
}

.wp-block-accordion-heading__toggle-icon {
	width: 1.375rem;
	height: 1.375rem;
	flex-shrink: 0;
}

/* Retimes core's own rotation. Mirrors core's (0,3,0) selector and its
   reduced-motion guard — a bare toggle-icon rule ties and loses. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item > .wp-block-accordion-heading > .wp-block-accordion-heading__toggle > .wp-block-accordion-heading__toggle-icon {
		transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
}

.wp-block-accordion-panel {
	margin-block-start: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
}

/* Spacing on the last child, not panel padding: padding can't collapse into the closed `0fr` row. */
.wp-block-accordion-panel > :last-child { margin-block-end: 1.25rem; }

/* The answer grows in through the item's second grid row. Closing stays instant: Tailwind's
   preflight sets `[hidden] { display: none !important }` in a layer, which unlayered CSS can't outrank. */
.wp-block-accordion-item {
	display: grid;
	grid-template-rows: min-content 0fr;
}
.wp-block-accordion-item.is-open { grid-template-rows: min-content 1fr; }

.wp-block-accordion-item > .wp-block-accordion-panel {
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item { transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

/* Touch keeps `:hover` on the last tapped question, so core's underline stuck after closing. */
@media (hover: none) {
	.wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
}


/* Editor-only: flattens Gutenberg's InnerBlocks wrappers, which break parent flex/grid.
 * Unlayered to outrank editor styles; descendant combinators since `useBlockProps` shifts a level. */
[data-type^="nomon/"] .block-editor-inner-blocks,
[data-type^="nomon/"] .block-editor-block-list__layout {
	display: contents;
}

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

/* Editor-only: makes the post title read as page metadata, not the first H1. */
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, 1460px);
	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;
}

/* Header shell. Sticky, so it is also the containing block the mega panel hangs from. */

/* The bar's own heights either side of 1030px; the statement hero splits the rest of the screen against it. */
:root { --nomon-header-h: 6.5rem; }

@media (min-width: 1030px) {
	:root { --nomon-header-h: 5rem; }
}

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) 85%, transparent);
	backdrop-filter: blur(14px);
	transition:
		background-color var(--nav-bar-duration) var(--nav-mega-ease),
		color var(--nav-bar-duration) var(--nav-mega-ease);
}

/* Fixed admin bar over a sticky header swallows hover on its top rows; under 600px WP unpins it. */
.admin-bar .site-header { inset-block-start: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .site-header { inset-block-start: 46px; }
}

@media screen and (max-width: 600px) {
	.admin-bar .site-header { inset-block-start: 0; }
}

/* Frosted panel over a card image or brand colour; `--dark` inverts for light text. */
.nomon-glass {
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) 30%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nomon-glass--dark {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
}

body.js-mega-active .site-header,
body.js-nav-active .site-header,
body[data-page-tone="ink"] .site-header {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* The nav tokens are pinned to the light palette otherwise. */
body.js-mega-active .nav-primary,
body.js-nav-active .nav-primary,
body[data-page-tone="ink"] .nav-primary {
	--color-main-level: var(--wp--preset--color--paper);
	--color-hover-main-level: var(--wp--preset--color--paper);
	--color-current: var(--wp--preset--color--paper);
	--hamburger-color: var(--wp--preset--color--ink);
	--nav-toggle-border: color-mix(in srgb, var(--wp--preset--color--paper) 30%, transparent);
}

@media (min-width: 1030px) {
	body.js-mega-active .nav-primary .menu-item.cta > a,
	body[data-page-tone="ink"] .nav-primary .menu-item.cta > a {
		background-color: var(--wp--preset--color--paper);
		color: var(--wp--preset--color--ink);
	}
}


.nav-primary .menu-items > .menu-item > a,
.nav-primary .menu-items > .menu-item > .dropdown-toggle {
	opacity: 0.75;
	transition: opacity 0.2s;
}

.nav-primary .menu-items > .menu-item:hover > a,
.nav-primary .menu-items > .menu-item:focus-within > a,
.nav-primary .menu-items > .menu-item.is-open > a,
.nav-primary .menu-items > .menu-item:hover > .dropdown-toggle,
.nav-primary .menu-items > .menu-item.is-open > .dropdown-toggle,
.nav-primary .menu-items > .menu-item.current-menu-item > a,
.nav-primary .menu-items > .menu-item.cta > a {
	opacity: 1;
}

/* Navigation, adapted from air-light; markup contract and runtime in docs/runtimes.md. */

:root {
	/* Must stay numeric: JS reads it via getComputedStyle for matchMedia. */
	--breakpoint-nav: 1029px;

	/* The lines sit on a currentColor dot, so they take the bar's background. */
	--hamburger-color: var(--wp--preset--color--paper);
	--nav-toggle-border: color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	--nav-drawer-duration: 600ms;

	/* Mega links sit a step down from the group headings so the hierarchy reads without a size change. */
	--color-background-mega: var(--wp--preset--color--ink);
	--color-text-mega: var(--wp--preset--color--paper);
	--color-text-mega-link: color-mix(in srgb, var(--wp--preset--color--paper) 65%, transparent);
	--nav-mega-link-padding: 0.625rem;
	--nav-bar-duration: 450ms;
	--nav-mega-duration: 550ms;
	--nav-mega-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--nav-mega-lead: 80ms;
	--nav-mega-stagger: 70ms;
	--nav-icon-duration: 400ms;

	--color-main-level: var(--wp--preset--color--ink);
	--color-hover-main-level: var(--wp--preset--color--ink);
	--color-current: var(--wp--preset--color--ink);
	--typography-size-main-level: 1.0625rem;
	--typography-weight-main-level: 600;
	--padding-main-level-vertical: 0.375rem;
	--gap-main-level-horizontal: clamp(1rem, 2.4vw, 2.25rem);
	--gap-between-dropdown-toggle: 0.375rem;
	--dropdown-toggle-size: 0.875rem;

	--color-sub-menu: var(--wp--preset--color--paper);
	--color-hover-sub-menu: var(--wp--preset--color--paper);
	--color-background-sub-menu: var(--wp--preset--color--ink);
	--typography-size-sub-menu: 1rem;
	--typography-weight-sub-menu: 600;
	--padding-sub-menu-vertical: 0.625rem;
	--padding-sub-menu-link-vertical: 0.5rem;
	--padding-sub-menu-link-horizontal: 1.25rem;
	--width-sub-menu: 12.5rem;
	--gap-dropdown: 1.6rem;
	--nav-mega-column-gap: clamp(1.5rem, 4vw, 4.5rem);

	--color-rule-nav-mobile: color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
	--padding-sub-menu-horizontal-mobile: var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem));
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	height: 2.75rem;
	margin: 0;
	padding: 0 0.375rem 0 1rem;
	border: 1px solid var(--nav-toggle-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--nav-bar-duration) var(--nav-mega-ease);
}

.nav-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__label--open,
.nav-toggle[aria-expanded="false"] .nav-toggle__label--close { display: none; }

.nav-toggle__dot {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: currentColor;
}

.hamburger {
	position: relative;
	display: block;
	width: 0.875rem;
	height: 0.625rem;
}
.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--hamburger-color);
	transition:
		transform var(--nav-bar-duration) var(--nav-mega-ease),
		background-color var(--nav-bar-duration) var(--nav-mega-ease);
}
.hamburger::before { top: 0; }
.hamburger::after  { bottom: 0; }
.js-nav-active .hamburger::before { transform: translateY(4px) rotate(45deg); }
.js-nav-active .hamburger::after  { transform: translateY(-4px) rotate(-45deg); }

body.js-nav-active { overflow: hidden; }
/* Above the cookie plugin's floating button (z-index 1000). */
body.js-nav-active .site-header { z-index: 1001; }

@media (max-width: 720px) {
	:root { --nomon-header-h: 4.5rem; }
	.site-header__bar { padding-block: 0.875rem; }
	.site-header .site-logo { height: 1.25rem; }
}

@media (max-width: 1029.98px) {
	:root { --nomon-header-h: 5.25rem; }

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

	.nav-primary .menu-items-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		/* Not 100vw: the header's backdrop-filter makes it the containing block, and 100vw overflows it by the scrollbar. Clipping instead hides the open drawer in iOS Safari. */
		width: 100%;
		height: calc(100dvh - 7.2rem); /* JS recalculates from actual header height */
		display: flex;
		flex-direction: column;
		padding: 1.5rem var(--padding-sub-menu-horizontal-mobile) max(1.75rem, env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
		visibility: hidden;
		/* Visibility is held to the end of the close so the panel doesn't blink out mid-wipe. */
		clip-path: inset(0 0 100% 0);
		transition:
			visibility 0s linear var(--nav-drawer-duration),
			clip-path var(--nav-drawer-duration) var(--nav-mega-ease);
		z-index: 5;
	}

	.js-nav-active .nav-primary .menu-items-wrapper {
		visibility: visible;
		clip-path: inset(0);
		transition:
			visibility 0s,
			clip-path var(--nav-drawer-duration) var(--nav-mega-ease);
	}

	.nav-primary .menu-items,
	.nav-primary .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nav-primary .menu-items {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		border-top: 1px solid var(--color-rule-nav-mobile);
	}

	.nav-primary .menu-items > .menu-item {
		border-bottom: 1px solid var(--color-rule-nav-mobile);
		opacity: 0;
		transform: translateY(-1rem);
		--nav-row-delay: calc(0.12s + var(--i, 0) * 0.06s);
		transition:
			opacity 0.5s ease var(--nav-row-delay),
			transform var(--nav-drawer-duration) var(--nav-mega-ease) var(--nav-row-delay);
	}

	.js-nav-active .nav-primary .menu-items > .menu-item {
		opacity: 1;
		transform: none;
	}

	.nav-primary .menu-items > .menu-item > a,
	.nav-primary .menu-items > .menu-item > .dropdown-toggle { opacity: 1; }

	.nav-primary .menu-items > .menu-item > a {
		display: block;
		padding-block: 1.125rem;
		color: inherit;
		font-size: 2rem;
		font-weight: 500;
		letter-spacing: -0.03em;
		line-height: 1;
		text-decoration: none;
	}

	/* Grid rows animate the accordion open: `0fr → 1fr` needs no measuring. `min-content`, not `auto`: Chrome balloons an `auto` row mid-transition. */
	.nav-primary .menu-items > .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: min-content 0fr;
		transition:
			opacity 0.5s ease var(--nav-row-delay),
			transform var(--nav-drawer-duration) var(--nav-mega-ease) var(--nav-row-delay),
			grid-template-rows 0.5s var(--nav-mega-ease);
	}
	.nav-primary .menu-items > .menu-item-has-children:has(> .sub-menu.toggled-on) {
		grid-template-rows: min-content 1fr;
	}

	.nav-primary .menu-items > .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
		min-height: 0;
		overflow: hidden;
		visibility: hidden;
		transition: visibility 0s linear 0.5s;
	}
	.nav-primary .menu-items > .menu-item-has-children > .sub-menu.toggled-on {
		visibility: visible;
		transition: none;
	}

	.nav-primary .dropdown-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 2.75rem;
		padding: 0;
		background: transparent;
		border: 0;
		color: inherit;
		cursor: pointer;
	}
	.nav-primary .dropdown-toggle svg {
		width: 1.375rem;
		height: 1.375rem;
		transition: transform var(--nav-icon-duration) var(--nav-mega-ease);
		pointer-events: none;
	}
	.nav-primary .dropdown-toggle.toggled-on svg { transform: rotate(180deg); }

	/* Group headings are labels here: their lists stay open, so the nested toggles go. */
	.nav-primary .sub-menu .dropdown-toggle { display: none; }

	.nav-primary .menu-items > .menu-item > .sub-menu > .menu-item {
		padding-block: 0.25rem 1.375rem;
	}
	.nav-primary .menu-items > .menu-item > .sub-menu > .menu-item:first-child { padding-block-start: 0.5rem; }

	.nav-primary .sub-menu > .menu-item > a {
		display: block;
		padding-block-end: 0.5rem;
		color: color-mix(in srgb, var(--wp--preset--color--paper) 50%, transparent);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.nav-primary .sub-menu .sub-menu a {
		display: block;
		padding-block: 0.4375rem;
		color: color-mix(in srgb, var(--wp--preset--color--paper) 75%, transparent);
		font-size: 1.0625rem;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		text-decoration: none;
	}
	.nav-primary .sub-menu .sub-menu a:hover,
	.nav-primary .sub-menu .sub-menu a:focus-visible,
	.nav-primary .sub-menu .current-menu-item > a { color: var(--wp--preset--color--paper); }

	.nav-contact {
		margin-top: auto;
		padding-top: 2rem;
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding-top: 1.25rem;
		font-size: 0.8125rem;
	}
	.nav-contact a {
		color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
		text-decoration: none;
	}

	.nav-contact {
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	.js-nav-active .nav-contact {
		opacity: 1;
		transition-delay: 0.4s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-toggle,
	.hamburger::before,
	.hamburger::after,
	.nav-primary .menu-items-wrapper,
	.nav-primary .menu-items > .menu-item,
	.nav-primary .menu-items > .menu-item > .sub-menu,
	.nav-contact {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
}

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

	.site-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		/* The pill leaves the flow, so the row can no longer inherit its height. */
		min-height: 5rem;
	}

	.nav-primary { line-height: 0; padding-block: 0; grid-column: 2; }

	/* Anchored to the header, not the row: the row must stay unpositioned or the
	   mega panel resolves against it and loses its full-bleed. */
	.nav-primary .menu-item.cta {
		position: absolute;
		inset-inline-end: var(--wp--style--root--padding-right);
		inset-block-start: 50%;
		translate: 0 -50%;
	}

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

	.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);
		letter-spacing: -0.01em;
		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 menu-item/submenu gap; hover-only, 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);
		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;
	}

	/* .hover-intent is the JS close-delay; :hover and :focus-within already cover the rest. */
	.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;
	}

	/* Decorative on desktop: clicks fall through to the parent <a>, the svg is the cue. */
	.nav-primary .dropdown-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 0;
		pointer-events: none;
	}
	.nav-primary .dropdown-toggle svg {
		width: var(--dropdown-toggle-size);
		height: var(--dropdown-toggle-size);
		transition: transform var(--nav-icon-duration) var(--nav-mega-ease);
	}
	.nav-primary .menu-item-has-children.hover-intent > .dropdown-toggle svg {
		transform: rotate(180deg);
	}
	.nav-primary .sub-menu .dropdown-toggle svg { transform: rotate(-90deg); }
	.nav-primary .sub-menu .hover-intent > .dropdown-toggle svg {
		transform: rotate(90deg);
	}
}

/* Mega menu: the `mega` class on a top-level item (docs/runtimes.md). */

@media (min-width: 1030px) {
	/* `.is-open` is this panel's state, so the plain dropdown's hover rules must not reveal it. */
	.nav-primary .menu-item.mega:hover > .sub-menu,
	.nav-primary .menu-item.mega:focus-within > .sub-menu {
		visibility: hidden;
	}

	.nav-primary .menu-item.mega::after { content: none; }

	/* Re-arm the toggle: on desktop it is decorative for ordinary dropdowns,
	   but it is the mega panel's only opener. */
	.nav-primary .menu-item.mega > .dropdown-toggle {
		pointer-events: auto;
		cursor: pointer;
		color: inherit;
	}

	.nav-primary .menu-item.mega.is-open > .dropdown-toggle svg {
		transform: rotate(180deg);
	}

	/* Transform, not padding, so the push runs on the compositor instead of relaying out every frame. */
	.site > :not(.site-header) {
		transition: transform var(--nav-mega-duration) var(--nav-mega-ease);
	}

	body.js-mega-active .site > :not(.site-header) {
		transform: translateY(var(--nav-mega-height, 0px));
	}

	/* The panel is full-bleed and hangs off the sticky bar, so the item it lives in
	   must not catch it. */
	.nav-primary .menu-item.mega { position: static; }

	.nav-primary .menu-item.mega > .sub-menu {
		position: absolute;
		inset: 100% 0 auto 0;
		/* Out of the plain dropdown's hover fade: this panel is gated by visibility and clip-path. */
		opacity: 1;
		width: auto;
		max-width: none;
		height: calc(100dvh - var(--nav-mega-header-height, 6rem));
		margin: 0;
		border: 0;
		border-radius: 0;
		z-index: 1001;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-content: start;
		gap: var(--wp--preset--spacing--lg) var(--nav-mega-column-gap);
		/* Inline padding also centres the grid at contentSize, so the columns
		   don't stretch across an ultra-wide display. */
		padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 4vh, 3rem);
		padding-inline: max(
			var(--wp--style--root--padding-left),
			calc((100vw - var(--wp--style--global--content-size)) / 2)
		);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-block-start: 1px solid color-mix(in srgb, var(--color-text-mega) 12%, transparent);
		background: var(--color-background-mega);
		color: var(--color-text-mega);
		visibility: hidden;
		/* Visibility is held to the end of the close: a hidden subtree can't take the focus navigation.js moves. */
		clip-path: inset(0 0 100% 0);
		transition:
			visibility 0s linear var(--nav-mega-duration),
			clip-path var(--nav-mega-duration) var(--nav-mega-ease);
	}

	.nav-primary .menu-item.mega.is-open > .sub-menu {
		visibility: visible;
		clip-path: inset(0);
		transition:
			visibility 0s,
			clip-path var(--nav-mega-duration) var(--nav-mega-ease);
	}

	/* The base desktop rule's flex row would put the group heading beside its own list. */
	.nav-primary .menu-item.mega > .sub-menu > .menu-item {
		display: block;
		position: static;
		width: auto;
		opacity: 0;
		transform: translateY(0.875rem);
		/* Reset only once the panel has left, so closing reads as one move. */
		transition:
			opacity 0s linear var(--nav-mega-duration),
			transform 0s linear var(--nav-mega-duration);
	}

	/* Columns settle left to right behind the panel edge; the modulo keeps the
	   sweep per column however many rows the menu runs to. */
	.nav-primary .menu-item.mega.is-open > .sub-menu > .menu-item {
		opacity: 1;
		transform: none;
		transition:
			opacity 260ms ease-out var(--nav-mega-column-delay, var(--nav-mega-lead)),
			transform 360ms var(--nav-mega-ease) var(--nav-mega-column-delay, var(--nav-mega-lead));
	}
	.nav-primary .menu-item.mega.is-open > .sub-menu > .menu-item:nth-child(3n + 2) {
		--nav-mega-column-delay: calc(var(--nav-mega-lead) + var(--nav-mega-stagger));
	}
	.nav-primary .menu-item.mega.is-open > .sub-menu > .menu-item:nth-child(3n + 3) {
		--nav-mega-column-delay: calc(var(--nav-mega-lead) + 2 * var(--nav-mega-stagger));
	}

	.nav-primary .menu-item.mega > .sub-menu > .menu-item > a {
		display: block;
		font-size: clamp(1.25rem, 2vw, 1.875rem);
		font-weight: 500;
		letter-spacing: -0.03em;
		line-height: 1.3;
		color: var(--color-text-mega);
		padding-block: 0 1rem;
		padding-inline: 0;
		border-block-end: 1px solid color-mix(in srgb, var(--color-text-mega) 18%, transparent);
		margin-block-end: 0.5rem;
		white-space: normal;
	}

	.nav-primary .menu-item.mega > .sub-menu > .menu-item > a:hover,
	.nav-primary .menu-item.mega > .sub-menu > .menu-item > a:focus {
		text-decoration: none;
	}

	.nav-primary .menu-item.mega > .sub-menu .sub-menu {
		position: static;
		opacity: 1;
		display: block;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
		transform: none;
	}

	/* Open panel only: `visibility` is what keeps the closed panel's links out of the tab order. */
	.nav-primary .menu-item.mega.is-open > .sub-menu .sub-menu {
		visibility: visible;
	}

	.nav-primary .menu-item.mega > .sub-menu .sub-menu a {
		display: block;
		padding-block: var(--nav-mega-link-padding);
		padding-inline: 0;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-text-mega-link);
		white-space: normal;
		transition: color 0.2s, padding-inline-start 0.2s;
	}

	.nav-primary .menu-item.mega > .sub-menu .sub-menu a:hover,
	.nav-primary .menu-item.mega > .sub-menu .sub-menu a:focus-visible {
		color: var(--color-text-mega);
		padding-inline-start: 0.375rem;
	}

	/* The group heading owns the disclosure; its toggle button is redundant. */
	.nav-primary .menu-item.mega > .sub-menu .dropdown-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site > :not(.site-header),
	.nav-primary .menu-item.mega > .sub-menu,
	.nav-primary .menu-item.mega.is-open > .sub-menu,
	.nav-primary .menu-item.mega > .sub-menu > .menu-item,
	.nav-primary .menu-item.mega.is-open > .sub-menu > .menu-item {
		transition-duration: 0s;
		transition-delay: 0s;
	}

	.nav-primary .menu-item.mega > .sub-menu > .menu-item {
		opacity: 1;
		transform: none;
	}

	.nav-primary .menu-item.mega > .sub-menu { clip-path: inset(0); }

	.nav-primary .menu-item.cta > a { transition: none; }
	.nav-primary .menu-item.cta > a:hover,
	.nav-primary .menu-item.cta > a:focus-visible { transform: none; }
}

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

/* The reserved scrollbar gutter shows the canvas; match it to the panel. */
html:has(body.js-mega-active) { background-color: var(--wp--preset--color--ink); }

/* Call-to-action item — opt in with the CSS class `cta` in Appearance → Menus. Below the breakpoint it is an ordinary row. */
@media (min-width: 1030px) {
	.nav-primary .menu-item.cta > a {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.5625rem 1rem;
		border-radius: 999px;
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		letter-spacing: normal;
		/* `.nav-primary` zeroes line-height for the plain items; the pill needs a real one. */
		line-height: 1.3;
		text-decoration: none;
		transition:
			transform 0.2s var(--nav-mega-ease),
			background-color var(--nav-bar-duration) var(--nav-mega-ease),
			color var(--nav-bar-duration) var(--nav-mega-ease);
	}

	.nav-primary .menu-item.cta > a::after {
		content: "";
		width: 1rem;
		height: 1rem;
		background: currentColor;
		mask: url("../icons/arrow.svg") no-repeat center / contain;
	}

	.nav-primary .menu-item.cta > a:hover,
	.nav-primary .menu-item.cta > a:focus-visible {
		transform: scale(1.04);
	}

	.nav-primary .menu-item.cta > a:focus-visible { outline-color: var(--wp--preset--color--ink); }
}

/* Footer. Four menus feed it (primary at depth 1, footer-locations, footer-social,
 * footer legal) plus the Yhteystiedot ACF options page; footer.php omits empty blocks. */

.site-footer {
	/* Not the palette's `has-*` classes: their text pairing is scoped to `core/group`. */
	--footer-label: color-mix(in srgb, var(--wp--preset--color--paper) 45%, transparent);
	--footer-rule: color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin-top: var(--wp--preset--spacing--section);
	padding-block: clamp(4rem, 8vw, 7.5rem) 1.75rem;
	border-start-start-radius: 1.75rem;
	border-start-end-radius: 1.75rem;
	position: relative;
	overflow-x: clip;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1.75rem;
	pointer-events: none;
	background:
		radial-gradient(circle at 100% 100%, transparent calc(1.75rem - 0.5px), var(--footer-notch, transparent) 1.75rem) left top / 1.75rem 1.75rem no-repeat,
		radial-gradient(circle at 0 100%, transparent calc(1.75rem - 0.5px), var(--footer-notch, transparent) 1.75rem) right top / 1.75rem 1.75rem no-repeat;
}

.footer-intro {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	margin-block-end: clamp(3rem, 7vw, 7.5rem);
}

@media (min-width: 48rem) {
	.footer-intro {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.footer-columns { justify-self: end; }
}

.footer-tagline {
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.05;
	max-width: 16ch;
	margin-block: 0;
	hyphens: none;
	text-wrap: balance;
}

.footer-email {
	display: inline-flex;
	margin-block-start: 1.75rem;
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 500;
	text-decoration-color: var(--footer-rule);
	text-underline-offset: 0.3em;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(8rem, 1fr));
	gap: var(--wp--preset--spacing--xl);
	min-width: 16rem;
}

.footer-column__label,
.footer-locations__label {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--footer-label);
	margin-block: 0 var(--wp--preset--spacing--sm);
}

.footer-stack-list,
.footer-inline-list,
.footer-social-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-stack-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

.footer-stack-list a { color: var(--wp--preset--color--paper); }

.footer-social-list {
	display: flex;
	gap: 0.25rem;
	margin-block-start: 1.5rem;
	margin-inline-start: -0.5rem;
}

.footer-social-list a {
	display: flex;
	padding: 0.5rem;
	border-radius: 999px;
	transition: background-color 150ms ease;
}

.footer-social-list a:hover,
.footer-social-list a:focus-visible {
	background-color: var(--footer-rule);
}

.footer-social-list svg {
	width: 1.5rem;
	height: 1.5rem;
}

.site-footer :is(.footer-stack-list, .footer-inline-list) a {
	text-decoration: none;
}

.site-footer .footer-stack-list a:is([href^="mailto:"], [href^="tel:"]) {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--paper) 35%, transparent);
	text-underline-offset: 0.25em;
}

.site-footer :is(.footer-stack-list, .footer-inline-list) a:hover,
.site-footer :is(.footer-stack-list, .footer-inline-list) a:focus-visible {
	text-decoration: underline;
}

.footer-wordmark {
	position: relative;
}

.footer-wordmark svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Sized and offset in JS: the buffer maps 1:dpr onto the box so the dust stays
   crisp, and it bleeds past the glyphs so motes are not clipped at the edge. */
.footer-wordmark__canvas {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	pointer-events: none;
}

/* Hidden, not removed: the SVG still sizes the box and is the no-JS fallback. */
.footer-wordmark.is-particles svg {
	visibility: hidden;
}

.footer-meta {
	display: grid;
	gap: 1.25rem;
	border-block-start: 1px solid var(--footer-rule);
	padding-block-start: 1.5rem;
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.footer-locations {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.footer-locations__label { margin-block: 0; }

.footer-inline-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--footer-label);
}

.footer-legal-name { margin: 0; }

.footer-membership {
	width: auto;
	height: 3rem;
	justify-self: start;
}

@media (min-width: 48rem) {
	.footer-meta {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 2.5rem;
	}

	.footer-locations,
	.footer-legal { grid-column: 1; }

	.footer-membership {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
	}
}

/* Page tone, set by main.js while a bleeding card is full width. */
body {
	transition: background-color 0.6s ease, color 0.6s ease;
}

body[data-page-tone="ink"] {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	--nomon-heading-color: currentColor;
}

body[data-page-tone="surface"] {
	background-color: var(--wp--preset--color--surface);
}

body[data-page-tone="surface"] .site-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	body {
		transition: none;
	}
}

/* Testimonials. Here because Blockstudio never enqueues this block's own stylesheet, cause unknown. */

.nomon-testimonials__quote > p {
	margin: 0;
}

.nomon-testimonials__quote > p + p {
	margin-block-start: var(--wp--preset--spacing--sm);
}

/* Vendor CSS arrives later in the body, so the override needs to outrank its `position: absolute`. */
.nomon-dots.swiper-pagination {
	--swiper-pagination-bullet-size: 0.875rem;
	--swiper-pagination-bullet-horizontal-gap: 0.625rem;
	--swiper-pagination-color: var(--wp--preset--color--ink);
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--ink);
	--swiper-pagination-bullet-inactive-opacity: 0.22;
	position: static;
	display: flex;
	align-items: center;
	width: auto;
	margin-inline: calc(var(--swiper-pagination-bullet-horizontal-gap) * -1);
	text-align: start;
}

/* Scaled, not resized: a size transition dips the row's height mid-swap and the page jumps. */
.nomon-dots .swiper-pagination-bullet {
	transition: opacity 0.2s, transform 0.2s;
}

.nomon-dots .swiper-pagination-bullet-active {
	transform: scale(calc(20 / 14));
}

.nomon-dots .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Swiper's stock arrows sit absolutely over the slides; here they live in the header, in flow. */
.nomon-slider-nav,
.nomon-testimonials__nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.nomon-testimonials__nav {
	margin-block-start: var(--wp--preset--spacing--xl);
}

.nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next),
.nomon-testimonials__nav :is(.swiper-button-prev, .swiper-button-next) {
	position: static;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 9999px;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next)::after,
.nomon-testimonials__nav :is(.swiper-button-prev, .swiper-button-next)::after {
	content: none;
}

/* Swiper sizes any svg inside a nav button to 100% of the button and fills it
   with `currentColor`, which outranks the icon's own `fill="none"` attribute. */
:is(.swiper-button-prev, .swiper-button-next) > svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
}

.swiper-navigation-icon { display: none; }

/* Hover only where a pointer can hover: touch keeps `:hover` on the last tapped arrow. */
.nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next):focus-visible {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

@media (hover: hover) {
	.nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next):hover {
		border-color: var(--wp--preset--color--ink);
		background-color: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper);
	}
}

.nomon-slider-nav :is(.swiper-button-prev, .swiper-button-next).swiper-button-disabled,
.nomon-testimonials__nav :is(.swiper-button-prev, .swiper-button-next).swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Pagination. `the_posts_pagination()` emits its own class names, so these can't be
 * utilities on the template. Matches the /tyot/ filter row. */

.pagination {
	margin-block-start: var(--wp--preset--spacing--xxl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.pagination .page-numbers {
	display: inline-block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible,
.pagination .current {
	text-decoration: underline;
}

/* Breadcrumbs. SEOPress PRO markup renamed by `inc/integrations/seopress.php`, which
 * also suppresses the plugin's own inline `<style>` that these rules replace. */

/* `:root` outranks core's `:root :where(.is-layout-constrained) > *`, which FlyingPress's used CSS prints after us. */
:root .site-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.site-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin-inline: 0.5ch;
}

.site-breadcrumbs__item a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.site-breadcrumbs__item a:hover,
.site-breadcrumbs__item a:focus-visible {
	text-decoration: underline;
}