/*
 * theme-base: theme stylesheet. Loaded after tokens.css (variables) and
 * base.css (layout-tree's base styles for the standard sections and blocks),
 * before page-<id>.css (per-page layout). Mobile first; every colour and
 * spacing comes from a token variable with a fallback for missing tokens.
 * Variable names follow tokensToCss: `--size-contentMaxWidth`, `--color-onPrimary`.
 */

:root {
	color-scheme: light;
	--scheme-bg: var(--color-background, #fff);
	--scheme-fg: var(--color-text, #111);
	--scheme-muted: var(--color-muted, #5b6470);
	--scheme-border: var(--color-border, #d5d9e0);
	--scheme-link: var(--color-primary, #0055ff);
	--focus-ring: var(--color-focus, #ffbf00);
	/* Two-tone focus ring (docs/komponentit/FOKUSRENGAS_2026-11-09.md): the focus colour
	   outside, a dark ring from the site's ink inside, so one of the two is at least 3:1 on
	   any background. 25 % ink in black stays dark even when the site's text is light. */
	--focus-ring-inner: color-mix(in oklab, var(--color-text, #1b1f24) 25%, #000);
	--focus-ring-shadow: 0 0 0 3px var(--focus-ring-inner);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Typography scale token (font.scale); 1 = browser default 16px rem root. */
	font-size: calc(16px * var(--font-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Site background image (E89, siteBackgroundImage setting). Header and footer turn
   transparent so the image runs behind them, unless the owner set their colours. */
.has-site-bg body {
	background-image: var(--site-bg-image);
	background-position: var(--site-bg-position, center top);
	background-size: var(--site-bg-size, cover);
	background-repeat: no-repeat;
	background-attachment: var(--site-bg-attachment, scroll);
}

.has-site-bg .site-header {
	background: var(--site-header-bg, transparent);
	border-bottom-color: transparent;
}

.has-site-bg .site-footer {
	background: var(--site-footer-bg, transparent);
}

@media (max-width: 959px) {
	/* background-attachment: fixed repaints on every scroll frame on phones. */
	.has-site-bg body {
		background-attachment: scroll;
	}
}

body {
	min-width: 320px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-weight: var(--font-weight, 400);
	/* Body text is never under 16 px nor tighter than 1.4 (TIETEELLINEN_KATSAUS_2026-10-14,
	   layout-tree body-fonts.ts), whatever the scale or an imported size says. */
	font-size: max(16px, var(--font-size-body, 1rem));
	/* Measured leading (E192) when the site was imported, theme default otherwise. */
	line-height: max(1.4, var(--font-leading-body, var(--font-lineHeight, 1.65)));
	letter-spacing: var(--font-letterSpacing, 0);
	color: var(--scheme-fg);
	background: var(--scheme-bg);
	-webkit-font-smoothing: antialiased;
}

main {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	/* Enfold .template-page.content uses 50px vertical padding. */
	padding-top: 50px;
	padding-bottom: 50px;
}

/* fullBleedSections (E142): section backgrounds span the viewport; each section's
   .section__inner keeps its own max-width (contentMaxWidth unless the section sets one). */
html.full-bleed-sections main {
	width: 100%;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}

/* Elementor / OceanWP: full-bleed canvas; content width lives on .section__inner. */
.layout-chrome--elementor main {
	width: 100%;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}

.layout-chrome--elementor .site-header__inner {
	/* Elementor Pro nav widget header (~133px on BeachTravels). */
	min-height: 133px;
	max-width: min(100% - 2rem, 1400px);
	padding-block: 20px;
	box-sizing: border-box;
}

.layout-chrome--elementor .site-header__logo {
	/* Source logo ~93px; keep headroom so bar stays ~133px. A measured logo width sets
	   --site-logo-max-height: none, so the import's own size is never capped (E156). */
	max-height: var(--site-logo-max-height, 93px);
}

/* Elementor sections are usually 0–10px; theme default .section is 4rem at desktop. */
.layout-chrome--elementor .section {
	padding: 0;
}

/*
 * Mobile side gutters (BeachTravels / Elementor ~10–20px from viewport edge).
 * Desktop keeps full-bleed canvas; contentMaxWidth centers the column.
 */
@media (max-width: 767px) {
	.layout-chrome--elementor .site-header__inner {
		/* Source header container ~10px; keep ~16px via 100%-2rem, tighten to 10. */
		max-width: min(100% - 20px, 1400px);
		margin-inline: auto;
		padding-block: 12px;
		min-height: 72px;
	}

	.layout-chrome--elementor .site-header__logo {
		max-height: var(--site-logo-max-height, 56px);
	}

	/* Beat page CSS `.section.s-… { padding: 0 }` (fullBleed carousel compile). */
	.layout-chrome--elementor main .section.section--carousel {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.layout-chrome--elementor main .section.section--carousel > .section__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.layout-chrome--elementor .section:not(.section--carousel):not(.section--hero) > .section__inner {
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.layout-chrome--elementor .site-footer__inner {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/*
 * Enfold / default chrome mobile gutters (~29px on 390px ≈ 100% − 58px).
 * Pro Linnanmaa source container; header/footer were flush (0) while main ~10px.
 */
@media (max-width: 767px) {
	.layout-chrome--default .site-header__inner,
	.layout-chrome--enfold .site-header__inner,
	.layout-chrome--default .site-footer__inner,
	.layout-chrome--enfold .site-footer__inner,
	.layout-chrome--default .page-title-bar__inner,
	.layout-chrome--enfold .page-title-bar__inner,
	.layout-chrome--default .breadcrumbs-bar__inner,
	.layout-chrome--enfold .breadcrumbs-bar__inner {
		width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		max-width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		margin-inline: auto;
		box-sizing: border-box;
	}

	.layout-chrome--default main,
	.layout-chrome--enfold main {
		width: min(100% - 58px, var(--size-contentMaxWidth, 1200px));
		/* Keep Enfold .template-page 50px vertical padding (mobile too). */
	}

	/* Enfold promobox buttons are near full content width on phone. */
	.layout-chrome--default .container--boxed > .block--button,
	.layout-chrome--enfold .container--boxed > .block--button {
		align-self: stretch;
		width: 100%;
	}

	.layout-chrome--default .container--boxed > .block--button .button,
	.layout-chrome--enfold .container--boxed > .block--button .button {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
	}

	.layout-chrome--default .site-footer__copyright,
	.layout-chrome--enfold .site-footer__copyright {
		text-align: start;
		width: 100%;
	}
}

.layout-chrome--elementor .menu {
	gap: 0;
}

/* Top bar: slab/heading face, heavy weight, roomy horizontal padding (Elementor). */
.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__link,
.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__toggle,
.layout-chrome--elementor .locale-switcher--desktop .locale-switcher__link {
	font-family: var(--font-heading, inherit);
	font-weight: 800;
	letter-spacing: 0.05em;
}

/* Dropdown: compact centered panel (Elementor nav --dropdown). */
/* Palette variables only: html.is-dark-site (theme.css “Submenu palette”) overrides them. */
.layout-chrome--elementor .menu__submenu {
	--submenu-fg: #0c0c0c;
	--submenu-border: #929292;
	--submenu-divider: #e0e0e0;
	--submenu-hover-bg: transparent;
	min-width: 10rem;
	border: 1px solid var(--submenu-border);
	border-radius: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.layout-chrome--elementor .section--carousel,
.layout-chrome--elementor .carousel {
	position: relative;
	z-index: 0;
}

.layout-chrome--elementor .menu__submenu .menu__link {
	padding: 13px 20px;
	font-family: var(--font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 500;
	text-align: center;
}

.layout-chrome--elementor .hero--overlay {
	aspect-ratio: auto;
	min-height: 800px;
	height: 800px;
	max-height: none;
	border-radius: 0;
}

.layout-chrome--elementor .section--carousel > .section__inner {
	max-width: none;
	width: 100%;
}

@media (min-width: 768px) {
	.layout-chrome--elementor .section--carousel > .section__inner {
		padding-left: 0;
		padding-right: 0;
	}

	.layout-chrome--elementor .section--carousel {
		padding-left: 0;
		padding-right: 0;
	}
}

.layout-chrome--elementor .carousel__heading {
	text-transform: none;
	letter-spacing: 0.06em;
}

.layout-chrome--elementor .section--hero > .section__inner {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.layout-chrome--elementor .section--hero {
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}

@media (min-width: 960px) {
	/* Top-level bar only — do not size nested submenu `.menu` lists. */
	.layout-chrome--elementor .site-nav--desktop > .menu {
		height: auto;
		min-height: 68px;
		gap: 0 !important;
		align-items: center;
	}

	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item {
		gap: 0;
	}

	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__link,
	.layout-chrome--elementor .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.layout-chrome--elementor .locale-switcher--desktop .locale-switcher__link {
		height: auto;
		min-height: 68px;
		padding: 18px 27px;
		font-size: var(--site-nav-size, 1.3125rem);
		line-height: 1.5;
		box-sizing: border-box;
	}
}

.layout-chrome--elementor .hero--overlay .hero__content {
	margin: 0;
	padding: 1.5rem 2rem;
	background: transparent;
	max-width: none;
}

.layout-chrome--elementor .hero--overlay .hero__heading {
	font-size: var(--font-size-display, clamp(2rem, 5vw, 3.5rem));
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
	background: transparent;
	padding: 0;
}

.layout-chrome--elementor .hero--overlay.hero--center {
	align-items: center;
	justify-items: center;
}

.layout-chrome--elementor .hero--overlay.hero--center .hero__content {
	justify-self: center;
	text-align: center;
}

.layout-chrome--enfold main {
	/* Keep explicit Enfold rhythm when chrome is selected after a non-Enfold import. */
	padding-top: 50px;
	padding-bottom: 50px;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: var(--section-link, var(--link-color, var(--scheme-link, var(--color-primary))));
	text-decoration: var(--link-decoration, underline);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

/* The form engine (packages/forms, `.form`) styles its own controls from the site's
   tokens. The generic element rules below leave them alone (`:not(:where(.form *))`
   keeps the specificity as it was): a rule that reached in gave the switch a 44 px
   minimum height and the text-field padding. test/theme.test.ts keeps it that way. */
button:not(:where(.form *)),
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 0;
	padding: var(--button-paddingY, 14px) var(--button-paddingX, 30px);
	border: 1px solid var(--button-border, transparent);
	border-radius: var(--button-radius, var(--radius-md, 8px));
	background: var(--button-bg, var(--color-primary, #0055ff));
	color: var(--button-fg, var(--color-onPrimary, #fff));
	font-size: var(--button-fontSize, 0.8125rem);
	font-weight: var(--button-weight, 400);
	line-height: var(--font-leading-button, 1.2);
	text-decoration: none;
	transition:
		transform 150ms ease,
		box-shadow 150ms ease,
		background-color 150ms ease;
}

button:not(:where(.form *)):not(:where(:disabled)):hover,
.button:not(:where(:disabled, [aria-disabled='true'])):hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgb(17 24 39 / 0.12);
}

button[hidden],
.button[hidden] {
	display: none !important;
}

:is(input, select, textarea):not(:where(.form *)) {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-md, 8px);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

:is(input, select, textarea):not(:where(.form *)):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: var(--focus-ring-shadow);
}

label:not(:where(.form *)) {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

form:not(:where(.form)) {
	display: grid;
	gap: var(--space-md, 16px);
}

form:not(:where(.form)) button[type='submit'],
form:not(:where(.form)) .button--primary {
	justify-self: start;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
}

@media (max-width: 640px) {
	main {
		width: min(100% - 1.25rem, var(--size-contentMaxWidth, 1200px));
	}
	section {
		padding-block: 2.5rem;
	}
	/* Enfold pages: keep section rhythm tight on phone (source #main pad 0). */
	/* Not with fullBleedSections (E146): those sections carry measured padding in page CSS. */
	.layout-chrome--default:not(.full-bleed-sections) section:not(.section--hero),
	.layout-chrome--enfold:not(.full-bleed-sections) section:not(.section--hero) {
		padding-block: 1.25rem;
	}
	.components-demo__buttons {
		align-items: stretch;
		flex-direction: column;
	}
	.components-demo__buttons .button,
	.components-demo__buttons button {
		width: 100%;
	}
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

[x-cloak] {
	display: none !important;
}

/* Typography ------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading, inherit);
	line-height: var(--font-leading-heading, 1.2);
	letter-spacing: var(--font-letterSpacing, 0);
	margin: 0 0 var(--space-sm, 8px);
	text-wrap: balance;
}

/* "Pääotsikon koko" (font.display, tokens.ts): when the owner picks Suuri or Valtava, the
   --font-*-display variables exist and win over the theme's and the import's sizes. */
h1 {
	font-size: var(--font-size-display, var(--font-size-h1, clamp(2rem, 1.5rem + 2vw, 3rem)));
	line-height: var(
		--font-leading-display,
		var(--font-leading-h1, var(--font-leading-heading, 1.2))
	);
	letter-spacing: var(--font-tracking-display, var(--font-letterSpacing, 0));
	/* Without the setting the variable is unset and the value is inherited, as before. */
	overflow-wrap: var(--font-wrap-display);
}

h2 {
	font-size: var(--font-size-h2, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
	line-height: var(--font-leading-h2, var(--font-leading-heading, 1.2));
}

h3 {
	font-size: var(--font-size-h3, 1.25rem);
	line-height: var(--font-leading-h3, var(--font-leading-heading, 1.2));
}

h4 {
	font-size: var(--font-size-h4, 1.05rem);
	line-height: var(--font-leading-h4, var(--font-leading-heading, 1.2));
}

/* Imported sites set exact sizes per breakpoint (E102) and, since E192, the measured line
   height with them; without the tokens nothing changes. Leading is a unitless ratio, so it
   stays right even where the desktop and phone sizes differ. */
@media (min-width: 960px) {
	h1 {
		font-size: var(
			--font-size-display,
			var(--font-sizeLg-h1, var(--font-size-h1, clamp(2rem, 1.5rem + 2vw, 3rem)))
		);
		line-height: var(
			--font-leading-display,
			var(--font-leadingLg-h1, var(--font-leading-h1, var(--font-leading-heading, 1.2)))
		);
	}

	h2 {
		font-size: var(--font-sizeLg-h2, var(--font-size-h2, clamp(1.5rem, 1.2rem + 1.2vw, 2rem)));
		line-height: var(--font-leadingLg-h2, var(--font-leading-h2, var(--font-leading-heading, 1.2)));
	}

	h3 {
		font-size: var(--font-sizeLg-h3, var(--font-size-h3, 1.25rem));
		line-height: var(--font-leadingLg-h3, var(--font-leading-h3, var(--font-leading-heading, 1.2)));
	}

	h4 {
		font-size: var(--font-sizeLg-h4, var(--font-size-h4, 1.05rem));
		line-height: var(--font-leadingLg-h4, var(--font-leading-h4, var(--font-leading-heading, 1.2)));
	}

	body {
		font-size: max(16px, var(--font-sizeLg-body, var(--font-size-body, 1rem)));
		line-height: max(
			1.4,
			var(--font-leadingLg-body, var(--font-leading-body, var(--font-lineHeight, 1.65)))
		);
	}

	.button {
		font-size: var(--font-sizeLg-button, var(--font-size-button, 0.8125rem));
		line-height: var(--font-leadingLg-button, var(--font-leading-button, 1.2));
	}
}

p {
	margin: 0 0 var(--space-sm, 8px);
}

section {
	padding-block: var(--space-section, clamp(2.5rem, 6vw, 6rem));
}

.card,
.grid__item {
	border: var(--card-border, 1px) solid var(--scheme-border);
	border-radius: var(--card-radius, var(--radius-lg, 16px));
	box-shadow: var(--card-shadow, var(--shadow-card, 0 2px 8px rgb(0 0 0 / 0.08)));
}

img {
	border-radius: var(--image-radius, var(--radius-md, 8px));
}

.richtext > :last-child {
	margin-bottom: 0;
}

.richtext p {
	margin: 0.85em 0;
	text-align: left;
}

.richtext p:first-child {
	margin-top: 0;
}

.richtext em,
.richtext i {
	font-style: italic;
}

.richtext strong,
.richtext b {
	font-weight: 700;
}

/* Enfold-style list-widget intro (e.g. Uutiskirje). Only on Enfold-style sites: elsewhere
   a bold first line is just bold, not a grey eyebrow. The capitals reproduce the imported
   Enfold site (layoutChrome=enfold is set by the parity tool), so they are the customer's
   styling: allowlisted in apps/platform/src/lib/no-css-capitals.test.ts. */
.layout-chrome--enfold .richtext > p:first-child > strong:only-child {
	font-size: 1.1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666;
}

.richtext a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.richtext ul,
.richtext ol {
	padding-left: 1.25em;
	margin: 0.85em 0;
}

.richtext li {
	margin: 0.35em 0;
}

/* Keep colour defaults less specific than compiled block appearance, including
   on hover. Only sections with an explicit pair define --section-link. */
:where(.section[data-color-scheme]) {
	--section-link: var(--scheme-link);
}
:where(.richtext) a:not(:where(.button)) {
	color: var(--section-link, var(--color-primary, #2997ab));
}

.richtext small {
	display: block;
	margin-top: 0.15em;
	font-size: 0.85em;
	color: var(--color-muted, #808080);
	font-weight: 400;
}

/* Enfold av_promobox on prolinnanmaa: 16px copy (not 14px). */
.container--boxed {
	padding: 20px 30px !important;
	border-color: #e1e1e1;
	background: #fff;
	box-sizing: border-box;
}

.container--boxed .richtext,
.container--boxed .richtext p {
	font-size: 1rem;
	line-height: 1.65;
	text-align: left;
}

.container--boxed .richtext p {
	margin: 0;
}

.container--boxed .richtext em {
	font-style: italic;
}

small {
	color: var(--scheme-muted);
}

/* Focus and accessibility ------------------------------------------------ */

/* The dark inner ring fills the 2px offset under the ring (3px, so no seam shows). A rule
   that draws the focus elsewhere (outline: none on a link, the ring on its card) also sets
   box-shadow: none. */
:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: var(--focus-ring-shadow);
}

:focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #000;
	border: 2px solid currentColor;
	border-radius: var(--radius-sm, 4px);
	transform: translateY(-150%);
}

.skip-link:focus {
	transform: none;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Color schemes: sections carry data-color-scheme from the tree ----------- */

[data-color-scheme='light'] {
	--scheme-bg: var(--color-background, #fff);
	--scheme-fg: var(--color-text, #111);
	--scheme-link: var(--color-primary, #0055ff);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='dark'] {
	--scheme-bg: var(--color-text, #111);
	--scheme-fg: var(--color-background, #fff);
	--scheme-muted: color-mix(in srgb, var(--scheme-fg) 75%, transparent);
	--scheme-border: color-mix(in srgb, var(--scheme-fg) 25%, transparent);
	--scheme-link: var(--scheme-fg);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='accent'] {
	--scheme-bg: var(--color-primary, #0055ff);
	--scheme-fg: var(--color-onPrimary, #fff);
	--scheme-muted: color-mix(in srgb, var(--scheme-fg) 80%, transparent);
	--scheme-border: color-mix(in srgb, var(--scheme-fg) 30%, transparent);
	--scheme-link: var(--scheme-fg);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

[data-color-scheme='muted'] {
	--scheme-bg: var(--scheme-muted-background, var(--color-surface, #f4f5f7));
	--scheme-fg: var(--scheme-muted-text, var(--color-text, #111));
	--scheme-link: var(--scheme-muted-primary, var(--color-primary, #0055ff));
	--scheme-muted: var(--scheme-muted-muted, var(--color-muted, #5b6470));
	--scheme-border: var(--scheme-muted-border, var(--color-border, #d5d9e0));
	--scheme-surface: var(--scheme-muted-surface, var(--color-background, #fff));
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

/* Accent sections sit on the primary colour, so their buttons invert; dark sections keep
   the brand button (E100: a dark site's own palette is the dark scheme), unless its colour is
   below 1.5:1 against the section: then layout-tree base-css.ts fills it like here (E253). A
   variant keeps its own look; the list is the same as in layout-tree base-css.ts (E246). */
[data-color-scheme='accent'] .button--primary,
[data-color-scheme='accent']
	.button:not(:where(.button--link, .button--secondary, .button--outline, .button--ghost)) {
	background: var(--scheme-fg);
	color: var(--scheme-bg);
}

:where([data-color-scheme='dark'], [data-color-scheme='accent']) .button--link {
	background: transparent;
	color: var(--scheme-link);
}

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

/* Width matches `main` (already guttered). Do not shrink again — content
   rows (CTAs, copy) must share the same edges as the hero image. */
.section__inner,
.site-header__inner,
.site-footer__inner {
	width: 100%;
	max-width: var(--size-contentMaxWidth, 1200px);
	margin-inline: auto;
}

/* Override bundled base.css: max-height + aspect-ratio shrinks hero width. */
.hero--overlay {
	width: 100%;
	max-height: none;
}

.section--hero,
.section.section--hero {
	padding: 0 !important;
}

/* A hero in a colour scheme or with a background of its own keeps its text off the edge of
   the coloured band (huippuulkoasut 28.10.2026): the padding above is zeroed for the picture
   heroes, which also left a split hero's text touching its coloured box. */
.section--hero:is([data-color-scheme], [data-own-bg])
	> .section__inner
	> .hero:not(.hero--overlay) {
	padding: clamp(1.5rem, 4vw, 3rem);
}

/* Enfold caption: ~28px/600 title, 16px body (not the default clamp→44px/700). */
.hero--overlay {
	/* Enfold slideshow caption sits near the top of the image. */
	align-items: start;
	border-radius: 0;
}

.hero--overlay .hero__content {
	/* Enfold slideshow caption inset ≈ 17px from image edges.
	   Per-line chips (not one opaque slab): transparent panel + row backgrounds.
	   Overrides live base.css drift that used carousel opacity 0.82 on hero.
	   Horizontal 20px matches Enfold .avia-caption padding so title chip lands ~81px. */
	margin: 17px;
	padding: 0 20px;
	background: transparent;
	max-width: min(36rem, 92%);
}

.hero--overlay .hero__heading {
	/* Own line, still only as wide as the text: the subheading chip starts below it. */
	display: block;
	width: fit-content;
	max-width: 100%;
	font-size: var(--font-size-display, 1.75rem);
	font-weight: 600;
	line-height: var(--font-leading-display, 1.1);
	overflow-wrap: var(--font-wrap-display, break-word);
	margin: 0 0 1px;
	padding: 10px 15px;
	letter-spacing: 0.01em;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/* An imported Enfold site keeps its own capital caption title (Pro Linnanmaa source,
   PROLINNANMAA_VERTAILU_2026-09-10.md). Our own layouts never set capitals: allowlisted
   in apps/platform/src/lib/no-css-capitals.test.ts. */
.layout-chrome--enfold .hero--overlay .hero__heading {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.hero--overlay .hero__subheading {
	display: inline-block;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: 1;
	margin: 0 0 1px;
	/* Enfold .avia-caption-content p */
	padding: 10px 15px;
	max-width: none;
	white-space: normal;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/* Enfold avia-size-small on home “Lue lisää”. */
.section.s-P5jSQKIAjcA- .button {
	min-height: 0;
	padding: 9px 10px 7px;
	font-size: 0.8125rem;
	line-height: 1.2;
}

/* Newsletter source is a ~276px sidebar newsbox; text column ~231px beside icon. */
.section.s-_OUxZmy9B7_x .section__inner,
.section.s-_OUxZmy9B7_x .richtext {
	max-width: 276px;
}
.section.s-_OUxZmy9B7_x .richtext a {
	display: inline-block;
	max-width: 231px;
}

@media (min-width: 640px) {
	/* Enfold promobox ≈ 92px tall; absolute button sits ~25px from top. */
	.container.container--boxed {
		align-items: center;
		min-height: 92px;
	}
	.container.container--boxed > .block--button {
		margin-top: 2px;
	}
}

/* Home body matches Enfold justify (inline style survives sanitize). */
.section.s-ujE9j2zqT_PS .richtext p {
	text-align: justify;
}

.section {
	padding: var(--space-lg, 32px) 0;
}

/* Full-width sections (fullBleedSections): `main` no longer keeps the content off the screen
   edges, so each section does. Same weight as the rule above, so a section's own side
   padding (and a full-bleed picture's zero padding) still wins. Heroes and carousels reach
   the edges on purpose. */
:where(html.layout-chrome--default.full-bleed-sections main)
	.section:where(:not(.section--hero):not(.section--carousel)) {
	padding-inline: var(--space-md, 16px);
}

/* "Kuuntele" (layout-tree library-blocks/listen.ts) sits in `main` between sections. Where `main`
   itself keeps the content off the screen edges, sections have no side padding, so the button
   has none either: it starts at the content edge, not 16 px inside it (6.11.2026). */
html:not(.full-bleed-sections):not(.layout-chrome--elementor) main > .listen {
	padding-inline: 0;
}

/* A hero whose text is beside or under its picture (not over it) keeps that text off the
   screen edges inside a full-width page: heroes have no section padding of their own (the
   photographer template on a phone, 19.10.2026). */
:where(html.layout-chrome--default.full-bleed-sections main)
	.section--hero:not(:has(.hero--overlay))
	> .section__inner {
	/* At least 16 px on a phone and 20 px wider (the template audit's gutter). */
	padding-inline: clamp(16px, 5vw, 24px);
	box-sizing: border-box;
}

.grid {
	display: grid;
	gap: var(--space-md, 16px);
	grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.grid {
		--grid-columns: var(--grid-columns-sm, 2);
	}
}

@media (min-width: 960px) {
	.grid {
		--grid-columns: var(--grid-columns-md, 3);
	}

	.section {
		padding: var(--space-xl, 4rem) 0;
	}
}

/* Header ----------------------------------------------------------------- */

.site-header {
	position: relative;
	/* Above carousel/hero so overflowing submenus stay opaque and readable. */
	z-index: 200;
	border-bottom: 1px solid var(--scheme-border);
	background: var(--site-header-bg, var(--scheme-bg));
	color: var(--site-header-fg, var(--scheme-fg));
}

/* Same as the page (huippuulkoasut 28.10.2026: a white header on a white page needed
   More settings); the base rule above already paints the page colour. */
.site-header--bg-page {
	background: var(--site-header-bg, var(--scheme-bg));
}

.site-header--bg-surface {
	background: var(--site-header-bg, var(--color-surface, var(--scheme-bg)));
}

.site-header--bg-primary {
	background: var(--site-header-bg, var(--color-primary, #0055ff));
	color: var(--site-header-fg, var(--color-onPrimary, #fff));
}

.site-header--bg-transparent {
	background: var(--site-header-bg, transparent);
	border-bottom-color: transparent;
}

.site-header--height-compact .site-header__inner {
	min-height: 56px;
}

.site-header--height-compact .site-header__logo {
	max-height: var(--site-logo-max-height, 36px);
}

.site-header--height-regular .site-header__inner {
	min-height: 88px;
}

.site-header--height-tall .site-header__inner {
	min-height: 112px;
}

.site-header--height-tall .site-header__logo {
	max-height: var(--site-logo-max-height, 72px);
}

.site-header--sticky {
	position: sticky;
	top: 0;
}

/* headerOverlay (E146): header floats over the first section and stays visible.
   Placed after sticky so `fixed` wins; the first section keeps its own top padding. */
.site-header.site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom-color: transparent;
}

/* headerInset (E146): logo and nav measured from the viewport edges, not the content column. */
.site-header.site-header--inset .site-header__inner {
	width: 100%;
	max-width: none;
	padding-inline: var(--site-header-inset-mobile, 16px);
	box-sizing: border-box;
}

@media (min-width: 960px) {
	.site-header.site-header--inset .site-header__inner {
		padding-inline: var(--site-header-inset);
	}
}

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

/* Scroll effects (settings scrollEffect): Alpine toggles .is-scrolled. */
.site-header--scroll-shrink .site-header__inner,
.site-header--scroll-shrink .site-header__logo,
.site-header--scroll-solidify {
	transition:
		min-height 0.2s ease,
		padding 0.2s ease,
		max-height 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.site-header--scroll-solidify:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
}

.site-header--scroll-solidify.is-scrolled {
	background: var(--site-header-bg, var(--scheme-bg));
	box-shadow: var(--site-header-shadow, 0 1px 0 var(--scheme-border));
}

.site-header--scroll-shrink.is-scrolled .site-header__inner {
	min-height: 48px;
	padding-block: 0.25rem;
}

.site-header--scroll-shrink.is-scrolled .site-header__logo {
	max-height: 32px;
}

.site-header--scroll-shrink.is-scrolled .site-header .menu__link,
.site-header--scroll-shrink.is-scrolled .site-header .menu__toggle,
.site-header--scroll-shrink.is-scrolled .site-header .locale-switcher__link {
	padding-block: 0.2rem;
	padding-inline: 0.55rem;
	font-size: 0.9em;
}

/* Enfold desktop nav hardcodes height: 88px — override when shrinking. */
@media (min-width: 960px) {
	.site-header--scroll-shrink.is-scrolled .site-header__inner {
		min-height: 48px;
	}

	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu {
		height: auto;
		min-height: 0;
	}

	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--scroll-shrink.is-scrolled .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--scroll-shrink.is-scrolled .locale-switcher--desktop .locale-switcher__link {
		height: auto;
		min-height: 40px;
		padding: 0.35rem 13px;
		font-size: 0.9em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header--scroll-shrink .site-header__inner,
	.site-header--scroll-shrink .site-header__logo,
	.site-header--scroll-solidify {
		transition: none;
	}
}

.site-header__inner {
	display: flex;
	min-height: 88px;
	align-items: center;
	gap: var(--space-md, 16px);
}

/* The site's name as a text logo (19.10.2026): it breaks between words or at the soft hyphens
   the platform puts in a long word at its Finnish syllables (layout-tree site-name.ts:
   "Henkilöstö-" / "palvelu"), never mid-word without a hyphen ("Henkilöst öpalvelu").
   `hyphens: auto` would not help: Chromium has no Finnish dictionary on most systems. A word
   without syllables to break at still breaks rather than runs under the button. The name is
   never cut with an ellipsis: it is the site's identity (WCAG 1.4.10: nothing lost at 320 px). */
.site-header__name,
.site-sidebar__name {
	overflow-wrap: break-word;
	hyphens: manual;
}

.site-header__brand {
	/* A 44 px tap target even for a text logo (docs/laatu checklist M2). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	margin-right: auto;
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
}

.site-header__logo {
	/* A measured logo width (E156) wins over the theme's height cap: the source renders the
	   mark at a width, and capping the height shrank it (112px measured, 98px rendered). */
	max-height: var(--site-logo-max-height, 52px);
	width: var(--site-logo-width, auto);
	height: auto;
	object-fit: contain;
}

@media (max-width: 959px) {
	.site-header__logo {
		width: var(--site-logo-width-mobile, var(--site-logo-width, auto));
	}
}

.site-header__end {
	display: flex;
	align-items: center;
	gap: var(--space-sm, 8px);
	margin-left: auto;
}

.site-header__cta,
.site-header__cta-mobile .site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 1rem;
	border-radius: var(--button-radius, var(--radius-sm, 4px));
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-weight: var(--button-weight, 600);
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__cta:hover,
.site-header__cta-mobile .site-header__cta:hover {
	filter: brightness(1.05);
	text-decoration: none;
}

.site-header__cta-mobile {
	margin: var(--space-md, 16px) 0 0;
	padding: 0 var(--space-md, 16px);
}

.site-sidebar__cta {
	margin-top: var(--space-md, 16px);
}

/* Header layouts: centered (logo mid, nav below) and split (nav | logo | nav). */
@media (min-width: 960px) {
	.site-header--layout-centered .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			'mobile brand end'
			'nav nav nav';
		align-items: center;
		column-gap: var(--space-md, 16px);
		row-gap: 0;
		min-height: 0;
	}

	.site-header--layout-centered .site-header__mobile {
		grid-area: mobile;
		display: none;
	}

	.site-header--layout-centered .site-header__brand {
		grid-area: brand;
		margin-right: 0;
		justify-self: center;
	}

	.site-header--layout-centered .site-header__end {
		grid-area: end;
		margin-left: 0;
		justify-self: end;
	}

	.site-header--layout-centered .site-header__nav-row {
		grid-area: nav;
		justify-self: center;
		width: 100%;
	}

	.site-header--layout-centered .site-header__nav-row > .menu {
		justify-content: center;
		height: auto;
		min-height: 48px;
	}

	.site-header--layout-centered .site-header__nav-row > .menu > .menu__item > .menu__link,
	.site-header--layout-centered .site-header__nav-row > .menu > .menu__item > .menu__toggle {
		height: auto;
		min-height: 48px;
	}

	.site-header--layout-split .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: var(--space-md, 16px);
	}

	.site-header--layout-split .site-header__brand {
		margin-right: 0;
		justify-self: center;
	}

	.site-header--layout-split .site-nav--split-start {
		justify-self: end;
	}

	.site-header--layout-split .site-header__end {
		margin-left: 0;
		justify-self: start;
		flex-wrap: wrap;
	}

	.site-header--layout-split .site-nav--split-start > .menu,
	.site-header--layout-split .site-nav--split-end > .menu {
		justify-content: inherit;
	}

	.site-header--layout-split .site-nav--split-start > .menu {
		justify-content: flex-end;
	}

	.site-header--layout-split .site-nav--split-end > .menu {
		justify-content: flex-start;
	}
}

@media (max-width: 959px) {
	.site-header--layout-centered .site-header__end,
	.site-header--layout-split .site-header__end {
		display: none;
	}

	.site-header--layout-centered .site-header__brand,
	.site-header--layout-split .site-header__brand {
		margin-right: auto;
	}
}

.site-nav--desktop,
.locale-switcher--desktop {
	display: none;
}

/* TranslatePress-like flag dropdown -------------------------------------- */

.locale-switcher--flags {
	position: relative;
	display: flex;
	align-items: center;
}

.locale-switcher__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.locale-switcher__flag {
	display: inline-flex;
	line-height: 0;
}

.locale-switcher__flag-svg {
	display: block;
	width: 18px;
	height: 12px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.locale-switcher__flag-fallback {
	display: inline-block;
	min-width: 1.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.locale-switcher__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 320;
	isolation: isolate;
	min-width: 4.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background-color: #ffffff;
	border: 1px solid #929292;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.locale-switcher__dropdown--open,
.locale-switcher--flags:hover > .locale-switcher__dropdown,
.locale-switcher--flags:focus-within > .locale-switcher__dropdown,
.no-js .locale-switcher--flags:focus-within > .locale-switcher__dropdown {
	display: block;
}

.locale-switcher__dropdown .locale-switcher__item {
	display: block;
	margin: 0;
}

.locale-switcher__dropdown .locale-switcher__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.55rem 1rem;
	opacity: 1;
	color: inherit;
	text-decoration: none;
}

.locale-switcher__dropdown .locale-switcher__link:hover,
.locale-switcher__dropdown .locale-switcher__link--current {
	background: color-mix(in srgb, var(--site-header-link-hover, #47b8b4) 10%, #fff);
}

.locale-switcher--flags-flat .locale-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.locale-switcher--flags-flat .locale-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.35rem;
	opacity: 1;
}

.locale-switcher--flags-flat .locale-switcher__link[aria-current='true'] {
	outline: 2px solid var(--site-header-link-hover, var(--color-primary, #47b8b4));
	outline-offset: 2px;
}

@media (min-width: 960px) {
	.layout-chrome--elementor .locale-switcher--flags.locale-switcher--desktop {
		display: flex;
		align-items: center;
		align-self: center;
	}

	.locale-switcher--flags.locale-switcher--desktop {
		display: flex;
		align-items: center;
	}

	.layout-chrome--elementor .locale-switcher__current {
		min-height: 68px;
		padding: 18px 16px;
	}
}

/* Menu ------------------------------------------------------------------- */

.menu,
.locale-switcher__list,
.site-footer__links {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu {
	align-items: center;
	gap: var(--space-md, 16px);
}

.menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-xs, 4px);
}

.menu__link,
.menu__toggle,
.locale-switcher__link {
	color: var(--color-muted, inherit);
	text-decoration: none;
	padding: 0.25rem 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	/* A button does not inherit the font: take the family, keep the links' size and weight. */
	font-family: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* Header nav: colors from settings (--site-header-fg / --site-header-link-hover).
   The links are drawn at full opacity (28.10.2026): at the muted 0.55 of before, dark text on a
   light bar fell to 4.1:1 and white text on a brand colour lower still (WCAG 1.4.3,
   docs/laatu/SAAVUTETTAVUUS_2026-10-28.md). Hover and the current page are told by weight and
   the hover colour. A site that set --site-header-nav-opacity keeps its value. */
.site-header .menu__link,
.site-header .menu__toggle,
.site-header .locale-switcher__link {
	color: var(--site-header-fg, inherit);
	opacity: var(--site-header-nav-opacity, 1);
	text-decoration: none;
}

/* The language links are small text: they keep full opacity, the current one is told by its
   colour and weight. At the muted 0.55 the other languages failed the contrast check on light
   bars (WCAG 1.4.3, docs/laatu/SAAVUTETTAVUUS_2026-10-21.md). */
.site-header .locale-switcher__link {
	opacity: 1;
}

/* Measured per-item look from an imported header bar (E148): a filled pill, a coloured or
   bolder label, a text separator before the item and a gap after it. Placed after the
   bar-wide nav colour so the item the source singled out keeps its own look. */
.menu__item--styled {
	margin-inline-end: var(--menu-item-gap-after, 0);
	/* A measured pill keeps its own height instead of stretching to the bar's. */
	display: flex;
	align-items: center;
}

html .site-header .menu__item--styled > .menu__link,
html .site-header .menu__item--styled > .menu__toggle {
	background: var(--menu-item-bg, none);
	border-radius: var(--menu-item-radius, 0);
	color: var(--menu-item-fg, var(--site-header-fg, inherit));
	font-weight: var(--menu-item-weight, inherit);
	opacity: 1;
}

.menu__item--separated {
	display: flex;
	align-items: center;
}

.menu__item--separated::before {
	content: var(--menu-item-separator, '|');
	opacity: 0.5;
	display: inline-flex;
	justify-content: center;
	min-width: var(--menu-item-separator-space, var(--space-md));
}

/* navFontSize setting (E81): desktop top-level links only; submenus keep their own size. */
.site-nav--desktop > .menu > .menu__item > .menu__link,
.site-nav--desktop > .menu > .menu__item > .menu__toggle {
	font-size: var(--site-nav-size, inherit);
}

.menu__link:hover,
.menu__link[aria-current],
.menu__toggle:hover,
.menu__toggle[aria-expanded='true'],
.locale-switcher__link:hover,
.locale-switcher__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

.menu__link[aria-current],
.locale-switcher__link[aria-current] {
	color: var(--color-primary);
	font-weight: 600;
}

.site-header .menu__link[aria-current],
.site-header .locale-switcher__link[aria-current],
.site-header .menu__link:hover,
.site-header .menu__toggle:hover,
.site-header .menu__toggle[aria-expanded='true'],
.site-header .locale-switcher__link:hover {
	color: var(--site-header-link-hover, var(--site-header-fg, inherit));
	opacity: 1;
	font-weight: 600;
	text-decoration: none;
}

.menu__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	flex: 0 0 auto;
}

.menu__toggle[aria-expanded='true'] .menu__chevron {
	transform: translateY(2px) rotate(225deg);
}

/* Submenu palette. Light sites keep the opaque white panel with the site text colour.
   Dark sites (html.is-dark-site, decided from the tokens at render time) take the
   header palette instead, so panel and links always share one readable pair and
   the owner's headerBackground / headerColor / headerLinkHover carry over. */
.menu__submenu {
	--submenu-bg: #ffffff;
	--submenu-fg: var(--color-text, #111);
	--submenu-border: var(--color-border, #e5e5e5);
	--submenu-divider: var(--color-border, #e8e8e8);
	--submenu-hover-fg: var(--site-header-link-hover, var(--color-primary, #47b8b4));
	--submenu-hover-bg: color-mix(in srgb, var(--site-header-link-hover, #47b8b4) 8%, #fff);
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 300;
	isolation: isolate;
	min-width: 15rem;
	padding: 0;
	/* Fully opaque panel — carousel opacity layers must not show through. */
	background-color: var(--submenu-bg);
	color: var(--submenu-fg);
	border: 1px solid var(--submenu-border);
	border-radius: 2px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
	text-align: start;
	opacity: 1;
}

/* html.is-dark-site beats the layout-chrome overrides above regardless of order. */
html.is-dark-site .menu__submenu {
	--submenu-bg: var(--site-header-bg, var(--scheme-bg, #111));
	--submenu-fg: var(--site-header-fg, var(--scheme-fg, #fff));
	--submenu-border: color-mix(in srgb, var(--submenu-fg) 30%, transparent);
	--submenu-divider: color-mix(in srgb, var(--submenu-fg) 18%, transparent);
	--submenu-hover-fg: var(--site-header-link-hover, var(--submenu-fg));
	--submenu-hover-bg: color-mix(in srgb, var(--submenu-fg) 14%, transparent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.menu__submenu--open,
.no-js .menu__item:focus-within > .menu__submenu {
	display: block;
}

/* navOpenOnHover (E140): the menu snippet opens desktop submenus on pointer hover (Alpine,
   so click, Escape and keyboard keep working). Invisible bridge lets the pointer reach the panel. */
html.nav-hover .site-nav--desktop .menu__item--has-children > .menu__submenu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}

.menu__submenu .menu,
.menu__submenu .menu.menu--level-1 {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: auto !important;
	min-height: 0;
	gap: 0;
	margin: 0;
	padding: 0;
}

.menu__submenu .menu__item {
	display: block;
	height: auto;
	margin: 0;
	border-bottom: 1px solid var(--submenu-divider);
}

.menu__submenu .menu__item:last-child {
	border-bottom: 0;
}

.menu__submenu .menu__link {
	display: block;
	height: auto !important;
	min-height: 0;
	padding: 0.7rem 1.1rem;
	line-height: 1.3;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--submenu-fg);
	opacity: 1;
	text-decoration: none;
	white-space: nowrap;
}

.menu__submenu .menu__link:hover,
.menu__submenu .menu__link[aria-current] {
	color: var(--submenu-hover-fg);
	background: var(--submenu-hover-bg);
	text-decoration: none;
}

/* Keyboard focus: ring in the link's own colour, so it contrasts with the panel by
   construction (the amber --focus-ring is 1.7:1 on white); inset so the header
   does not clip it. */
.menu__submenu .menu__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/* Rich dropdown item (E141): optional icon + label + description. Appearance settings
   (submenuBackground, submenuWidth …) come from the header's <style data-submenu-style>. */
.menu__link--rich,
.menu__submenu .menu__link.menu__link--rich {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	white-space: normal;
}

/* A list with descriptions: rows fill the panel, so a description has the panel's width to
   wrap in (each row shrank to its label before, editor test 6.11.2026). */
.menu__submenu .menu:has(> .menu__item--rich) {
	align-items: stretch;
}

/* The panel sizes to its labels; descriptions wrap inside that width instead of widening it. */
.menu__submenu .menu__label {
	white-space: nowrap;
}

.menu__icon {
	flex: 0 0 auto;
	align-self: center;
	width: 30px;
	height: auto;
	max-height: 4em;
	object-fit: contain;
}

.menu__text {
	display: flex;
	flex-direction: column;
	/* The row's width (the panel's, set by its widest label): a description wraps across the
	   panel, not inside its own short label (editor test 6.11.2026: "Hyödyt" left its
	   description 40 px wide and seven lines tall). */
	flex: 1 1 auto;
	min-width: 0;
}

.menu__description {
	display: block;
	width: 0;
	min-width: 100%;
	margin-top: 0.4em;
	font-family: var(--font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	/* Readable on the panel by construction: softened panel text colour unless set. */
	color: var(
		--submenu-description-fg,
		color-mix(in srgb, var(--submenu-fg, currentColor) 72%, transparent)
	);
}

.site-nav--mobile .menu__label {
	white-space: normal;
}

.site-nav--mobile .menu__icon {
	width: 24px;
}

/* Header look (E223): a floating rounded bar, a grey pill under the pointer, and a mega
   menu whose second-level parents are titled columns. */
.menu__icon-box {
	display: contents;
}

.site-header--floating,
.site-header--floating.site-header--bg-surface,
.site-header--floating.site-header--bg-primary {
	background: transparent;
	border-bottom: 0;
	padding-top: 14px;
}

.site-header--floating .site-header__inner {
	max-width: min(100% - 2rem, 1120px);
	padding-inline: 24px;
	border-radius: 999px;
	background: var(--site-header-bg, var(--color-surface, #fff));
	box-shadow:
		0 1px 2px rgba(8, 10, 16, 0.04),
		0 12px 32px -18px rgba(8, 10, 16, 0.25);
}

/* On a phone the logo, the menu button and the call to action do not fit one row: the
   button dropped under the logo and the bar became a tall blob. The menu drawer has the
   same button, so the bar drops its own. */
@media (max-width: 559px) {
	.site-header--floating .site-header__inner {
		flex-wrap: nowrap;
	}

	.site-header--floating .site-header__inner > .site-header__cta {
		display: none;
	}
}

/* The same on an ordinary bar: logo, call to action and menu button share one row on a phone
   instead of the button dropping under the logo and doubling the bar's height. The button
   stays (on a booking site it is the one action that matters) but gets narrower, and a long
   name wraps onto a second line. */
@media (max-width: 959px) {
	.site-header--layout-inline.site-header--has-cta .site-header__inner {
		flex-wrap: nowrap;
		gap: var(--space-sm, 8px);
	}

	.site-header--layout-inline.site-header--has-cta .site-header__brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__name {
		display: block;
		line-height: 1.15;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__inner > .site-header__cta {
		order: 1;
		flex: 0 0 auto;
		margin-left: auto;
		padding: 0.45rem 0.8rem;
	}

	.site-header--layout-inline.site-header--has-cta .site-header__mobile {
		order: 2;
		flex: 0 0 auto;
		margin-left: 0;
	}
}

/* The bar's glass is a layer behind its content, not a filter on the bar itself: an element
   with backdrop-filter limits what its descendants can blur to its own box, and the menu
   panel inside the bar then showed the page behind it sharp, text over text. */
.site-header--floating.site-header--glass .site-header__inner {
	position: relative;
	isolation: isolate;
	background: transparent;
}

.site-header--floating.site-header--glass .site-header__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: color-mix(in srgb, var(--site-header-bg, #fff) 72%, transparent);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	pointer-events: none;
}

/* Without backdrop-filter the panel and the bar are opaque, so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header--glass .site-nav--desktop .menu__submenu {
		background-color: var(--submenu-bg);
	}

	.site-header--floating.site-header--glass .site-header__inner::before {
		background: var(--site-header-bg, #fff);
	}
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle) {
	padding: 8px 15px;
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle):hover,
.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> .menu__toggle[aria-expanded='true'] {
	background: color-mix(in srgb, var(--site-header-fg, #111827) 7%, transparent);
	color: var(--site-header-fg, inherit);
}

.site-header--pill-hover .site-nav--desktop .menu__chevron {
	transition: transform 0.2s ease;
}

.site-header--pill-hover .site-nav--desktop > .menu > .menu__item {
	display: flex;
	align-items: center;
}

.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item
	> :is(.menu__link, .menu__toggle) {
	height: auto !important;
	min-height: 0;
}

/* Rows fill their column, so the icons line up; columns are as wide as their rows. */
.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu,
.site-header--mega .site-nav--desktop .menu__submenu .menu {
	align-items: stretch;
}

.site-header--mega .site-nav--desktop .menu__submenu:has(.menu__group) {
	width: max-content;
	max-width: calc(100vw - 32px);
}

.site-header--mega .site-nav--desktop .menu__submenu .menu.menu--level-1:has(> .menu__group) {
	grid-auto-columns: max-content;
}

/* The pill is lower than the bar: open the panel below the bar, and keep the pointer's way
   to it covered so a hover-opened menu does not close on the way down. */
.site-header--pill-hover .site-nav--desktop > .menu > .menu__item > .menu__submenu {
	margin-top: 18px;
}

html.nav-hover
	.site-header--pill-hover
	.site-nav--desktop
	> .menu
	> .menu__item--has-children
	> .menu__submenu::before {
	height: 32px;
}

.site-header--glass .site-nav--desktop .menu__submenu {
	background-color: color-mix(in srgb, var(--submenu-bg) 72%, transparent);
	backdrop-filter: blur(20px) saturate(1.6);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	box-shadow:
		0 30px 60px -22px rgba(8, 10, 16, 0.32),
		0 2px 8px -4px rgba(8, 10, 16, 0.16);
}

.site-header--mega .site-nav--desktop .menu__submenu:has(.menu__group) {
	padding: 12px;
}

.site-header--mega .site-nav--desktop .menu__submenu .menu.menu--level-1:has(> .menu__group) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 1fr);
	gap: 0 20px;
}

.site-header--mega .menu__submenu .menu__group {
	border-bottom: 0;
}

.menu__group-title {
	display: block;
	padding: 6px 12px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--submenu-fg, currentColor) 65%, transparent);
}

.site-header--mega .menu__submenu .menu__group .menu__item {
	border-bottom: 0;
}

.site-header--icon-tiles .menu__submenu .menu__link,
.site-header--mega .menu__submenu .menu__group .menu__link {
	border-radius: 12px;
	transition: background-color 0.15s ease;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu:not(:has(.menu__group)) {
	padding: 8px;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__item {
	border-bottom: 0;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__link--rich,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__link--rich {
	justify-content: flex-start;
	align-items: center;
	min-width: 17rem;
	padding: 10px 12px;
	text-align: start;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__text,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__text {
	align-items: flex-start;
}

/* The row is wide enough for its description: no wrapping to the label's width. */
.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__description,
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__description {
	width: auto;
	min-width: 0;
	margin-top: 0.15em;
	white-space: nowrap;
}

.site-header--icon-tiles .site-nav--desktop .menu__submenu .menu__link:is(:hover, :focus-visible),
.site-header--mega
	.site-nav--desktop
	.menu__submenu
	.menu__group
	.menu__link:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--submenu-fg, #111827) 6%, transparent);
	color: var(--submenu-fg);
}

.site-header--icon-tiles .menu__icon-box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	align-self: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--submenu-fg, #111827) 10%, transparent);
	border-radius: 9px;
	background: color-mix(in srgb, #fff 55%, transparent);
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.site-header--icon-tiles .menu__icon-box .menu__icon {
	width: 18px;
	max-height: 18px;
	transition: filter 0.15s ease;
}

.site-header--icon-tiles .menu__link--rich:is(:hover, :focus-visible) .menu__icon-box {
	background: var(--color-primary, #1d4ed8);
	border-color: transparent;
}

/* One-colour icons turn white on the primary tile. */
.site-header--icon-tiles .menu__link--rich:is(:hover, :focus-visible) .menu__icon {
	filter: brightness(0) invert(1);
}

.site-header--item-arrow .menu__submenu .menu__link--rich {
	position: relative;
	padding-right: 2.5rem;
}

.site-header--item-arrow .menu__submenu .menu__link--rich::after {
	content: '→';
	position: absolute;
	right: 0.9rem;
	top: 50%;
	opacity: 0;
	transform: translate(-4px, -50%);
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.site-header--item-arrow .menu__submenu .menu__link--rich:is(:hover, :focus-visible)::after {
	opacity: 0.6;
	transform: translate(0, -50%);
}

/* The row padding set for tiles must not take the arrow's room. */
.site-header--item-arrow .site-nav--desktop .menu__submenu .menu__link.menu__link--rich,
.site-header--item-arrow
	.site-nav--desktop
	.menu__submenu
	.menu__group
	.menu__link.menu__link--rich {
	padding-right: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.site-header--item-arrow .menu__submenu .menu__link--rich::after,
	.site-header--icon-tiles .menu__icon-box,
	.site-header--pill-hover .site-nav--desktop .menu__chevron {
		transition: none;
	}
}

/* Megavalikko (docs/komponentit/MEGAVALIKKO_JA_PIKALINKIT_2026-11-06.md): a column's title is a
   link when it has a page, a column may have a short description under its title, and one
   item of a column may be its featured link, a card with a picture. On a phone the columns
   are plain titled lists inside the menu's open item (one level of accordion only). */
a.menu__group-title {
	text-decoration: none;
}

a.menu__group-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.menu__group-title:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
	border-radius: 4px;
}

.menu__group-description {
	display: block;
	max-width: 18rem;
	padding: 0 12px 8px;
	font-size: 13px;
	line-height: 1.4;
	color: color-mix(in srgb, var(--submenu-fg, currentColor) 70%, transparent);
	white-space: normal;
}

.menu__submenu .menu__item.menu__feature {
	border-bottom: 0;
}

.menu__submenu .menu__link.menu__feature-link {
	display: grid;
	gap: 8px;
	max-width: 18rem;
	margin: 6px 0 2px;
	padding: 10px 12px 12px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--submenu-fg, #111827) 5%, transparent);
	white-space: normal;
}

/* Header designs give dropdown links a row layout (label beside the icon); the featured card
   stacks its picture above the text in every design. */
.site-header
	.site-nav--desktop
	.menu__submenu
	.menu__item.menu__feature
	> .menu__link.menu__feature-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	white-space: normal;
}

/* The classic header: a mega panel hangs from the right edge of the whole menu, not from its
   item, so a wide panel opened from a right-hand item stays inside the window. */
.site-header--mega:not(.site-header--v) .site-nav--desktop > .menu {
	position: relative;
}

.site-header--mega:not(.site-header--v)
	.site-nav--desktop
	> .menu
	> .menu__item--has-children:has(> .menu__submenu .menu__group) {
	position: static;
}

.site-header--mega:not(.site-header--v)
	.site-nav--desktop
	> .menu
	> .menu__item
	> .menu__submenu:has(.menu__group) {
	left: auto;
	right: 0;
}

.menu__feature-image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.menu__feature-link .menu__text {
	display: grid;
	gap: 2px;
}

.menu__feature-link .menu__description {
	font-weight: 400;
	white-space: normal;
}

/* In the phone menu a description uses the row's width; wrapping it to the label's width left
   one word per line. */
.site-nav--mobile .menu__submenu .menu__text {
	flex: 1 1 auto;
	min-width: 0;
}

.site-nav--mobile .menu__submenu .menu__description {
	width: auto;
	min-width: 0;
}

.site-nav--mobile .menu__feature-image {
	display: none;
}

.site-nav--mobile .menu__submenu .menu__link.menu__feature-link {
	max-width: none;
	margin: 0;
	background: none;
	padding: 0.7rem 1.1rem;
}

.site-nav--mobile .menu__group-title {
	padding-top: 14px;
	font-size: 13px;
}

/* Yläpalkin pikalinkit: the row above the header. */
.site-utility {
	position: relative;
	z-index: 201;
	font-size: 13.5px;
	line-height: 1.4;
}

.site-utility--primary {
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
}

.site-utility--surface {
	background: var(--color-surface, var(--scheme-bg));
	color: var(--scheme-fg, var(--color-text));
	border-bottom: 1px solid var(--scheme-border, rgba(0, 0, 0, 0.1));
}

.site-utility__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 24px;
	width: min(100% - 2 * var(--site-gutter, 28px), var(--size-contentMaxWidth, 1200px));
	min-height: 36px;
	margin-inline: auto;
}

.site-utility__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0 auto 0 0;
}

.site-utility__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-utility__link,
.site-utility .locale-switcher__link {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: 6px;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.site-utility__link:hover,
.site-utility .locale-switcher__link:hover {
	text-decoration: underline;
}

.site-utility__link:focus-visible,
.site-utility .locale-switcher__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
	border-radius: 4px;
}

.site-utility .locale-switcher,
.site-topbar .locale-switcher--utility {
	display: block;
	margin: 0;
	color: inherit;
}

.site-topbar .site-utility__nav {
	margin-inline-start: auto;
}

.site-topbar .site-utility__links .site-utility__link {
	color: inherit;
}

/* The links in the phone menu, under the main items and smaller than them. */
.site-nav-utility {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: var(--space-md, 16px) 0 0;
	padding: var(--space-md, 16px) 0 0;
	border-top: 1px solid var(--scheme-border, rgba(0, 0, 0, 0.12));
	list-style: none;
}

.site-nav-utility .site-utility__link {
	min-height: 44px;
	padding-inline: 0 12px;
	color: var(--site-mobile-nav-fg, var(--scheme-fg));
	font-size: 15px;
}

@media (max-width: 959px) {
	.site-utility--wide-only,
	.site-utility__nav--wide-only {
		display: none;
	}

	.site-utility__inner {
		justify-content: flex-start;
		gap: 0 12px;
	}

	.site-utility__link {
		min-height: 44px;
	}
}

@media (min-width: 960px) {
	.site-nav-utility {
		display: none;
	}
}

/* "Linkkivalikko" in the utility row: the dropdown block, as small as the row's links. */
.site-utility__menu {
	color: inherit;
}

.site-utility__menu-button {
	display: inline-flex;
	gap: 0.35rem;
	min-height: 32px;
	padding-inline: 6px;
	border-radius: 4px;
	color: inherit;
	font: inherit;
}

.site-utility__menu-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
}

.site-utility .dropdown__list,
.site-topbar .dropdown__list {
	right: 0;
	left: auto;
	font-size: 15px;
}

.site-nav-utility-menu {
	margin-top: var(--space-sm, 8px);
	color: var(--site-mobile-nav-fg, var(--scheme-fg));
}

.site-nav-utility-menu .site-utility__menu-button {
	min-height: 44px;
	padding-inline: 0;
	font-size: 15px;
}

.site-nav-utility-menu .dropdown__list {
	position: static;
	box-shadow: none;
}

@media (max-width: 959px) {
	.site-utility__menu-button {
		min-height: 44px;
	}
}

/* "Ylätunnisteen kuvakkeet": icon links beside the menu button; the name is a tooltip that
   Esc hides (is-tip-off) or, with the style "text", beside the icon on a wide screen. */
.site-icons {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-icons__item {
	position: relative;
}

.site-icons__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	border-radius: var(--radius-sm, 4px);
	color: inherit;
	text-decoration: none;
}

.site-icons__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

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

.site-icons__icon {
	flex: none;
	width: 24px;
	height: 24px;
}

.site-icons__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-icons__link:is(:hover, :focus-visible) .site-icons__label {
	z-index: 210;
	top: calc(100% - 2px);
	left: 50%;
	width: auto;
	height: auto;
	padding: 4px 8px;
	overflow: visible;
	clip-path: none;
	border-radius: 4px;
	background: #1d2127;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transform: translateX(-50%);
}

.site-icons.is-tip-off .site-icons__link .site-icons__label {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.site-icons__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-sizing: border-box;
}

.site-icons__count[hidden] {
	display: none;
}

.site-sidebar .site-icons {
	margin-top: var(--space-md, 16px);
}

@media (min-width: 960px) {
	.site-icons--narrow-only {
		display: none;
	}

	.site-icons--text .site-icons__link {
		padding-inline: 8px;
	}

	.site-icons--text .site-icons__label,
	.site-icons--text .site-icons__link:is(:hover, :focus-visible) .site-icons__label,
	.site-icons--text.is-tip-off .site-icons__link .site-icons__label {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		clip-path: none;
		background: none;
		color: inherit;
		font-size: 0.875rem;
		transform: none;
	}
}

@media (max-width: 959px) {
	.site-icons--wide-only {
		display: none;
	}

	.site-header--layout-inline .site-header__inner > .site-icons {
		order: 1;
		margin-left: auto;
	}

	.site-header--layout-inline .site-header__inner > .site-header__cta ~ .site-icons {
		margin-left: 0;
	}

	/* Icons and the menu button on one row: the name wraps instead (as with a CTA). */
	.site-header--layout-inline .site-header__inner:has(> .site-icons) {
		flex-wrap: nowrap;
		gap: var(--space-sm, 8px);
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-header__brand {
		min-width: 0;
		flex: 0 1 auto;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) .site-header__name {
		display: block;
		line-height: 1.15;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-icons {
		flex: 0 0 auto;
	}

	.site-header--layout-inline .site-header__inner:has(> .site-icons) > .site-header__mobile {
		order: 2;
		flex: 0 0 auto;
		margin-left: 0;
	}

	.site-header--layout-centered .site-header__inner > .site-icons,
	.site-header--layout-split .site-header__inner > .site-icons,
	.site-header--sidebar-mobile .site-header__inner > .site-icons {
		margin-left: auto;
	}

	.site-header--layout-centered
		.site-header__inner
		> .site-icons
		+ .site-header__end
		+ .site-header__mobile,
	.site-header--layout-split .site-header__inner > .site-icons + .site-header__mobile,
	.site-header--sidebar-mobile .site-header__inner > .site-icons + .site-header__mobile {
		margin-left: 0;
	}
}

/* Mobile navigation ------------------------------------------------------ */

.site-header__mobile {
	margin-left: auto;
}

.site-mobile-nav {
	position: relative;
}

/* A dropdown panel spans the whole header, not the burger (E157): the wrapper must not be
   the containing block, or `inset-inline: 0` resolves to the 60px button. */
.site-mobile-nav--dropdown {
	position: static;
}

.site-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Measured burger size (E157); the theme's 2.75rem is the fallback. */
	width: var(--site-header-toggle-size, 2.75rem);
	height: var(--site-header-toggle-size, 2.75rem);
	padding: 0;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	color: inherit;
	cursor: pointer;
	/* Stay above the drawer so the icon morph stays visible (Enfold). */
	position: relative;
	z-index: 70;
	/* Do not inherit global `button { transform }` — only the bars animate. */
	transform: none !important;
	box-shadow: none !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.site-header__toggle:hover,
.site-header__toggle:active,
.site-header__toggle:focus-visible {
	transform: none !important;
	box-shadow: none !important;
}

.site-header__toggle:focus-visible {
	box-shadow: var(--focus-ring-shadow) !important;
}

.site-header__toggle-bars {
	/* Absolute bars so open-state X meets on one centre point. */
	display: block;
	position: relative;
	width: 1.15rem;
	height: 14px;
}

.site-header__toggle-bars span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease,
		top 0.2s ease;
}

.site-header__toggle-bars span:nth-child(1) {
	top: 0;
}

.site-header__toggle-bars span:nth-child(2) {
	top: 6px;
}

.site-header__toggle-bars span:nth-child(3) {
	top: 12px;
}

/* Morph bars → single X (Enfold-style; toggle is the only close control). */
.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

.site-nav-drawer {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset-block: 0;
	/* Burger sits on the right; open the panel from that edge (Enfold menu_right). */
	inset-inline-start: auto;
	inset-inline-end: 0;
	z-index: 60;
	width: min(22rem, 88vw);
	background: var(--scheme-bg);
	border-inline-start: 1px solid var(--scheme-border);
	border-inline-end: 0;
	box-shadow: var(--shadow-card, 0 8px 32px rgb(0 0 0 / 18%));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Measured phone menu (E157): the source's own panel colour and row size. Placed after the
   header's nav colour rule so an imported panel is not repainted by the bar's foreground. */
.site-nav-drawer {
	background: var(--site-mobile-nav-bg, var(--scheme-bg));
}

.site-nav--mobile .menu__link,
.site-nav--mobile .menu__toggle {
	color: var(--site-mobile-nav-fg, inherit);
	font-size: var(--site-mobile-nav-size, inherit);
	font-weight: var(--site-mobile-nav-weight, inherit);
	min-height: var(--site-mobile-nav-item-height, auto);
	opacity: 1;
}

/* An item with a measured look (E148) but no measured colour falls back to the panel's own
   foreground here, not the bar's: on a white phone panel the bar's white was invisible. */
html .site-header .site-nav--mobile .menu__item--styled > .menu__link,
html .site-header .site-nav--mobile .menu__item--styled > .menu__toggle {
	color: var(--menu-item-fg, var(--site-mobile-nav-fg, inherit));
}

/* Alpine enter/leave: slide in from the inline-end (right in LTR). */
.site-nav-drawer--animating {
	transition: transform 0.28s ease;
	will-change: transform;
}

.site-nav-drawer--from-end {
	transform: translateX(100%);
}

.site-nav-drawer--at-rest {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__toggle-bars span {
		transition: none;
	}

	.site-nav-drawer--animating {
		transition: none;
	}
}

.site-nav-drawer__inner {
	flex: 1;
	padding: var(--space-lg, 32px) var(--space-md, 16px);
	/* No in-panel ×; toggle sits in the header above the drawer. */
	padding-top: var(--space-lg, 32px);
}

.site-nav-drawer__close {
	position: absolute;
	top: var(--space-sm, 8px);
	inset-inline-end: var(--space-sm, 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transform: none !important;
	box-shadow: none !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

/* Offcanvas: burger morphs to X (z-index 70); hide the duplicate × in the panel. */
.site-mobile-nav:not(.site-mobile-nav--dropdown) .site-nav-drawer__close {
	display: none;
}

.site-nav-drawer__close:hover,
.site-nav-drawer__close:active,
.site-nav-drawer__close:focus-visible {
	transform: none !important;
	box-shadow: none !important;
}

.site-nav-drawer__close:focus-visible {
	box-shadow: var(--focus-ring-shadow) !important;
}

.site-nav-drawer__backdrop {
	position: fixed;
	inset: 0;
	z-index: 55;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgb(0 0 0 / 45%);
	cursor: pointer;
}

html.site-nav-locked,
html.site-nav-locked body {
	overflow: hidden;
}

.site-mobile-nav--dropdown .site-nav-drawer {
	position: absolute;
	inset: auto;
	top: 100%;
	inset-inline: 0;
	width: auto;
	max-height: calc(100dvh - 100%);
	border-inline-end: 0;
	border-bottom: 1px solid var(--scheme-border);
	box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / 10%));
}

.site-mobile-nav--dropdown .site-nav-drawer__inner {
	padding-top: var(--space-md, 16px);
}

.site-mobile-nav--dropdown .site-nav-drawer__close,
.site-mobile-nav--dropdown .site-nav-drawer__backdrop {
	display: none;
}

.no-js .site-header__toggle,
.no-js .site-nav-drawer__close,
.no-js .site-nav-drawer__backdrop {
	display: none;
}

.no-js .site-nav-drawer {
	position: static;
	width: 100%;
	border: 0;
	box-shadow: none;
}

.no-js .site-nav-drawer__inner {
	padding-top: var(--space-md, 16px);
}

/* Without JavaScript the phone menu is a plain list in the header. Beside the name (and a
   call to action) it would be as wide as its longest link and push the page past the right
   edge (390 px: a long name 470 px wide). It gets a row of its own under the bar instead: the
   wrapper of the bar's end side gives its children to the bar's row (display: contents), and
   the menu wraps onto a full-width row after everything else. */
@media (max-width: 959px) {
	html.no-js .site-header .site-header__inner {
		flex-wrap: wrap;
	}

	html.no-js .site-header__end:has(> .site-header__mobile) {
		display: contents;
	}

	html.no-js .site-header__end:has(> .site-header__mobile) > :first-child {
		margin-inline-start: auto;
	}

	html.no-js .site-header .site-header__mobile {
		order: 99;
		flex: 1 0 100%;
		min-width: 0;
		margin: 0;
	}

	html.no-js .site-mobile-nav,
	html.no-js .site-nav-drawer {
		min-width: 0;
		max-width: 100%;
	}
}

.site-nav--mobile .menu,
.site-nav--mobile .locale-switcher__list {
	display: grid;
	gap: var(--space-sm, 8px);
}

.site-nav--mobile .menu__item {
	flex-wrap: wrap;
}

.site-nav--mobile .menu__submenu {
	position: static;
	width: 100%;
	box-shadow: none;
	border: 0;
	padding-left: var(--space-md, 16px);
}

/* A phone drawer owns its palette, including expanded/hovered controls and
   nested panels. A transparent white-on-dark header must not override it. */
html .site-header .site-nav--mobile .menu__link,
html .site-header .site-nav--mobile .menu__toggle {
	color: var(--menu-item-fg, var(--site-mobile-nav-fg, var(--scheme-fg)));
}

html .site-header .site-nav--mobile .menu__submenu {
	--submenu-bg: var(--site-mobile-nav-bg, var(--scheme-bg));
	--submenu-fg: var(--site-mobile-nav-fg, var(--scheme-fg));
	--submenu-divider: color-mix(in srgb, var(--submenu-fg) 18%, transparent);
	--submenu-hover-fg: var(--submenu-fg);
	--submenu-hover-bg: color-mix(in srgb, var(--submenu-fg) 8%, var(--submenu-bg));
	box-shadow: none;
}

.site-nav--mobile .locale-switcher {
	margin-top: var(--space-md, 16px);
	padding-top: var(--space-md, 16px);
	border-top: 1px solid var(--scheme-border);
}

/* The phone menu's language links are touch targets of 44 px like its other links
   (WCAG 2.5.5, docs/UI-SUUNNITTELUN-TIETOPERUSTA.md); a label of 13 px with a thin padding was
   about 20 px high. */
.site-nav--mobile .locale-switcher__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 1rem;
}

/* A narrow desktop bar (960–1279 px) shows the current language only; it opens the list of
   all of them (locale-switcher.liquid). With three names the bar's call to action used to drop
   to a second row at 1024 px. */
.locale-switcher__compact {
	display: none;
	position: relative;
}

.locale-switcher__summary {
	display: flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	height: 100%;
	padding: 0 13px;
	cursor: pointer;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--site-header-fg, inherit);
}

.locale-switcher__summary::-webkit-details-marker {
	display: none;
}

.locale-switcher__summary::after {
	content: '';
	width: 0.4em;
	height: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.locale-switcher__compact[open] > .locale-switcher__summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.locale-switcher__compact-list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 10rem;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--scheme-bg, #fff);
	border: 1px solid var(--scheme-border, rgb(0 0 0 / 12%));
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

html .site-header .locale-switcher__compact-list .locale-switcher__link,
html .locale-switcher--desktop .locale-switcher__compact-list .locale-switcher__link {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 44px;
	padding: 0 12px;
	color: var(--scheme-fg, #15181f);
	opacity: 1;
}

@media (min-width: 960px) and (max-width: 1279px) {
	.locale-switcher--desktop .locale-switcher__list {
		display: none;
	}

	.locale-switcher--desktop .locale-switcher__compact {
		display: block;
	}
}

/* The language being read is marked by more than its weight: an underline in the bar and in
   the phone menu alike (the bar's hover rule above takes the underline off its links). */
.site-header .locale-switcher__link[aria-current],
.site-nav--mobile .locale-switcher__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

@media (min-width: 960px) {
	.site-header__mobile {
		display: none;
	}

	.site-nav--desktop,
	.locale-switcher--desktop {
		display: block;
	}

	/* Enfold: top-level nav fills the header bar; nested menus keep natural height. */
	.site-nav--desktop > .menu {
		height: 88px;
		gap: 0;
	}

	.site-header--height-compact .site-nav--desktop > .menu {
		height: 56px;
	}

	.site-header--height-tall .site-nav--desktop > .menu {
		height: 112px;
	}

	.site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.locale-switcher--desktop .locale-switcher__link {
		display: flex;
		align-items: center;
		height: 88px;
		padding: 0 13px;
		line-height: 1;
		box-sizing: border-box;
	}

	.site-header--height-compact .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--height-compact .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--height-compact .locale-switcher--desktop .locale-switcher__link {
		height: 56px;
	}

	.site-header--height-tall .site-nav--desktop > .menu > .menu__item > .menu__link,
	.site-header--height-tall .site-nav--desktop > .menu > .menu__item > .menu__toggle,
	.site-header--height-tall .locale-switcher--desktop .locale-switcher__link {
		height: 112px;
	}

	/* A measured pill (E148) hugs its label with the source's padding instead of filling
	   the bar's height; the item is centred in the bar by .menu__item--styled. */
	.site-nav--desktop > .menu > .menu__item--pill > .menu__link,
	.site-nav--desktop > .menu > .menu__item--pill > .menu__toggle {
		height: var(--menu-item-height, auto);
		padding: 0 var(--menu-item-pad-x, var(--space-sm));
		justify-content: center;
	}

	.locale-switcher__list {
		gap: var(--space-sm, 8px);
	}
}

/* Sidebar chrome (Google Sites-style left nav) --------------------------- */

.site-layout--sidebar {
	margin: 0;
	min-height: 100dvh;
}

.site-shell {
	display: block;
	min-height: 100dvh;
}

.site-sidebar {
	display: none;
	background: var(--site-header-bg, var(--color-primary, #007bbf));
	color: var(--site-header-fg, #fff);
}

.site-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md, 16px);
	padding: var(--space-lg, 32px) var(--space-md, 16px);
	min-height: 100%;
	box-sizing: border-box;
}

.site-sidebar__brand {
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
	padding: 0 0.75rem 0.75rem;
}

.site-sidebar__name {
	display: block;
	text-transform: none;
}

.site-sidebar__logo {
	max-width: 100%;
	max-height: 3.5rem;
	object-fit: contain;
}

.site-nav--sidebar .menu--sidebar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-nav--sidebar .menu__item {
	display: block;
}

.site-nav--sidebar .menu__link {
	display: block;
	position: relative;
	padding: 0.65rem 1rem 0.65rem 1.15rem;
	border-radius: 0;
	color: inherit;
	opacity: 0.95;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.site-nav--sidebar .menu__link:hover {
	opacity: 1;
	background: rgb(255 255 255 / 10%);
	text-decoration: none;
}

/* Google Sites: white vertical bar on the left of the active item */
.site-nav--sidebar .menu__link[aria-current='page'] {
	opacity: 1;
	font-weight: 500;
	background: transparent;
	text-decoration: none;
	box-shadow: inset 4px 0 0 #fff;
}

.site-nav--sidebar .menu__link[aria-current='page']:hover {
	background: rgb(255 255 255 / 8%);
}

.site-nav--sidebar .menu__submenu {
	position: static;
	min-width: 0;
	margin: 0.15rem 0 0.35rem 0.75rem;
	padding: 0;
	background: transparent;
	/* Transparent over the sidebar: links use the sidebar colour, not the panel palette. */
	color: inherit;
	border: 0;
	box-shadow: none;
}

.locale-switcher--sidebar {
	margin-top: auto;
	padding-top: var(--space-md, 16px);
}

.locale-switcher--sidebar .locale-switcher__list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.locale-switcher--sidebar .locale-switcher__link {
	color: inherit;
	opacity: 0.9;
}

.site-header--sidebar-mobile .site-nav--desktop,
.site-header--sidebar-mobile .locale-switcher--desktop {
	display: none;
}

/* Google Sites keeps the left chrome until a narrow phone; match ~640px. */
@media (min-width: 640px) {
	.site-layout--sidebar .site-shell {
		display: grid;
		grid-template-columns: minmax(12.5rem, 15rem) minmax(0, 1fr);
		align-items: stretch;
	}

	.site-layout--sidebar .site-sidebar {
		display: block;
		position: sticky;
		top: 0;
		align-self: start;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-layout--sidebar .site-header--sidebar-mobile {
		display: none;
	}

	.site-shell__content {
		min-width: 0;
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}

	.site-shell__content > #main {
		flex: 1;
	}
}

@media (min-width: 960px) {
	.site-layout--sidebar .site-shell {
		grid-template-columns: minmax(14rem, 16.5rem) minmax(0, 1fr);
	}
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: stretch;
	min-height: 0;
	padding-block: var(--space-lg, 24px);
	background: var(--site-footer-bg, var(--color-surface, #f4f5f7));
	color: var(--site-footer-fg, var(--color-text, #111));
}

.site-footer--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--site-footer-bg-image);
	background-position: var(--site-footer-bg-position, center);
	background-size: var(--site-footer-bg-size, cover);
	background-repeat: no-repeat;
	opacity: var(--site-footer-bg-opacity, 1);
	pointer-events: none;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-lg, 24px) var(--space-xl, 32px);
	justify-content: start;
	align-items: start;
	text-align: start;
}

/* Footer layouts (settings footerLayout). */
.site-footer--layout-minimal .site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md, 16px) var(--space-lg, 24px);
	text-align: start;
}

.site-footer--layout-minimal .site-footer__contact,
.site-footer--layout-minimal .site-footer__kontakt,
.site-footer--layout-minimal .site-footer__text {
	display: none;
}

.site-footer--layout-minimal .site-footer__copyright {
	grid-column: auto;
	margin-top: 0;
	margin-left: auto;
}

.site-footer--layout-minimal .site-footer__links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px) var(--space-md, 16px);
}

.site-footer--layout-centered .site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-md, 16px);
}

.site-footer--layout-centered .site-footer__copyright {
	grid-column: auto;
	text-align: center;
	margin-top: 0;
}

.site-footer--layout-centered .site-footer__links {
	justify-content: center;
}

.site-footer--layout-centered .site-footer__social {
	justify-content: center;
}

.site-footer--layout-stacked .site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-md, 16px);
}

.site-footer--layout-stacked .site-footer__copyright {
	grid-column: auto;
	margin-top: 0;
}

.site-footer__heading {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
}

.site-footer__address {
	margin: 0;
	line-height: 1.5;
}

.site-footer__kontakt p,
.site-footer__contact p,
.site-footer__text,
.site-footer__privacy,
.site-footer__withdrawal {
	margin: 0 0 0.5em;
}

/* The generated legal pages and "Kirjaudu" (footerLegalLinks), one per line like the privacy link. */
.site-footer__legal {
	list-style: none;
	margin: 0 0 0.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}

/* The privacy link and the legal list read as one list: the same step as the footer menu's. */
.site-footer__privacy:has(+ .site-footer__legal) {
	margin-bottom: 0.35em;
}

/* Photo bank credits (`footerPhotoCredits`): small print, links with 24 px targets inline. */
.site-footer__credits {
	flex-basis: 100%;
	margin: 0.5em 0 0;
	font-size: 0.8em;
	line-height: 1.8;
	opacity: 0.85;
}
.site-footer__credits a {
	color: inherit;
	text-decoration: underline;
	padding-block: 0.2em;
}

.site-footer__kontakt p:last-child,
.site-footer__contact p:last-child {
	margin-bottom: 0;
}

.site-footer__copyright {
	display: block;
	grid-column: 1 / -1;
	text-align: start;
	color: inherit;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.95;
	margin-top: var(--space-sm, 8px);
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}

/* Footer menu columns (E154): grouped items sit side by side as titled lists, the way sites
   lay a footer out (Products / Services / Company). A flat menu keeps the single column. */
.site-footer__links--grouped {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-md, 16px) var(--space-xl, 48px);
}

.site-footer__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs, 8px);
}

.site-footer__sublinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.site-footer__links--row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-xs, 8px) var(--space-md, 16px);
}

/* Titled columns need the whole footer width, not one cell of the inner grid. */
.site-footer__nav--grouped {
	grid-column: 1 / -1;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px) var(--space-md, 16px);
}

.site-footer__social-icon {
	display: none;
}

/* A 44 px tall touch target without moving anything: the padding is taken back by a negative
   margin (template audit, 12.11.2026). The one-letter "X" gets a 44 px wide target too; its
   setting is new, so no existing site has it. */
.site-footer__social a {
	padding-block: 9px;
	margin-block: -9px;
}

.site-footer__social a[aria-label='X'] {
	min-width: 44px;
	text-align: center;
}

.site-footer--social-icons .site-footer__social a {
	display: inline-flex;
	padding: 10px;
	margin: -6px;
}

.site-footer--social-icons .site-footer__social-icon {
	display: block;
}

.site-footer--social-icons .site-footer__social-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Large column headings, the size of a section heading. */
.site-footer--headings-large .site-footer__heading {
	margin-bottom: 0.75em;
	font-family: var(--font-heading, inherit);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.15;
}

.site-footer__textcol .site-footer__text {
	margin: 0;
}

/* Columns layout: the address comes first, as on most sites; one titled menu column sits
   beside the other columns instead of taking a whole row. */
.site-footer--layout-columns .site-footer__contact {
	order: -1;
}

.site-footer--layout-columns
	.site-footer__nav--grouped:not(:has(.site-footer__group + .site-footer__group)) {
	grid-column: auto;
}

@media (min-width: 1100px) {
	.site-footer--layout-columns .site-footer__inner:has(> :nth-child(5)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.site-footer a {
	color: inherit;
}

/* The privacy link under a form (platform `privacy/links.ts`): a 44 px tap target. */
.form-privacy a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/* The link colour darkened toward the text: readable on a tinted form section too. */
	color: color-mix(
		in srgb,
		var(--scheme-link, var(--color-primary)) 78%,
		var(--scheme-fg, var(--color-text))
	);
}

.site-footer__links a,
.site-footer__privacy a,
.site-footer__legal a,
.site-footer__withdrawal a {
	/* 44 px tap targets (docs/laatu checklist M2); the text stays where it was. A short link
	   ("Seura", "Aloita") is widened to 44 px too (YKSILOLAJISEURA_2026-11-02.md). */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (min-width: 640px) {
	.site-footer__inner:not(:has(> :only-child)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.site-footer__inner:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Buttons ---------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: var(--button-paddingY, 15px) var(--button-paddingX, 30px);
	border: 1px solid transparent;
	border-radius: var(--button-radius, var(--radius-md, 8px));
	font-size: var(--button-fontSize, 0.8125rem);
	font-weight: var(--button-weight, 400);
	line-height: var(--font-leading-button, 1.2);
	text-decoration: none;
	cursor: pointer;
	transition: filter 120ms ease;
}

.button:not(:where(:disabled, [aria-disabled='true'])):hover {
	filter: brightness(1.08);
}

.button,
.button--primary {
	background: var(--button-bg, var(--color-primary, #0055ff));
	color: var(--button-fg, var(--color-onPrimary, #fff));
	border-color: var(--button-border, transparent);
}

/* The size and style variants (lg, sm, secondary, outline, ghost) live in layout-tree
   base-css.ts only, with two-class selectors that this one-class reset cannot undo (E246).
   A copy here would win over them again and drift (it did: its lg padding fell back to 14px). */

.button--link {
	background: transparent;
	color: var(--scheme-link);
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
}

/* Page title bar (Enfold-style; opt-in via showPageTitleBar) ------------ */

.page-title-bar {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, var(--scheme-border) 70%, transparent);
	background: #fff;
}

.page-title-bar__inner {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	padding: 10px 0;
}

.page-title-bar__title {
	margin: 0;
	font-family: var(--font-body, inherit);
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.3;
	color: #888;
}

/* Breadcrumbs (opt-in via showBreadcrumbs). Inside the title bar when that is on,
   otherwise a slim row of their own above the content. The separator is drawn by
   CSS so a screen reader hears only the list; the last item is aria-current. */

.breadcrumbs-bar__inner {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
	padding: var(--space-xs, 4px) 0;
}

.breadcrumbs {
	--crumb-fg: var(--color-muted, #6b7280);
	--crumb-current: var(--color-text, #111);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--crumb-fg);
}

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

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

/* After the item, not before the next: a wrapped line never starts with a separator. */
.breadcrumbs__item:not(:last-child)::after {
	content: '/';
	content: '/' / '';
	margin-inline: 0.5rem;
	opacity: 0.6;
}

.breadcrumbs__link,
.breadcrumbs__text,
.breadcrumbs__current {
	display: inline-block;
	padding-block: 0.3rem;
	overflow-wrap: anywhere;
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__link:hover {
	color: var(--crumb-current);
	text-decoration: underline;
}

.breadcrumbs__link:focus-visible {
	outline: 2px solid var(--color-primary, #0055ff);
	outline-offset: 2px;
	border-radius: 2px;
}

.breadcrumbs__current {
	color: var(--crumb-current);
	font-weight: 600;
}

/* The title bar has its own fixed light palette. */
.page-title-bar .breadcrumbs {
	--crumb-fg: #777;
	--crumb-current: #444;
}

/* "Vain yläsivu" (breadcrumbsMobile: parent): a phone shows only the link one level up,
   with an arrow, as GOV.UK collapses its breadcrumbs. The whole trail from 640 px. */
@media (max-width: 639.98px) {
	.breadcrumbs--parent .breadcrumbs__item:not(:nth-last-child(2)) {
		display: none;
	}

	.breadcrumbs--parent .breadcrumbs__item:nth-last-child(2)::after {
		content: none;
	}

	.breadcrumbs--parent .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link::before {
		content: '←';
		content: '←' / '';
		margin-inline-end: 0.4rem;
	}

	.breadcrumbs--parent .breadcrumbs__link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* "Tässä osiossa" beside the content (page setting sectionNav: side; layout-tree
   library-blocks/site-nav.ts). A phone has the disclosure above the content; from 960 px the
   list is a sticky column of its own, below a sticky header when the site has one. */
.page-with-nav__aside {
	width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
	margin: var(--space-md, 16px) auto 0;
}

@media (min-width: 960px) {
	.page-with-nav {
		display: grid;
		grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
		gap: var(--space-lg, 32px);
		align-items: start;
		width: min(100% - 2rem, var(--size-contentMaxWidth, 1200px));
		margin-inline: auto;
	}

	.page-with-nav__aside {
		position: sticky;
		top: var(--space-md, 16px);
		width: auto;
		max-height: calc(100vh - 2rem);
		margin: 0;
		padding-block: var(--space-lg, 32px);
		overflow-y: auto;
	}

	html:has(.site-header--sticky, .site-header--v-sticky) .page-with-nav__aside {
		top: calc(var(--site-header-h, 76px) + 8px);
		max-height: calc(100vh - var(--site-header-h, 76px) - 16px);
	}

	.page-with-nav__main {
		min-width: 0;
	}
}

@media (min-width: 768px) {
	.page-title-bar__inner--crumbs {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}

/* Forms ------------------------------------------------------------------ */

.form {
	display: grid;
	gap: var(--space-md, 16px);
	max-width: none;
	width: 100%;
}

.form__field {
	display: grid;
	gap: var(--space-xs, 4px);
}

.form__field--check {
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--space-sm, 8px);
}

label:not(:where(.form *)) {
	font-weight: 600;
}

input:not([type='checkbox']):not([type='radio']):not(:where(.form *)),
select:not(:where(.form *)),
textarea:not(:where(.form *)) {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--scheme-border);
	border-radius: var(--radius-sm, 4px);
	background: var(--scheme-bg);
	color: var(--scheme-fg);
}

input[type='checkbox']:not(:where(.form *)),
input[type='radio']:not(:where(.form *)) {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--color-primary, #0055ff);
}

input:not(:where(.form *)):user-invalid,
textarea:not(:where(.form *)):user-invalid {
	border-color: var(--color-error, #b3261e);
}

.form__error {
	color: var(--color-error, #b3261e);
}

/* Accordion -------------------------------------------------------------- */

.accordion {
	border-top: 1px solid var(--scheme-border);
}

.accordion__item {
	border-bottom: 1px solid var(--scheme-border);
}

.accordion__heading {
	margin: 0;
	font-size: 1rem;
}

.accordion__trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm, 8px);
	min-height: 2.75rem;
	padding: var(--space-sm, 8px) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.accordion__icon {
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 150ms ease;
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
	transform: rotate(225deg);
}

.accordion__panel {
	padding: 0 0 var(--space-md, 16px);
}

/* Tabs ------------------------------------------------------------------- */

.tabs__list {
	display: flex;
	gap: var(--space-xs, 4px);
	overflow-x: auto;
	border-bottom: 1px solid var(--scheme-border);
}

.tabs__tab {
	min-height: 2.75rem;
	padding: 0.5rem var(--space-md, 16px);
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	background: transparent;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.tabs__tab[aria-selected='true'] {
	border-bottom-color: var(--color-primary, #0055ff);
	color: var(--scheme-link);
}

.tabs__panel {
	padding: var(--space-md, 16px) 0;
}

/* Gallery ---------------------------------------------------------------- */

.gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md, 8px);
	background: var(--color-surface, #f4f5f7);
}

.gallery__slide {
	margin: 0;
	position: absolute;
	inset: 0;
}

.gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__nav {
	position: absolute;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-card, 0 2px 8px rgb(0 0 0 / 10%));
}

.gallery__nav--prev {
	left: var(--space-sm, 8px);
}

.gallery__nav--next {
	right: var(--space-sm, 8px);
}

.gallery__thumbs {
	display: flex;
	gap: var(--space-sm, 8px);
	margin-top: var(--space-sm, 8px);
	overflow-x: auto;
}

.gallery__thumb {
	flex: 0 0 auto;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.gallery__thumb[aria-selected='true'] {
	border-color: var(--color-primary, #0055ff);
}

.gallery__thumb img {
	width: 120px;
	height: 90px;
	object-fit: cover;
}

/* Components demo --------------------------------------------------------- */

.components-demo {
	display: grid;
	gap: var(--space-md, 16px);
}

.components-demo__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm, 8px);
	align-items: center;
}

/* Floating CTA ------------------------------------------------------------- */

.floating-cta {
	position: fixed;
	right: max(var(--space-md, 16px), env(safe-area-inset-right));
	bottom: max(var(--space-md, 16px), env(safe-area-inset-bottom));
	z-index: 40;
	display: inline-flex;
	box-shadow: var(--shadow-card, 0 4px 16px rgb(0 0 0 / 18%));
	border-radius: var(--radius-md, 8px);
	text-decoration: none;
}

.floating-cta .button {
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 639px) {
	.floating-cta--hide-phone {
		display: none;
	}
}

/* "Vain puhelimessa" (floatingCtaPhoneOnly, docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md): a full-width
   bar at the bottom of a phone, none on larger screens where the header button is in view. The
   page keeps room for it so the last lines are never under the bar. */
@media (min-width: 640px) {
	.floating-cta--phone-only {
		display: none;
	}
}

@media (max-width: 639px) {
	.floating-cta--phone-only {
		left: max(var(--space-md, 16px), env(safe-area-inset-left));
	}

	.floating-cta--phone-only .button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}

	body:has(.floating-cta--phone-only) {
		padding-bottom: 5rem;
	}

	/* The room is under the footer, in the footer's own colour: no white strip below a dark
	   footer (kierros 3). A page without the footer keeps the body's room. */
	body:has(.floating-cta--phone-only):has(> .site-footer) {
		padding-bottom: 0;
	}

	/* The footer is a flex row: the room takes a line of its own under its content. */
	body:has(.floating-cta--phone-only) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.floating-cta--phone-only) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: 5rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.floating-cta {
		transition: transform 0.15s ease;
	}
	.floating-cta:hover {
		transform: translateY(-2px);
	}
}

/* Phone call bar --------------------------------------------------------- */
/* A fixed bar across the bottom on phones (theme.liquid, src/call-bar.ts). The page gets room
   for it, the other floating buttons move up above it, and it steps aside while the mobile
   menu is open. The consent banner rises above it (consent.css). */

.call-bar {
	display: none;
}

.site-header__phone {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__phone:hover {
	text-decoration: underline;
}

.site-header__phone-mobile {
	margin: var(--space-sm, 8px) 0;
}

@media (max-width: 768px) {
	:root {
		--call-bar-h: calc(56px + env(safe-area-inset-bottom));
	}

	.call-bar {
		display: flex;
		position: fixed;
		z-index: 45;
		inset: auto 0 0 0;
		padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
		background: var(--color-primary, #0055ff);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 18%);
	}

	.call-bar__button {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-width: 0;
		min-height: 56px;
		padding: 0.5rem 0.75rem;
		background: var(--color-primary, #0055ff);
		color: var(--color-onPrimary, #fff);
		font-family: var(--font-body, inherit);
		font-size: 1.05rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.call-bar__button + .call-bar__button {
		border-left: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.call-bar__button:focus-visible {
		outline: 3px solid var(--color-onPrimary, #fff);
		outline-offset: -6px;
	}

	body:has(.call-bar) {
		padding-bottom: var(--call-bar-h);
	}

	/* The room is under the footer, in the footer's own colour: no white strip below a dark
	   footer (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md kierros 4, also on existing sites).
	   A page without the footer keeps the body's room. */
	body:has(.call-bar):has(> .site-footer) {
		padding-bottom: 0;
	}

	body:has(.call-bar) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.call-bar) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: var(--call-bar-h);
	}

	body:has(.call-bar) .floating-cta {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar) .contact-fab {
		--contact-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar) .scroll-top {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px) + var(--scroll-top-lift, 0rem));
	}

	html.site-nav-locked .call-bar,
	body:has([data-menu-toggle][aria-expanded='true']) .call-bar {
		display: none;
	}
}

/* Both the call bar and the "Vain puhelimessa" button on a phone: the button floats above the
   bar, so the room under the footer holds both (otherwise the later rule wins and the last
   lines of the footer sit under the button). */
@media (max-width: 639px) {
	body:has(.call-bar):has(.floating-cta--phone-only) > .site-footer::after {
		height: calc(var(--call-bar-h) + 5rem);
	}
}

/* Pikatoimintopalkki on large screens (callBarDevices 'all'): across the bottom like on phones,
   or a side bar on the right (`--side`). The page keeps room for it on that edge. No motion.
   Stacking, lowest first: scroll-top 39, floating button 40, chat launcher 44, this bar 45,
   the consent banner and its reopen button (consent.css) above all. */
@media (min-width: 769px) {
	:root:has(.call-bar--all) {
		--call-bar-h: 56px;
		--call-bar-w: 6.5rem;
	}

	.call-bar--all {
		display: flex;
		justify-content: center;
		position: fixed;
		z-index: 45;
		inset: auto 0 0 0;
		background: var(--color-primary, #0055ff);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 18%);
	}

	.call-bar--all .call-bar__button {
		flex: 0 1 18rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-width: 0;
		min-height: 56px;
		padding: 0.5rem 1rem;
		color: var(--color-onPrimary, #fff);
		font-family: var(--font-body, inherit);
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	.call-bar--all .call-bar__button + .call-bar__button {
		border-left: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar--all .call-bar__button:hover .call-bar__label {
		text-decoration: underline;
	}

	.call-bar--all .call-bar__button:focus-visible {
		outline: 3px solid var(--color-onPrimary, #fff);
		outline-offset: -6px;
	}

	body:has(.call-bar--all:not(.call-bar--side)) {
		padding-bottom: var(--call-bar-h);
	}

	body:has(.call-bar--all:not(.call-bar--side)):has(> .site-footer) {
		padding-bottom: 0;
	}

	body:has(.call-bar--all:not(.call-bar--side)) > .site-footer {
		flex-wrap: wrap;
	}

	body:has(.call-bar--all:not(.call-bar--side)) > .site-footer::after {
		content: '';
		flex: 0 0 100%;
		height: var(--call-bar-h);
	}

	body:has(.call-bar--all:not(.call-bar--side)) .floating-cta {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar--all:not(.call-bar--side)) .contact-fab {
		--contact-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}

	body:has(.call-bar--all:not(.call-bar--side)) .scroll-top {
		bottom: calc(var(--call-bar-h) + var(--space-md, 16px) + var(--scroll-top-lift, 0rem));
	}

	.call-bar--side {
		flex-direction: column;
		inset: 50% 0 auto auto;
		width: var(--call-bar-w);
		transform: translateY(-50%);
		border-radius: 8px 0 0 8px;
		box-shadow: -2px 0 12px rgb(0 0 0 / 18%);
	}

	.call-bar--side .call-bar__button {
		flex: none;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.75rem 0.5rem;
		font-size: 0.875rem;
		text-align: center;
	}

	.call-bar--side .call-bar__button + .call-bar__button {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--color-onPrimary, #fff) 35%, transparent);
	}

	.call-bar--side .call-bar__label {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	body:has(.call-bar--side) {
		padding-right: var(--call-bar-w);
	}
}

/* The chat service's own launcher (chat-button.ts, consent.js). Bottom right, above the
   floating button and the contact button on that corner and above the bottom bar; the
   scroll-to-top button moves up above it. Out of the way while the consent banner asks. */
.chat-launcher {
	--chat-edge: max(var(--space-md, 16px), env(safe-area-inset-bottom));
	position: fixed;
	z-index: 44;
	right: max(var(--space-md, 16px), env(safe-area-inset-right));
	bottom: var(--chat-edge);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.625rem 1.125rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-family: var(--font-body, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 4px 16px rgb(0 0 0 / 22%);
	cursor: pointer;
}

.chat-launcher[hidden],
html[data-consent-ui] .chat-launcher {
	display: none;
}

.chat-launcher[aria-busy='true'] {
	cursor: progress;
	opacity: 0.8;
}

.chat-launcher:hover .chat-launcher__label {
	text-decoration: underline;
}

.chat-launcher:focus-visible {
	outline: 3px solid var(--color-text, #111);
	outline-offset: 3px;
}

body:has(.floating-cta) .chat-launcher,
body:has(.contact-fab--right) .chat-launcher {
	margin-bottom: 4.5rem;
}

body:has(.floating-cta):has(.contact-fab--right) .chat-launcher {
	margin-bottom: 9rem;
}

body:has(.chat-launcher:not([hidden])) .scroll-top--right {
	margin-bottom: 4.5rem;
}

@media (max-width: 768px) {
	body:has(.call-bar) .chat-launcher {
		--chat-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}
}

@media (min-width: 769px) {
	body:has(.call-bar--all:not(.call-bar--side)) .chat-launcher {
		--chat-edge: calc(var(--call-bar-h) + var(--space-md, 16px));
	}
}

@media print {
	.call-bar,
	.chat-launcher {
		display: none !important;
	}
}

/* Enfold form skin (import parity): only with the Enfold chrome. It used to apply to
   every site and made typed text placeholder-grey (#8d8d8d) under any theme; the form
   engine's own stylesheet (/assets/forms.css) takes the site's tokens instead. */
.layout-chrome--enfold .form {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	width: 100%;
	margin: 0;
	line-height: 1.4;
	color: #666;
}
.layout-chrome--enfold .form__page {
	display: flex;
	flex-wrap: wrap;
	/* Enfold .form_element margin 11+11 ≈ 22px between rows; half-gap ≈ 12px. */
	gap: 22px 12px;
}
.layout-chrome--enfold .form__field {
	display: block;
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	/* Label→input spacing comes only from .form__label margin-bottom (Enfold 7px). */
	gap: 0;
}
.layout-chrome--enfold .form__field--half {
	flex-basis: calc(49.5% - 0.5%);
	max-width: calc(49.5% - 0.5%);
}
.layout-chrome--enfold .form__group {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.layout-chrome--enfold .form__label {
	display: block;
	font-size: 0.92em;
	font-weight: 700;
	margin-bottom: 7px;
	color: #666;
}
.layout-chrome--enfold .form__required {
	color: var(--color-primary, #2997ab);
	text-decoration: none;
	font-weight: 700;
}
.layout-chrome--enfold
	.form
	input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not(
		[type='color']
	):not([type='range']),
.layout-chrome--enfold .form select,
.layout-chrome--enfold .form textarea {
	width: 100%;
	margin: 0;
	padding: 13px;
	min-height: 2.875rem;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	background: #fff;
	color: #8d8d8d;
	box-sizing: border-box;
	font: inherit;
}
.layout-chrome--enfold .form textarea {
	min-height: 12.25rem;
	resize: vertical;
	line-height: 1.5;
}
.layout-chrome--enfold .form__actions {
	display: flex;
	gap: 0.75rem;
	/* Outside .form__page; Enfold field margins ≈ 22px above submit. */
	margin-top: 22px;
	flex-wrap: wrap;
}
.layout-chrome--enfold .form__actions .button,
.layout-chrome--enfold .form .button--primary {
	min-width: 142px;
	padding: 16px 20px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #2997ab) 70%, #000);
	border-radius: 2px;
	font-size: 0.92em;
	font-weight: 400;
	line-height: 1;
	box-shadow: none;
	transform: none;
}
.layout-chrome--enfold .form__actions .button:hover,
.layout-chrome--enfold .form .button--primary:hover {
	transform: none;
	box-shadow: none;
	filter: brightness(1.05);
}
.layout-chrome--enfold .form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.layout-chrome--enfold .form__title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
}
.layout-chrome--enfold .form__title:empty {
	display: none;
}

/* Site search box in the header (snippets/search-box.liquid, setting in /admin/search). */
.site-search-box {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.site-search-box input {
	min-height: 40px;
	width: min(12rem, 40vw);
	padding: 0 0.7rem;
	border: 1px solid var(--scheme-border, var(--color-border));
	border-radius: var(--radius-sm, 6px);
	background: var(--scheme-surface, var(--color-surface));
	color: inherit;
	font: inherit;
}

.site-search-box button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--scheme-border, var(--color-border));
	border-radius: var(--radius-sm, 6px);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-search-box input:focus-visible,
.site-search-box button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.site-search-box--desktop {
	display: none;
}

.site-search-box--mobile {
	margin: var(--space-sm, 1rem) 0;
}

.site-search-box--mobile input {
	flex: 1 1 auto;
	width: auto;
}

@media (min-width: 960px) {
	.site-search-box--desktop {
		display: flex;
		margin-inline: 0.5rem;
	}
}

.site-search-box button {
	width: 44px;
	padding: 0;
}

/* Opening hours in the footer: the same rows as the page section, a little smaller. */
.site-footer__hours .opening-hours {
	max-width: 16rem;
	font-size: 0.95em;
}

.site-footer__hours .opening-hours__row {
	padding: 0.2rem 0;
	border-bottom: 0;
}

/* Header variants ------------------------------------------------------------
   Setting headerVariant (sections/header.liquid, layout-tree header-variants.ts):
   classic | centered | overlay | compact | topbar | drawer. Every rule is under
   .site-header--v, so a site without a variant keeps its header as it was.
   Shared: the bar lines up with the page content (the same gutter as `main`, the bar's own
   padding outside the content edge), the site name in the heading face, links that keep the
   text colour (never faded), a pill under the pointer, a tinted pill on the current page,
   a visible keyboard ring, a call to action in the theme's button shape, a white dropdown
   card, and on a phone a sheet from the bottom with large rows. No uppercase anywhere. */

.site-header--v {
	--hv-fg: var(--site-header-fg, var(--color-text, #111));
	--hv-bg: var(--site-header-bg, var(--color-background, #fff));
	--hv-card: var(--site-header-bg, #fff);
	--hv-accent: var(--site-header-link-hover, var(--color-primary, #0055ff));
	--hv-tint: color-mix(in srgb, var(--hv-fg) 6%, transparent);
	--hv-tint-strong: color-mix(in srgb, var(--hv-fg) 10%, transparent);
	--hv-current: color-mix(in srgb, var(--hv-accent) 14%, transparent);
	--hv-line: color-mix(in srgb, var(--hv-fg) 11%, transparent);
	--hv-shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 14px 36px -16px rgb(15 23 42 / 28%);
	/* The page's side gutter (`--site-gutter`, below) when the chrome has one. */
	--hv-gutter: var(--site-gutter, 1rem);
	--hv-pad: 16px;
	--hv-height: 68px;
	--hv-link-size: 15px;
	position: relative;
	z-index: 200;
	border-bottom: 0;
	background: var(--hv-bg);
	color: var(--hv-fg);
	font-family: var(--font-body, system-ui, sans-serif);
	text-transform: none;
}

/* "Laatikoiden väri" (headerVariantBg, huippuulkoasut 28.10.2026): the bar in the surface colour;
   the default is the page's own background. A custom header colour still wins. */
.site-header--v-bg-surface {
	--hv-bg: var(--site-header-bg, var(--color-surface, var(--color-background, #fff)));
}

@media (max-width: 767px) {
	.site-header--v {
		/* `main` keeps 29px from the screen edge on a phone (layout-chrome default). */
		--hv-gutter: var(--site-gutter, 29px);
		--hv-pad: 12px;
		--hv-height: 64px;
	}
}

.site-header--v .site-header__bar {
	position: relative;
}

.site-header--v .site-header__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px 20px;
	width: min(
		100% - 2 * var(--hv-gutter) + 2 * var(--hv-pad),
		var(--size-contentMaxWidth, 1200px) + 2 * var(--hv-pad)
	);
	max-width: none;
	min-height: var(--hv-height);
	margin-inline: auto;
	padding-inline: var(--hv-pad);
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		border-radius 0.2s ease;
}

.site-header--v-sticky {
	position: sticky;
	top: 0;
}

/* A jump to an anchor (`#hinnasto`, a skip link) stops below a sticky bar, not under it. The
   variant header measures itself into `--site-header-h` (sections/header.liquid); before the
   script runs, and for the older header, a bar's usual height. */
html:has(.site-header--v-sticky, .site-header--sticky) {
	scroll-padding-top: calc(var(--site-header-h, 76px) + 8px);
}

/* Without JavaScript the phone menu is part of the header (.no-js .site-nav-drawer): a sticky
   header would carry the whole menu over the page and cover a form's button, so it scrolls
   away with the page instead. */
.no-js .site-header--v-sticky,
.no-js .site-header--sticky {
	position: relative;
}

.site-header--v .site-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	/* Shrinks for a long name, but a short one ("Häät") still gives a 44 px target. */
	min-width: 44px;
	margin: 0;
	font-family: var(--font-heading, inherit);
	font-size: 1.3rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--hv-fg);
	text-decoration: none;
	white-space: nowrap;
}

.site-header--v .site-header__brand:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 4px;
	border-radius: 6px;
}

.site-header--v .site-header__logo {
	max-height: var(--site-logo-max-height, 44px);
}

.site-header--v .site-header__end {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.site-header--v .site-header__end .site-header__cta {
	display: none;
}

/* The menu bar: the box between the name and the end is the "More" container. */
.site-header--v .site-nav--v {
	display: none;
}

.site-header--v .site-nav--v .menu__item--fold-0,
.site-header--v .nav-more__item,
.site-header--v .nav-more {
	display: none;
}

.site-header--v .nav-more__item.nav-more__item--fold-0 {
	display: block;
}

.site-header--v .site-nav--more-from-0 .nav-more {
	display: flex;
}

@media (min-width: 960px) {
	.site-header--v .site-header__end .site-header__cta {
		display: inline-flex;
	}

	.site-header--v .site-nav--v {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		container: sitenav / inline-size;
	}

	.site-header--v .site-nav--v > .menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle,
	.site-header--v .site-nav--v > .nav-more > .menu__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: auto;
		min-height: 40px;
		padding: 8px 14px;
		border-radius: 999px;
		background: transparent;
		color: var(--hv-fg);
		opacity: 1;
		font-family: var(--font-body, inherit);
		font-size: var(--site-nav-size, var(--hv-link-size));
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
		transition:
			background-color 0.15s ease,
			color 0.15s ease;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link:hover,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle:hover,
	.site-header--v .site-nav--v .menu__toggle[aria-expanded='true'],
	.site-header--v .site-nav--v > .nav-more > .menu__toggle:hover {
		background: var(--hv-tint);
		color: var(--hv-fg);
		font-weight: 500;
		text-decoration: none;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		background: var(--hv-current);
		color: var(--hv-fg);
		font-weight: 600;
		text-decoration: none;
	}

	.site-header--v .site-nav--v > .menu > .menu__item > .menu__link:focus-visible,
	.site-header--v .site-nav--v > .menu > .menu__item > .menu__toggle:focus-visible,
	.site-header--v .site-nav--v > .nav-more > .menu__toggle:focus-visible {
		outline: 2px solid var(--hv-accent);
		outline-offset: 2px;
	}

	.site-header--v .site-nav--v .menu__chevron {
		width: 0.42rem;
		height: 0.42rem;
		border-width: 0 1.75px 1.75px 0;
		opacity: 0.6;
		transition: transform 0.15s ease;
	}

	/* Dropdown: a white card a little below the bar, rows with a pill under the pointer. */
	.site-header--v .site-nav--v .menu__submenu {
		--submenu-bg: var(--hv-card);
		--submenu-fg: var(--color-text, #111);
		top: calc(100% + 10px);
		left: 50%;
		min-width: 15rem;
		padding: 8px;
		border: 1px solid var(--hv-line);
		border-radius: 16px;
		background: var(--submenu-bg);
		box-shadow:
			0 24px 48px -16px rgb(15 23 42 / 28%),
			0 2px 6px rgb(15 23 42 / 6%);
		transform: translateX(-50%);
	}

	.site-header--v .site-nav--v .menu__submenu--open {
		animation: site-header-pop 0.16s ease-out;
	}

	/* The pointer's way from the item to the card. */
	.site-header--v .site-nav--v .menu__submenu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 12px;
	}

	.site-header--v .site-nav--v .nav-more__panel {
		left: auto;
		right: 0;
		transform: none;
	}

	.site-header--v .site-nav--v .menu__submenu .menu {
		align-items: stretch;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__item {
		border: 0;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: start;
		min-height: 40px;
		padding: 9px 12px;
		border-radius: 10px;
		color: var(--submenu-fg);
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link:hover {
		background: color-mix(in srgb, var(--submenu-fg) 6%, transparent);
		color: var(--submenu-fg);
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link[aria-current] {
		background: var(--hv-current);
		color: var(--submenu-fg);
		font-weight: 600;
	}

	.site-header--v .site-nav--v .menu__submenu .menu__link:focus-visible {
		outline: 2px solid var(--hv-accent);
		outline-offset: -2px;
	}

	.site-header--v .nav-more__group {
		display: block;
		padding: 10px 12px 4px;
		color: color-mix(in srgb, var(--submenu-fg) 70%, transparent);
		font-size: 13px;
		font-weight: 600;
	}

	.site-header--v .nav-more__sublist {
		margin: 0;
		padding: 0 0 0 8px;
		list-style: none;
	}

	/* "More" per width band: theme renderer `nav_fold`, layout-tree NAV_FOLD_BANDS. */

	@container sitenav (width < 1100px) {
		.site-header--v .site-nav--v .menu__item--fold-1 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-1 {
			display: block;
		}
		.site-header--v .site-nav--more-from-1 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 1040px) {
		.site-header--v .site-nav--v .menu__item--fold-2 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-2 {
			display: block;
		}
		.site-header--v .site-nav--more-from-2 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 980px) {
		.site-header--v .site-nav--v .menu__item--fold-3 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-3 {
			display: block;
		}
		.site-header--v .site-nav--more-from-3 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 920px) {
		.site-header--v .site-nav--v .menu__item--fold-4 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-4 {
			display: block;
		}
		.site-header--v .site-nav--more-from-4 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 860px) {
		.site-header--v .site-nav--v .menu__item--fold-5 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-5 {
			display: block;
		}
		.site-header--v .site-nav--more-from-5 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 800px) {
		.site-header--v .site-nav--v .menu__item--fold-6 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-6 {
			display: block;
		}
		.site-header--v .site-nav--more-from-6 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 740px) {
		.site-header--v .site-nav--v .menu__item--fold-7 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-7 {
			display: block;
		}
		.site-header--v .site-nav--more-from-7 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 680px) {
		.site-header--v .site-nav--v .menu__item--fold-8 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-8 {
			display: block;
		}
		.site-header--v .site-nav--more-from-8 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 620px) {
		.site-header--v .site-nav--v .menu__item--fold-9 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-9 {
			display: block;
		}
		.site-header--v .site-nav--more-from-9 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 560px) {
		.site-header--v .site-nav--v .menu__item--fold-10 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-10 {
			display: block;
		}
		.site-header--v .site-nav--more-from-10 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 500px) {
		.site-header--v .site-nav--v .menu__item--fold-11 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-11 {
			display: block;
		}
		.site-header--v .site-nav--more-from-11 .nav-more {
			display: flex;
		}
	}

	@container sitenav (width < 440px) {
		.site-header--v .site-nav--v .menu__item--fold-12 {
			display: none;
		}
		.site-header--v .nav-more__item.nav-more__item--fold-12 {
			display: block;
		}
		.site-header--v .site-nav--more-from-12 .nav-more {
			display: flex;
		}
	}
}

@keyframes site-header-pop {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
}

/* Call to action: the theme's own button shape and weight. */
.site-header--v .site-header__cta,
.site-header--v .site-header__cta-mobile .site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 0;
	border-radius: var(--button-radius, 999px);
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-family: var(--font-body, inherit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	box-sizing: border-box;
	transition:
		filter 0.15s ease,
		transform 0.15s ease;
}

.site-header--v .site-header__cta:hover {
	filter: brightness(0.94);
	text-decoration: none;
}

.site-header--v .site-header__cta:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 3px;
}

/*
 * "Reunaviiva" (setting ctaStyle): the header button as an outline in the header's own text
 * colour, so it keeps the menu links' contrast on every header background, photos included.
 */
.site-header__cta.site-header__cta--outline,
.site-header__cta-mobile .site-header__cta.site-header__cta--outline,
.site-header--v .site-header__cta.site-header__cta--outline,
.site-header--v .site-header__cta-mobile .site-header__cta.site-header__cta--outline {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Burger: a round 44px button. */
.site-header--v .site-header__toggle {
	width: 44px;
	height: 44px;
	border: 1px solid var(--hv-line);
	border-radius: 999px;
	background: transparent;
	color: var(--hv-fg);
}

.site-header--v .site-header__toggle:hover {
	background: var(--hv-tint);
}

.site-header--v .site-header__toggle:focus-visible {
	outline: 2px solid var(--hv-accent);
	outline-offset: 2px;
}

.site-header--v .site-header__toggle-bars {
	width: 18px;
}

.site-header--v .site-header__mobile {
	display: flex;
	margin: 0;
}

@media (min-width: 960px) {
	.site-header--v:not(.site-header--v-drawer) .site-header__mobile {
		display: none;
	}
}

/* Phone bar: name, a smaller call to action, the menu button on one row. */
@media (max-width: 959px) {
	/* A long name wraps (between words, or at a syllable with a hyphen: .site-header__name)
	   instead of running under the call to action. */
	.site-header--v .site-header__brand {
		font-size: 1.15rem;
		white-space: normal;
	}

	.site-header--v .site-header__end .site-header__cta {
		display: inline-flex;
		min-height: 44px;
		padding: 8px 14px;
		font-size: 14px;
	}
}

/* A name whose longest word has 13 letters or more (`data-long-word`) is a little smaller on a
   phone, so that "Henkilöstöpalvelu" mostly fits whole and breaks at most once. Every header. */
@media (max-width: 959px) {
	.site-header__name[data-long-word] {
		font-size: clamp(0.95rem, 4.3vw, 1.1rem);
		line-height: 1.15;
	}
}

@media (max-width: 359px) {
	.site-header--v .site-header__end .site-header__cta {
		display: none;
	}
}

/* "Pienennä nimeä kapealla puhelimella" (headerNameFit, off by default): a text logo, the header
   button and the menu button share 288 px on a 320 px phone, and a name of 10–12 letters
   (Saliverkko, 10.11.2026) ran under the button. Below 360 px the name and the button step
   down; a long name already has its own smaller size, and wider screens are unchanged. */
@media (max-width: 359px) {
	.site-header--name-fit.site-header--has-cta .site-header__name:not([data-long-word]) {
		font-size: clamp(0.95rem, 5vw, 1.1rem);
		line-height: 1.15;
	}

	/* A button of the site size (16 px, Saliverkko) steps down to the header size of a phone. */
	.site-header--name-fit .site-header__cta {
		font-size: 0.875rem;
	}
}

/* Phone menu: a sheet from the bottom with large rows ------------------------------ */
.site-mobile-nav--v .site-nav-drawer {
	inset: auto 0 0;
	width: 100%;
	max-height: min(86dvh, 760px);
	border: 0;
	border-radius: 24px 24px 0 0;
	background: var(--site-mobile-nav-bg, var(--hv-card, #fff));
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	box-shadow: 0 -16px 48px rgb(15 23 42 / 22%);
}

.site-mobile-nav--v .site-nav-drawer--from-end {
	transform: translateY(100%);
}

.site-mobile-nav--v .site-nav-drawer--at-rest {
	transform: translateY(0);
}

.site-mobile-nav--v .site-nav-drawer__backdrop {
	background: rgb(15 23 42 / 45%);
	backdrop-filter: blur(3px);
}

.site-mobile-nav--v .site-nav-drawer__inner {
	padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.site-mobile-nav--v .site-nav-drawer__inner::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin: 0 auto 10px;
	border-radius: 2px;
	background: color-mix(in srgb, currentColor 20%, transparent);
}

.site-mobile-nav--v .site-nav--mobile > .menu {
	display: block;
}

.site-mobile-nav--v .site-nav--mobile > .menu > .menu__item {
	display: block;
	border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

/* The last item's own line already closes the list: the quick links under it get no second
   line and no extra gap (two lines with an empty row between them, 6.11.2026 demo). */
.site-mobile-nav--v .site-nav--mobile > .menu + .site-nav-utility {
	margin-top: 0;
	border-top: 0;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link,
html .site-header .site-mobile-nav--v .site-nav--mobile .menu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--site-mobile-nav-item-height, 56px);
	padding: 8px 4px;
	border-radius: 0;
	background: transparent;
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	opacity: 1;
	font-family: var(--font-body, inherit);
	font-size: var(--site-mobile-nav-size, 19px);
	font-weight: var(--site-mobile-nav-weight, 600);
	line-height: 1.3;
	text-align: start;
	text-decoration: none;
	box-sizing: border-box;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link[aria-current] {
	color: var(--site-mobile-nav-fg, var(--color-text, #111));
	text-decoration: underline;
	text-decoration-color: var(--hv-accent, currentColor);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__link:focus-visible,
html .site-header .site-mobile-nav--v .site-nav--mobile .menu__toggle:focus-visible {
	outline: 2px solid var(--hv-accent, currentColor);
	outline-offset: -2px;
	border-radius: 8px;
}

.site-mobile-nav--v .site-nav--mobile .menu__chevron {
	width: 0.55rem;
	height: 0.55rem;
	opacity: 0.6;
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu {
	padding: 0 0 8px 12px;
	background: transparent;
}

html .site-header .site-mobile-nav--v .site-nav--mobile .menu__submenu .menu__link {
	min-height: 48px;
	font-size: 16px;
	font-weight: 500;
	color: color-mix(in srgb, var(--site-mobile-nav-fg, var(--color-text, #111)) 82%, transparent);
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu .menu {
	align-items: stretch;
}

.site-mobile-nav--v .site-nav--mobile .menu__submenu .menu__item {
	border: 0;
}

.site-mobile-nav--v .site-header__cta-mobile {
	position: sticky;
	bottom: 0;
	margin: 16px 0 0;
	padding: 8px 0 0;
	background: inherit;
}

.site-mobile-nav--v .site-header__cta-mobile .site-header__cta {
	width: 100%;
	min-height: 52px;
	font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
	.site-header--v .site-nav--v .menu__submenu--open {
		animation: none;
	}

	.site-header--v .site-header__inner {
		transition: none;
	}
}

/* Classic (the NewStore-style bar): a full-width bar on the page's own colour, its content on
   the page's gutter. Scrolled, a sticky bar keeps its width and gets a thin line and a soft
   shadow under it (owner 17.10.2026: "ylävalikko ottaa koko ylätilan ... koko ruudun
   leveydeltä"). The floating rounded card is an explicit choice (`headerStyle: floating`,
   below), never the default. */
.site-header--v-classic {
	border-bottom: 1px solid transparent;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.site-header--v-classic.site-header--v-sticky.is-scrolled {
	border-bottom-color: var(--hv-line);
	box-shadow: 0 10px 28px -18px rgb(15 23 42 / 30%);
}

/* "Kelluva pyöreä palkki" (headerStyle floating) with a variant: the sticky bar lifts into a
   rounded card once the page scrolls. At the top it is the same full-width bar as without it,
   so it takes its own room and covers nothing; scrolled, the card keeps the bar's height. */
.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled {
	border-bottom-color: transparent;
	background: transparent;
	box-shadow: none;
}

.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled .site-header__inner {
	border-radius: 18px;
	background: var(--hv-card);
	box-shadow: var(--hv-shadow);
}

@media (max-width: 767px) {
	.site-header--v.site-header--v-floating.site-header--v-sticky.is-scrolled .site-header__inner {
		border-radius: 14px;
	}
}

/* Centered: the name in the middle, the call to action on the right, the menu on its own row. */
@media (min-width: 960px) {
	.site-header--v-centered .site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			'start brand end'
			'nav nav nav';
		row-gap: 0;
		min-height: 0;
		padding-top: 14px;
	}

	.site-header--v-centered .site-header__brand {
		grid-area: brand;
		justify-self: center;
		font-size: 1.6rem;
		letter-spacing: -0.015em;
	}

	.site-header--v-centered .site-header__end {
		grid-area: end;
		justify-self: end;
	}

	.site-header--v-centered .site-nav--v {
		grid-area: nav;
		margin-top: 10px;
		padding-block: 6px;
		border-top: 1px solid var(--hv-line);
	}
}

.site-header--v-centered {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-centered.site-header--v-sticky.is-scrolled,
.site-header--v-topbar.site-header--v-sticky.is-scrolled,
.site-header--v-compact.site-header--v-sticky.is-scrolled,
.site-header--v-drawer.site-header--v-sticky.is-scrolled,
.site-header--v-overlay.site-header--v-sticky.is-scrolled {
	border-bottom-color: transparent;
	box-shadow:
		0 1px 0 var(--hv-line),
		0 10px 28px -18px rgb(15 23 42 / 30%);
}

/* Over the photo: transparent with white text and a soft shade at the top until the page
   scrolls, then a solid bar. Without a photo hero first, it is a solid bar from the start. */
.site-header--v-overlay {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-overlay.site-header--v-over-media {
	position: fixed;
	inset: 0 0 auto;
	border-bottom-color: transparent;
	transition:
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled) {
	--hv-fg: #fff;
	--hv-tint: rgb(255 255 255 / 16%);
	--hv-current: rgb(255 255 255 / 22%);
	--hv-line: rgb(255 255 255 / 40%);
	background: transparent;
	text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* The shade reaches well below the bar, so it fades out over the photo without an edge. */
.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled)::before {
	content: '';
	position: absolute;
	inset: 0 0 -72px;
	z-index: -1;
	background: linear-gradient(rgb(0 0 0 / 52%), rgb(0 0 0 / 22%) 55%, rgb(0 0 0 / 0%));
	pointer-events: none;
}

.site-header--v-overlay.site-header--v-over-media:not(.is-scrolled) .site-nav--v .menu__submenu {
	text-shadow: none;
}

body:has(> .site-header--v-over-media) main,
body:has(> .site-header--v-over-media) main > .section:first-child {
	padding-top: 0;
}

/* The photo runs under the bar; its text starts below the bar. */
body:has(> .site-header--v-over-media) main > .section:first-child .hero--overlay .hero__content {
	padding-top: 88px;
}

/* Compact: a low bar, the menu as a segmented pill, the current page lifted out of it. */
.site-header--v-compact {
	--hv-height: 60px;
	--hv-link-size: 14px;
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-compact .site-header__brand {
	font-size: 1.15rem;
}

@media (min-width: 960px) {
	.site-header--v-compact .site-nav--v > .menu {
		gap: 2px;
		padding: 4px;
		border-radius: 999px;
		background: color-mix(in srgb, var(--hv-fg) 5%, transparent);
	}

	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link,
	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__toggle,
	.site-header--v-compact .site-nav--v > .nav-more > .menu__toggle {
		min-height: 34px;
		padding: 6px 13px;
	}

	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v-compact .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		background: var(--hv-card);
		box-shadow:
			0 1px 2px rgb(15 23 42 / 10%),
			0 1px 6px rgb(15 23 42 / 6%);
	}

	.site-header--v-compact .site-header__cta {
		min-height: 44px;
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* Two rows: a thin information row in the brand colour above the main bar. */
.site-header--v-topbar {
	border-bottom: 1px solid var(--hv-line);
}

.site-topbar {
	background: var(--color-primary, #0055ff);
	color: var(--color-onPrimary, #fff);
	font-size: 13.5px;
	line-height: 1.4;
}

.site-topbar__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(
		100% - 2 * var(--hv-gutter) + 2 * var(--hv-pad),
		var(--size-contentMaxWidth, 1200px) + 2 * var(--hv-pad)
	);
	min-height: 38px;
	margin-inline: auto;
	padding-inline: var(--hv-pad);
}

.site-topbar__info,
.site-topbar__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	margin: 0;
}

.site-topbar a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.site-topbar a:hover {
	text-decoration: underline;
}

.site-topbar a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

.site-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

/* The icon snippet hides its SVG by default (the footer shows names unless set to icons): the
   top bar and the full-screen menu show icons only, so they must show them (they were empty
   links, 12.11.2026). */
.site-topbar .site-footer__social-icon {
	display: block;
	width: 17px;
	height: 17px;
}

@media (max-width: 767px) {
	.site-topbar__social {
		display: none;
	}

	.site-topbar__info {
		flex-wrap: nowrap;
		min-width: 0;
		overflow: hidden;
	}

	/* min-width 0: a flex item does not shrink below its text otherwise, and the ellipsis never
	   shows (a long info line ran 94 px past the phone's edge, bikeshop 1.11.2026). */
	.site-topbar__text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.site-topbar__inner {
		min-height: 34px;
	}

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

/* "Somekuvakkeet ylärivillä myös puhelimessa" (headerTopbarSocialMobile, 12.11.2026): the icons
   keep their place at the end of the row and the info text wraps to a second line beside them,
   so a candidate's followers find the profiles on a phone too. Off: the icons hide as before. */
@media (max-width: 767px) {
	.site-topbar--social-mobile .site-topbar__inner {
		gap: 4px;
	}

	.site-topbar--social-mobile .site-topbar__social {
		display: flex;
		flex: none;
		flex-wrap: nowrap;
		gap: 0;
		margin-inline-end: -13px;
	}

	.site-topbar--social-mobile .site-topbar__info {
		padding-block: 4px;
	}

	.site-topbar--social-mobile .site-topbar__text {
		line-height: 1.25;
		white-space: normal;
	}

	.site-topbar--social-mobile .site-topbar__social:first-child {
		margin-inline-start: auto;
	}
}

/* A whole 44 × 44 px touch target per icon (template audit, 12.11.2026); the negative block
   margin keeps the bar as thin as before, the hit area reaching past it. */
@media (max-width: 1023px), (pointer: coarse) {
	.site-topbar--social-mobile .site-topbar__social a {
		width: 44px;
		height: 44px;
		margin-block: -5px;
	}
}

@media (min-width: 960px) {
	.site-header--v-topbar .site-nav--v {
		justify-content: flex-end;
	}

	/* The current page: a bar under the label instead of a pill. */
	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current],
	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current]:hover {
		position: relative;
		background: transparent;
	}

	.site-header--v-topbar .site-nav--v > .menu > .menu__item > .menu__link[aria-current]::after {
		content: '';
		position: absolute;
		inset-inline: 14px;
		bottom: 2px;
		height: 2px;
		border-radius: 2px;
		background: var(--hv-accent);
	}
}

/* Menu button: no bar of links; a labelled button opens the menu as a side panel. */
.site-header--v-drawer {
	border-bottom: 1px solid var(--hv-line);
}

.site-header--v-drawer .site-header__toggle {
	gap: 10px;
	width: auto;
	padding: 0 16px 0 14px;
	font-family: var(--font-body, inherit);
	font-size: 15px;
	font-weight: 600;
}

.site-header__toggle-label {
	line-height: 1;
}

@media (max-width: 559px) {
	.site-header--v-drawer .site-header__toggle {
		width: 44px;
		padding: 0;
	}

	.site-header--v-drawer .site-header__toggle-label {
		display: none;
	}
}

@media (min-width: 960px) {
	.site-mobile-nav--v-drawer .site-nav-drawer {
		inset: 0 0 0 auto;
		width: min(440px, 100%);
		max-height: none;
		border-radius: 24px 0 0 24px;
		box-shadow: -16px 0 48px rgb(15 23 42 / 20%);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer--from-end {
		transform: translateX(100%);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer--at-rest {
		transform: translateX(0);
	}

	.site-mobile-nav--v-drawer .site-nav-drawer__inner {
		padding: 88px 40px 32px;
	}

	.site-mobile-nav--v-drawer .site-nav-drawer__inner::before {
		display: none;
	}

	html
		.site-header
		.site-mobile-nav--v-drawer
		.site-nav--mobile
		> .menu
		> .menu__item
		> .menu__link,
	html
		.site-header
		.site-mobile-nav--v-drawer
		.site-nav--mobile
		> .menu
		> .menu__item
		> .menu__toggle {
		font-family: var(--font-heading, inherit);
		font-size: 24px;
		letter-spacing: -0.01em;
	}
}

/* Site gutter (owner 16.10.2026: "pitäisi olla hieman tilaa"). One side gutter for the
   header, the content, the title and breadcrumb bars and the footer, growing with the window:
   28px on a phone, 4vw on a laptop (41px at 1024, 51px at 1280), at most 56px. Before, the
   content was 16px from the edge between 768px and the content width (the editor canvas at
   about 1000px showed 13-16px) and the header touched the edge. Only the default chrome:
   imported sites (enfold, elementor) keep their measured gutters. */
html.layout-chrome--default {
	--site-gutter: clamp(28px, 4vw, 56px);
}

html.layout-chrome--default main,
html.layout-chrome--default
	.site-header:not(.site-header--inset, .site-header--v)
	.site-header__inner,
html.layout-chrome--default .site-footer__inner,
html.layout-chrome--default .page-title-bar__inner,
html.layout-chrome--default .breadcrumbs-bar__inner {
	box-sizing: border-box;
	width: min(100% - 2 * var(--site-gutter), var(--size-contentMaxWidth, 1200px));
	max-width: min(100% - 2 * var(--site-gutter), var(--size-contentMaxWidth, 1200px));
	margin-inline: auto;
}

/* Full-width sections: `main` spans the window and each section keeps the gutter itself. */
html.layout-chrome--default.full-bleed-sections main {
	width: 100%;
	max-width: none;
}

:where(html.layout-chrome--default.full-bleed-sections main)
	.section:where(:not(.section--hero):not(.section--carousel)) {
	padding-inline: var(--site-gutter);
}

/* A section that paints a background of its own (the muted, dark or accent scheme) inside the
   contained page keeps its text off the edge of that background: the band reaches one gutter
   out past the content column (on a phone and up to the content width, to the window's edges)
   and pads its content back in by the same amount, so the text stays aligned with the other
   sections and the header (owner 24.10.2026, the template audit's text-padding check: the
   heading and cards of such a section touched the band's edge). After the ≥ 960 px `.section`
   padding above, which would reset it. Heroes and carousels reach the edges on purpose. */
:where(html.layout-chrome--default:not(.full-bleed-sections) main)
	.section:where(
		[data-color-scheme='muted'],
		[data-color-scheme='dark'],
		[data-color-scheme='accent']
	):where(:not(.section--hero):not(.section--carousel)) {
	margin-inline: calc(-1 * var(--site-gutter));
	padding-inline: var(--site-gutter);
}

/* The skip link sits above the sticky header when focused, never over the page otherwise. */
.skip-link {
	z-index: 1000;
	transform: translateY(calc(-100% - 1rem));
}

/*
 * "Toinen painike" (cta2Label/cta2Url, PUUTTEET_SUUNNITTELIJAT_2026-10-28.md): a second button
 * in the bar (Varaa + Jäsenyys), the outline pill by default, sitting before the main button.
 * A phone has room for one button in the bar: the second moves into the menu, where both
 * buttons stack full width.
 */
.site-header__cta-mobile {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm, 8px);
}

@media (max-width: 959px) {
	.site-header .site-header__inner > .site-header__cta--second,
	.site-header .site-header__end > .site-header__cta--second {
		display: none;
	}
}

/*
 * "Puhelinvalikko: Koko ruutu" (mobileNavSize = full): the menu covers the whole screen with
 * big links and the contact details at its foot. It is the same modal dialog as the panel
 * (focus stays inside, Esc and the X close it, the page behind does not scroll); only the
 * size and type change. Placed last so it wins over the panel and the header variants' sheet.
 */
html .site-mobile-nav--full .site-nav-drawer,
html .site-mobile-nav--v.site-mobile-nav--full .site-nav-drawer {
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--site-mobile-nav-bg, var(--scheme-bg, var(--color-background, #fff)));
	color: var(--site-mobile-nav-fg, var(--scheme-fg, var(--color-text, #111)));
}

html .site-mobile-nav--full .site-nav-drawer--from-end {
	transform: none;
	opacity: 0;
}

html .site-mobile-nav--full .site-nav-drawer--at-rest {
	transform: none;
	opacity: 1;
}

html .site-mobile-nav--full .site-nav-drawer--animating {
	transition: opacity 0.2s ease;
}

html .site-mobile-nav--full .site-nav-drawer__backdrop {
	display: none;
}

/* The X stays the close button: the panel's own text colour, above the panel. */
html .site-mobile-nav--full .site-header__toggle[aria-expanded='true'] {
	color: var(--site-mobile-nav-fg, var(--scheme-fg, var(--color-text, #111)));
	border-color: currentColor;
}

html .site-mobile-nav--full .site-nav-drawer__inner,
html .site-mobile-nav--v.site-mobile-nav--full .site-nav-drawer__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-sizing: border-box;
	padding: calc(var(--site-header-bottom, var(--site-header-h, 72px)) + 8px) clamp(20px, 6vw, 64px)
		calc(24px + env(safe-area-inset-bottom, 0px));
}

html .site-mobile-nav--full .site-nav-drawer__inner::before {
	display: none;
}

html .site-mobile-nav--full .site-nav--mobile {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-md, 16px);
}

html .site-header .site-mobile-nav--full .site-nav--mobile > .menu > .menu__item > .menu__link,
html .site-header .site-mobile-nav--full .site-nav--mobile > .menu > .menu__item > .menu__toggle {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 4px 0;
	font-size: var(--site-mobile-nav-size, clamp(1.6rem, 1rem + 3.2vw, 2.75rem));
	font-weight: var(--site-mobile-nav-weight, 600);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: inherit;
}

html .site-header .site-mobile-nav--full .site-nav--mobile .menu__submenu .menu__link {
	min-height: 44px;
	font-size: 1.125rem;
}

html .site-mobile-nav--full .site-header__cta-mobile {
	position: static;
	margin: var(--space-md, 16px) 0 0;
	padding: 0;
}

.site-nav-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	margin: auto 0 0;
	padding-top: var(--space-md, 16px);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	font-size: 1rem;
}

.site-nav-contact__link,
.site-nav-contact__social a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
}

.site-nav-contact__social {
	display: inline-flex;
	gap: 4px;
}

.site-nav-contact__social a {
	justify-content: center;
	min-width: 44px;
}

.site-nav-contact__social svg {
	display: block;
	width: 22px;
	height: 22px;
}

@media (prefers-reduced-motion: reduce) {
	html .site-mobile-nav--full .site-nav-drawer--animating {
		transition: none;
	}
}

/* "Iso nimi" (U5): the site's name as a big wordmark at the foot of the footer. Fluid, wraps
   rather than overflowing, in the footer's own colour; decoration (aria-hidden). */
/* The footer is a flex row: the name takes a line of its own under the footer's content. */
.site-footer:has(> .site-footer__wordmark) {
	flex-wrap: wrap;
}

.site-footer__wordmark {
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	max-width: var(--size-contentMaxWidth, 1200px);
	margin: clamp(1.5rem, 4vw, 3rem) auto 0;
	padding: 0 var(--space-md, 16px) clamp(0.5rem, 2vw, 1.5rem);
	font-family: var(--font-heading, inherit);
	font-weight: var(--font-headingWeight, 700);
	font-size: clamp(2.5rem, 10vw, 10rem);
	line-height: 0.92;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	hyphens: auto;
	color: inherit;
	opacity: 0.92;
}

/* "Sivunvaihto häivytyksenä" (U9): a cross-document view transition, the browser's own
   cross-fade. The rule is written only when the setting is on (layout/theme.liquid) and only
   inside no-preference, so less motion and the site's motion switch keep the plain change. */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------------------------------
 * Ylä- ja alatunniste (docs/komponentit/ALA_JA_YLATUNNISTE_2026-11-06.md)
 * ---------------------------------------------------------------------------------------- */

/* Megavalikko polish: plain links of a column line up with the described ones (both 12 px in),
   and a column title's focus ring keeps clear of the description under it. */
.site-header--mega .site-nav--desktop .menu__submenu .menu__group .menu__link {
	padding: 10px 12px;
}

.menu__group-title:has(+ .menu__group-description) {
	padding-bottom: 2px;
	margin-bottom: 6px;
}

a.menu__group-title {
	width: fit-content;
	max-width: 100%;
}

/* "Ylätunnisteen väri" (headerScheme): the bar's background and text come as a pair
   (src/chrome-colors.ts). A primary button that would vanish on it takes the bar's text colour. */
.site-header--scheme:not(.site-header--v-over-media),
.site-sidebar.site-header--scheme {
	background: var(--site-header-bg);
	color: var(--site-header-fg);
}

.site-header--cta-invert
	.site-header__inner
	> .site-header__cta:not(.site-header__cta--outline, .site-header__cta--own),
.site-header--cta-invert
	.site-header__end
	> .site-header__cta:not(.site-header__cta--outline, .site-header__cta--own) {
	background: var(--site-header-fg);
	color: var(--site-header-bg);
}

/* In the ready-made designs the dropdown card and the phone sheet keep the page's colours
   (their text is the page's text colour); only the bar itself takes the scheme. */
.site-header--v.site-header--scheme {
	--hv-card: var(--color-background, #fff);
}

.site-header--v.site-header--scheme.site-header--v-floating.site-header--v-sticky.is-scrolled
	.site-header__inner {
	background: var(--hv-bg);
}

.site-header--v-compact.site-header--scheme
	.site-nav--v
	> .menu
	> .menu__item
	> .menu__link[aria-current] {
	background: var(--hv-tint-strong);
	box-shadow: none;
}

/* A field in a coloured bar keeps the page's own colours, so it reads as a field. */
.site-header--scheme .site-header__end .site-search-box input,
.site-header--scheme .site-header__inner > .site-search-box input {
	border-color: transparent;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
}

/* "Toisen painikkeen oma väri" (cta2Color): filled, with black or white text by contrast. */
.site-header__cta.site-header__cta--own,
.site-header__cta-mobile .site-header__cta.site-header__cta--own,
.site-header--v .site-header__cta.site-header__cta--own,
.site-header--v .site-header__cta-mobile .site-header__cta.site-header__cta--own,
.site-mobile-nav--v .site-header__cta-mobile .site-header__cta.site-header__cta--own {
	background: var(--cta-own-bg);
	color: var(--cta-own-fg);
	box-shadow: none;
}

/* "Haku ylätunnisteessa: Hakukuvake" (snippets/search-box.liquid): a disclosure button that
   opens the search field in a panel under the bar. On a phone the field is in the menu. */
.site-search-toggle {
	position: relative;
	display: none;
}

@media (min-width: 960px) {
	.site-search-toggle {
		display: block;
		margin-inline: 0.25rem;
	}
}

.site-search-toggle__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.site-search-toggle__button:hover,
.site-search-toggle.is-open .site-search-toggle__button {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.site-search-toggle__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-search-toggle__panel {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	width: min(24rem, calc(100vw - 32px));
	padding: 12px;
	box-sizing: border-box;
	border: 1px solid var(--color-border, #d5d9e0);
	border-radius: var(--radius-md, 8px);
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	box-shadow: 0 16px 40px -16px rgba(8, 10, 16, 0.35);
}

.site-search-toggle.is-open .site-search-toggle__panel {
	display: block;
}

.site-search-toggle .site-search-box {
	display: flex;
	margin: 0;
}

.site-search-toggle .site-search-box input {
	flex: 1 1 auto;
	width: auto;
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
}

html.no-js .site-search-toggle__button {
	display: none;
}

html.no-js .site-search-toggle__panel {
	display: block;
	position: static;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	box-shadow: none;
}

/* "Alatunnisteen väri" (footerScheme). */
.site-footer.site-footer--scheme {
	background: var(--site-footer-bg);
	color: var(--site-footer-fg);
}

/* "Logo alatunnisteessa" and the trust badges, in either footer. */
.site-footer__brand {
	grid-column: 1 / -1;
	margin: 0;
}

.site-footer__brand-link {
	display: inline-block;
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	width: auto;
	max-width: min(100%, 240px);
	height: auto;
	max-height: 72px;
	object-fit: contain;
}

.site-footer__name {
	font-family: var(--font-heading, inherit);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.site-footer__badges {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__badges a {
	display: block;
}

.site-footer__badges img {
	display: block;
	width: auto;
	max-width: 160px;
	height: 56px;
	object-fit: contain;
}

.site-footer__top {
	grid-column: 1 / -1;
	margin: 0;
}

.site-footer__top-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* "Alatunnisteen palstat" (snippets/footer-columns.liquid): the owner's titled columns, side by
   side as far as they fit and stacked on a phone, then the badges and the bottom row. */
.site-footer.site-footer--cols .site-footer__inner {
	/* One grid track, not a flex column: a column of auto-fit grids measured its rows at the
	   narrowest width and left a tall gap under the columns. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-lg, 32px);
	text-align: start;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-lg, 24px) var(--space-xl, 32px);
}

.site-footer__col-heading {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.site-footer__col-body p,
.site-footer__col-body .site-footer__text {
	margin: 0 0 0.5em;
}

.site-footer__col-body p:last-child {
	margin-bottom: 0;
}

.site-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col-links a {
	display: inline-block;
	padding-block: 2px;
}

.site-footer__col-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.site-footer__col-social .site-footer__social-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.site-footer__col-toggle {
	display: none;
}

/* "Uutiskirje" column: the address and the button on one row, what is ordered under them. */
.site-footer__newsletter {
	display: grid;
	gap: 8px;
	max-width: 26rem;
}

.site-footer__newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.site-footer__newsletter-input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: var(--radius-sm, 4px);
	background: var(--color-background, #fff);
	color: var(--color-text, #111);
	font: inherit;
}

.site-footer__newsletter-input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.site-footer__newsletter-button {
	min-height: 44px;
}

.site-footer .site-footer__newsletter-consent {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
}

.site-footer__newsletter-consent a {
	color: inherit;
	text-decoration: underline;
}

/* "Linkkivalikko" column: the dropdown block, opening upwards (the footer is the page's end). */
.site-footer__dropdown > .dropdown__button {
	color: inherit;
}

@media (min-width: 640px) {
	.site-footer__dropdown .dropdown__list {
		top: auto;
		bottom: calc(100% + 0.35rem);
	}
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-top: var(--space-md, 16px);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font-size: 0.875rem;
}

.site-footer__bottom .site-footer__copyright {
	margin: 0;
	font-size: inherit;
}

.site-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-row a,
.site-footer__legal-row button {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.site-footer__bottom .site-footer__top-link {
	margin-left: auto;
}

/* "Palstat puhelimella: Haitari" (footerMobile): only with JavaScript (Alpine adds the class),
   only below the desktop width. */
@media (max-width: 959px) {
	.site-footer--accordion .site-footer__columns {
		gap: 0;
	}

	.site-footer__col.is-collapsible {
		border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	}

	.site-footer__col.is-collapsible .site-footer__col-heading {
		margin: 0;
	}

	.site-footer__col.is-collapsible .site-footer__col-title {
		display: none;
	}

	.site-footer__col.is-collapsible .site-footer__col-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1em;
		width: 100%;
		min-height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}

	.site-footer__col.is-collapsible .site-footer__col-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.site-footer__col.is-collapsible:not(.is-open) .site-footer__col-body {
		display: none;
	}

	.site-footer__col.is-collapsible .site-footer__col-body {
		padding-bottom: 16px;
	}
}

.site-footer__col-chevron {
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin-top: -0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.site-footer__col.is-open .site-footer__col-chevron {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__col-chevron {
		transition: none;
	}
}

/* ------------------------------------------------------------------------------------------
 * Kielivalinta ikkunana ja puhelinvalikon välilehdet (docs/sivupohjat/LUOTTOKORTTI_2026-11-09.md)
 * ---------------------------------------------------------------------------------------- */

/* "Ikkuna hakukentällä" (localeSwitcherStyle = dialog): the summary opens a modal window with a
   search field; without JavaScript the <details> shows the same links under it. */
.locale-dialog__fallback {
	position: relative;
}

.locale-dialog__fallback > .locale-dialog__list--plain {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 14rem;
	padding: 6px;
	background: var(--scheme-bg, #fff);
	color: var(--scheme-fg, #15181f);
	border: 1px solid var(--scheme-border, rgb(0 0 0 / 12%));
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.locale-dialog__country {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	padding: 1px 4px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.locale-dialog {
	width: min(28rem, calc(100vw - 32px));
	max-height: min(36rem, calc(100dvh - 32px));
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg, 12px);
	background: var(--color-background, #fff);
	color: var(--color-text, #15181f);
	box-shadow: 0 24px 64px rgb(0 0 0 / 25%);
}

.locale-dialog::backdrop {
	background: rgb(0 0 0 / 45%);
}

.locale-dialog__box {
	display: grid;
	gap: 12px;
	padding: 20px;
}

.locale-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.locale-dialog__title {
	margin: 0;
	font-size: 1.25rem;
}

.locale-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.locale-dialog__search {
	display: grid;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.locale-dialog__search input {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
	border-radius: var(--radius-md, 8px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 400;
}

.locale-dialog__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.locale-dialog__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 10px;
	border-radius: var(--radius-md, 8px);
	color: inherit;
	text-decoration: none;
}

.locale-dialog__link:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.locale-dialog__link[aria-current] .locale-dialog__name {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.locale-dialog__close:focus-visible,
.locale-dialog__link:focus-visible,
.locale-dialog__search input:focus-visible,
.site-nav-tabs__tab:focus-visible,
.site-nav-tabs__summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.locale-dialog__empty {
	margin: 0;
	font-size: 0.875rem;
}

.locale-dialog__empty:empty {
	display: none;
}

/* "Ylätason kohdat välilehtinä" (mobileNavTabs): the groups as tabs at the top of the
   full-screen phone menu, their links under the selected one. */
.site-nav-tabs {
	display: grid;
	gap: var(--space-md, 16px);
}

.site-nav-tabs__list {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.site-nav-tabs__list[hidden],
.site-nav-tabs__panel[hidden] {
	display: none;
}

.site-nav-tabs__tab {
	flex: none;
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.75;
}

.site-nav-tabs__tab[aria-selected='true'] {
	border-bottom-color: currentColor;
	opacity: 1;
}

.site-nav-tabs__heading {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 700;
}

.site-nav-tabs__items,
.site-nav-tabs__sub,
.site-nav-tabs__links {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav-tabs__sub {
	padding: 0 0 8px 16px;
}

.site-nav-tabs__links {
	padding-top: var(--space-sm, 8px);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.site-nav-tabs__link,
.site-nav-tabs__summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	color: inherit;
	font-size: var(--site-mobile-nav-size, 1.25rem);
	font-weight: var(--site-mobile-nav-weight, 600);
	text-decoration: none;
}

.site-nav-tabs__sub .site-nav-tabs__link {
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 400;
}

.site-nav-tabs__link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.site-nav-tabs__summary {
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

.site-nav-tabs__summary::-webkit-details-marker {
	display: none;
}

.site-nav-tabs__summary::after {
	content: '';
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.site-nav-tabs__acc[open] > .site-nav-tabs__summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav-tabs__summary::after {
		transition: none;
	}
}

.motion-off .site-nav-tabs__summary::after {
	transition: none;
}