/*
 * Vakkurinkukka — lohkojen ja sivupohjan omat tyylit.
 *
 * Varit, fontit ja valistykset tulevat theme.jsonista muuttujina, joten
 * brandin vaihto ei vaadi muutoksia tahan tiedostoon.
 */

/* -------------------------------------------------------------------------
 * Yleiset
 * ---------------------------------------------------------------------- */

/*
 * Otsikkofontti Canopeesta on vain Regular-leikkaus. Ilman tata selain
 * lihavoisi tai kallistaisi sen keinotekoisesti. Jost on muuttuva fontti,
 * jossa on oma kursiivi, joten sitakaan ei tarvitse jaljitella.
 */
body {
	font-synthesis: none;
}

/*
 * Versaalityyli (Canopee versaalein, harvennettuna): navigaatio, painikkeet,
 * kuvakorttien nimet, h4 ja alatunnisteen otsikot. Navigaation, painikkeiden
 * ja h4:n tyyli tulee theme.jsonista; luokka on muille otsikoille.
 */
.vk-versaali {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.vk-tumma {
	color: var(--wp--preset--color--base);
}

.vk-tumma :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--base);
}

.vk-tumma a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
}

/*
 * Linkin hover-vari vihrealla pohjalla on lime (5,09:1). Ruoste jaisi
 * vihreaa vasten 1,2:1:een eika erottuisi.
 */
.vk-tumma a:not(.wp-block-button__link):hover,
.vk-tumma a:not(.wp-block-button__link):focus {
	color: var(--wp--preset--color--muted);
}

