/*!
 * Painoindeksilaskuri Pro – sisältösivujen tyylit (sisalto.css)
 * Teema voi ylikirjoittaa värit muuttujilla (esim. :root { --pi-primary: #0b6e69; }).
 * Fontti, otsikot ja kappaleväli periytyvät teemasta.
 */

.pi-tarkeimmat,
.pi-lue-myos,
.pi-paivitetty,
.pi-lahteet,
.pi-taulukko-kaare,
.pi-selite {
	--_pi-p: var(--pi-primary, #0b6e69);
	--_pi-ink: var(--pi-ink, #1d2b2a);
	--_pi-panel: var(--pi-panel, #f3f7f6);
	--_pi-line: var(--pi-line, #cfdcda);
	--_pi-muted: var(--pi-muted, #4a5957);
	box-sizing: border-box;
}

.pi-tarkeimmat *,
.pi-lue-myos *,
.pi-taulukko-kaare * {
	box-sizing: border-box;
}

/* Tärkeimmät asiat -laatikko */
.pi-tarkeimmat {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	background: var(--_pi-panel);
	border: 1px solid var(--_pi-line);
	border-left: 5px solid var(--_pi-p);
	border-radius: 10px;
	color: var(--_pi-ink);
}

.pi-tarkeimmat::before {
	content: "Tärkeimmät asiat";
	display: block;
	margin: 0 0 0.5em;
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1.3;
	color: var(--_pi-ink);
}

/* Jos laatikossa on oma otsikko, automaattista otsikkoa ei näytetä. */
.pi-tarkeimmat:has(> h2, > h3, > h4, > .pi-tarkeimmat-otsikko)::before {
	content: none;
	display: none;
}

.pi-tarkeimmat > h2,
.pi-tarkeimmat > h3,
.pi-tarkeimmat > h4,
.pi-tarkeimmat > .pi-tarkeimmat-otsikko {
	margin-top: 0;
	font-size: 1.1em;
}

.pi-tarkeimmat ul,
.pi-tarkeimmat ol {
	margin: 0;
	padding-left: 1.25em;
}

.pi-tarkeimmat li + li {
	margin-top: 0.35em;
}

.pi-tarkeimmat > :last-child {
	margin-bottom: 0;
}

/* Päivitetty-rivi */
.pi-paivitetty {
	margin: 0 0 1.25em;
	font-size: 0.875em;
	line-height: 1.5;
	color: var(--_pi-muted);
}

/* Lähteet */
.pi-lahteet {
	font-size: 0.875em;
	line-height: 1.55;
	color: var(--_pi-ink);
}

.pi-lahteet ul,
.pi-lahteet ol {
	padding-left: 1.25em;
}

.pi-lahteet li + li {
	margin-top: 0.35em;
}

.pi-lahteet a {
	overflow-wrap: anywhere;
}

/* Lue myös */
.pi-lue-myos {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	border: 1px solid var(--_pi-line);
	border-radius: 10px;
	background: transparent;
}

.pi-lue-myos > :first-child {
	margin-top: 0;
}

.pi-lue-myos > :last-child {
	margin-bottom: 0;
}

.pi-lue-myos ul {
	margin: 0;
	padding-left: 1.25em;
}

.pi-lue-myos li + li {
	margin-top: 0.35em;
}

/* Taulukot */
.pi-taulukko-kaare {
	position: relative; /* pitää piilotetut tekstit vierityskääreen sisällä */
	container-type: inline-size;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--_pi-line);
	border-radius: 10px;
}

.pi-taulukko-kaare:focus-visible {
	outline: 3px solid var(--pi-focus, #1a5fb4);
	outline-offset: 2px;
}

.pi-taulukko-kaare > table.pi-taulukko {
	margin: 0;
	border: 0;
}

table.pi-taulukko {
	--_pi-p: var(--pi-primary, #0b6e69);
	--_pi-ink: var(--pi-ink, #1d2b2a);
	--_pi-panel: var(--pi-panel, #f3f7f6);
	--_pi-line: var(--pi-line, #cfdcda);
	--_pi-muted: var(--pi-muted, #4a5957);
	width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-size: 0.9375em;
	line-height: 1.4;
	color: var(--_pi-ink);
	font-variant-numeric: tabular-nums;
}

table.pi-taulukko caption {
	padding: 0.75em 0.75em 0.5em;
	text-align: left;
	font-weight: 700;
	caption-side: top;
	color: var(--_pi-ink);
}

/* Otsikko pysyy näkyvissä, kun leveää taulukkoa vieritetään sivuttain. */
.pi-taulukko-kaare .pi-taulukko-otsikko {
	position: sticky;
	left: 0.75em;
	display: inline-block;
	max-width: calc(100cqw - 1.5em);
}

table.pi-taulukko th,
table.pi-taulukko td {
	padding: 0.5em 0.75em;
	border: 1px solid var(--_pi-line);
	text-align: left;
	vertical-align: top;
}

table.pi-taulukko thead th {
	background: var(--_pi-panel);
	font-weight: 700;
	vertical-align: bottom;
}

table.pi-taulukko tbody th {
	font-weight: 700;
	white-space: nowrap;
}

table.pi-taulukko tbody tr:nth-child(even) > th,
table.pi-taulukko tbody tr:nth-child(even) > td:not([class*="pi-c-"]) {
	background: var(--_pi-panel);
}

.pi-taulukko-bmi {
	display: block;
	font-weight: 400;
	font-size: 0.85em;
	color: var(--_pi-muted);
	white-space: nowrap;
}

table.pi-taulukko-pituus td {
	white-space: nowrap;
}

/* Ruudukko */
table.pi-taulukko-ruudukko {
	font-size: 0.8125em;
}

table.pi-taulukko-ruudukko th,
table.pi-taulukko-ruudukko td {
	padding: 0.35em 0.45em;
	text-align: center;
	white-space: nowrap;
}

/* Ensimmäinen sarake pysyy paikallaan vieritettäessä. */
.pi-taulukko-kaare table.pi-taulukko tbody th,
.pi-taulukko-kaare table.pi-taulukko thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--pi-bg, #fff);
	text-align: left;
}

.pi-taulukko-kaare table.pi-taulukko thead th:first-child {
	background: var(--_pi-panel);
}

.pi-taulukko-kaare table.pi-taulukko tbody tr:nth-child(even) > th {
	background: var(--_pi-panel);
}

table.pi-taulukko-ruudukko .pi-taulukko-kulma {
	z-index: 2;
	background: var(--_pi-panel);
	font-size: 0.9em;
	white-space: normal;
	min-width: 6.5em;
}

/* Painoindeksiluokkien värit (vaaleat taustat, tumma teksti: kontrasti AA) */
.pi-c-ali {
	background: var(--pi-t-ali, #dceaf7);
	color: var(--pi-ink, #1d2b2a);
}

.pi-c-normaali {
	background: var(--pi-t-normaali, #d9efdf);
	color: var(--pi-ink, #1d2b2a);
}

.pi-c-yli {
	background: var(--pi-t-yli, #fbedc4);
	color: var(--pi-ink, #1d2b2a);
}

.pi-c-lihava {
	background: var(--pi-t-lihava, #f9dcc0);
	color: var(--pi-ink, #1d2b2a);
}

.pi-c-vaikea {
	background: var(--pi-t-vaikea, #f5cfc7);
	color: var(--pi-ink, #1d2b2a);
}

.pi-c-sairaalloinen {
	background: var(--pi-t-sairaalloinen, #ecc2c0);
	color: var(--pi-ink, #1d2b2a);
}

/* Selite */
.pi-selite {
	margin: 0.75em 0 1.5em;
	font-size: 0.875em;
	color: var(--_pi-ink);
}

.pi-selite-otsikko {
	margin: 0 0 0.4em;
	font-weight: 700;
}

.pi-selite ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	margin: 0 0 0.5em;
	padding: 0;
	list-style: none;
}

.pi-selite li {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

.pi-selite-vari {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 3px;
}

.pi-selite-huom {
	margin: 0;
	color: var(--_pi-muted);
}

/* Ruudunlukijalle tarkoitettu teksti */
.pi-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pi-noscript {
	padding: 0.75em 1em;
	border: 1px solid var(--pi-line, #cfdcda);
	border-radius: 8px;
}

/* Laskurielementti ennen JavaScriptin latautumista: varataan tilaa, jotta sivu ei hypi. */
painoindeksi-laskuri {
	display: block;
}

@media (scripting: enabled) {
	painoindeksi-laskuri:not(:defined) {
		min-height: 420px;
	}
}

@media print {
	.pi-taulukko-kaare {
		overflow: visible;
		border: 0;
	}

	table.pi-taulukko {
		font-size: 9pt;
	}

	table.pi-taulukko-ruudukko {
		font-size: 7pt;
	}

	.pi-taulukko-kaare table.pi-taulukko tbody th,
	.pi-taulukko-kaare table.pi-taulukko thead th:first-child,
	.pi-taulukko-kaare .pi-taulukko-otsikko {
		position: static;
	}

	.pi-c-ali,
	.pi-c-normaali,
	.pi-c-yli,
	.pi-c-lihava,
	.pi-c-vaikea,
	.pi-c-sairaalloinen,
	.pi-selite-vari,
	.pi-tarkeimmat {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.pi-tarkeimmat,
	.pi-lue-myos {
		break-inside: avoid;
	}
}