/*
Theme Name: MSL Manninen
Theme URI: https://www.mslmanninen.fi/
Author: Maansiirtoliike Manninen Oy
Description: Maansiirtoliike Manninen Oy:n oma lohkoteema. Korvaa aiemman Divi-toteutuksen.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msl-teema
Tags: block-theme, full-site-editing, business
*/

/* -------------------------------------------------------------
   Perusasetukset
   Suurin osa tyyleistä tulee theme.jsonista. Täällä on vain se,
   mitä lohkoasetuksilla ei saa tehtyä.
------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* WordPress jättää oletuksena välin ylä- ja alatunnisteen ympärille.
   Osiot hoitavat oman välistyksensä, joten väli näkyisi vain
   valkoisena raitana tummien osioiden välissä. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

body { -webkit-font-smoothing: antialiased; }

p { text-wrap: pretty; }

:where(h1, h2, h3) { text-wrap: balance; }


/* -------------------------------------------------------------
   Silmälappu — pieni oranssi yläotsikko viivalla
------------------------------------------------------------- */

.msl-silmalappu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--korostus);
	margin-bottom: 18px !important;
}

.msl-silmalappu::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}


/* -------------------------------------------------------------
   Ylätunniste
------------------------------------------------------------- */

.msl-ylatunniste {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(35, 28, 24, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.msl-ylatunniste .wp-block-navigation .wp-block-navigation-item__content,
.msl-ylatunniste .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.93rem;
	font-weight: 600;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
}

.msl-ylatunniste .wp-block-navigation .wp-block-navigation-item__content:hover,
.msl-ylatunniste .wp-block-navigation a:hover,
.msl-ylatunniste .wp-block-navigation .current-menu-item > a {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--korostus);
}

/* Valikkonappi on WordPressin oletuksena piilossa jo 600 pikselistä ylöspäin,
   mutta viisi valikkokohtaa ei mahdu yhdelle riville ennen noin 1000 pikseliä.
   Siihen asti käytetään samaa avattavaa valikkoa kuin puhelimessa. */
@media (max-width: 1000px) {
	.msl-ylatunniste .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.msl-ylatunniste .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.msl-ylatunniste .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Alavalikko pysyy luettavana tummalla ylätunnisteella */
.msl-ylatunniste .wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--pohja-vaalennus);
	border-color: rgba(255, 255, 255, 0.12);
}

.msl-logo .wp-block-site-title a {
	color: #fff;
	text-decoration: none;
	line-height: 1.15;
}

.msl-logo-ylateksti {
	display: block;
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--korostus);
}


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

.msl-hero {
	position: relative;
	min-height: min(88vh, 760px);
	display: flex;
	align-items: flex-end;
}

.msl-hero .wp-block-cover__background {
	background: linear-gradient(
		105deg,
		rgba(23, 18, 15, 0.94) 0%,
		rgba(23, 18, 15, 0.78) 45%,
		rgba(23, 18, 15, 0.35) 100%
	);
}

/* Heron kerrosjärjestys pohjalta ylöspäin:
   1. poster-kuva  2. taustavideo  3. tummennus  4. teksti

   Ilman näitä sekä kuva että video ovat tasolla 0, jolloin myöhemmin
   tuleva kuva peittää videon — video pyörii mutta ei näy. */
.msl-hero .wp-block-cover__image-background { z-index: 0; }
.msl-hero .wp-block-cover__background { z-index: 2; }
.msl-hero .wp-block-cover__inner-container { z-index: 3; }

/* Taustavideo. Piilossa kunnes se tosiasiassa pyörii, jotta taustakuva
   ei koskaan välähdä tyhjänä. Ei osallistu sivun ensilataukseen. */
.msl-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transition: opacity 900ms ease;
	pointer-events: none;
}

.msl-hero__video.on { opacity: 1; }

.msl-hero h1 { max-width: 16ch; }

.msl-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--korostus);
}

.msl-hero p { max-width: 52ch; }

