/* Pixelaut One Page – tyylit, joita theme.json ei kata.
   Värit ja fontit tulevat theme.jsonista (--wp--preset--...), joten
   värivalinnan vaihto editorissa päivittää myös nämä. */

/* ---------- Ylätunniste ---------- */
.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--viiva);
}
/* Taustan sumennus on pseudo-elementissä eikä itse yläpalkissa: backdrop-filter
   tekisi yläpalkista "kiinteiden" lasten viitekehyksen, ja mobiilivalikon
   koko ruudun peittävä kerros jäisi yläpalkin korkuiseksi. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--pohja) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
.site-header .wp-block-site-title a:hover { color: var(--wp--preset--color--paa); }
.site-header .wp-block-navigation-item__content { padding: 0.35rem 0; position: relative; }
.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--korostus);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.site-header .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation-item__content:focus-visible::after { transform: scaleX(1); }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
}
/* Mobiilivalikko: reunukset ja tasaus, jotta tekstit eivät ole kiinni reunassa */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem var(--wp--preset--spacing--40, 1.25rem) 2rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0;
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 1.25rem;
	padding-top: 2.5rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1rem;
	right: var(--wp--preset--spacing--40, 1.25rem);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Iso kuvakaruselli (hero) ----------
   Editorissa galleria näkyy tavallisena kuvaruudukkona, jotta kuvien
   lisääminen ja vaihtaminen on helppoa. Julkisella sivulla kuvat
   asettuvat taustaksi ja vaihtuvat. */
.is-style-hero-karuselli {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0 !important;
	max-width: none !important;
	width: 100%;
	display: block;
	background: var(--wp--preset--color--tumma);
}
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	width: 100% !important;
	height: 100%;
	opacity: 0;
	transition: opacity 1.6s ease;
}
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery > .wp-block-image:first-child,
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery > .wp-block-image.on-aktiivinen { opacity: 1; }
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli.karuselli-valmis > .wp-block-gallery > .wp-block-image:first-child:not(.on-aktiivinen) { opacity: 0; }
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 8s ease-out;
}
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery .on-aktiivinen img { transform: scale(1); }
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery figcaption { display: none; }
:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--wp--preset--color--tumma) 30%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--tumma) 15%, transparent) 35%,
		color-mix(in srgb, var(--wp--preset--color--tumma) 88%, transparent) 100%);
}
@media (prefers-reduced-motion: reduce) {
	:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery img { transform: none; transition: none; }
	:where(body:not(.editor-styles-wrapper)) .is-style-hero-karuselli > .wp-block-gallery > .wp-block-image { transition: none; }
}
.editor-styles-wrapper .is-style-hero-karuselli > .wp-block-gallery {
	outline: 2px dashed color-mix(in srgb, var(--wp--preset--color--korostus) 70%, transparent);
	outline-offset: 6px;
}
.is-style-hero-karuselli h1 { text-wrap: balance; max-width: 16ch; }

/* ---------- Otsakkeet ja kortit ---------- */
.is-style-ylaotsake {
	font-family: var(--wp--preset--font-family--otsikko) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	line-height: 1.4 !important;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.is-style-ylaotsake::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	background: var(--wp--preset--color--korostus);
	flex: none;
}
.has-text-align-center.is-style-ylaotsake { justify-content: center; }

.is-style-kortti {
	background: var(--wp--preset--color--pinta);
	border: 1px solid var(--wp--preset--color--viiva);
	border-radius: 6px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.is-style-kortti:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(0 0 0 / .08); }
.teema-numero {
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 900;
	font-size: 2.75rem;
	line-height: 1;
	color: var(--wp--preset--color--paa);
	margin: 0;
}

