/* Käsin kirjoitettu lisä theme.jsonin päälle. Kaikki mikä voi olla
   theme.jsonissa on siellä — tänne jää vain se mitä se ei osaa. */

/* _reset.scss aloittaa universaalilla border-boxilla. WordPress asettaa sen
   vain osalle lohkoista, joten min-height ja padding laskettiin yhteen eri
   tavalla kuin lähteessä: esimerkiksi listaotsikon linkki (min-height 1.5rem
   + 0.125rem pehmuste) oli 28 px eikä 25,5, ja jokainen listarivi kolme
   pikseliä liian korkea. Marginaaleja ei nollata — ne tulevat täällä
   WordPressin omista tyyleistä, joihin muu teema on sovitettu. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reserves room for the header when scrolling to anchors and to focus.

   The header wrapper is currently exactly as tall as the bar, so the bar
   scrolls away and never covers a focused element. WCAG 2.4.11 passes, but by
   accident. Give that wrapper position: sticky one day and the criterion
   breaks on the same line, and no test notices, because the failure only shows
   once focus moves to the top edge of the viewport. This keeps the reservation
   in place ahead of time: 5rem for the bar plus 2.5rem for the top row. */
html {
	scroll-padding-block-start: 7.5rem;
}

/* Section rhythm.

   The source steps these values rather than scaling them: vertical padding
   changes at md (768px) and horizontal padding at sm (640px) and lg (1024px).
   theme.json holds the base value and the steps re-point the same token here.
   Everything that consumes the token (every section style variation and the
   root padding) follows automatically.

   Checked against WP 7.1: its responsive styles do not replace this block.
   @mobile/@tablet apply to block styles only, not to settings.custom tokens,
   and the single global viewport pair cannot express three thresholds
   (640, 768 and 1024). The steps stay here. */
@media (min-width: 640px) {

	:root {
		--wp--custom--edge--padding: 2rem;
	}
}

@media (min-width: 768px) {

	:root {
		--wp--custom--section--padding: 4rem;
		--wp--custom--section--padding-large: 6rem;
		--wp--custom--section--padding-banner: 7rem;
		--wp--custom--page-header--padding-top: 4rem;
		--wp--custom--page-header--padding-bottom: 6rem;
	}
}

@media (min-width: 1024px) {

	:root {
		--wp--custom--edge--padding: 3rem;
	}
}

/* Pitkä sana saa katketa. Lähteessä tämä on _reset.scss:ssä bodylla, ja
   ominaisuus periytyy, joten yksi sääntö riittää. Ilman sitä tietosuojasivun
   URL-osoite (facebook.com/privacy/policy/) jäi 390 px:n ruudulla yhdelle
   riville ja valui palstan ulkopuolelle. */

/* _reset.scss: headings hyphenate and long words break. Finnish compounds are
   long, and without this the card headings ran wider than in the source.
 *
 * Site-wide, so it lives here: it briefly ended up inside the carousel's block
 * stylesheet, which loads on two pages — every heading on every other page lost
 * its hyphenation and long titles gained a line. */
:is(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: auto;
}

