/*
Theme Name: Kauppakirja
Theme URI: https://kauppakirja.net
Author: Residenssi LKV Oy
Description: Kauppakirja.net-sivuston oma lohkoteema. Pohjana Arviokirja-teema: sama värimaailma, typografia ja välit, oma logo (kansilehti).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kauppakirja
*/


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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--grafiitti);
	outline-offset: 2px;
}

:where(.kk-alatunniste) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--valkoinen);
}

.has-pieni-font-size {
	line-height: 1.5;
}

/* Pitkien tekstisivujen väliotsikot (toimitusehdot, tietosuojaseloste) */
.wp-block-post-content > h2:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--70);
}

.wp-block-post-content > h2 + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Tekstityylit ---------- */

.is-style-tunniste {
	font-size: var(--wp--preset--font-size--tunniste);
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--savi);
}

.is-style-luku {
	font-size: var(--wp--preset--font-size--luku);
	line-height: 1.21;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.is-style-ingressi {
	color: var(--wp--preset--color--savi);
}

.is-layout-flow > .is-style-ingressi {
	max-width: 34em;
}

/* ---------- Kortit ja viivat ---------- */

.is-style-kortti {
	background-color: var(--wp--preset--color--valkoinen);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--varjo-1);
	padding: var(--wp--preset--spacing--50);
}

.wp-block-column > .is-style-kortti {
	box-sizing: border-box;
	height: 100%;
}

/* Hinta ja painike kortin alareunaan, jolloin hinnat ovat samalla tasolla. */
.is-style-kortti > .is-style-luku {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.is-style-viivalla {
	border-top: 1px solid var(--wp--preset--color--viiva);
	padding-top: var(--wp--preset--spacing--50);
}

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

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.kk-ylatunniste {
	border-bottom: 1px solid var(--wp--preset--color--viiva);
}

.kk-ylatunniste__sisalto {
	min-height: 80px;
	gap: var(--wp--preset--spacing--50);
}

.kk-logo {
	display: inline-block;
	line-height: 0;
	flex-shrink: 0;
}

/* Ylä- ja alatunnisteen logo: pikseliruudukkoon sovitettu logo-x17.svg / logo-savi-x17.svg (x-korkeus 17 px), piirretty juuri 43 px:n korkeuteen. */
.kk-logo img {
	display: block;
	height: 43px;
	width: auto;
}

.kk-valikko .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 6px;
}

.kk-valikko .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

.kk-valikko .kk-valikko-painike > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--oranssi);
	color: var(--wp--preset--color--valkoinen);
	font-size: 19px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
}

.kk-valikko .kk-valikko-painike > .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--grafiitti);
	text-decoration: none;
}

.kk-valikko .wp-block-navigation__responsive-container-open,
.kk-valikko .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--grafiitti);
}

.wp-block-navigation.kk-valikko:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--kerma);
	color: var(--wp--preset--color--grafiitti);
	padding: var(--wp--preset--spacing--50) clamp(16px, 4vw, 40px);
}

.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--otsikko-3);
}

/* Valikko kutistuu hampurilaiseksi jo alle 1000 px:ssä (WordPressin oletus on 600 px). */
@media (max-width: 999px) {
	.kk-valikko .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--otsikko-3);
}

.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .kk-valikko-painike > .wp-block-navigation-item__content {
	margin-top: var(--wp--preset--spacing--20);
	min-height: 52px;
	padding: 0 24px;
}

@media (max-width: 781px) {
	.kk-ylatunniste__sisalto {
		min-height: 68px;
	}

	.kk-logo img {
		height: 37px;
	}
}

/* Tilaa-painike ylätunnisteessa logon ja valikkokuvakkeen välissä, kun valikko on hampurilaisena (alle 1000 px).
   Työpöydällä sama painike on valikon viimeisenä (Tilaa lausunto). Teksti "Tilaa lausunto" vaatii noin 450 px leveän näytön,
   joten puhelimissa (alle 460 px) näkyy pelkkä "Tilaa". Painike on keskitetty logon ja valikkosymbolin
   väliin (automaattiset marginaalit molemmin puolin, vähintään 12 px rako). Alle 360 px:n näytöllä logoa pienennetään, jotta kaikki mahtuu. */
.kk-tilaa-mobiili {
	display: none;
}