/* Esittelykuva */
.esittely-kuva img { border-radius: 6px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.esittely-kuva { position: relative; }
.esittely-kuva::after {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 3px solid var(--wp--preset--color--korostus);
	border-radius: 6px;
	z-index: -1;
}
.esittely-osio { isolation: isolate; }

/* ---------- Julkaisut ---------- */
.julkaisu-kortti { height: 100%; }
.julkaisu-kortti .wp-block-post-featured-image { overflow: hidden; border-radius: 6px; margin-bottom: 1rem; }
.julkaisu-kortti .wp-block-post-featured-image img { transition: transform .5s ease; }
.julkaisu-kortti:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.julkaisu-kortti .wp-block-post-title a:hover { color: var(--wp--preset--color--paa); text-decoration: underline; }
.wp-block-query-pagination { font-weight: 600; }

/* ---------- Lainaus/iskulause-osio ---------- */
.iskulause blockquote, .iskulause p { text-wrap: balance; }

/* ---------- Yhteydenottolomake ---------- */
.pixelaut-lomake { display: grid; gap: 1rem; }
.pixelaut-lomake label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.pixelaut-lomake input[type="text"],
.pixelaut-lomake input[type="email"],
.pixelaut-lomake textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--wp--preset--color--teksti);
	background: var(--wp--preset--color--pinta);
	border: 1.5px solid #8A93A0;
	border-radius: 6px;
	padding: 0.8rem 0.9rem;
}
.pixelaut-lomake textarea { min-height: 9rem; resize: vertical; }
.pixelaut-lomake input:focus,
.pixelaut-lomake textarea:focus {
	outline: 3px solid var(--wp--preset--color--korostus);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--paa);
}
.pixelaut-lomake .lomake-suostumus { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--wp--preset--font-size--pieni); }
.pixelaut-lomake .lomake-suostumus input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.pixelaut-lomake .lomake-suostumus label { font-weight: 400; margin: 0; }
.pixelaut-lomake button {
	justify-self: start;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 700;
	font-size: 1rem;
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.8rem;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti);
}
.pixelaut-lomake button:hover { background: var(--wp--preset--color--teksti); color: var(--wp--preset--color--pinta); }
.pixelaut-lomake button:focus-visible { outline: 3px solid var(--wp--preset--color--korostus); outline-offset: 3px; }
.lomake-hunaja { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lomake-ilmoitus { padding: 1rem 1.2rem; border-radius: 6px; font-weight: 600; margin-bottom: 1rem; }
.lomake-ilmoitus.on-ok { background: #E3F2E6; color: #14532D; border: 1px solid #9BCFA6; }
.lomake-ilmoitus.on-virhe { background: #FBE7E6; color: #7F1D1D; border: 1px solid #E8A9A5; }

/* Tumma osio: lomakkeen kentät ja linkit luettavina */
.has-tumma-background-color .pixelaut-lomake label,
.has-paa-background-color .pixelaut-lomake label { color: inherit; }
.has-tumma-background-color a:where(:not(.wp-element-button)),
.has-paa-background-color a:where(:not(.wp-element-button)) { color: inherit; }

/* ---------- Alatunniste ---------- */
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--wp--preset--color--korostus); }
.site-footer .wp-block-social-links .wp-social-link { background: color-mix(in srgb, var(--wp--preset--color--pinta) 12%, transparent); color: var(--wp--preset--color--pinta); }

/* ---------- Artikkeli ---------- */
.artikkeli-kuva img { border-radius: 6px; }
.wp-block-post-content > p:first-child { font-size: var(--wp--preset--font-size--iso); }

/* ---------- Etusivun osiot ---------- */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.is-style-hero-karuselli { display: flex; flex-direction: column; justify-content: flex-end; }
.is-style-hero-karuselli > .wp-block-group.alignwide { width: 100%; }
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > main { margin-block-start: 0; }

@media (max-width: 781px) {
	.esittely-kuva { margin-right: 0.75rem; margin-bottom: 1.75rem; }
	.esittely-kuva::after { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
}

/* Editorissa hero saa tumman taustan, jotta valkoinen teksti näkyy. */
.editor-styles-wrapper .is-style-hero-karuselli { background: var(--wp--preset--color--tumma); }

/* Muokkaa-nappi julkaisukorteissa (vain editorissa) */
.julkaisu-kortti { position: relative; }
.kortti-muokkaa {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti) !important;
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgb(0 0 0 / .25);
}
.kortti-muokkaa:hover,
.kortti-muokkaa:focus-visible { background: var(--wp--preset--color--teksti); color: var(--wp--preset--color--pinta) !important; }
.kortti-muokkaa:focus-visible { outline: 3px solid var(--wp--preset--color--korostus); outline-offset: 2px; }

/* =====================================================================
   Pohjan lisäosiot. Kaikki värit tulevat theme.jsonin paletista, joten
   väriteeman vaihto (Ulkoasu → Editori → Tyylit) päivittää myös nämä.
   ===================================================================== */

/* ---------- Valikko: nykyinen sivu ---------- */
.site-header .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Korostettu kortti (esim. suosituin hinta) ---------- */
.is-style-korostettu {
	background: var(--wp--preset--color--tumma);
	color: var(--wp--preset--color--pinta);
	border-radius: 6px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	box-shadow: 0 18px 40px rgb(0 0 0 / .18);
	position: relative;
}
.is-style-korostettu a:where(:not(.wp-element-button)) { color: inherit; }
.is-style-kortti, .is-style-korostettu { display: flex; flex-direction: column; }
.is-style-kortti > .wp-block-buttons:last-child,
.is-style-korostettu > .wp-block-buttons:last-child { margin-top: auto; padding-top: 1rem; }

/* ---------- Kuva: kehys ---------- */
.is-style-kehys { position: relative; isolation: isolate; }
.is-style-kehys img { border-radius: 6px; }
.is-style-kehys::after {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 3px solid var(--wp--preset--color--korostus);
	border-radius: 6px;
	z-index: -1;
}
@media (max-width: 781px) {
	.is-style-kehys { margin-right: 0.75rem; margin-bottom: 1.75rem; }
	.is-style-kehys::after { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
}

/* ---------- Väkäslista ---------- */
.is-style-valinnat { list-style: none; padding-left: 0; }
.is-style-valinnat li { position: relative; padding-left: 1.9rem; margin-bottom: 0.55rem; }
.is-style-valinnat li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.38em;
	width: 0.45rem;
	height: 0.8rem;
	border: solid var(--wp--preset--color--paa);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.is-style-korostettu .is-style-valinnat li::before,
.has-paa-background-color .is-style-valinnat li::before,
.has-tumma-background-color .is-style-valinnat li::before { border-color: var(--wp--preset--color--korostus); }

/* ---------- Usein kysytyt (Details-lohko) ---------- */
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--iso);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti);
	font-size: 1.25rem;
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 0.75rem; color: var(--wp--preset--color--himmea); }

