:root {
	--smi-root-padding-left-right: clamp(1rem, calc(4vw + 0.2rem), 5rem); /* 16px-80px 320px-1920px */
	--smi-main-padding-top: 4.5em;
	--smi-main-padding-bottom: 7.5em;

	/* Vasen navigaatiopalkki (desktop) */
	--smi-sidebar-width: 18em; /* 288px */

	--smi-logo-width: 8em;
	--smi-logo-width-tablet: 4.5em;
	--smi-logo-width-phone: 4em;

	--smi-hero-min-height: 33vh;
	--smi-hero-min-height-tablet: 35vh;
	--smi-hero-min-height-phone: 38vh;

	--smi-header-0-scroll-bg: var(--wp--preset--color--footer);

	--smi-mobile-menu-font-size: var(--wp--preset--font-size--x-medium);
	--smi-mobile-sub-menu-font-size: var(--wp--preset--font-size--medium);

	--smi-slider-korkeus: 40vh;

	--smi-mega-menu-max-width: var(--wp--style--global--wide-size);  /* full 100vw */

	--smi-anim-speed: 800ms;

	--smi-buttons-gap: 1em;
	--smi-button-pd-tb: 1em !important; /* padding top-bottom */
	--smi-button-pd-lr: 2.4em !important; /* padding left-right */
	--smi-button-color: #fff;
	--smi-button-font-size: var(--fs-s);
	--smi-button-font-family: inherit;
	--smi-button-font-style: normal;
	--smi-button-font-weight: 500;
	--smi-button-letter-spacing: 0.03em;
	--smi-button-text-transform: none;
	--smi-button-line-height: 1.5;
	--smi-button-bg: var(--color-1);
	--smi-button-border-radius: 3px;
	--smi-button-border-width: 0px;
	--smi-button-border-color: var(--color-1);
	/*--- Button hoover ---*/
	--smi-button-hoover-color: #fff;
	--smi-button-hoover-bg: var(--color-2);
	--smi-button-hoover-border-width: 0px;
	--smi-button-hoover-border-color: var(--color-2);
}

/* >> h1.wp-block-heading @media (max-width: 767px) font-size */
@media (max-width: 767px) {
	h1.wp-block-heading {
		font-size: var(--fs-6xl) !important;
	}
}


/* Hero-min-height */
.hero-min-height {
	min-height: var(--smi-hero-min-height);
}
:root {
	--hero-min-height: var(--smi-hero-min-height);
}
@media (max-width: 1024px) {
.hero-min-height {
	min-height: var(--smi-hero-min-height-tablet);
}
:root {
	--hero-min-height: var(--smi-hero-min-height-tablet);
}
}
@media (max-width: 767px) {
.hero-min-height {
	min-height: var(--smi-hero-min-height-phone);
}
:root {
	--hero-min-height: var(--smi-hero-min-height-phone);
}
}

