/* =========================================================================
   MBO – teeman ulkoasu
   Värit, fonttikoot ja välistykset tulevat theme.json:sta muuttujina
   (--wp--preset--*). Täällä on vain rakenne ja komponentit.
   ========================================================================= */

:root {
	--mbo-gutter: clamp(1.25rem, 5vw, 3rem);
	--mbo-header-h: 4.5rem;
	--mbo-radius: 14px;
	--mbo-radius-lg: 22px;
	--mbo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mbo-speed: 0.25s;
}

@media (min-width: 900px) {
	:root {
		--mbo-header-h: 5.25rem;
	}
}

/* -------------------------------------------------------------- Perusta */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mbo-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--light);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Alapalkki pysyy ruudun alalaidassa myös lyhyillä sivuilla. */
.mbo-main {
	flex: 1 0 auto;
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue-light);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.mbo-skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	border-radius: 0 0 var(--mbo-radius) var(--mbo-radius);
	text-decoration: none;
	transition: top var(--mbo-speed) var(--mbo-ease);
}

.mbo-skip:focus {
	top: 0;
}

.mbo-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

/* Suomen pitkät yhdyssanat: tavutus mieluummin kuin katkaisu keskeltä sanaa. */
:where(h1, h2, h3, h4, h5, h6) {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------- Napit */

.mbo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.72rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--mbo-speed) var(--mbo-ease),
		border-color var(--mbo-speed) var(--mbo-ease),
		color var(--mbo-speed) var(--mbo-ease),
		transform var(--mbo-speed) var(--mbo-ease);
}

.mbo-btn:hover {
	transform: translateY(-1px);
}

.mbo-btn--solid {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--ink);
}

.mbo-btn--solid:hover,
.mbo-btn--solid:focus-visible {
	background: var(--wp--preset--color--blue-light);
	color: var(--wp--preset--color--ink);
}

.mbo-btn--ghost {
	background: transparent;
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--white);
}

.mbo-btn--ghost:hover,
.mbo-btn--ghost:focus-visible {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue-light);
}

/* ------------------------------------------------------------ Yläpalkki */

.mbo-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Kirjautuneen käyttäjän hallintapalkki ei saa peittää yläpalkkia. */
.admin-bar .mbo-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mbo-header {
		top: 0;
	}
}

.mbo-header--minimal {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
	backdrop-filter: none;
	border-bottom: 0;
}

.mbo-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--mbo-header-h);
	padding-inline: var(--mbo-gutter);
	max-width: 1560px;
	margin-inline: auto;
}

.mbo-header__brand {
	display: flex;
	align-items: center;
	flex: none;
	margin-right: auto;
}

/* Kiinteä korkeus ja max-width:none — muuten kuvan leveys jää flex-asettelussa
   kehämäiseen riippuvuuteen linkin leveyden kanssa ja kutistuu nollaan. */
.mbo-header__brand img,
.mbo-header__brand .custom-logo {
	display: block;
	height: 2.4rem;
	width: auto;
	max-width: none;
}

.mbo-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.mbo-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

/* ------------------------------------------------------------ Valikko */

.mbo-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-nav__list a {
	display: block;
	padding: 0.4rem 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--light);
	text-decoration: none;
	position: relative;
	transition: color var(--mbo-speed) var(--mbo-ease);
}

.mbo-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--blue);
	transition: right var(--mbo-speed) var(--mbo-ease);
}

.mbo-nav__list a:hover,
.mbo-nav__list .current-menu-item > a {
	color: var(--wp--preset--color--white);
}

.mbo-nav__list a:hover::after,
.mbo-nav__list .current-menu-item > a::after {
	right: 0;
}

.mbo-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	order: 3;
}

.mbo-burger__box {
	position: relative;
	display: block;
	width: 1.1rem;
	height: 0.75rem;
}

.mbo-burger__bar,
.mbo-burger__bar::before,
.mbo-burger__bar::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--mbo-speed) var(--mbo-ease), opacity var(--mbo-speed) var(--mbo-ease);
}

.mbo-burger__bar {
	top: 50%;
	transform: translateY(-50%);
}

.mbo-burger__bar::before,
.mbo-burger__bar::after {
	content: "";
}

.mbo-burger__bar::before {
	top: -0.375rem;
}

.mbo-burger__bar::after {
	top: 0.375rem;
}

.mbo-burger[aria-expanded="true"] .mbo-burger__bar {
	background: transparent;
}