/* ---------- Luvut ---------- */
.pxl-luku {
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 900;
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--wp--preset--color--korostus);
}

/* ---------- Hinta ---------- */
.pxl-hinta {
	font-family: var(--wp--preset--font-family--otsikko);
	font-weight: 900;
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	margin: 0.5rem 0;
}
.pxl-hinta small { font-size: 1rem; font-weight: 600; opacity: .7; }
.pxl-merkki {
	position: absolute;
	top: -0.85rem;
	right: 1.25rem;
	margin: 0 !important;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti);
	font-family: var(--wp--preset--font-family--otsikko);
	font-size: 0.8rem !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
}

/* ---------- Asiakaspalaute ---------- */
.pxl-palaute .wp-block-quote { border: 0; padding: 0; margin: 0; font-style: normal; font-size: var(--wp--preset--font-size--normaali); }
.pxl-palaute .wp-block-quote p::before { content: "”"; display: block; font-family: var(--wp--preset--font-family--otsikko); font-size: 3.5rem; line-height: 0.6; color: var(--wp--preset--color--korostus); margin-bottom: 0.5rem; }
.pxl-palaute .wp-block-quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--wp--preset--color--teksti); }

/* ---------- Henkilöt ---------- */
.pxl-henkilo .wp-block-image img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 9rem; height: 9rem; }
.pxl-henkilo .wp-block-image { margin-bottom: 1rem; }

/* ---------- Kuvagalleria ---------- */
.pxl-galleria.wp-block-gallery img { border-radius: 6px; }

/* ---------- Kuvaosion kuva (hero-jaettu) ---------- */
.pxl-pyorea img { border-radius: 6px; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---------- Sivun yläosa (alasivut) ---------- */
.pxl-sivun-yla { border-bottom: 1px solid var(--wp--preset--color--viiva); }
.pxl-sivun-yla .wp-block-post-title { max-width: 20ch; text-wrap: balance; }

/* ---------- Ilmoituspalkki (moduuli) ---------- */
.pxl-ilmoitus {
	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.6rem 3rem 0.6rem 1rem;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--pieni);
	text-align: center;
}
.pxl-ilmoitus[hidden] { display: none; }
.pxl-ilmoitus p { margin: 0; }
.pxl-ilmoitus a { color: inherit; margin-left: 0.5rem; }
.pxl-ilmoitus-sulje {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.pxl-ilmoitus-sulje:hover { background: rgb(0 0 0 / .08); }
.pxl-ilmoitus-sulje:focus-visible { outline: 3px solid var(--wp--preset--color--teksti); outline-offset: 1px; }

/* ---------- Takaisin ylös (moduuli) ---------- */
.pxl-ylos {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 40;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--korostus);
	color: var(--wp--preset--color--teksti) !important;
	box-shadow: 0 8px 24px rgb(0 0 0 / .25);
	transition: transform .2s ease, background .2s ease;
}
.pxl-ylos[hidden] { display: none; }
.pxl-ylos:hover { transform: translateY(-3px); background: var(--wp--preset--color--pinta); }
.pxl-ylos:focus-visible { outline: 3px solid var(--wp--preset--color--teksti); outline-offset: 3px; }

