/* Otsikoiden ja ingressien fluid-koot. Näitä säätämällä muuttuvat kaikki
   hero-otsikot kerralla — Fluid-Clamp-laskuri: min max minView maxView. */
:root {
	--smi-fs-hero:     clamp(2rem, calc(3.63vw + 0.26rem), 5.7rem); /* 32px-91px 768px-2400px */
	--smi-fs-otsikko:  clamp(2rem, calc(3.33vw + 0.4rem), 5.4rem); /* 32px-86px 768px-2400px */
	--smi-fs-osio:     clamp(1.75rem, calc(2.99vw + 0.31rem), 4.8rem); /* 28px-77px 768px-2400px */
	--smi-fs-ingressi: clamp(1.125rem, calc(0.86vw + 0.71rem), 2rem); /* 18px-32px 768px-2400px */
}

.wp-block-column .wp-block-cover {
	height: 100%;
}

@media (max-width: 1600px) {
	body {
		font-size: var(--wp--preset--font-size--medium);
	}
:root :where(.wp-block-button .wp-block-button__link) {
	font-size: var(--wp--preset--font-size--small);
}
}

@media (max-width: 1023px) {
header > .wp-block-group {
	min-height: inherit !important;
}
.smi-menu-ylaosa {
	min-height: inherit !important;
padding-top: 1.5em !important;
  padding-bottom: 1.5em !important;
flex-basis: inherit;
}
.smi-menu-alaosa {
	display: none;
}
}

@media (min-width: 1024px) {
/*--- Sivumenun säätöä ---*/
header .wp-block-navigation {
	position: inherit;
}
header .wp-block-navigation__responsive-container {
	bottom: 0;
	display: none;
	left: 8vw;
	position: absolute;
	right: 0;
	top: 0;
	width: 20vw;
}
/* 1. Määritellään uusi animaatio: liuku vasemmalta */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%); /* Alkaa kokonaan vasemmalta näytön ulkopuolelta */
    }
    to {
        transform: translateX(0); /* Pysähtyy omalle paikalleen */
    }
}

/* 2. Kohdistetaan animaatio valikkoon, kun se on auki */
.wp-block-navigation__responsive-container.is-menu-open {
    animation: slideInLeft 0.3s ease-out forwards;
    /* Lisätään varmistus, että tausta peittää halutun alueen */
    display: flex; 
	z-index: -1;
word-break: initial;
}

.smi-menu-alaosa {
	width: 100%;
	display: flex;
	align-item: center;
	justify-content:center;
}
.smi-menu-alaosa p {
	writing-mode: vertical-rl;
	text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
button.wp-block-navigation__responsive-container-open.always-shown {
	scale: 1.3;
}
}


button.wp-block-navigation__responsive-container-close {
	display: none;
}


/* 
 * HAMPURILAINEN -> X -ANIMAATIO
 */

/* --- 1. Paikan lukitseminen (X ilmestyy samaan kohtaan) --- */
/* Vahvistetaan avaavan painikkeen sijainti, jotta se ei liiku */
.wp-block-navigation__responsive-container-open.always-shown {
    z-index: 100001 !important; /* Vielä korkeampi, jotta se on kaiken päällä */
    position: relative;
   
    transition: none !important; /* Ei siirtymää itse painikkeelle */
}

/* --- 2. Animaation perusasetukset (SVG-viivat) --- */
.wp-block-navigation__responsive-container-open svg path {
    /* Pehmeämpi ja tarkempi animaatio cubic-bezier -käyrällä */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease-out;
    
    /* Varmistetaan TÄYDELLINEN keskipiste SVG-alueella (50% 50%) suhteessa viivaan */
    transform-origin: 50% 50%;
    
    /* Peritään väri, jotta muutos on siisti */
    fill: currentColor;
}

/* --- 3. Auki-tila (X) - Triggerinä '.has-modal-open' luokka --- */

/* Yläviiva: Siirretään alas, korjataan vaakasuora paikka ja kierretään 45° */
.has-modal-open .wp-block-navigation__responsive-container-open svg path:nth-child(1) {
    transform: translate3d(-4.7px, 5.5px, 0) rotate(45deg);
}

/* Keskiviiva: Häivytetään keskimmäinen viiva näkyvistä */
.has-modal-open .wp-block-navigation__responsive-container-open svg path:nth-child(2) {
    opacity: 0;
}

/* Alaviiva: Siirretään ylös, korjataan vaakasuora paikka ja kierretään -45° */
.has-modal-open .wp-block-navigation__responsive-container-open svg path:nth-child(3) {
    transform: translate3d(-4.7px, -3.5px, 0) rotate(-45deg);
}


/****** Painike: laajeneva tausta efekti *******/
:root {
	--smi-button-color: white;
	--smi-button-color-1: var(--color-1);
	--smi-button-color-2: red;
}
/* Kohdistetaan tyylit tarkalleen WordPressin luokkiin */
.wp-block-button__link {
	position: relative;
	text-decoration: none;
	transition: 0.4s ease !important;
	overflow: hidden;
	z-index: 1;
}
.is-style-outline .wp-block-button__link {
	background: transparent !important;
}
/* Luodaan laajeneva tausta pseudo-elementillä */
.wp-block-button__link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	right: 50%;
	bottom: 0;
	background: var(--smi-button-color-2);
	z-index: -1;
	transition: all 0.4s ease;
	opacity: 0;
}
.wp-block-button__link:hover {
	color: var(--smi-button-color) !important;
	background: var(--smi-button-color-1);
	border-color: var(--smi-button-color-1) !important;
}
.wp-block-button__link:hover::before {
	left: 0;
	right: 0;
	opacity: 1;
}

/* Liukuefekti vain työpöytäleveyksillä ja aidolla osoittimella: kosketusnäytöllä :hover
   jää tapin jälkeen päälle. Muualla sama värinvaihto ilman siirtymää. */
@media (max-width: 1279px), (hover: none) {
	.wp-block-button__link,
	.wp-block-button__link::before {
		transition: none !important;
	}
	.wp-block-button__link::before {
		left: 0;
		right: 0;
	}
}

/* Kansleri: kelluva evästepainike */
.kncc-floating-btn {
	width: 36px !important;
	height: 36px !important;
	left: auto !important;
	right: 1rem !important;
	bottom: 1rem !important;
	background: rgba(21, 21, 21, 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(21, 21, 21, 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;
}

/* Kapeilla näytöillä (palstat purkautuneet) kansikuvat eivät vie koko ruutua */
@media (max-width: 781px) {
	.wp-block-cover,
	.wp-block-cover-image {
		min-height: 50vh !important;
	}
	figure.wp-block-image img {
		max-height: 50vh;
		object-fit: cover;
	}
}

/* Sivupohjan header-palsta purkautuu yläpalkiksi jo 1023px:ssä.
   Rajattu sivupohjan uloimpiin palstoihin — sisällön palstat purkautuvat WP:n omalla 781px:llä. */
@media (max-width: 1023px) {
	.wp-site-blocks > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.wp-site-blocks > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Alasivujen H1: koko ja tiiviimpi väli logoon (oletus on blockGap 2-x-large). */
.palvelu-logo + .wp-block-heading {
	font-size: var(--smi-fs-otsikko);
	margin-top: var(--wp--preset--font-size--x-small);
}

/* Puhelimessa logon ja otsikon pystyvälit tiiviimmät. */
@media (max-width: 767px) {
	.wp-block-column:has(> .palvelu-logo) {
		padding-top: 6vh !important;
	}
}