.mbo-burger[aria-expanded="true"] .mbo-burger__bar::before {
	top: 0;
	transform: rotate(45deg);
}

.mbo-burger[aria-expanded="true"] .mbo-burger__bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.mbo-nav__cta {
	display: none;
}

@media (max-width: 899px) {
	.mbo-burger {
		display: inline-flex;
	}

	.mbo-nav__cta {
		display: grid;
		gap: 0.6rem;
		margin-top: 1.25rem;
	}

	.mbo-nav__cta .mbo-btn {
		width: 100%;
	}

	.mbo-nav {
		position: fixed;
		inset: var(--mbo-header-h) 0 auto;
		background: var(--wp--preset--color--ink-2);
		border-bottom: 1px solid var(--wp--preset--color--line);
		padding: var(--mbo-gutter);
		display: none;
	}

	.mbo-nav.is-open {
		display: block;
	}

	.mbo-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.mbo-nav__list li + li {
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.mbo-nav__list a {
		padding: 1rem 0;
		font-size: 1.15rem;
	}

	.mbo-nav__list a::after {
		display: none;
	}

	/* Alleviivaus on piilossa mobiilissa, joten nykyinen sivu erottuu värillä. */
	.mbo-nav__list .current-menu-item > a {
		color: var(--wp--preset--color--blue);
	}
}

@media (max-width: 599px) {
	.mbo-btn--phone span {
		display: none;
	}

	.mbo-btn--phone {
		padding-inline: 0.85rem;
	}
}

/* Mobiilissa yläpalkkiin ei mahdu logo, puhelin, valikkonappi ja CTA rinnakkain.
   Varausnappi siirtyy valikkoon ja etusivun läpinäkyvä palkki muuttuu
   tavalliseksi — muuten se jää hallintapalkin alle ja peittää paneelin tekstin. */
@media (max-width: 780px) {
	.mbo-header__inner {
		gap: 0.5rem;
		padding-inline: 1rem;
	}

	.mbo-header__brand img,
	.mbo-header__brand .custom-logo {
		height: 1.9rem;
		max-width: 42vw;
		object-fit: contain;
		object-position: left center;
	}

	.mbo-header__actions .mbo-btn--solid {
		display: none;
	}

	.mbo-header--minimal {
		position: sticky;
		inset: auto;
		top: 0;
		background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
		backdrop-filter: saturate(140%) blur(12px);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
}

/* ------------------------------------------------------- Etusivun ruutu */

.mbo-front {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.admin-bar .mbo-front {
	min-height: calc(100svh - 32px);
}

@media (max-width: 780px) {
	.mbo-front {
		min-height: calc(100svh - var(--mbo-header-h));
	}
}

@media (max-width: 782px) {
	.admin-bar .mbo-front {
		min-height: calc(100svh - 46px);
	}
}

/* Korkea tarkkuus, jotta ydinlohkon oma gap/margin ei jyrää näitä. */
.mbo-panels.wp-block-columns.is-layout-flex {
	flex: 1;
	gap: 1px;
	align-items: stretch;
	margin-block: 0;
	background: var(--wp--preset--color--line);
}

.mbo-panels > .wp-block-column {
	display: flex;
	min-width: 0;
}

.mbo-panels .wp-block-cover {
	flex: 1;
	min-height: 20rem;
	padding: var(--mbo-gutter);
}

.mbo-panels .wp-block-cover__image-background {
	transition: transform 0.6s var(--mbo-ease), filter 0.6s var(--mbo-ease);
	filter: grayscale(35%);
}

.mbo-panels .wp-block-cover:hover .wp-block-cover__image-background,
.mbo-panels .wp-block-cover:focus-within .wp-block-cover__image-background {
	transform: scale(1.05);
	filter: grayscale(0%);
}

.mbo-panels .wp-block-cover__inner-container {
	width: 100%;
}

/*
 * Vierekkäin ollessaan paneelien otsikot taittuvat kahdelle riville, jotta
 * kolme osiota näyttävät samanlaisilta. Ilman rajausta "Rengas Mikkola" (12,5ch)
 * mahtuisi yhdelle riville muiden taittuessa. Mitta on pisimmän yksittäisen
 * sanan ("Autohuolto", 8,9ch) ja lyhyimmän koko otsikon välissä, joten yksikään
 * sana ei katkea. Yksikkö on ch, joten rajaus seuraa fontin kokoa.
 *
 * Kapealla näytöllä paneelit ovat allekkain ja otsikot mahtuvat kaikki yhdelle
 * riville, joten siellä rajausta ei tarvita.
 */
@media (min-width: 782px) {
	.mbo-panel .wp-block-heading {
		max-width: 10.5ch;
		/* Constrained-layout keskittää kapeamman lapsen automaattisilla
		   marginaaleilla (!important), jolloin otsikko sisentyisi suhteessa
		   yläotsikkoon ja leipätekstiin. */
		margin-left: 0 !important;
		margin-right: auto !important;
	}

	/* Nostotekstille varataan aina kolmen rivin tila, jolloin yläotsikot,
	   otsikot ja tekstit ovat kaikissa kolmessa paneelissa samassa linjassa
	   myös silloin kun teksti on lyhyempi. Sisältö on tasattu alareunaan,
	   joten ilman tätä lyhyempi teksti nostaisi koko lohkon eri korkeudelle. */
	.mbo-panel p:not(.is-style-mbo-eyebrow) {
		min-height: calc(3 * 1.7em);
		min-height: 3lh;
	}
}

@media (min-width: 782px) {
	.mbo-panels .wp-block-cover {
		min-height: 0;
	}
}

.mbo-front__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem clamp(1.5rem, 4vw, 3.5rem);
	padding: 1.1rem var(--mbo-gutter);
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.mbo-front__bar p {
	margin: 0;
}

.mbo-front__bar a {
	color: inherit;
	text-decoration: none;
}

.mbo-front__bar a:hover {
	color: var(--wp--preset--color--blue-light);
	text-decoration: underline;
}

/* -------------------------------------------------------- Sivun sisältö */

.mbo-page > :where(*:not(.alignfull)) {
	max-width: min(var(--wp--style--global--content-size), 100% - 2 * var(--mbo-gutter));
	margin-inline: auto;
}

.mbo-page > .alignwide {
	max-width: min(var(--wp--style--global--wide-size), 100% - 2 * var(--mbo-gutter));
}

.mbo-page > .alignfull {
	max-width: none;
	margin-inline: 0;
}

.mbo-page > *:first-child:not(.wp-block-cover):not(.alignfull) {
	margin-top: var(--wp--preset--spacing--50);
}

/* Täysleveällä osiolla on oma tausta ja padding — alamarginaali jättäisi
   siihen ja alapalkkiin väliin tyhjän kaistan. */
.mbo-page > *:last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ----------------------------------------------------------------- Hero */

/* Sisennys lasketaan samaksi kuin sivun 1240px-palstan vasen reuna, jolloin
   heron teksti asettuu samaan linjaan muun sisällön kanssa. Cover on flex-
   säiliö, jonka sisältölaatikolle ydintyylit pakottavat width:auto ja margin:0,
   joten linjaus on helpompi hoitaa säiliön paddingilla kuin niitä vastaan
   taistelemalla. */
.mbo-hero.wp-block-cover {
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: max(
		var(--mbo-gutter),
		(100% - var(--wp--style--global--wide-size)) / 2
	);
}

.wp-block-cover.mbo-hero .wp-block-cover__inner-container > * {
	max-width: 40rem;
}

.mbo-hero .wp-block-cover__image-background {
	filter: grayscale(20%);
}

/* Vaakavarjostus jättää kuvan näkyviin oikealle. Kapealla näytöllä teksti
   levittyy koko leveydelle, joten varjostus vaihtuu pystysuuntaiseksi. */
@media (max-width: 781px) {
	.mbo-hero .wp-block-cover__background.has-vasen-varjostus-gradient-background {
		background: linear-gradient(180deg, rgba(15, 20, 24, 0.4) 0%, rgba(15, 20, 24, 0.75) 45%, rgba(15, 20, 24, 0.95) 100%);
	}
}

/* ------------------------------------------------------------ Osiot */

/* Kapea tekstipalsta: luettava mitta, mutta vasen reuna samassa linjassa
   muun sivun kanssa. Ryhmä on flow-asettelussa, joten WordPress ei keskitä
   sen lapsia eikä !important-kikkailua tarvita. */
.wp-block-group.mbo-kapea > * {
	max-width: 46rem;
}

/* --------------------------------------------------------- Korttiruudukko */

/* Ruudukko taipuu 2-4 kortille ilman että sarakkeiden leveyttä säädetään käsin. */
.wp-block-columns.mbo-grid.is-layout-flex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.wp-block-columns.mbo-grid > .wp-block-column {
	flex-basis: auto;
	min-width: 0;
}

/* --------------------------------------------------------- Lohkotyylit */

.wp-block-group.is-style-mbo-card {
	background: var(--wp--preset--color--ink-3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mbo-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	transition: border-color var(--mbo-speed) var(--mbo-ease), transform var(--mbo-speed) var(--mbo-ease);
}

.wp-block-group.is-style-mbo-card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--blue) 45%, var(--wp--preset--color--line));
	transform: translateY(-2px);
}

.wp-block-group.is-style-mbo-note {
	background: color-mix(in srgb, var(--wp--preset--color--blue) 12%, var(--wp--preset--color--ink-2));
	border-left: 3px solid var(--wp--preset--color--blue);
	border-radius: 0 var(--mbo-radius) var(--mbo-radius) 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.wp-block-list.is-style-mbo-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-mbo-check > li {
	position: relative;
	padding-left: 1.9rem;
}

.wp-block-list.is-style-mbo-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2px solid var(--wp--preset--color--blue);
	border-bottom: 2px solid var(--wp--preset--color--blue);
	transform: rotate(-45deg) translateY(-0.15em);
}

.wp-block-list.is-style-mbo-columns {
	columns: 2;
	column-gap: var(--wp--preset--spacing--40);
}

@media (max-width: 599px) {
	.wp-block-list.is-style-mbo-columns {
		columns: 1;
	}
}

.is-style-mbo-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.wp-block-image.is-style-mbo-framed img {
	border-radius: var(--mbo-radius-lg);
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-button.is-style-mbo-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-mbo-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue-light);
}