/* ---------- Ylätunnisteen nappi ---------- */
.pxl-yla-nappi .wp-block-button__link { padding: 0.6rem 1.2rem; font-size: 0.9375rem; }
@media (max-width: 600px) { .pxl-yla-nappi { display: none !important; } }
.site-header .wp-block-navigation { flex: 1; }

/* ---------- Tekstisivut ja artikkelit: maltillisemmat väliotsikot ---------- */
.pxl-teksti h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 2.5rem; }
.pxl-teksti h3 { font-size: var(--wp--preset--font-size--iso); margin-top: 2rem; }

/* =====================================================================
   Pixelaut – oma ilme ja liike
   Pohjana Pixelaut One Page. Alla vain se, mikä erottaa tämän sivuston
   pohjasta: fontit, logo, yläosan selainkuva ja vierityksen liike.
   ===================================================================== */

/* ---------- Typografia ---------- */
.is-style-ylaotsake {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.76rem !important;
	font-weight: 500 !important;
	color: color-mix(in srgb, var(--wp--preset--color--korostus) 72%, var(--wp--preset--color--teksti));
	gap: 0.6rem;
}
.is-style-ylaotsake::before {
	width: 0.5em;
	height: 0.5em;
	border-radius: 1px;
	transform: rotate(45deg);
}
.has-paa-background-color .is-style-ylaotsake,
.has-tumma-background-color .is-style-ylaotsake,
.is-style-korostettu .is-style-ylaotsake { color: var(--wp--preset--color--korostus); }
h1, h2, h3 { text-wrap: balance; }
.wp-block-details summary { font-weight: 600; }
.pxl-hinta, .teema-numero { font-weight: 600; }
.pxl-hinta small { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; }
.teema-numero { font-size: 1rem; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--korostus); }

/* ---------- Logo: timantti sivuston nimen edessä ---------- */
.pxl-logo a { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; }
.pxl-logo a::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 7px;
	background: var(--wp--preset--color--paa);
}
.pxl-logo a::after {
	content: "";
	position: absolute;
	left: 0.5625rem;
	top: calc(50% - 0.3125rem);
	width: 0.625rem;
	height: 0.625rem;
	background: var(--wp--preset--color--korostus);
	transform: rotate(45deg);
}
.site-footer .pxl-logo a::before { background: color-mix(in srgb, var(--wp--preset--color--pinta) 14%, transparent); }

/* ---------- Napit ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--viiva);
	color: var(--wp--preset--color--teksti);
	background: transparent;
	padding: calc(0.85rem - 1px) calc(1.6rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--himmea); background: transparent; color: var(--wp--preset--color--teksti); }
.wp-element-button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.wp-block-button:not(.is-style-outline) > .wp-element-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35); }
.pixelaut-lomake button { border-radius: 8px; font-family: var(--wp--preset--font-family--leipa); font-weight: 600; }
.pixelaut-lomake button:hover { background: var(--wp--preset--color--pinta); color: var(--wp--preset--color--teksti); }

/* ---------- Kortit ---------- */
.is-style-kortti, .is-style-korostettu { border-radius: 12px; }
.is-style-kortti { position: relative; }
.pxl-kortit .pxl-merkki { top: 1.25rem; right: 1.25rem; font-family: var(--wp--preset--font-family--mono); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.75rem !important; }
.pxl-vaihe { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--himmea); margin: 0 0 1.5rem; padding-right: 6.5rem; }
.pxl-kortti-tulossa { border-style: dashed; background: transparent; }
.pxl-kortti-tulossa .pxl-merkki { background: var(--wp--preset--color--viiva); }
.pxl-sopii { margin-top: auto !important; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--viiva); font-weight: 600; }
.pxl-luovutus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem 2.5rem; align-items: start; }
.pxl-luovutus > .wp-block-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0; }
.pxl-luovutus > p { grid-column: 1 / -1; opacity: .8; margin: 0.5rem 0 0; }
@media (max-width: 781px) { .pxl-luovutus, .pxl-luovutus > .wp-block-list { grid-template-columns: minmax(0, 1fr); } }
.pxl-seuraava { gap: 1.5rem; }
.pxl-seuraava h3 { margin: 0 0 0.35rem; }
.pxl-seuraava p { margin: 0; }