@media (max-width: 999px) {
	.kk-ylatunniste__sisalto {
		gap: 12px;
	}

	.kk-ylatunniste__sisalto > .kk-tilaa-mobiili {
		display: block;
		flex-shrink: 0;
		margin-left: auto;
		margin-right: auto;
		/* Valikkosymbolin viivat alkavat 4 px sen laatikon reunasta, joten painiketta siirretään 2 px oikealle:
		   näkyvät välit logoon ja viivoihin ovat yhtä suuret. */
		position: relative;
		left: 2px;
		padding: 0 14px;
		border-radius: 8px;
		background-color: var(--wp--preset--color--oranssi);
		color: var(--wp--preset--color--valkoinen);
		font-size: 16px;
		font-weight: 600;
		line-height: 44px;
		text-decoration: none;
		white-space: nowrap;
	}

	.kk-tilaa-mobiili:hover {
		background-color: var(--wp--preset--color--grafiitti);
		color: var(--wp--preset--color--valkoinen);
	}

	.kk-tilaa-mobiili:focus-visible {
		outline: 2px solid var(--wp--preset--color--grafiitti);
		outline-offset: 2px;
	}
}

/* Valikkokuvake: kolmen viivan hampurilainen (navigaatiolohkon icon: menu, header.html). WordPressin viivat ovat 14 px
   leveitä, venytetään vaakasuunnassa 20 px:iin. Paksuus (1,5 px) ja väli (noin 6 px) eivät muutu, ja kuvake pysyy
   24 px:n painikkeen sisällä. Viivoja siirretään 2 px oikealle, jolloin niiden oikea reuna on sisällön oikean reunan linjassa. */
.kk-valikko .wp-block-navigation__responsive-container-open svg {
	transform: translateX(2px) scaleX(1.4286);
}

/* Valikon avaus- ja sulkemispainikkeen painettava alue 44 x 44 px (symboli 24 x 24 px). Negatiivinen marginaali pitää
   symbolin paikan ja ylätunnisteen asettelun ennallaan. */
.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container-open,
.wp-block-navigation.kk-valikko .wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

@media (max-width: 459px) {
	.kk-tilaa-mobiili__lisa {
		display: none;
	}
}

@media (max-width: 359px) {
	.kk-ylatunniste .kk-logo img {
		height: 31px;
	}
}

/* ---------- Etusivun yläosa ---------- */

.kk-hero__sisalto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(400px, 38%);
	grid-template-rows: 1fr auto auto auto 1fr;
	column-gap: var(--wp--preset--spacing--80);
}

.kk-hero__sisalto > * {
	grid-column: 1;
	max-width: 600px;
}

.kk-hero__sisalto > h1 {
	grid-row: 2;
	margin-top: 0;
}

.kk-hero__sisalto > .is-style-ingressi {
	grid-row: 3;
}

.kk-hero__sisalto > .wp-block-buttons {
	grid-row: 4;
}

/* Etusivun yläosan Tilaa heti -painike yhden fonttikoon muita painikkeita suurempi. Muut painikkeet skaalautuvat 14 px (puhelin)
   ja 19 px (työpöytä) välillä; tämä seuraavan koon mukaan 17 px (Leipäteksti) ja 21 px (Otsikko 3) välillä, näyttö 375 ja 1200 px. */
.kk-hero__sisalto .wp-block-button__link {
	font-size: clamp(17px, 15.18px + 0.4848vw, 21px);
}

/* Laadittujen lausuntojen laskuri omassa palkissaan etusivun yläosan alla. Savipohja, koska palkissa on logo (savelle tarkoitettu versio). */
.kk-maarapalkki {
	background-color: var(--wp--preset--color--savi);
	color: var(--wp--preset--color--valkoinen);
}

.kk-maara {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--valkoinen);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
}

.kk-maara__luku {
	display: inline-block;
	color: #F2B48F; /* sama kuin .com laskuripalkin logossa (logo-savi-x14.svg) */
	font-size: inherit;
	font-weight: inherit;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Vuosiluku samalla värillä kuin luku ja .com (28.10.2026). */
.kk-maara__vuosi {
	color: #F2B48F;
}

.kk-hero__sisalto > .kk-hero__kuva {
	grid-column: 2;
	grid-row: 1 / 6;
	align-self: center;
	max-width: none;
	margin: 0;
}

.kk-kansi {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--wp--preset--font-family--plex);
}

.kk-kansi text {
	fill: var(--wp--preset--color--grafiitti);
}