.wp-block-button.is-style-mbo-ghost .wp-block-button__link {
	background: transparent;
	border: 0;
	padding-inline: 0;
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------ Alapalkki */

.mbo-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--ink-2);
	margin-top: auto;
}

.mbo-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--mbo-gutter);
}

.mbo-footer__brand img {
	display: block;
	height: 2.9rem;
	width: auto;
	max-width: none;
}

.mbo-footer__bid {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

.mbo-footer__title {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist);
}

.mbo-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.mbo-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}

.mbo-footer__list .mbo-icon {
	margin-top: 0.25em;
	color: var(--wp--preset--color--blue);
}

.mbo-footer__list a {
	color: var(--wp--preset--color--light);
	text-decoration: none;
}

.mbo-footer__list a:hover {
	color: var(--wp--preset--color--blue-light);
	text-decoration: underline;
}

.mbo-footer__list--hours li {
	justify-content: space-between;
	gap: 1.5rem;
	color: var(--wp--preset--color--light);
}

.mbo-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 1.25rem var(--mbo-gutter);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
}

.mbo-footer__bar p {
	margin: 0;
}

.mbo-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbo-footer__legal a {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}

.mbo-footer__legal a:hover {
	color: var(--wp--preset--color--blue-light);
	text-decoration: underline;
}