/* Lomakkeen lahetyspainike: sama ulkoasu kuin theme.jsonin painikkeilla. */
.vk-nappi {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.vk-nappi:hover,
.vk-nappi:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/*
 * Aariviivapainike. WordPressin oma tyyli perii tekstin ja reunuksen varin
 * ymparoivasta sisallosta, jolloin se olisi leipatekstin musta. Brandissa
 * aariviiva on vihrea ja ohut (1 px); pystysuuntainen tayte pienennetaan
 * reunuksen verran, jotta painike on yhta korkea kuin tavallinen painike.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.85rem - 1px) calc(1.75rem - 1px);
	border: 1px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * Ohut lyhyt erotin otsikon alla (etusivun esittely ja alasivujen otsikko).
 * Vari tulee theme.jsonista (core/separator -> line).
 */
.wp-block-separator.vk-erotin {
	width: 5rem;
	border-top-width: 1px;
}

/* -------------------------------------------------------------------------
 * Avoinna tanaan
 * ---------------------------------------------------------------------- */

.vk-avoinna {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
}

.vk-avoinna__merkki {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.vk-avoinna--auki .vk-avoinna__merkki {
	background: var(--wp--preset--color--primary);
}

/* Some-ikonit tummalla pohjalla: vari tulee paletista, ei lohkon
 * attribuutista, jotta brandin vaihto riittaa theme.jsoniin. Vari asetetaan
 * li-elementtiin, koska WordPressin oma saanto pakottaa ankkuriin ja svg:hen
 * currentColorin. */
.vk-tumma .wp-block-social-links .wp-block-social-link {
	color: var(--wp--preset--color--base);
}

.vk-tumma .wp-block-social-links .wp-block-social-link:hover,
.vk-tumma .wp-block-social-links .wp-block-social-link:focus-within {
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Aukioloajat ja poikkeukset
 * ---------------------------------------------------------------------- */

.vk-aukiolo {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.vk-aukiolo__taulukko {
	width: 100%;
	border-collapse: collapse;
}

.vk-aukiolo__otsikko {
	margin-bottom: 0.65rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.1;
	text-align: left;
}

.vk-aukiolo__rivi th,
.vk-aukiolo__rivi td {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-weight: 400;
	text-align: left;
}

.vk-aukiolo__rivi td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vk-aukiolo__rivi--tanaan th,
.vk-aukiolo__rivi--tanaan td {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/*
 * WordPressin ydin asettaa .wp-block-column-elementille word-break: break-word,
 * joka periytyy otsikkoon ja katkoisi sanoja keskelta. Varmistetaan normaali
 * tavutus.
 */
.vk-poikkeukset__otsikko {
	margin: 0 0 0.65rem;
	word-break: normal;
	overflow-wrap: break-word;
}

.vk-poikkeukset__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vk-poikkeus {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.vk-poikkeus__paiva {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vk-poikkeus__huomautus {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.vk-poikkeukset__tyhja {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

/*
 * Aukioloajat vihrealla paneelilla (.vk-tumma, patterns/yhteystiedot-tiiviste.php).
 * Vihrea otsikko ja taman paivan rivi eivat erottuisi vihreasta, joten ne
 * ovat kermaa. Himmennys poistetaan: kerma 75 %:n peittavyydella jaa
 * vihreaa vasten 4,08:1:een (AA-raja 4,5:1), taysi kerma on 5,85:1.
 */
.vk-tumma .vk-aukiolo__otsikko,
.vk-tumma .vk-aukiolo__rivi--tanaan th,
.vk-tumma .vk-aukiolo__rivi--tanaan td {
	color: var(--wp--preset--color--base);
}

/*
 * Paneelin aukiolo- ja poikkeusotsikot ovat samankokoiset ja enintaan 80 %
 * paneelin H2:sta ("KAY LIIKKEESSA", x-large), jotta H2 erottuu selvasti
 * suurimpana kaikilla leveyksilla. "POIKKEUSAUKIOLOAJAT" on yksi pitka sana
 * (noin 8,9 kertaa fonttikoko), joten koko rajataan lisaksi niin, etta sana
 * mahtuu kapeaan sarakkeeseen (sarake on noin 100vw - 120 px). Useimmilla
 * leveyksilla koko on siis 0,8 x H2 (noin 1.42-1.75rem); vasta alle noin
 * 346 px:n naytolla nayttoleveyteen sidottu raja on pienempi:
 * 320 px:lla noin 1.25rem (noin 180 px), vahintaan 1.15rem.
 */
.vk-tumma .vk-aukiolo__otsikko,
.vk-tumma .vk-poikkeukset__otsikko {
	font-size: min(0.8 * var(--wp--preset--font-size--x-large), clamp(1.15rem, 10.5vw - 0.85rem, 1.75rem));
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.vk-tumma .vk-poikkeus__huomautus,
.vk-tumma .vk-poikkeukset__tyhja {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Kielivalitsin (tilapaisesti kayttamatta)
 * ---------------------------------------------------------------------- */

/* Polylangin oma kielivalitsinlohko, ylatunnisteen ilmoituspalkissa.
 * TILAPAISESTI KAYTTAMATTA 25.10.2026: valitsin on poistettu
 * parts/header.html:sta, ks. teeman paatosmuistiinpanot. Ala poista naita
 * tyyleja, ne tarvitaan kun valitsin palautetaan. */
.wp-block-polylang-language-switcher {
	display: flex;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.wp-block-polylang-language-switcher a {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	text-decoration: none;
}

/* Palkin tausta on limea, joten valittu kieli erottuu kermalla. */
.wp-block-polylang-language-switcher .current-lang a {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Ylatunniste
 * ---------------------------------------------------------------------- */

/*
 * Kolme kerrosta: ilmoituspalkki (aukiolo, osoite), keskitetty logo
 * ja keskitetty valikko logon alla. Ohut viiva erottaa ylatunnisteen
 * sisallosta.
 */
.vk-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Ilmoituspalkki. Teksti on vihreaa limella (5,09:1). Kapealla naytolla
 * osat rivittyvat ja katuosoite piilotetaan alle 600 px:n.
 */
.vk-ilmoituspalkki {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.vk-ilmoituspalkki__inner {
	align-items: center;
	gap: 0.35rem 1.25rem;
}

.vk-ilmoituspalkki a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary);
}

.vk-ilmoituspalkki .vk-avoinna {
	padding: 0;
	border-radius: 0;
	background: none;
}

.vk-yhteystieto-rivi {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

@media (max-width: 599px) {
	.vk-yhteystieto-rivi__osoite {
		display: none;
	}
}

.vk-header__inner {
	gap: 1rem;
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: 1rem;
}

/*
 * Logo (sommittelu 02). Lohkon leveys (270 px) tulee sivupohjaosasta;
 * kapealla naytolla pienennetaan.
 */
.vk-header .wp-block-site-logo {
	margin: 0;
}

.vk-header .wp-block-site-logo img {
	display: block;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.vk-header .wp-block-site-logo img {
		width: 170px;
	}
}

/* Valikko keskitettyna logon alla; kapealla naytolla WordPressin oma
 * overlay-valikko, jonka avauspainike on samoin keskella. */
.vk-header .wp-block-navigation {
	justify-content: center;
}

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

.vk-footer .wp-block-heading {
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/*
 * Brandin kukkakuvio koristeena oikeassa ylakulmassa. Kuva on taustana
 * pseudoelementissa, ei lohkona, jotta alatunnistemallin sisalto pysyy
 * pelkkana tekstisisaltona. isolation: isolate tekee alatunnisteesta oman
 * pinojarjestyksen, jolloin z-index -1 jaa sen oman vihrean taustan paalle
 * mutta tekstin alle. Kapealla naytolla kuvio piilotetaan.
 */
.vk-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.vk-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -1.5rem;
	right: -2rem;
	width: 260px;
	height: 333px;
	background: url(../img/emblem-kerma.png) no-repeat center / contain;
	/*
	 * Kuvio vaalentaa alatunnisteen vihreaa taustaa. Kermatekstin kontrasti
	 * sekoitettuun taustaan on opacitylla 0.10 4,71:1, 0.12:lla 4,52:1 ja
	 * 0.14:lla enaa 4,33:1. AA-raja 4,5:1 pitaa siis vain 0.12:een asti,
	 * joten 0.10 jattaa marginaalia.
	 */
	opacity: 0.10;
	pointer-events: none;
}

@media (max-width: 781px) {
	.vk-footer::before {
		content: none;
	}
}

/* -------------------------------------------------------------------------
 * Kuvapaikat
 * ---------------------------------------------------------------------- */

/*
 * Kuvien tilalla on toistaiseksi Cover-lohko limenvarisella taustalla
 * (overlayColor "muted"). Teksti kertoo, mika kuva paikalle on tulossa ja on
 * brandin mukaisesti vihrea. Cover olettaa tumman taustakuvan ja pakottaa
 * sisaltonsa valkoiseksi, joten vari palautetaan tassa. Kun asiakkaan kuvat
 * saapuvat, luokka poistetaan Coverilta.
 */
.wp-block-cover.vk-kuvapaikka {
	/* Lohkon peittokerros on 0 %:n peittavyydella eli lapinakyva, joten
	 * limen savy asetetaan itse lohkon taustaksi. */
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Etusivu: hero ja esittely
 * ---------------------------------------------------------------------- */

/* Heron minimikorkeus (520 px) tulee lohkosta; kapealla naytolla matalampi. */
.vk-hero {
	margin-top: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.wp-block-cover.vk-hero {
		min-height: 360px !important;
	}
}

.vk-hero__nappi .wp-block-button__link:hover,
.vk-hero__nappi .wp-block-button__link:focus {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Kuvakortit (patterns/palvelunostot.php)
 * ---------------------------------------------------------------------- */

/* Nelja rinnakkain, kapealla naytolla 2 x 2. */
@media (max-width: 781px) {
	.vk-kortit.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

/*
 * Nelion muotoinen kortti. Coverin oma minimikorkeus (430 px) nollataan,
 * jotta korkeus tulee kuvasuhteesta.
 */
.wp-block-cover.vk-kortti {
	min-height: 0;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
}

/*
 * Sisaltoalue tayttaa koko kortin, jolloin nimen linkin ::after voi peittaa
 * koko kortin (koko kortti on klikattava) ja nimi asettuu alaosaan keskelle.
 */
.vk-kortti .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: auto;
	padding: 1rem;
}

/*
 * Nimilaatikko: kerma 90 %:n peittavyydella. Vihrea teksti on pahimmassa
 * tapauksessa (musta kuva laatikon alla) 4,67:1 ja valkoisella kuvalla
 * 5,93:1, joten AA (4,5:1) tayttyy kaikilla kuvilla.
 */
.vk-kortti__nimi {
	max-width: 100%;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vk-kortti__nimi a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.vk-kortti__nimi a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
}

.vk-kortti__nimi a:hover,
.vk-kortti__nimi a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Fokusrengas koko kortin ymparille: vihrea rengas kermareunuksella
 * erottuu seka vaaleasta etta tummasta kuvasta. */
.vk-kortti__nimi a:focus-visible {
	outline: none;
}

.vk-kortti__nimi a:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px var(--wp--preset--color--base);
}

.vk-kortti .wp-block-cover__image-background {
	transition: transform 0.4s ease;
}

.vk-kortti:hover .wp-block-cover__image-background,
.vk-kortti:focus-within .wp-block-cover__image-background {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.vk-kortti .wp-block-cover__image-background {
		transition: none;
	}

	.vk-kortti:hover .wp-block-cover__image-background,
	.vk-kortti:focus-within .wp-block-cover__image-background {
		transform: none;
	}
}

@media (max-width: 781px) {
	.vk-kortti .wp-block-cover__inner-container {
		padding: 0.5rem;
	}

	.vk-kortti__nimi {
		padding: 0.4rem 0.6rem;
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.05em;
	}
}

/* -------------------------------------------------------------------------
 * Kauppalinkit ja vihrea paneeli
 * ---------------------------------------------------------------------- */

.vk-kauppa__symboli {
	margin-bottom: 0;
}

.vk-kauppa__symboli img {
	border-radius: 4px;
}

.vk-paneeli {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* -------------------------------------------------------------------------
 * Yhteydenottolomake
 * ---------------------------------------------------------------------- */

.vk-lomake {
	max-width: 34rem;
}

.vk-lomake__kentta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.1rem;
}

.vk-lomake__kentta label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.vk-lomake input[type="text"],
.vk-lomake input[type="email"],
.vk-lomake input[type="tel"],
.vk-lomake textarea {
	/* Ilman tata leveys 100 % ja padding lasketaan yhteen ja kentta levittaa sivun. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	/*
	 * Reunus on kentan ainoa nakyva raja, joten se tarvitsee 3:1 kontrastin
	 * (WCAG 1.4.11). Viivavari jaa valkoisella 1,55:1, vihrea antaa 6,72:1.
	 */
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	color: inherit;
	font: inherit;
}

.vk-lomake input:focus,
.vk-lomake textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: transparent;
}

.vk-lomake__hunaja {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vk-lomake__ohje {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.vk-lomake__ok,
.vk-lomake__virhe {
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--muted);
	font-weight: 600;
}

.vk-lomake__virhe {
	border-left-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Sisallon pikkusaadot
 * ---------------------------------------------------------------------- */

/* Taulukot eivat saa levittaa sivua kapealla naytolla. */
.wp-block-table {
	overflow-x: auto;
}