/* Lukurivi heron alalaidassa */
.msl-luvut {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.msl-luku strong {
	display: block;
	font-size: clamp(1.8rem, 4vw, 2.3rem);
	font-weight: 800;
	color: #fff;
	line-height: 1;
	margin-bottom: 6px;
}

.msl-luku span {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}


/* -------------------------------------------------------------
   Osion otsikko — teksti vasemmalla, painike oikealla
------------------------------------------------------------- */

.msl-osio-otsikko {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}


/* -------------------------------------------------------------
   Palvelukortit
------------------------------------------------------------- */

.msl-kortti {
	background: #fff;
	border: 1px solid var(--wp--preset--color--raja);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.msl-kortti:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--kortti);
	border-color: transparent;
}

.msl-kortti figure,
.msl-kortti .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	margin: 0;
}

.msl-lisaa {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--wp--preset--color--korostus-tumma);
	letter-spacing: 0.04em;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
}

.msl-lisaa::after {
	content: "→";
	transition: transform 0.2s ease;
}

.msl-kortti:hover .msl-lisaa::after { transform: translateX(6px); }


/* -------------------------------------------------------------
   Tarkistuslista (tummalla pohjalla)
------------------------------------------------------------- */

.msl-lista { list-style: none; padding: 0; margin: 0; }

.msl-lista li {
	padding-left: 44px;
	position: relative;
	margin-bottom: 22px;
}

.msl-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--korostus);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='white'/></svg>") center / 18px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='white'/></svg>") center / 18px no-repeat;
}

.msl-lista strong { display: block; margin-bottom: 4px; }

.msl-lista span { color: rgba(255, 255, 255, 0.65); font-size: 0.93rem; }


/* -------------------------------------------------------------
   Referenssin tietopaneeli
------------------------------------------------------------- */

.msl-tieto-otsikko {
	color: var(--wp--preset--color--teksti-himmea);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}

.msl-tieto-arvo {
	font-weight: 600;
	line-height: 1.4;
}

/* Kohteesta toiseen siirtyminen sivun alalaidassa. */
.wp-block-post-navigation-link {
	font-weight: 600;
	font-size: 0.93rem;
	max-width: 22rem;
}

.wp-block-post-navigation-link a { text-decoration: none; }

.wp-block-post-navigation-link a:hover { text-decoration: underline; }


/* -------------------------------------------------------------
   Henkilökortit yhteystiedoissa
------------------------------------------------------------- */

.msl-hlo {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.msl-hlo figure,
.msl-hlo .wp-block-image {
	margin: 0;
}

.msl-hlo .wp-block-image img {
	width: 100%;
	display: block;
	object-position: center 30%;
}

.msl-hlo h3 { margin-bottom: 4px; }

.msl-hlo-rooli { min-height: 2.6em; margin-bottom: 14px; }

.msl-hlo-yhteys a {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--korostus-tumma);
	text-decoration: none;
	margin-top: 4px;
	/* Pitkä sähköpostiosoite ei saa työntyä kortin ulkopuolelle. */
	overflow-wrap: anywhere;
}

.msl-hlo-yhteys a:hover { text-decoration: underline; }


/* -------------------------------------------------------------
   Referenssikortit — kuva, jonka päällä teksti
------------------------------------------------------------- */

/* Kortti on kuva, jonka päälle teksti asettuu. Artikkelikuvalohko
   viedään taustalle ja teksti nostetaan sen päälle. */
.msl-referenssi {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	color: #fff;
	display: flex;
	align-items: flex-end;
	background: var(--wp--preset--color--brandi);
}

.msl-referenssi .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}

.msl-referenssi .wp-block-post-featured-image a,
.msl-referenssi .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tummennus, jotta valkoinen teksti erottuu kuvasta. */
.msl-referenssi::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(23, 18, 15, 0.92) 8%,
		rgba(23, 18, 15, 0.15) 65%
	);
	pointer-events: none;
}