.kk-kansi__taka,
.kk-kansi__sivu {
	fill: var(--wp--preset--color--valkoinen);
	stroke: var(--wp--preset--color--viiva);
}

.kk-kansi__etu {
	filter: drop-shadow(0 1px 2px rgba(38, 40, 44, 0.08));
}

.kk-kansi__rivit {
	fill: var(--wp--preset--color--viiva);
}

.kk-kansi__viiva {
	fill: none;
	stroke: var(--wp--preset--color--viiva);
}

.kk-kansi__otsikko {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.kk-kansi__osio {
	font-size: 16px;
	font-weight: 600;
}

.kk-kansi__tulos {
	fill: var(--wp--preset--color--oranssi);
}

.kk-kansi .kk-kansi__arvio {
	font-size: 20px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	fill: var(--wp--preset--color--oranssi);
}

/* Allekirjoitus: sininen kuulakärkikynän muste. */
.kk-kansi__allekirjoitus {
	fill: none;
	stroke: #1E4B9B;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 899px) {
	.kk-hero__sisalto {
		display: block;
	}

	/* Kapealla näytöllä kuva tekstin alla pienempänä. */
	.kk-hero__sisalto > .kk-hero__kuva {
		max-width: 300px;
		margin: var(--wp--preset--spacing--70) auto 0;
	}
}

/* ---------- Kysymykset ---------- */

.kk-ukk .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--viiva);
	margin-block-start: 0;
}

.kk-ukk .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--viiva);
}

.kk-ukk .wp-block-details > summary {
	position: relative;
	list-style: none;
	padding: 20px 44px 20px 0;
	font-weight: 600;
	cursor: pointer;
}

.kk-ukk .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.kk-ukk .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--savi);
}

.kk-ukk .wp-block-details[open] > summary::after {
	content: "\2212";
}

.kk-ukk .wp-block-details > summary + * {
	margin-block-start: 0;
}

.kk-ukk .wp-block-details > :last-child:not(summary) {
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ---------- Erotinviiva ---------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--viiva);
	opacity: 1;
}

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

.kk-alatunniste .is-style-tunniste {
	color: var(--wp--preset--color--valkoinen);
}

.kk-alatunniste .wp-block-separator {
	border-top-color: rgba(255, 255, 255, 0.24);
}

.kk-alatunniste .kk-logo img {
	height: 43px;
}

.kk-evasteet {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.kk-evasteet:hover {
	text-decoration: none;
}

/* ---------- Tulostus ja liike ---------- */

@media print {
	.wp-site-blocks > header.wp-block-template-part {
		position: static;
	}
}

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

/* ---------- Symbolit ---------- */

.kk-ikoni {
	display: block;
	width: 48px;
	height: 48px;
	color: var(--wp--preset--color--grafiitti);
}

.kk-ikoni + .wp-block-heading {
	margin-top: var(--wp--preset--spacing--40);
}

/* Käyttökohteet: symboli, otsikko ja teksti keskellä saraketta. */
#palvelut .wp-block-column {
	text-align: center;
}

#palvelut .kk-ikoni {
	margin-inline: auto;
}

/* Hinnasto: koko kortti keskitetty (otsikko, kuvaus, hinta ja painike). */
#hinnasto .is-style-kortti {
	text-align: center;
}

#hinnasto .is-style-kortti > .wp-block-buttons {
	justify-content: center;
}

/* Näkymätön teksti ruudunlukijoille. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tilausohje: numerot, otsikot ja leipätekstit samalle tasolle kaikissa sarakkeissa. */
@media (min-width: 782px) {
	#tilausohje .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto auto auto;
		column-gap: var(--wp--preset--spacing--60);
		row-gap: 0;
	}

	#tilausohje .wp-block-columns > .wp-block-column {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		align-content: start;
	}
}

/* Sana pysyy yhdellä rivillä (esim. haja-asutusalue) */
.kk-nowrap{white-space:nowrap}

/* Hinnasto: otsikot, kuvaukset, hinnat ja painikkeet samoille riveille kaikissa korteissa.
   Otsikko keskitetään pystysuunnassa omalle rivilleen, kuvaukset alkavat samalta tasolta. */
@media (min-width: 782px) {
	#hinnasto .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr auto;
		row-gap: 0;
	}

	#hinnasto .wp-block-columns > .wp-block-column {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
	}

	#hinnasto .wp-block-column > .is-style-kortti {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		align-content: start;
	}

	#hinnasto .is-style-kortti > .wp-block-heading {
		align-self: center;
	}

	#hinnasto .is-style-kortti > .wp-block-paragraph:not(.is-style-luku) {
		align-self: start;
	}

	#hinnasto .is-style-kortti > .is-style-luku {
		align-self: end;
	}
}