/* Tekijä */
.pxl-tekija { height: auto; }
@media (min-width: 782px) { .pxl-tekija { position: sticky; top: 6.5rem; } }
.pxl-tekija h3 { margin: 1.25rem 0 0.25rem; }
.pxl-tekija p { margin: 0; opacity: .85; }
.pxl-tekija-merkki {
	width: 4.5rem; height: 4.5rem; border-radius: 12px; display: grid; place-items: center;
	background: var(--wp--preset--color--korostus); color: var(--wp--preset--color--teksti);
	font-family: var(--wp--preset--font-family--otsikko); font-size: 2.25rem; font-weight: 600; opacity: 1 !important;
}
.pxl-tagit { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem !important; }
.pxl-tagit span { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--pinta) 25%, transparent); }

/* Demo-nauha */
.pxl-koodi {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	line-height: 2;
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--pinta) 18%, transparent);
	color: var(--wp--preset--color--korostus);
}

/* ---------- Yläosa ja selainkuva ---------- */
.pxl-hero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--70); }
.pxl-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 15ch; }
.pxl-luottamus { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--pieni); color: var(--wp--preset--color--himmea); }
.pxl-selain {
	background: var(--wp--preset--color--pinta);
	border: 1px solid var(--wp--preset--color--viiva);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 30px 60px -24px rgb(19 34 25 / .35);
	overflow: hidden;
	transform: rotate(-1.5deg);
}
.pxl-selain-palkki {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--viiva);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--himmea);
}
.pxl-selain-palkki::before {
	content: "";
	width: 2.4rem;
	height: 0.6rem;
	flex: none;
	background: radial-gradient(circle at 0.3rem 50%, #E06C5C 0.28rem, transparent 0.3rem), radial-gradient(circle at 1.2rem 50%, #E7B94C 0.28rem, transparent 0.3rem), radial-gradient(circle at 2.1rem 50%, #6DBB76 0.28rem, transparent 0.3rem);
}
.pxl-selain-runko { padding: 1rem; display: grid; gap: 0.75rem; }
.pxl-selain-runko > * { margin: 0 !important; }
.pxl-mock-hero {
	min-height: 10rem;
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	align-items: flex-end;
	color: var(--wp--preset--color--pinta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	background:
		linear-gradient(160deg, transparent 55%, rgb(0 0 0 / .25)),
		radial-gradient(120% 90% at 85% 10%, var(--wp--preset--color--korostus) 0 18%, transparent 19%),
		var(--wp--preset--color--paa);
}
.pxl-mock-rivi {
	padding-top: 4.25rem;
	position: relative;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--himmea);
}
.pxl-mock-rivi::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3.5rem;
	background:
		linear-gradient(var(--wp--preset--color--pohja), var(--wp--preset--color--pohja)) 0 0 / 31.5% 100% no-repeat,
		linear-gradient(var(--wp--preset--color--pohja), var(--wp--preset--color--pohja)) 50% 0 / 31.5% 100% no-repeat,
		linear-gradient(var(--wp--preset--color--pohja), var(--wp--preset--color--pohja)) 100% 0 / 31.5% 100% no-repeat;
	border-radius: 6px;
}
.pxl-mock-rivi strong { color: var(--wp--preset--color--korostus); font-weight: 500; }