.msl-referenssi-teksti {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Kohdesivun yläosa samalla periaatteella. */
.msl-refhero {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
}

.msl-refhero .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}

.msl-refhero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msl-refhero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(23, 18, 15, 0.92) 0%,
		rgba(23, 18, 15, 0.72) 50%,
		rgba(23, 18, 15, 0.4) 100%
	);
	pointer-events: none;
}

.msl-refhero-teksti {
	position: relative;
	z-index: 2;
	width: 100%;
}

.msl-referenssi .msl-referenssi-meta {
	color: var(--wp--preset--color--korostus);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.72rem;
}


/* -------------------------------------------------------------
   Alatunniste
------------------------------------------------------------- */

.msl-alatunniste { font-size: 0.93rem; }

.msl-alatunniste h2,
.msl-alatunniste h3,
.msl-alatunniste h4 {
	color: #fff;
	font-size: 0.78rem !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.msl-alatunniste a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }

.msl-alatunniste a:hover { color: var(--wp--preset--color--korostus); text-decoration: none; }

.msl-alatunniste-alaosa {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.45);
}


/* -------------------------------------------------------------
   Saavutettavuus
------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	background: #fff;
	color: var(--wp--preset--color--teksti);
	padding: 12px 20px;
	border-radius: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.msl-kortti, .msl-lisaa::after { transition: none; }
	.msl-hero__video { transition: none; }
}


/* -------------------------------------------------------------
   Puhelin ja tabletti
   Työmaalla sivustoa katsotaan puhelimesta, joten kapea näyttö
   ei ole poikkeus vaan tavallisin tapaus.
------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Hero ei saa viedä koko ruutua puhelimessa — sisällön pitää
	   antaa vihje siitä, että sivua kannattaa vierittää. */
	.msl-hero {
		min-height: 78svh;
	}

	.msl-hero h1 { max-width: 100%; }

	/* Neljä lukua allekkain venyttäisi heron kohtuuttoman pitkäksi.
	   Kahden sarakkeen ruudukko pitää ne yhdessä silmäyksessä. */
	.msl-luvut.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
	}

	.msl-luvut.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
	}

	.msl-luku strong { font-size: 1.6rem; }
	.msl-luku span { font-size: 0.72rem; }

	/* Osion otsikon "kaikki palvelut" -painike omalle rivilleen. */
	.msl-osio-otsikko {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	/* Tarkistuslistan merkit hieman pienemmiksi, jotta teksti saa tilaa. */
	.msl-lista li { padding-left: 38px; }
	.msl-lista li::before { width: 22px; height: 22px; }

	/* Referenssikortit ovat pystykuvia — koko ruudun korkuisina ne
	   veisivät liikaa tilaa, joten madalletaan hieman. */
	.msl-referenssi { aspect-ratio: 4 / 4.4; }

	/* Alatunnisteen sarakkeet allekkain, tiiviimmällä rivivälillä. */
	.msl-alatunniste .wp-block-columns { gap: 36px; }
	.msl-alatunniste ul { line-height: 1.9 !important; }
}

@media (max-width: 781px) {
	/* Painikkeen teksti ei saa katketa monelle riville — se kasvattaisi
	   ylätunnisteen korkeutta ja veisi tilaa sisällöltä. */
	.msl-ylatunniste .wp-block-button__link {
		white-space: nowrap;
		padding: 10px 18px;
		font-size: 0.85rem;
	}

	.msl-ylatunniste .wp-block-buttons { flex: none; }

	.msl-ylatunniste .wp-block-site-logo img { max-width: 150px; }
}

@media (max-width: 400px) {
	/* Kaikkein kapeimmilla näytöillä logo pienenee vielä, jotta
	   painike ja valikkonappi mahtuvat samalle riville. */
	.msl-ylatunniste .wp-block-site-logo img { max-width: 118px; }

	.msl-ylatunniste .wp-block-button__link {
		padding: 9px 14px;
		font-size: 0.8rem;
	}

	.msl-silmalappu { font-size: 0.72rem; }
}