/* Laskuripalkin logo (28.10.2026 ilta): koko logo keskellä omalla rivillään, luku ja teksti sen alla myös työpöydällä.
   logo-savi-x17.svg on pikseliruudukkoon sovitettu juuri 43 px:n korkeuteen (239 x 43), sama tiedosto kuin alatunnisteessa. Puhelimessa 37 px kuten ylätunnisteessa. */
.kk-maara__logo {
	display: block;
	width: auto;
	height: 43px;
	margin: 0 auto 10px;
}

.kk-maara__nimi {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.kk-maara__logo {
		height: 37px;
		margin-bottom: 8px;
	}
}

/* Artikkelin kirjoittajarivi */
.kk-kirjoittaja{margin-top:0;font-size:var(--wp--preset--font-size--pieni);color:var(--wp--preset--color--savi)}

/* Artikkelien Arviokirja.com-osion otsikko: logo + "-arviolausunto". Sanamerkin pienaakkosten korkeus on 45,5 % logon korkeudesta ja IBM Plex Sansin 0,516 em,
   joten teksti mitoitetaan niin, että sen kirjaimet ovat noin 90 % sanamerkin kirjaimista (fonttikoko noin 0,8 x logon korkeus).
   Työpöydällä pikseliruudukkoon sovitettu logo-x15.svg (x-korkeus 15 px) juuri 38 px:n korkuisena (212 x 38) ja teksti 27 px, puhelimessa sama tiedosto 33 px:n korkuisena ja teksti 24 px.
   Perusviiva on 6 px logon alareunan yläpuolella (puhelimessa 5,2 px), joten kuva lasketaan sen verran perusviivan alle. */
h2.kk-logo-otsikko {
	font-size: 27px;
}

.kk-otsikkologo {
	display: inline-block;
	width: auto;
	height: 38px;
	margin: 0 1px 0 0;
	vertical-align: -6px;
}

@media (max-width: 781px) {
	h2.kk-logo-otsikko {
		font-size: 24px;
	}

	.kk-otsikkologo {
		height: 33px;
		vertical-align: -5.2px;
	}
}

/* Artikkelien Tilaa-painikkeet: kaksi yhtä leveää täytettyä painiketta. Toinen painike (is-style-outline, käytössä vain artikkeleissa)
   on savenvärinen. Ruudukko ja fit-content tekevät molemmista pisimmän painikkeen levyisiä; kapealla näytöllä painikkeet ovat allekkain koko levyltä. */
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button.is-style-outline) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: fit-content;
	max-width: 100%;
}

.wp-block-post-content .wp-block-buttons:has(> .wp-block-button.is-style-outline) > .wp-block-button,
.wp-block-post-content .wp-block-buttons:has(> .wp-block-button.is-style-outline) .wp-block-button__link {
	width: 100%;
}

.wp-block-post-content .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 0;
	padding: 14px 24px;
	background-color: var(--wp--preset--color--savi);
	color: var(--wp--preset--color--valkoinen);
}

.wp-block-post-content .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--grafiitti);
	color: var(--wp--preset--color--valkoinen);
}

@media (max-width: 719px) {
	.wp-block-post-content .wp-block-buttons:has(> .wp-block-button.is-style-outline) {
		grid-auto-flow: row;
		width: 100%;
	}
}

/* ---------- Artikkelit-sivu: artikkelikortit (lyhytkoodi [ak_artikkelit]) ---------- */

.kk-artikkelit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

.kk-artikkelikortti {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--valkoinen);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--varjo-1);
}

.kk-artikkelikortti__otsikko {
	margin: 0;
	font-size: var(--wp--preset--font-size--otsikko-3);
	line-height: 1.3;
}

.kk-artikkelikortti__otsikko a {
	color: var(--wp--preset--color--grafiitti);
	text-decoration: none;
}

/* Koko kortti on klikattava: otsikkolinkin alue venytetään kortin kokoiseksi. */
.kk-artikkelikortti__otsikko a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.kk-artikkelikortti__otsikko a:focus-visible {
	outline: none;
}

.kk-artikkelikortti__otsikko a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--grafiitti);
	outline-offset: 2px;
}