/* ---------- LIIKE ----------------------------------------------------
   1) Sivulle tultaessa yläosan tekstit nousevat porrastetusti esiin.
   2) Vieritettäessä yläosa jää paikalleen, loittonee ja himmenee, ja
      seuraava osio liukuu sen päälle pyöristettynä "korttina".
   3) Muut osiot nousevat esiin, kun ne tulevat näkyviin (liike.js).
   Kaikki liike pois, jos käyttäjä on valinnut "vähennä liikettä".
   Editorissa (editor-styles-wrapper) liikettä ei ole.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	/* 1) Sisääntulo */
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-teksti > *,
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-kuva {
		animation: pxl-nouse .9s cubic-bezier(.2, .7, .2, 1) both;
	}
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-teksti > :nth-child(2) { animation-delay: .08s; }
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-teksti > :nth-child(3) { animation-delay: .16s; }
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-teksti > :nth-child(4) { animation-delay: .24s; }
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-teksti > :nth-child(5) { animation-delay: .32s; }
	:where(body:not(.editor-styles-wrapper)) .pxl-hero-kuva { animation-name: pxl-kaanto; animation-duration: 1.2s; animation-delay: .2s; }

	/* 2) Yläosa paikallaan, seuraavat osiot liukuvat päälle.
	      Tarttumiskohta (top) lasketaan liike.js:ssä, jotta myös
	      näyttöä korkeampi yläosa näkyy kokonaan ennen kuin se jää alle. */
	.pxl-liike .pxl-hero {
		position: sticky;
		top: var(--pxl-hero-yla, 0px);
		z-index: 0;
	}
	.pxl-liike .pxl-hero ~ * {
		position: relative;
		z-index: 1;
	}
	.pxl-liike .pxl-hero ~ :not(.has-background) { background: var(--wp--preset--color--pohja); }
	.pxl-liike .pxl-hero + * {
		border-radius: clamp(18px, 3vw, 36px) clamp(18px, 3vw, 36px) 0 0;
		box-shadow: 0 -24px 60px -20px rgb(19 34 25 / .25);
	}

	@supports (animation-timeline: scroll()) {
		.pxl-liike .pxl-hero-sisalto {
			animation: pxl-loittonee linear both;
			animation-timeline: scroll(root);
			animation-range: var(--pxl-hero-alku, 0px) calc(var(--pxl-hero-alku, 0px) + 85vh);
			transform-origin: 50% 0;
		}
		.pxl-liike .pxl-hero-kuva .pxl-selain {
			animation: pxl-kallistuu linear both;
			animation-timeline: scroll(root);
			animation-range: var(--pxl-hero-alku, 0px) calc(var(--pxl-hero-alku, 0px) + 85vh);
		}
	}

	/* 3) Osiot esiin näkyviin tullessa. Luokat lisää liike.js, joten
	      ilman JavaScriptiä kaikki näkyy normaalisti. */
	.pxl-liike .pxl-esiin > *,
	.pxl-liike .pxl-esiin > .wp-block-group > *,
	.pxl-liike .pxl-esiin .wp-block-columns > .wp-block-column {
		opacity: 0;
		transform: translateY(42px);
		transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
	}
	.pxl-liike .pxl-esiin .wp-block-columns > .wp-block-column { transform: translateY(64px) scale(.97); }
	.pxl-liike .pxl-esiin .wp-block-columns > .wp-block-column:nth-child(2) { transition-delay: .1s; }
	.pxl-liike .pxl-esiin .wp-block-columns > .wp-block-column:nth-child(3) { transition-delay: .2s; }
	.pxl-liike .pxl-esiin .wp-block-columns > .wp-block-column:nth-child(4) { transition-delay: .3s; }
	.pxl-liike .pxl-esiin > :nth-child(2), .pxl-liike .pxl-esiin > .wp-block-group > :nth-child(2) { transition-delay: .06s; }
	.pxl-liike .pxl-esiin > :nth-child(3), .pxl-liike .pxl-esiin > .wp-block-group > :nth-child(3) { transition-delay: .12s; }
	.pxl-liike .pxl-esiin > :nth-child(n+4), .pxl-liike .pxl-esiin > .wp-block-group > :nth-child(n+4) { transition-delay: .18s; }
	.pxl-liike .pxl-esiin.on-nakyvissa > *,
	.pxl-liike .pxl-esiin.on-nakyvissa > .wp-block-group > *,
	.pxl-liike .pxl-esiin.on-nakyvissa .wp-block-columns > .wp-block-column {
		opacity: 1;
		transform: none;
	}
	/* Sisäkkäiset sarakkeet ja ryhmät eivät animoidu kahdesti. */
	.pxl-liike .pxl-esiin > .wp-block-columns,
	.pxl-liike .pxl-esiin > .wp-block-group:has(> .wp-block-columns) { opacity: 1; transform: none; }
}

@keyframes pxl-nouse {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
@keyframes pxl-kaanto {
	from { opacity: 0; transform: translateY(40px) rotate(4deg) scale(.96); }
	to { opacity: 1; transform: none; }
}
@keyframes pxl-loittonee {
	to { transform: scale(.9) translateY(-3%); opacity: .15; filter: blur(3px); }
}
@keyframes pxl-kallistuu {
	to { transform: rotate(-6deg) translateY(-14%) scale(1.04); }
}