body {
	overflow-wrap: break-word;

	/* Lähteessä _reset.scss pyytää harmaasävyisen antialiasoinnin. Ilman sitä
	   macOS piirtää saman fontin subpikselisilotuksella, jolloin teksti on
	   kauttaaltaan hitusen paksumpaa — ero näkyy erityisesti valkoisena
	   valokuvan päällä (esim. ruotsinkielisen sivun banneri). */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Sisältötypografia: leveys ja rytmi pitkille teksteille.
   Väri asetetaan säiliöön eikä p-elementtiin, jotta se periytyy — muuten se
   voittaisi osiotyylin oman värin ja teksti jäisi lukukelvottomaksi tummalla
   taustalla. */

/* prose-base: 1.0625rem / 1.8. SCSS:n max-width: none tarkoitti "älä kavenna
   palstaa erikseen" — mutta WordPressissä palstaleveys ON se max-width, jonka
   constrained-layout antaa lapsille. Sen nollaaminen levitti kappaleet koko
   osion levyisiksi, vaikka otsikot pysyivät 48 rem:ssä. Leveys jätetään siis
   layoutille. */

/* Alkuperäisessä .prose on vain rikkaan tekstin kääreissä, ei koko sivun
   sisällössä. Kun se annettiin koko post-contentille, jokainen komponentti
   sivun sisällä peri 1.0625rem/1.8:n: linkkiruudukon painikkeet, tilastojen
   selitteet ja listakortit olivat kaikki hitusen liian isoja. Kääreet ovat
   tässä samat kuin lähteessä (Checklist, AccordionSection, ColoredBox,
   MediaWithText, PageHeader, RichText ja artikkelin runko). */
.vml-article .wp-block-post-content,
.vml-media-text__content,
.is-style-colored-box,
.is-style-step-body {
	color: var(--wp--preset--color--prose);
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* Sticky-ylätunniste.

   Ydin antaa jokaiselle .wp-site-blocksin lapselle block-gapin verran
   yläreunaa — myös ensimmäiselle — joten ylätunnisteen ylle jäi 24 px rakoa
   eikä se osunut ruudun yläreunaan ennen kiinnittymistä.

   Taustavärilliset ryhmät saavat ytimeltä paddingin (1.25em 2.375em). Palkin
   korkeus tulee .vml-header__innerin 5rem:stä, joten pystypadding kasvatti
   palkin 80 pikselistä 116:een. Vaakapadding tulee jo layoutista. */

/* Yläpalkki on mobiilissa display:none, mutta se on yhä sisarus, joten
   block-gap antaa alapalkille 24 px yläreunaa. Koska piilotettu palkki ei
   muodosta laatikkoa, marginaali valuu ylätunnisteen ulkopuolelle ja työnsi
   koko sivun alas. Ylätunniste latoo itse rivinsä, joten block-gap ei kuulu
   sinne lainkaan. */
.vml-header > * {
	margin-block-start: 0;
}

/* Sama block-gap jäi vaaleaksi kaistaksi ylätunnisteen ja ensimmäisen osion
   väliin sekä sisällön ja alatunnisteen väliin. Osiot tuovat oman
   pystypaddinginsa, joten ylätunniste, sisältö ja alatunniste ovat kiinni
   toisissaan kuten alkuperäisessä. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* _header.scss: .header is only a sticky wrapper — the background and any rule
   belong to the bars. A 1px border on the wrapper made the header one pixel too
   tall on every page.
 *
 * Sticky itself is a block attribute now, so core emits the position and offsets
 * it by the admin bar for logged-in editors. Only the stacking order is left:
 * core's default is 10 and the mobile menu's close button sits at 51, so the
 * header needs to be between them. */
.vml-header.is-position-sticky {
	z-index: 50;
}

/* Kumpikaan palkki ei tuo omaa pehmustettaan: pystysuunnassa väli tulee
   sisällöstä, ja vaakapehmuste kuuluu .container-widelle. Ytimen alignfull +
   constrained lisää ryhmälle global paddingin, joka työpöydällä katoaa
   keskityksen sisään mutta mobiilissa kaksinkertaistaisi sisennyksen. */
.vml-header__bar,
.vml-topbar {
	padding-block: 0;
	padding-inline: 0;
}

/* Näppäimistöfokus näkyviin kaikkialla, myös siellä missä theme.json ei yllä. */

/* Myös upotus: YouTube-kehykseen voi sarkaimella siirtyä, ja ilman rengasta
   näppäimistökäyttäjä ei näe olevansa siinä. */
:where(a, button, input, select, textarea, summary, iframe, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Tummilla alueilla rengas on korostusvihreä.

   Brändinvihreä rengas on vaaleaa taustaa vasten selvä (kontrasti 8,8:1),
   mutta megavalikon vihreällä paneelilla se on täsmälleen taustan värinen —
   kontrasti 1,0:1, eli näppäimistöllä liikkuva ei näe missä on.

   Korostusvihreä antaa paneelilla 7,3:1 ja alatunnisteella 11,8:1, selvästi
   yli WCAG 1.4.11:n vaatiman 3:1. Valkoinen olisi yhtä erottuva taustaa
   vasten, mutta hero-osion painikkeella on valkoinen reunus: valkoinen rengas
   näyttäisi vain paksummalta reunukselta eikä fokusta erottaisi lepotilasta. */
:is(
	.vml-topbar,
	.vml-footer,
	.vml-consent,
	[class*="is-style-section-hero"],
	[class*="is-style-section-cta"],
	[class*="is-style-section-dark"],
	.vml-nav--paavalikko .wp-block-navigation__submenu-container
) :where(a, button, input, select, textarea, summary, iframe, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* Rivit, joiden oma tausta tummuu juuri fokuksessa: rengas jää rivin sisään,
   joten se tarvitsee vaalean värin. Linkkiruudukon painikkeissa on päinvastoin:
   painike tummuu, mutta rengas piirtyy sen ulkopuolelle valkoiselle osiolle,
   joten siellä brändinvihreä on oikea. */
:is(
	.is-style-link-card,
	.is-style-source-card,
	.is-style-image-card
) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* Ohita valikko -linkki ja muu ruudunlukijalle tarkoitettu teksti.
   WordPress renderöi skip-linkin luokalla screen-reader-text, joten sen on
   oltava piilotettu jo täällä — muuten linkki näkyy sivun yläreunassa. */
.screen-reader-text:not(:focus),
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Kuvien rajaus säilyttää Sanityn hotspotin. */
.wp-block-post-featured-image img,
.wp-block-image img {
	object-fit: cover;
	object-position: var(--vml-focal, 50% 50%);
}

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

	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Ylätunniste. Mitat suoraan _header.scss:stä:
   yläpalkki 2.5rem (näkyy vain lg+), logorivi 5rem, logo 3.5rem. */

.vml-topbar { display: none; }

@media (min-width: 1024px) {

	.vml-topbar { display: block; }
}

.vml-topbar__inner {
	block-size: 2.5rem;
	align-items: center;
}

.vml-topbar a {
	text-decoration: none;
	font-weight: 500;
	color: var(--wp--preset--color--white);
}

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

.vml-header__inner {
	min-block-size: 5rem;
	align-items: center;
}

.vml-header__brand {
	gap: 0.75rem;
	align-items: center;
	flex-shrink: 0;
}

.vml-header .wp-block-site-logo img {
	display: block;
	block-size: 3.5rem;
	inline-size: auto;
	max-inline-size: none;
}

/* _header.scss: __logo-text on $font-size-lg = 1.25rem, ei lähin preset. */
.vml-header__brand-text a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary-dark);
	text-transform: uppercase;
	letter-spacing: -0.025em;
	text-decoration: none;
	-webkit-text-stroke: 0.4px currentcolor;
}

.vml-header__nav {
	gap: 2rem;
	align-items: center;
}

.vml-header__bar .wp-block-navigation a { text-decoration: none; }

/* --------------------------------------------------------------- tuloste

   Kannanotto tulostetaan kokoukseen ja artikkeli arkistoon, joten paperille
   kuuluu vain sisältö. Ilman näitä sääntöjä tuloste on käyttökelvoton:
   suostumusikkuna on position: fixed, joten se toistuu jokaisella sivulla
   sisällön päällä, himmennys harmaannuttaa tekstin ja navigaatio, alatunniste
   sekä "Lue myös" -listaus venyttävät yhden kannanoton seitsemäksi sivuksi. */
@media print {

	.vml-consent,
	.vml-consent-fab,
	[data-vml-consent],
	[data-vml-consent-fab],
	.wp-block-template-part > header,
	.wp-block-template-part > footer,
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.is-style-section-related,
	.is-style-link-pills,
	.vml-carousel__prev,
	.vml-carousel__next,
	.vml-carousel__dots,
	.vml-dictionary__filters,
	.vml-embed-placeholder,
	.wp-block-query-pagination,
	.screen-reader-text {
		display: none !important;
	}

	/* Väripohjat pois: mustesäästö ja luettavuus. Teksti mustaksi, koska
	   brändinvihreä harmaantuu mustavalkotulostimessa. */
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	body {
		font-size: 11pt;
		line-height: 1.5;
	}

	/* Osioiden pystypehmusteet ovat ruutua varten; paperilla ne jättäisivät
	   puolet sivusta tyhjäksi. */
	.vml-article {
		padding-block: 0 !important;
	}

	/* Korttien kuvat pois: hallitussivun muotokuvat, tarina- ja artikkelikortit
	   ovat ruudulla ruudukossa, jonka kiinteät kuvasuhteet varaavat paperilla
	   saman korkuiset laatikot. Tulostettu hallitussivu on yhteystietolista,
	   ei kuvagalleria — ja jokainen muotokuva on parisataa kilotavua mustetta. */
	.is-style-person-card .wp-block-post-featured-image,
	.is-style-story-card .wp-block-post-featured-image,
	.is-style-article-card .wp-block-post-featured-image,
	.is-style-article-featured .wp-block-post-featured-image,
	.is-style-article-list .wp-block-post-featured-image,
	.vml-carousel__card img {
		display: none !important;
	}

	/* Ruudukot yhteen palstaan: paperilla sarakkeet jättäisivät puolet
	   rivistä tyhjäksi, koska korkeus tulee korkeimmasta kortista. Media ja
	   teksti -lohko on ruudulla kaksi palstaa, joiden korkeus tulee kuvasta;
	   pinottuna kuva ja teksti eivät mene päällekkäin. */
	.is-style-person-card,
	.is-style-story-card,
	.is-style-article-card,
	.wp-block-media-text,
	.wp-block-columns {
		display: block !important;
	}

	/* Media ja teksti -lohkon kuva on ruudulla absoluuttinen neliössä; paperilla
	   se jäisi tekstin päälle. Palautetaan normaaliin tekstivirtaan. */
	.wp-block-media-text__media {
		aspect-ratio: auto !important;
		block-size: auto !important;
		margin-block-end: 0.5rem !important;
	}

	.wp-block-media-text__media img {
		position: static !important;
		max-block-size: 6cm !important;
		inline-size: auto !important;
		block-size: auto !important;
		object-fit: contain !important;
	}

	.is-style-person-card > li,
	.is-style-story-card > li,
	.is-style-article-card > li {
		margin-block-end: 1rem;
	}

	/* Leipätekstin kuva ja artikkelin nostokuva jäävät, mutta kääreen kiinteä
	   kuvasuhde puretaan ja korkeus rajataan. */
	.entry-content figure,
	.vml-article__hero-image {
		aspect-ratio: auto !important;
		block-size: auto !important;
		overflow: visible !important;
	}

	.entry-content img,
	.vml-article__hero-image img {
		max-inline-size: 100% !important;
		max-block-size: 7cm !important;
		inline-size: auto !important;
		block-size: auto !important;
		object-fit: contain !important;
	}

	/* Otsikko ei jää yksin sivun pohjalle, eikä kappale katkea kesken. */
	h1, h2, h3 {
		break-after: avoid-page;
	}

	p, li, figure, blockquote {
		break-inside: avoid-page;
	}

	/* Linkin osoite näkyviin: paperilla linkkiä ei voi klikata. Sisäiset ja
	   ankkurilinkit jätetään rauhaan, koska ne eivät kerro lukijalle mitään. */
	.entry-content a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		word-break: break-all;
	}
}

/* _button.scss: .btn is inline-flex, its content centred in the box but its
   lines aligned to the start. The difference shows only when the label wraps
   to two lines: core centres each line separately, the source aligns them to
   the same left edge and centres the stack. On a narrow screen "Tutustu
   varusmiespalvelukseen" wraps exactly like that.
 *
 * Site-wide rather than in a block stylesheet: .wp-element-button is also the
 * search button and the file block, and neither is a core/button. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: start;
}

/* ------------------------------------------------------------ ylätunniste
   The header and the top bar are on every page, so they belong here rather
   than in a block stylesheet: no single block owns them, and the parts that
   are core/navigation already live in blocks/core-navigation.css.

   These had drifted into components.css under the heading "artikkelisivu",
   which is why they were not moved with the rest of the header earlier. */

/* Header.svelte lisää ulkoisen linkin perään nuolikuvakkeen. Ydin ei tuota
   sellaista, mutta target="_blank" kertoo saman asian, joten kuvake tulee
   pseudoelementtinä eikä merkkausta tarvitse muuttaa. */
.vml-topbar a[target='_blank']::after,
.vml-header__nav a[target='_blank']::after {
	content: '';
	display: inline-block;
	inline-size: 0.75rem;
	block-size: 0.75rem;

	/* Lähteessä kuvake on oma <span> ja sitä ennen on merkkauksessa väli:
	   yhteensä 7,6 px tekstin jälkeen. Pseudoelementillä väliä ei ole, joten
	   se annetaan marginaalina — muuten seuraava linkki alkaa 3,6 px liian
	   vasemmalta. */
	margin-inline-start: 0.5rem;
	margin-block-start: -0.125rem;
	vertical-align: middle;
	background-color: currentcolor;
	-webkit-mask: var(--vml-external-icon) center / contain no-repeat;
	mask: var(--vml-external-icon) center / contain no-repeat;
}

.vml-header {
	--vml-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

/* Ylätunniste ja yläpalkki ovat .container-wide-säiliössä, jolla on oma
   vaakapehmuste (1.5 / 2rem sm / 3rem lg). Ilman sitä logo ja valikko
   kiinnittyivät 85rem-säiliön reunaan, 48 px sisältöä ulommas. */

.vml-topbar__inner,
.vml-header__inner {
	padding-inline: 1.5rem;
}

/* Kapeimmilla puhelimilla (320 px) logo, nimi ja valikkonappi eivät mahdu
   1,5 rem:n sisennyksellä: nappi jäi 15 px ruudun ulkopuolelle ja sivu vieri
   vaakasuunnassa. Tuotannossa sama tilanne ratkeaa kutistamalla nappia, mutta
   silloin kuvake leikkautuu. Kavennetaan sen sijaan sisennystä ja nappia. */
@media (max-width: 359px) {

	.vml-topbar__inner,
	.vml-header__inner {
		padding-inline: 1rem;
	}
}

@media (min-width: 640px) {

	.vml-topbar__inner,
	.vml-header__inner {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {

	.vml-topbar__inner,
	.vml-header__inner {
		padding-inline: 3rem;
	}
}

/* Ylätunnisteen CTA on _header.scss:ssä oma komponentti eikä .btn:
   pill-muotoinen, pienempi ja väljemmällä kirjainvälillä. */

.vml-header__nav .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.05em;
	border-radius: 9999px;

	/* Sisältönappien 2 px:n läpinäkyvä reunus pitää täytetyn ja ääriviivaisen
	   napin samankokoisina. Ylätunnisteen pillerissä ääriviivaista muotoa ei
	   ole, ja reunus tekisi napista neljä pikseliä liian leveän ja korkean. */
	border: 0;
}

/* Mobiilissa vain logo ja valikkonappi.
   CTA elää _header.scss:ssä .header__desktop-nav -kääreen sisällä, joka on
   display:none alle lg — se ei siis ole mobiilissa lainkaan, vaan löytyy
   valikon takaa. Logoteksti sen sijaan näkyy myös kapeimmilla ruuduilla. */
@media (max-width: 1023px) {

	.vml-header__inner {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.vml-header__nav {
		gap: 0.5rem;
		flex-wrap: nowrap;
	}

	.vml-header__nav .wp-block-buttons { display: none; }

	/* Ydin vaihtaa overlay-valikkoon 600 pikselissä ("mobile"), mutta
	   _header.scss piilottaa työpöytävalikon vasta lg:ssä (1024). Tabletilla
	   päävalikko latoutui siksi ylätunnisteeseen kahdelle riville, vaikka
	   siellä kuuluu olla vain logo ja valikkonappi. */
	.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}


/* ==================================================================
   Osiot, proosa ja sivutason kehys

   Nämä olivat components.css:ssä, joka oli portin komponenttityylien
   jäännös ja purettiin lohko kerrallaan. Loppuosa ei mene lohkotiedostoihin:
   se koskee useaa lohkotyyppiä yhtä aikaa (osio-otsikot osuvat ryhmään,
   coveriin, sarakkeisiin ja media-textiin) tai koko sivupohjaa (artikkeli,
   alatunniste, arkisto). Ehdollinen lataus vaatisi tietää etukäteen mikä
   lohko sattuu olemaan sivulla — ja nämä koskevat niitä kaikkia.

   Järjestys on sama kuin ennen: components.css ladattiin theme.css:n
   jälkeen, joten se on tässä perässä.
   ================================================================== */

/* ------------------------------------------------------------------ nuoli */

/* Alkuperäisen ArrowLinkin nuoli on 16x16 SVG (heroicons arrow-right), ei
   kirjasimen →: glyfi on kapeampi ja istuu eri kohdassa riviä, joten
   laatikoiden leveydet ja rivien katkeamiskohdat erosivat. Sama piirros
   maskina, jolloin väri seuraa currentColoria kuten stroke="currentColor". */
:root {

	/* Sama chevron kaikkialla: valikon avausmerkki, sivutuksen nuolet ja
	   murupolun erotin. */
	--vml-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--vml-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 5l7 7-7 7M21 12H3'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- sivun otsikko */

/* Portattu _page-header.scss:stä ja PageHeader.astrosta.
   Osion pystypadding 3/4rem → 4/6rem (md), vaakapadding seuraa
   .container-wide-arvoja 1.5 → 2rem (sm) → 3rem (lg). Sisältö on
   keskitetty 48rem levyiseksi (page-header__inner--centered).

   Palkki tulee sivupohjasta ja ingressi sisällöstä, joten sama pehmuste
   koskee molempia: yhdessä ne muodostavat yhden yhtenäisen alueen. */

/* Sivu, joka on kirjoitettu tavallisilla lohkoilla eikä osioista: teksti
   alkaisi heti otsikkopalkin reunasta ja loppuisi alatunnisteen reunaan.
   Osioista rakennetut sivut tuovat pehmusteen mukanaan, joten ne jätetään
   rauhaan — siksi :has(). Rajaus body.page:hen jättää artikkelit ja tarinat
   ulkopuolelle: niiden sivupohjassa pehmuste on jo .vml-articlessa. */
body.page .entry-content:not(:has(> [class*="is-style-section-"])) {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* The header bar and the intro are two sections that read as one area: the bar
   drops its bottom padding when an intro follows, and the intro picks it up.
   That is a relationship between siblings, which theme.json cannot express —
   everything else about both lives in their style variations. */
main:has(> .entry-content > [class*="is-style-section-page-intro"]:first-child) > [class*="is-style-section-page-header"] {
	padding-bottom: 0;
}

/* The bar and the content are consecutive blocks in the template, so core gives
   the content a block gap. Sections handle their own spacing with padding, and a
   24px gap here would show the page background between two coloured areas. */
[class*="is-style-section-page-header"] + .entry-content {
	margin-block-start: 0;
}

/* Sivun otsikon asteikko: 1.875rem, 2.25rem md:stä ja 3rem lg:stä.
 *
 * Neljä otsikkoa kulkee samalla asteikolla — sivun otsikko-osio, arkiston
 * otsikko, artikkelin ja tarinan otsikko — joten portaat annetaan kerran.
 * Perhe, paino ja väri tulevat variaatiosta tai kunkin omasta säännöstä;
 * marginaalit eroavat eivätkä siksi ole tässä.
 *
 * Peruskoko kuuluu tänne eikä kunkin oman osion sekaan: arkiston otsikossa se
 * oli kolme luokkaa syvä, voitti nämä mediakyselyt ja pinnasi otsikon 30
 * pikseliin joka leveydellä. */
.vml-archive__title,
.vml-article__title,
.vml-story__title {
	font-size: var(--wp--preset--font-size--section-title);
}

@media (min-width: 768px) {

	[class*="is-style-section-page-header"] :is(h1, h2),
	.vml-archive__title,
	.vml-article__title,
	.vml-story__title {
		font-size: var(--wp--preset--font-size--xx-large);
	}
}

@media (min-width: 1024px) {

	[class*="is-style-section-page-header"] :is(h1, h2),
	.vml-archive__title,
	.vml-article__title,
	.vml-story__title {
		font-size: var(--wp--preset--font-size--xxx-large);
	}
}

/* ------------------------------------------------------------ osioiden otsikot
   Osion oma otsikko on pienempi kuin leipätekstin h2: .section-header__title on
   1.5rem ja md:stä 1.875rem, kun theme.jsonin h2 on 2.25rem. Presettiä
   1.875rem:lle ei ole, koska sitä ei tarvita editorissa. */

/* Osiot joissa SectionHeader saa marginBottom="lg" (3rem): tiimiruudukko,
   linkkiruudukko ja sanakirja. Muualla oletus on 2rem. */
[class*="is-style-section-"].vml-dictionary > h2 {
	margin-block-end: 3rem;
}

[class*="is-style-section-"] > h2 {

	/* .section-header: margin-bottom 2rem. Ilman tätä väli tuli ytimen
	   block-gapista (24 px) ja jäi kahdeksan pikseliä liian pieneksi. */
	margin-block: 0 2rem;
	font-size: 1.5rem;
}

@media (min-width: 768px) {

	[class*="is-style-section-"] > h2 {
		font-size: var(--wp--preset--font-size--section-title);
	}
}

/* _article-page.scss: "Lue myös" -otsikko on 2.5rem irti ruudukosta, ei
   osioiden yleisellä 2rem:llä. Tämä ei mahdu tyylivariaatioon: ydin kirjoittaa
   variaation säännöt :where()-kääröön, joka on nollatarkkuutta ja häviää yllä
   olevalle yleissäännölle. Siksi tässä, ja siksi yleissäännön jälkeen. */
.is-style-section-related > h2 {
	margin-block-end: 2.5rem;
}

/* _media-with-text.scss: the column gap is 2rem, 3rem from md up. The 2rem is
   the block's own blockGap attribute — core computes the column widths from it,
   so a gap set only in CSS makes it size the columns for the wrong number. Only
   the step is left here. */
@media (min-width: 768px) {

	.vml-media-text__grid {
		gap: 3rem;
	}
}

/* --------------------------------------------------------- osioiden rytmi
   .container-wide: max-width 1360px, padding-inline 1.5rem, sm 2rem, lg 3rem.
   Osiotyyli antaa vaakapaddingin kiinteänä, joten responsiivinen osuus
   hoidetaan tässä — muuten osioiden vasen reuna vaihtelee sivulla. */

[class*="is-style-section-"] > :where(.wp-block-group__inner-container, *) {
	margin-inline: auto;
}

/* Nämä ovat osioiden oletukset, eivät pakotteita: aiempi !important ohitti
   myös osiokohtaiset paddingit (esim. CTA-banneri 5/7rem, linkkiruudukko),
   jolloin jokainen osio sai saman 4rem:n riippumatta alkuperäisestä.

   Mobiilin arvot puuttuivat kokonaan, joten osiot olivat ilman pystypaddingia
   alle 768 px:ssä ja sivut noin 300 pikseliä tuotantoa lyhyempiä.
   section-padding(3rem, 4rem) ja .container-wide 1.5rem. */

/* ------------------------------------------------------------ artikkelisivu
   _article-page.scss: otsikko ja meta keskitettyinä 48rem:iin, kuva 64rem
   ja 16:9, sisältö 48rem. Pystypadding 3/4rem -> md 4/6rem. */

/* Alapehmuste on lähteessä artikkelin kääreellä, ei koko sivulla: se jää
   leipätekstin ja alaosion väliin. Meillä ne ovat sisaruksia, joten väli
   tulee alaosion ylämarginaalista — mainille jäisi ylimääräinen 96 px
   alaosion ja alatunnisteen väliin. */
.vml-article {
	padding-block: 3rem 0;
	background: var(--wp--preset--color--white);
}

@media (min-width: 768px) {

	.vml-article { padding-block: 4rem 0; }
}

.vml-article__header { text-align: center; }

.vml-article__header .wp-block-breadcrumbs > ol { justify-content: center; }

/* _article-page.scss: otsikko 1.875rem -> md 2.25rem -> lg 3rem. Sama
   koskee tarinaa (_story-page.scss); ilman tätä tarinan otsikko jäi
   theme.jsonin h1:een eli 3 rem:iin myös puhelimessa.

   Väri on musta eikä liiton tummanvihreä: artikkelisivun otsikolle ja
   "Lue myös" -otsikolle lähde ei anna omaa väriä, joten ne perivät rungon
   mustan. Muut otsikot ovat vihreitä molemmilla, joten yleisväriä ei
   muuteta — vain nämä kaksi komponenttia. */

/* Koko tulee sivun otsikon asteikosta; tässä vain marginaali ja väri. */
.vml-article__title,
.vml-story__title {
	margin-block: 0 1rem;
	color: #000;
}

/* Tarkkuus kahdella luokalla: ydin nollaa flow-lohkon viimeisen lapsen
   alamarginaalin :last-child-säännöllä, joka on yhtä tarkka ja myöhemmin. */
.vml-article__header > .vml-article__meta {
	margin-block: 0 2.5rem;
}

.vml-article__meta {
	gap: 0.5rem;
	color: var(--wp--preset--color--text-secondary);
}

.vml-article__meta p,
.vml-article__meta .wp-block-post-date,
.vml-article__meta .wp-block-site-title {
	margin: 0;
	color: var(--wp--preset--color--text-secondary);
}

.vml-article__divider { opacity: 0.5; }

.vml-article__hero {
	margin-block-end: 3rem;
}

/* Hero rajataan kahdessa vaiheessa kuten Sanityssä: kuvasta otetaan ensin
   hotspotin mukainen 1200x630 (40:21) ikkuna, ja kääre rajaa siitä 16:9
   keskeltä. Yhdellä vaiheella lopputulos on seitsemän prosenttia laajempi
   kuva — hotspot osuu oikein, mutta rajaus on eri. */
.vml-article__hero .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

/* 40:21 on leveämpi kuin 16:9, joten toinen vaihe rajaa sivuilta: kuva
   mitoitetaan korkeuden mukaan ja ylivuoto keskitetään.

   Leveys fyysisenä ominaisuutena ja kahdella luokalla: ytimen
   .wp-block-post-featured-image :where(img) asettaa width: 100%, ja
   loogisen inline-sizen kanssa ratkaisee kirjoitusjärjestys, ei tarkkuus. */
.vml-article__hero .wp-block-post-featured-image img {
	flex: none;
	height: 100%;
	width: auto;
	max-width: none;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	background: #f3f4f6;
}

/* Tarinasivu (_story-page.scss): otsikon alla rooli brändinvihreänä,
   ei päiväystä eikä julkaisijaa — tarina ei ole uutinen. */

.vml-story__title { margin-block-end: 0.5rem; }


/* Sama tarkkuustarve kuin artikkelin metarivillä: ydin nollaa flow-lohkon
   viimeisen lapsen alamarginaalin. */
.vml-article__header > .vml-story__role {
	margin-block: 0 2.5rem;
}

.vml-story__role {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------ alatunniste */

/* _footer.scss: alatunnisteen linkit vaihtavat hoverissa vain väriä —
   alleviivausta ei tule missään. Teeman globaali linkkityyli alleviivaisi,
   joten se nollataan tässä. */
.vml-footer :where(a) {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.vml-footer :where(a):hover { text-decoration: none; }

/* Alarivi tuo oman 3rem ylämarginaalinsa, joten ylaosalle ei tarvita
   alamarginaalia — muuten väli olisi kaksinkertainen. */

/* _footer.scss: __grid on 1 sarake, md:stä 2 ja lg:stä 4. Sarakemäärä ja väli
   ovat lohkon omia attribuutteja; vain kaksi porrasta neljän alla tarvitsee
   säännön, koska ytimen ruudukko valitsee määrän minimileveydestä eikä
   breakpointeista. Sama tilanne kuin avainluvuissa. */
@media (max-width: 767px) {

	.vml-footer__top.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {

	.vml-footer__top.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* _footer.scss: __logo-link on inline-block, jolloin sen alle jää
   perusviivan rako (8 px). Ydin tekee logosta lohkon, joten rako häviäisi ja
   alatunniste jäisi sen verran matalammaksi. */
.vml-footer__brand .wp-block-site-logo {
	display: inline-block;
}

/* _footer.scss: __logo on 5rem korkea ja __logo-link 1.5rem irti tekstistä. */
.vml-footer__brand .wp-block-site-logo img {
	block-size: 5rem;
	inline-size: auto;
	margin-block-end: 1.5rem;
}

/* _footer.scss: __address on 1rem / 1.625 ja 80 %:n valkoinen, __org-name
   medium-painoinen valkoinen puolen remin alamarginaalilla ja sähköposti
   0.75rem irti osoitteesta. */

/* Tarkkuus .vml-footer .vml-footer__brand, koska alatunnisteen yleinen
   tekstiväri (.vml-footer p, ...) on samalla tarkkuudella ja myöhemmin. */
.vml-footer .vml-footer__brand p {
	margin-block: 0;
	line-height: 1.625;
	color: rgb(255 255 255 / 0.8);
}

.vml-footer .vml-footer__brand .vml-footer__org {
	margin-block-end: 0.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--white);
}

.vml-footer .vml-footer__brand p:last-child {
	margin-block-start: 0.75rem;
}

/* Yhteystiedot: sähköpostilinkki ei ole alleviivattu, hover limetti. */
.vml-footer__brand a {
	color: inherit;
	text-decoration: none;
}

.vml-footer__brand a:hover {
	color: var(--wp--preset--color--accent);
}

/* _footer.scss: logo on 5rem korkea. */
.vml-footer .wp-block-site-logo img {
	block-size: 5rem;
	inline-size: auto;
}

/* _footer.scss: alarivi erottuu omalla yläreunaviivallaan, ei erillisellä
   erotinlohkolla — viiva ulottuu koko palstan leveydelle. */

/* _footer.scss: alarivi on mobiilissa pystyssä ja keskitetty, sm:stä rivi.
   Ytimen flex-layout on aina rivi, joten some-kuvakkeet ja lakilinkit
   ahtautuivat puhelimessa samalle riville vasempaan reunaan. */
.vml-footer__bottom {
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid color-mix( in srgb, var(--wp--preset--color--white) 20%, transparent );
}

@media (min-width: 640px) {

	.vml-footer__bottom {
		flex-direction: row;
	}
}

/* Lakisääteiset linkit: pieni koko, vaimennettu valkoinen, ei alleviivausta. */
.vml-footer__legal {
	gap: 0.5rem 1.5rem;
	color: rgb(255 255 255 / 0.6);
}

/* Väri tulee ryhmältä (60 % valkoinen); ilman inheritiä alatunnisteen
   yleinen tekstiväri voittaa ja rivi olisi täysin valkoinen. */
.vml-footer .vml-footer__legal p {
	margin: 0;
	color: inherit;
}

.vml-footer__legal a {
	color: inherit;
	text-decoration: none;
}

.vml-footer__legal a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

/* Alatunnisteen teksti perii aina osion valkoisen värin.
   Ilman tätä prose-väri osuu kappaleisiin ja teksti katoaa tummalle.
   Ei :where() — se on nollaspesifisyys ja häviäisi prose-säännölle. */
.vml-footer p,
.vml-footer li,
.vml-footer h2,
.vml-footer h3,
.vml-footer h4,
.vml-footer address {
	color: var(--wp--preset--color--white);
	max-inline-size: none;
}

/* -------------------------------------------------------------- arkistot */

/* _article-page.scss: kategoriasivulla on yksi valkoinen osio, jonka sisällä
   otsikko on keskitetty 48rem palstaan ja 2.5rem irti listasta. Murupolkua
   ei näytetä — se on vain rakenteisessa datassa. */
.vml-archive__header {
	margin-block-end: 2.5rem;
	text-align: center;
}

/* Arkiston otsikko on samalla kolmiportaisella asteikolla kuin sivun otsikko;
   portaat ja peruskoko annetaan siellä missä sivun otsikonkin. */
.vml-archive__body > .vml-archive__header > .vml-archive__title {
	margin-block: 0;
	text-align: center;
}

.vml-archive { padding-block: 0; }

.vml-archive__title {
	margin-block: 0.5rem 1rem;
}

/* ------------------------------------------------------ sisältötypografia
   _prose.scss: leipätekstin otsikot ovat selvästi pienempiä kuin osioiden
   omat otsikot. theme.jsonin h2 (2.25rem) on osio-otsikon koko; rich textin
   sisällä h2 on 1.5rem, jotta se erottuu väliotsikkona eikä uutena osiona.

   :not([class*="is-style-section-"] *, .is-style-section-hero *) rajaa säännön artikkelin leipätekstiin. Sivut
   renderöityvät myös post-contentin sisällä, joten ilman rajausta jokainen
   osio-otsikko kutistui 1,5 rem:iin (alkuperäinen 1,875 rem). Osioiden sisällä
   oleva rikas teksti saa saman pienennyksen .is-style-section-prosein ja media-textin
   kautta, joten se ei jää tästä paitsi. */

.wp-block-post-content :is(h1, h2, h3, h4):not([class*="is-style-section-"] *, .is-style-section-hero *),
.is-style-section-prose :is(h1, h2, h3, h4),
.wp-block-media-text__content :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--primary-dark);
}

/* _prose.scss: leipätekstin h1 on 2.25rem / 1.1 ja 0.9rem alamarginaali.
   Ilman tätä se sai theme.jsonin sivutason 3rem:n. */
.wp-block-post-content h1:not([class*="is-style-section-"] *, .is-style-section-hero *),
.is-style-section-prose h1,
.vml-media-text__content h1,
.wp-block-media-text__content h1 {
	font-size: 2.25rem;
	line-height: 1.1;
	margin-block: 0 0.9rem;
}

.wp-block-post-content h2:not([class*="is-style-section-"] *, .is-style-section-hero *),
.is-style-section-prose h2,
.wp-block-media-text__content h2 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
	margin-block: 2em 1em;
}

.wp-block-post-content h3:not([class*="is-style-section-"] *, .is-style-section-hero *),
.is-style-section-prose h3,
.wp-block-media-text__content h3 {
	font-size: 1.25rem;
	line-height: 1.4;
	margin-block: 1.6em 0.6em;
}

/* _prose.scss ei anna h4:lle omaa kokoa: se on leipätekstin kokoinen
   (1.0625rem) ja erottuu vain lihavoinnilla. theme.jsonin h4 (1.125rem)
   olisi tässä liian iso. */
.wp-block-post-content h4:not([class*="is-style-section-"] *, .is-style-section-hero *),
.is-style-section-prose h4,
.wp-block-media-text__content h4 {
	font-size: inherit;

	/* _typography.scss: display-fontti kuuluu vain h1-h3:lle, ja h4-h6 ovat
	   bold (700) eivät extrabold. */
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	margin-block: 1.5em 0.5em;
}

/* Ensimmäinen otsikko ei saa ylimarginaalia — se työntäisi osion auki. */
.wp-block-media-text__content > :is(h2, h3, h4):first-child,
.is-style-section-prose > :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

/* Label ja sitä seuraava otsikko luetaan yhtenä yksikkönä. */
.is-style-label + :is(h1, h2, h3, h4),
.is-style-label + .wp-block-heading {
	margin-block-start: 0 !important;
}

/* ------------------------------------------------------------ proosan rytmi
   Kappaleiden ja labelien välit siellä missä tekstiä luetaan: artikkelin
   leipäteksti, osioiden prose-variantti, media-textin tekstipalsta ja
   vaihelohkon runko. Ne ovat neljä eri kontekstia mutta yksi typografia,
   joten sääntö ei mahdu yhteen lohkotiedostoon eikä yhteen variaatioon. */

/* _portabletext.scss nollaa kaikki marginaalit yhteystietolaatikon sisällä
   (h3, p, div): nimi, rooli ja linkit ovat kiinni toisissaan, ja rytmin tekee
   vain __linksin oma 0.25rem. Sääntö on tarkempi kuin ytimen flow-layout ja
   kuin yhteystietoluettelon label-sääntö. */
.is-style-contact-box :is(h3, p, div) {
	margin-block: 0;
}

/* Indent, top margin and prose type come from styles/section variation
   step-body.json; the block gap between the body's own blocks is set on the
   block. Only the button row's extra breathing space is left here. */
.is-style-step-body .wp-block-buttons {
	padding-block-start: 0.5rem;
}

/* Kappaleiden väli proosassa on 1.25em (_prose.scss), ei ytimen block-gapin
   24 px. Pitkillä sivuilla ero kertyy sadoiksi pikseleiksi. */
.vml-article .wp-block-post-content > p,
.is-style-section-prose > p,
.wp-block-media-text__content > p,
.vml-media-text__content > p,
.is-style-step-body > p {
	margin-block: 1.25em;
}

/* _prose.scss: label on tiiviisti kiinni seuraavassa otsikossa (0.25rem). */
.is-style-section-prose > .is-style-label,
.wp-block-media-text__content > .is-style-label,
.vml-article .wp-block-post-content > .is-style-label {
	margin-block: 0 0.25rem;
}

/* --------------------------------------------------------- listat proosassa
   _prose.scss: ul/ol padding-left 1.625em ja marginaali 1.25em, li 0.5em.
   Ytimen oletukset olivat 40px sisennys, 24px ylämarginaali ja kohdille ei
   väliä lainkaan — pitkillä listoilla ero kertyy. */

.vml-article .wp-block-post-content :is(ul, ol),
.is-style-section-prose :is(ul, ol),
.wp-block-media-text__content :is(ul, ol),
.is-style-step-body :is(ul, ol),
.wp-block-details > :is(ul, ol),
.is-style-colored-box :is(ul, ol) {
	margin-block: 1.25em;
	padding-inline-start: 1.625em;
}

.vml-article .wp-block-post-content :is(ul, ol) > li,
.is-style-section-prose :is(ul, ol) > li,
.wp-block-media-text__content :is(ul, ol) > li,
.is-style-step-body :is(ul, ol) > li,
.wp-block-details > :is(ul, ol) > li,
.is-style-colored-box :is(ul, ol) > li {
	margin-block: 0.5em;
}

/* _portabletext.scss: __caption on 0.75rem kuvan alla eikä sen alla ole
   omaa väliä — ytimen figcaptionilla on 0.5em/1em. Teksti alkaa vasemmasta
   reunasta (.video__caption), kun ydin keskittää kuvatekstit. */
.wp-block-embed figcaption {
	margin-block: 0.75rem 0;
	text-align: start;
}

/* _portabletext.scss: upotettu video ja kuvaruudukko ovat 2.5rem irti
   tekstistä, eivät ytimen block-gapin 24 px. */
.vml-article .wp-block-post-content > .wp-block-embed,
.wp-block-post-content > .wp-block-embed,
.is-style-section-prose > .wp-block-embed,
.vml-article .wp-block-post-content > .wp-block-gallery,
.wp-block-post-content > .wp-block-gallery,
.is-style-section-prose > .wp-block-gallery {
	margin-block: 2.5rem;
}

/* _prose.scss: lihavointi on tummanvihreä ja semibold, ei leipätekstin
   harmaa ja bold. */
.vml-article .wp-block-post-content strong,
.wp-block-post-content strong,
.is-style-section-prose strong,
.wp-block-media-text__content strong,
.vml-media-text__content strong,
.is-style-step-body strong,
.is-style-colored-box strong {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

/* _prose.scss päättää lohkon reunanollaukseen: teksti alkaa ja päättyy
   säiliön reunaan. Sen on oltava kappale- ja listasääntöjen jälkeen, koska
   ne ovat yhtä tarkkoja — aiemmin nollaus jäi alle ja jokainen osio kasvoi
   turhaan 42,5 pikseliä. */
.vml-article .wp-block-post-content > :first-child,
.wp-block-post-content > :first-child,
.is-style-section-prose > :first-child,
.wp-block-media-text__content > :first-child,
.vml-media-text__content > :first-child,
.is-style-step-body > :first-child,
.is-style-colored-box > :first-child,
[class*="is-style-section-page-intro"] > :first-child,
[class*="is-style-section-page-intro"] > .wp-block-group:first-child > :first-child {
	margin-block-start: 0;
}

/* Molemmat tarvitaan, vaikka jälkimmäinen osuu kaikkeen mihin ensimmäinenkin.
   core-image.css antaa kuvaan päättyvälle artikkelille poikkeuksen
   (.vml-article ... figure:last-child { margin-block-end: 2em }), joka on
   näiden kahden välissä tarkkuudessa. Pelkkä lyhyt valitsin häviää sille ja
   sivu kasvaa 21 pikseliä. Mitattu. */
.vml-article .wp-block-post-content > :last-child,
.wp-block-post-content > :last-child,
.is-style-section-prose > :last-child,
.wp-block-media-text__content > :last-child,
.vml-media-text__content > :last-child,
.is-style-step-body > :last-child,
.is-style-colored-box > :last-child,
[class*="is-style-section-page-intro"] > :last-child,
[class*="is-style-section-page-intro"] > .wp-block-group:last-child > :last-child {
	margin-block-end: 0;
}