.kk-artikkelikortti:hover .kk-artikkelikortti__otsikko a {
	text-decoration: underline;
}

.kk-artikkelikortti__kuvaus {
	margin: 0;
	color: var(--wp--preset--color--savi);
	font-size: var(--wp--preset--font-size--pieni);
	line-height: 1.5;
}

.kk-artikkelikortti__lue {
	margin: auto 0 0;
	padding-top: 6px;
	color: var(--wp--preset--color--oranssi);
	font-size: var(--wp--preset--font-size--pieni);
	font-weight: 600;
}

.kk-artikkelikortti__lue::after {
	content: " \2192";
}

@media (max-width: 781px) {
	.kk-artikkelit {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Ylävalikko kapealla työpöydällä (1000 ja 1149 px): kuusi kohtaa mahtuu yhdelle riville, kun väli on hieman pienempi. Tekstit eivät rivity. */
.kk-valikko .wp-block-navigation-item__content {
	white-space: nowrap;
}

@media (min-width: 1000px) and (max-width: 1149px) {
	body .kk-valikko.wp-block-navigation,
	body .kk-valikko.wp-block-navigation .wp-block-navigation__container {
		gap: 18px;
	}
}


/* Sisällön tekstilinkit: tekstin oma väri ja oranssi alleviivaus (28.10.2026; paksuus 2 px -> 1 px samana iltana). Ei koske valikkoa, alatunnistetta eikä painikkeita. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--oranssi);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* ==========================================================================
   Kauppakirja.net: omat lisäykset Arviokirja-pohjan päälle
   ========================================================================== */

/* Logo: kansilehti on nimeä korkeampi, joten logo on korkeampi kuin arviokirjassa (nimen x-korkeus noin 17 px). */
.kk-logo img,
.kk-alatunniste .kk-logo img {
	height: 64px;
}

@media (max-width: 781px) {
	.kk-logo img {
		height: 52px;
	}
}

@media (max-width: 359px) {
	.kk-ylatunniste .kk-logo img {
		height: 44px;
	}
}

.kk-ylatunniste__sisalto {
	min-height: 88px;
}

@media (max-width: 781px) {
	.kk-ylatunniste__sisalto {
		min-height: 72px;
	}
}

/* Etusivun kuva: kauppakirjan nimikirjoitukset ja nimiöt. */
.kk-kansi .kk-kansi__nimio {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--wp--preset--color--savi);
}

.kk-kansi .kk-kansi__hinta {
	font-size: 20px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	fill: var(--wp--preset--color--oranssi);
}

.kk-kansi__allekirjoitus--2 {
	stroke-width: 1.6;
}

/* Palvelut: neljä saraketta, symbolit keskellä. */
#palvelut .wp-block-column > p:last-child {
	margin-top: auto;
}

/* Hinnasto: toinen rivi (MML-kauppa ja vastuunrajoitusehdot) kahdessa sarakkeessa. */
@media (min-width: 782px) {
	#hinnasto .wp-block-columns.kk-hinnasto-lisa {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

#hinnasto .kk-hinnasto-lisa {
	margin-top: var(--wp--preset--spacing--50);
}

.kk-hinta-pieni {
	font-size: var(--wp--preset--font-size--pieni);
	color: var(--wp--preset--color--savi);
}

/* Sisarpalvelu: arviokirja.com */
.kk-sisar {
	border: 1px solid var(--wp--preset--color--viiva);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--50);
}

/* Palvelusivujen sisältölistat: oranssi neliö luettelomerkkinä. */
.wp-block-post-content ul.kk-lista {
	list-style: none;
	padding-left: 0;
}

.wp-block-post-content ul.kk-lista > li {
	position: relative;
	padding-left: 22px;
}

.wp-block-post-content ul.kk-lista > li + li {
	margin-top: 6px;
}

.wp-block-post-content ul.kk-lista > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--oranssi);
}

/* Palvelusivun hintarivi otsikon alla. */
.kk-hintarivi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
}

.kk-hintarivi strong {
	font-size: var(--wp--preset--font-size--luku);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
/* Palvelut: keskikokoisilla näytöillä kaksi saraketta, jotta pitkät otsikot eivät katkea. */
@media (min-width: 782px) and (max-width: 1099px) {
	#palvelut .wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--70);
	}

	#palvelut .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--60)) !important;
		flex-grow: 0;
	}
}

.wp-block-heading {
	overflow-wrap: normal;
	hyphens: manual;
}