/* ------------------------------------------------------------- Sekalaiset */

.mbo-404 {
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.mbo-404__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------ Osioiden esiintulo */

/*
 * Luokka lisätään JavaScriptilla, jotta sisältö on näkyvissä myös silloin kun
 * skripti ei lataudu. Hero ja etusivun paneelit jätetään pois: ne ovat heti
 * näkyvissä eikä niiden piilottaminen alussa ole hyväksi latausmittareille.
 */
.mbo-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.7s var(--mbo-ease),
		transform 0.7s var(--mbo-ease);
	transition-delay: var(--mbo-reveal-delay, 0s);
	will-change: opacity, transform;
}

.mbo-reveal.on-nakyvissa {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* --------------------------------------------------- Pienet eleet */

.mbo-btn:active {
	transform: translateY(1px);
}

.wp-block-button__link {
	transition:
		background-color var(--mbo-speed) var(--mbo-ease),
		border-color var(--mbo-speed) var(--mbo-ease),
		color var(--mbo-speed) var(--mbo-ease),
		transform var(--mbo-speed) var(--mbo-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

.mbo-hinnasto__rivi {
	transition: background-color var(--mbo-speed) var(--mbo-ease);
}

.mbo-hinnasto__rivi:hover {
	background: color-mix(in srgb, var(--wp--preset--color--blue) 7%, transparent);
}

/* Liikkeen vähentäminen: kaikki yllä oleva pois käytöstä. */
@media (prefers-reduced-motion: reduce) {
	.mbo-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

}

/* ------------------------------------------------------------ Lomakkeet */

/* Gravity Forms tuo mukanaan orbital-teeman, joka on rakennettu vaaleaa
   taustaa varten. Sitä ei tarvitse ylikirjoittaa selektori kerrallaan:
   koko teema lukee arvonsa --gf-*-muuttujista, joten riittää että ne
   osoitetaan theme.jsonin tokeneihin. */

.gform_wrapper.gform-theme {
	--gf-ctrl-bg-color: var(--wp--preset--color--ink-3);
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--ink-3);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--ink-3);
	--gf-ctrl-border-color: var(--wp--preset--color--line);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--mist);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--blue);
	--gf-ctrl-color: var(--wp--preset--color--white);
	--gf-ctrl-color-hover: var(--wp--preset--color--white);
	--gf-ctrl-color-focus: var(--wp--preset--color--white);
	--gf-ctrl-radius: var(--mbo-radius);
	--gf-ctrl-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-font-size: var(--wp--preset--font-size--small);
	--gf-ctrl-padding-x: 1.1rem;
	--gf-ctrl-padding-y: 0.85rem;

	--gf-ctrl-placeholder-color: var(--wp--preset--color--mist);
	--gf-ctrl-placeholder-font-family: var(--wp--preset--font-family--body);
	--gf-ctrl-placeholder-opacity: 1;

	--gf-ctrl-label-color-primary: var(--wp--preset--color--light);
	--gf-ctrl-label-color-req: var(--wp--preset--color--mist);
	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--heading);
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--x-small);
	--gf-ctrl-desc-color: var(--wp--preset--color--mist);
	--gf-ctrl-desc-font-size: var(--wp--preset--font-size--x-small);

	--gf-color-primary: var(--wp--preset--color--blue);
	--gf-color-primary-contrast: var(--wp--preset--color--ink);
	--gf-color-primary-darker: var(--wp--preset--color--blue-dark);
	--gf-color-primary-lighter: var(--wp--preset--color--blue-light);

	--gf-form-gap-y: 1rem;
	--gf-field-gap-y: 1rem;

	/* Lähetysnappi noudattaa samaa pilleriä kuin sivuston muut painikkeet.
	   Nämäkin menevät muuttujien kautta: GF:n oma sääntö on tarkempi kuin
	   .gform_wrapper .gform_button, joten suora ylikirjoitus ei puree. */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--blue);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--blue-light);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--blue-light);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--ink);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-border-color-focus-primary: transparent;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--heading);
	--gf-ctrl-btn-font-size: var(--wp--preset--font-size--small);
	--gf-ctrl-btn-font-weight: 600;
	/* Vaakapadding tulee kokovariantista, ei pelkästä perusmuuttujasta. */
	--gf-ctrl-btn-padding-x: 1.9rem;
	--gf-ctrl-btn-padding-x-sm: 1.9rem;
	--gf-ctrl-btn-padding-x-md: 1.9rem;
	--gf-ctrl-btn-padding-x-lg: 1.9rem;
	--gf-ctrl-btn-padding-y: 0.95rem;
}