/****************************** UTE: Vasen navigaatiopalkki ******************************/
/* Desktop: header kiinteänä pystypalkkina vasemmalla, sisältö ja footer siirtyvät oikealle. */
@media (min-width: 1024px) {
	.wp-site-blocks {
		padding-inline-start: var(--smi-sidebar-width);
	}
	header.wp-block-template-part {
		position: fixed;
		top: 0 !important;
		left: 0;
		bottom: 0;
		width: var(--smi-sidebar-width);
		overflow-y: auto;
		box-shadow: none;
	}
	header.wp-block-template-part > .header-group {
		min-height: 100%;
	}
	/* Skrolliluokat eivät saa piilottaa/kutistaa palkkia eikä venyttää navia */
	header.wp-block-template-part.alasSkrollaus {
		top: 0 !important;
	}
	header.wp-block-template-part.skrollaus img.custom-logo,
	header.wp-block-template-part img.custom-logo {
		width: 100% !important;
	}
	/* Navigaatio pystysuuntaan, siisti riviväli — myös .skrollaus-tilassa (emoteeman
	   style.css kasvattaisi paddingit skrollatessa → valikko "venyy") */
	header .header-navi .wp-block-navigation-item,
	header.wp-block-template-part.skrollaus ul.header-navi > .wp-block-navigation-item,
	header.wp-block-template-part ul.header-navi > .wp-block-navigation-item {
		padding: 7px 0 !important;
	}
	/* Linkin oma pystypadding pois; rivikorkeus line-heightista */
	header ul.header-navi > .wp-block-navigation-item a {
		padding-top: 0;
		padding-bottom: 0;
		line-height: 1.5;
	}
	/* Ei siirtymäanimaatioita desktop-palkissa */
	header.wp-block-template-part,
	header.wp-block-template-part img.custom-logo,
	header.wp-block-template-part ul.header-navi > .wp-block-navigation-item,
	header .header-navi .wp-block-navigation-item a {
		transition: none !important;
	}
	/* Logo ja sivunimi keskitettyinä palkin ylälaidassa */
	header .site-meta {
		align-self: stretch;
		align-items: center;
		text-align: center;
		padding-top: var(--wp--preset--font-size--2-x-large);
	}
	/* Navigaatio keskittyy pystysuunnassa logon ja alaosan väliin
	   (margin auto joustaa — footer ei koskaan putoa näkymän ulkopuolelle) */
	header .header-navi {
		margin-block: auto;
	}
	/* Sivupalkin alaosa: Puh. + Evästeet (vain desktop) */
	header .sidebar-footer {
		margin-top: auto;
		align-self: stretch;
		align-items: center;
		text-align: center;
		padding-top: var(--wp--preset--font-size--2-x-large);
	}
	/* Desktopissa footer-tiedot ovat sivupalkissa — sisällön alla oleva footer pois */
	footer.wp-block-template-part {
		display: none;
	}
}
/* Mobiili/tabletti: normaali yläpalkki, logo vasemmalla ja hampurilainen oikealla */
@media (max-width: 1023px) {
	body header.wp-block-template-part .header-group {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		min-height: 4.25em;
	}
	body header.wp-block-template-part .site-meta {
		flex-direction: row !important;
		align-items: center !important;
	}
	/* Puh./Evästeet vain desktop-sivupalkissa — mobiilissa footer hoitaa */
	header .sidebar-footer {
		display: none !important;
	}
}

/* Sivupalkin footer-linkit: puhelin ilman alleviivausta (hover alleviivaa),
   viimeisen kappaleen linkki alleviivattuna */
header .sidebar-footer a {
	text-decoration: none;
}
header .sidebar-footer a:hover,
header .sidebar-footer p:last-child a {
	text-decoration: underline;
}

/****************************** UTE: Sisällön muotoilu ******************************/
/* Listat: ei palluroita, hakanen (›) vasemmalla — li: padding 0 0 5px 35px, ul-indentti 15px */
main ul.wp-block-list {
	list-style: none;
	padding-left: 15px;
	margin-left: 0;
}
main ul.wp-block-list > li {
	position: relative;
	padding: 0 0 5px 35px;
}
main ul.wp-block-list > li::before {
	content: "\203A";
	position: absolute;
	left: 0;
	top: 0;
	color: #666666;
	line-height: inherit;
}
/* Erottimet: 1px vaalea harmaa #d4d4d4 */
main hr.wp-block-separator {
	border: none;
	border-bottom: 1px solid #d4d4d4;
	opacity: 1;
}

/* Navigaatiolinkkien värit: vaimea harmaa, hover valkoinen, aktiivinen ruskea */
.header-navi .wp-block-navigation-item a {
	color: #cccccc;
	transition: color 0.2s;
}
.header-navi .wp-block-navigation-item a:hover {
	color: #ffffff;
	text-decoration: none;
}
.header-navi .current-menu-item > a,
.header-navi .wp-block-navigation-item.current-menu-item a {
	color: var(--color-1);
}

/* Site title -linkki sivupalkissa (koko/paino/välistys tulevat lohkoasetuksista) */
header .wp-block-site-title a {
	color: #ffffff;
}

/* Kansleri: kelluva evästepainike */
.kncc-floating-btn {
	width: 36px !important;
	height: 36px !important;
	left: auto !important;
	right: 1rem !important;
	bottom: 1rem !important;
	background: rgba(39, 39, 39, 0.62) !important; /* fallback vanhemmille selaimille */
	background: color-mix(in srgb, var(--wp--preset--color--footer) 62%, transparent) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
.kncc-floating-btn svg {
	width: 16px !important;
	height: 16px !important;
}
.kncc-floating-btn:hover {
	background: rgba(39, 39, 39, 0.82) !important;
	background: color-mix(in srgb, var(--wp--preset--color--footer) 82%, transparent) !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

/* Puhelinnumerot eivät katkea rivinvaihdossa */
a[href^="tel:"] {
	white-space: nowrap;
}