.gform_wrapper .gform_button {
	cursor: pointer;
	transition: transform var(--mbo-speed) var(--mbo-ease);
}

.gform_wrapper .gform_button:hover {
	transform: translateY(-1px);
}

.gform_wrapper .gform_button:active {
	transform: translateY(1px);
}

/* Virheet ja vahvistus: oletusvärit ovat vaaleaa taustaa varten eivätkä
   erotu tummalta. */

.gform_wrapper .gform_validation_errors {
	border-radius: var(--mbo-radius);
	background: color-mix(in srgb, #E5484D 12%, transparent);
	border: 1px solid color-mix(in srgb, #E5484D 45%, transparent);
	color: var(--wp--preset--color--white);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	border-radius: var(--mbo-radius);
	background: transparent;
	border: 0;
	padding-inline: 0;
	color: #FF9AA0;
	font-size: var(--wp--preset--font-size--x-small);
}

.gform_confirmation_wrapper .gform_confirmation_message {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--blue);
	border-radius: var(--mbo-radius);
	background: var(--wp--preset--color--ink-3);
	padding: 1.25rem 1.5rem;
	color: var(--wp--preset--color--light);
}

/* Merkkilaskuri on oletuksena samankokoinen kuin kenttäteksti. */

.gform_wrapper .charleft,
.gform_wrapper .ginput_counter {
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--x-small);
}