/*
Theme Name: LTY-teema
Theme URI: https://loviisantaideyhdistys.fi/
Description: Loviisan taideyhdistys ry:n (Lovisa konstförening rf, Galleria Theodor) oma klassinen teema. Kaksikielinen suomi–ruotsi ilman kielilisäosaa. Taiteilijoiden sisältötyyppi tulee lisäosasta "LTY – sisältörakenteet".
Author: Loviisan taideyhdistys ry
Version: 1.10.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lty
Tags: custom-logo, custom-menu, featured-images, translation-ready, two-columns, accessibility-ready
*/

/* ==========================================================================
   1. Design-tokenit
   Nimet ovat suomeksi ja vastaavat staattisia malleja (LTY/etusivu-ehdotus.html).
   Ink-päätteiset sävyt ovat samoja värejä tekstikäyttöön: alkuperäiset sävyt
   eivät yllä WCAG AA -kontrastiin (4,5:1) vaalealla pohjalla.
   ========================================================================== */

:root {
	/* Logon paletti – taustat, palkit, koristeet */
	--keltainen: #f0c93f;
	--oranssi: #e0813f;
	--vihrea: #7fae62;
	--sininen: #7592c4;
	--violetti: #8f7fbc;

	/* Samat värit tekstinä ja painikkeen taustana (valkoinen teksti) */
	--oranssi-ink: #a85f28;   /* 4,85:1 valkoista vasten */
	--oranssi-tumma: #8d4e1f; /* painikkeen osoitintila */
	--sininen-ink: #4a6aa3;   /* 5,41:1 valkoista vasten, 4,84:1 taustaa vasten */
	--sininen-tumma: #3b5688;
	--violetti-ink: #5c4f80;  /* 7,28:1 valkoista vasten – korostusosion tausta */

	/* Pinnat */
	--tausta: #f4f2ee;
	--kortti: #ffffff;
	--alatunniste: #faf8f5;

	/* Teksti */
	--tumma: #2b2b2b;
	--teksti: #3c3c3c;
	--harmaa: #6d6d6d;        /* ruotsinkielinen rinnakkaisteksti, 5,17:1 */
	--harmaa-vaalea: #8a8a8a; /* vain koristeet ja viivat, ei tekstiä */
	--viiva: #e5e0d8;

	/* Mitat
	   --leveys on sivun kontti. 1200 px mahtuu kapeimmallekin yleiselle
	   työpöytänäytölle (1366 px -> noin 75 px marginaali puolelle) ja on
	   väljä 1536- ja 1920-leveyksillä, jotka ovat nykyään yleisimmät.
	   --mitta rajaa leipätekstin luettavaan riviPITUUTEEN noin 70 merkkiin:
	   kontin leventäminen ei saa venyttää tekstiriviä. */
	--leveys: 1200px;
	--mitta: 680px;
	--leveys-laaja: 1160px;
	--reunus: 20px;
	--pyoristys: 6px;
}

/* ==========================================================================
   2. Perusta
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--tausta);
	color: var(--teksti);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--tumma);
	font-weight: normal;
	line-height: 1.3;
}

a {
	color: var(--sininen-ink);
}

a:hover,
a:focus {
	color: var(--sininen-tumma);
}

img,
svg,
iframe,
video {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* Näkyvä kohdistus näppäimistökäyttäjille */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sininen-ink);
	outline-offset: 2px;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Apuluokat
   ========================================================================== */

.rajaus {
	max-width: var(--leveys);
	margin: 0 auto;
	padding: 0 var(--reunus);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--kortti);
	clip-path: none;
	color: var(--sininen-tumma);
	display: block;
	font-size: 15px;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

/* Ruotsinkielinen rinnakkaisteksti – sekä teeman että lohkoeditorin luokka */
.sv,
.is-style-lty-sv {
	color: var(--harmaa);
}

.sv-otsikko,
.is-style-lty-sv-otsikko {
	color: var(--harmaa);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: normal;
	margin: 0 0 24px;
}

.yliotsikko,
.is-style-lty-yliotsikko {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--harmaa);
	margin-bottom: 12px;
}

/* ==========================================================================
   4. Väripalkki – sivuston tunnusmerkki
   ========================================================================== */

.varipalkki {
	display: flex;
	height: 8px;
}

.varipalkki span {
	flex: 1;
}

.varipalkki span:nth-child(1) {
	background: var(--keltainen);
}

.varipalkki span:nth-child(2) {
	background: var(--oranssi);
}

.varipalkki span:nth-child(3) {
	background: var(--vihrea);
}

.varipalkki span:nth-child(4) {
	background: var(--sininen);
}

.varipalkki span:nth-child(5) {
	background: var(--violetti);
}

.varipalkki.kaannetty span:nth-child(1) {
	background: var(--violetti);
}

.varipalkki.kaannetty span:nth-child(2) {
	background: var(--sininen);
}

.varipalkki.kaannetty span:nth-child(3) {
	background: var(--vihrea);
}

.varipalkki.kaannetty span:nth-child(4) {
	background: var(--oranssi);
}

.varipalkki.kaannetty span:nth-child(5) {
	background: var(--keltainen);
}

/* ==========================================================================
   5. Ylätunniste ja päävalikko
   ========================================================================== */

.sivun-ylaosa {
	background: var(--kortti);
}

.ylapalkki {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px var(--reunus);
	flex-wrap: wrap;
}

.brandi {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.brandi img,
.brandi .custom-logo {
	width: 110px;
	height: auto;
	display: block;
}

.brandi .sivuston-nimi {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
}

.brandi .sivuston-nimi a {
	color: var(--tumma);
	text-decoration: none;
}

.brandi .sivuston-kuvaus {
	font-size: 13px;
	color: var(--harmaa);
	margin: 2px 0 0;
}

.paavalikko ul {
	list-style: none;
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.paavalikko a {
	display: inline-block;
	text-decoration: none;
	color: var(--tumma);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 3px solid transparent;
}

.paavalikko a:hover,
.paavalikko a:focus {
	border-bottom-color: var(--keltainen);
	color: var(--tumma);
}

.paavalikko .current-menu-item > a,
.paavalikko .current_page_item > a,
.paavalikko .current-menu-ancestor > a,
.paavalikko .current-lty-osio > a {
	border-bottom-color: var(--oranssi);
}

/* Alavalikot: yksinkertainen pudotus, kosketuslaitteilla avautuu myös
   kohdistuksesta (:focus-within). */
.paavalikko li {
	position: relative;
}

.paavalikko .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	background: var(--kortti);
	border: 1px solid var(--viiva);
	border-radius: 0 0 var(--pyoristys) var(--pyoristys);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	padding: 8px 0;
}

.paavalikko li:hover > .sub-menu,
.paavalikko li:focus-within > .sub-menu {
	display: flex;
}

.paavalikko .sub-menu a {
	display: block;
	padding: 8px 18px;
	border-bottom: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

.paavalikko .sub-menu a:hover,
.paavalikko .sub-menu a:focus {
	background: var(--tausta);
}

.valikkonappi {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 1px solid var(--viiva);
	border-radius: 4px;
	color: var(--tumma);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 16px;
	cursor: pointer;
}

.valikkonappi .viivat {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--tumma);
	position: relative;
}

.valikkonappi .viivat::before,
.valikkonappi .viivat::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--tumma);
}

.valikkonappi .viivat::before {
	top: -6px;
}

.valikkonappi .viivat::after {
	top: 6px;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	background: var(--kortti);
	text-align: center;
	padding: 48px var(--reunus) 56px;
}

.hero img.logo-iso {
	width: 260px;
	margin: 0 auto 20px;
	display: block;
}

.hero h1 {
	font-size: 34px;
	line-height: 1.3;
	max-width: 720px;
	margin: 0 auto 10px;
}

.hero p.sv {
	font-size: 17px;
	max-width: var(--mitta);
	margin: 0 auto;
}

/* ==========================================================================
   7. Osiot
   ========================================================================== */

.osio {
	padding: 56px 0;
}

.osio-valkoinen {
	background: var(--kortti);
}

.osio-vaalea {
	background: var(--tausta);
}

.osio h2 {
	font-size: 26px;
	margin-bottom: 4px;
}

.osio p {
	margin-bottom: 14px;
	max-width: var(--mitta);
}

.osio > .rajaus > *:last-child,
.osio .osion-sisalto > *:last-child {
	margin-bottom: 0;
}

.kaksi-palstaa {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.osion-muokkausvihje {
	background: #fff8e5;
	border-left: 5px solid var(--keltainen);
	padding: 14px 18px;
	border-radius: 0 var(--pyoristys) var(--pyoristys) 0;
	font-size: 14px;
}

/* Näyttelyosio */
.nayttely-kuva img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pyoristys);
}

.pvm-merkki {
	display: inline-block;
	background: var(--keltainen);
	color: var(--tumma);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 3px;
	margin-bottom: 14px;
}

/* Tietolaatikko */
.tietolaatikko,
.is-style-lty-tietolaatikko {
	background: var(--tausta);
	border-left: 5px solid var(--sininen);
	padding: 18px 22px;
	border-radius: 0 var(--pyoristys) var(--pyoristys) 0;
	margin-top: 8px;
}

.osio-vaalea .tietolaatikko,
.osio-vaalea .is-style-lty-tietolaatikko {
	background: var(--kortti);
}

.tietolaatikko p,
.is-style-lty-tietolaatikko p {
	margin-bottom: 14px;
}

.tietolaatikko p:last-child,
.is-style-lty-tietolaatikko p:last-child {
	margin-bottom: 0;
}

.tietolaatikko strong,
.is-style-lty-tietolaatikko strong {
	color: var(--tumma);
}

/* ==========================================================================
   8. Taiteilijakortit
   ========================================================================== */

.taiteilijakortit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 8px;
}

/* Kortti on suorakulmainen: ei pyöristystä. Yläreunan väriraita säilyy. */
.kortti {
	background: var(--tausta);
	border-radius: 0;
	padding: 28px 22px 24px;
	text-align: center;
	text-decoration: none;
	color: var(--teksti);
	display: block;
	border-top: 5px solid var(--viiva);
	transition: box-shadow 0.2s ease;
}

/* Kortti erottuu aina taustastaan: vaalealla osiolla ja listaussivuilla
   (arkisto, haku) kortti on valkoinen, valkoisella osiolla beige. */
.osio-vaalea .kortti,
.sisaltoalue .kortti {
	background: var(--kortti);
}

.kortti:hover,
.kortti:focus {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	color: var(--teksti);
}

/* Kortin ylärajan väri kiertää paletin läpi (lty_kortin_vari()) */
.kortti.vari-keltainen {
	border-top-color: var(--keltainen);
}

.kortti.vari-sininen {
	border-top-color: var(--sininen);
}

.kortti.vari-oranssi {
	border-top-color: var(--oranssi);
}

.kortti.vari-vihrea {
	border-top-color: var(--vihrea);
}

.kortti.vari-violetti {
	border-top-color: var(--violetti);
}

.kortti h3 {
	font-size: 19px;
	margin-bottom: 4px;
}

.kortti .ala {
	font-size: 14px;
	color: var(--harmaa);
	margin: 0;
}

.profiilikuva {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	background: var(--viiva);
}

.profiilikuva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Nimikirjainten varakuva, kun profiilikuvaa ei ole */
.profiilikuva.vari-keltainen {
	background: linear-gradient(135deg, var(--keltainen), var(--oranssi));
}

.profiilikuva.vari-sininen {
	background: linear-gradient(135deg, var(--sininen), var(--violetti));
}

.profiilikuva.vari-oranssi {
	background: linear-gradient(135deg, var(--oranssi), var(--violetti));
}

.profiilikuva.vari-vihrea {
	background: linear-gradient(135deg, var(--vihrea), var(--sininen));
}

.profiilikuva.vari-violetti {
	background: linear-gradient(135deg, var(--violetti), var(--keltainen));
}

/* ==========================================================================
   9. Listat ja painikkeet
   ========================================================================== */

.jasenedut,
.is-style-lty-jasenedut {
	list-style: none;
	max-width: var(--mitta);
	margin: 0;
	padding: 0;
}

.jasenedut li,
.is-style-lty-jasenedut li {
	padding: 10px 0 10px 30px;
	position: relative;
	border-bottom: 1px solid var(--viiva);
}

.jasenedut li::before,
.is-style-lty-jasenedut li::before {
	content: "\25CF";
	position: absolute;
	left: 4px;
	color: var(--sininen);
}

.jasenedut li:nth-child(5n + 1)::before,
.is-style-lty-jasenedut li:nth-child(5n + 1)::before {
	color: var(--keltainen);
}

.jasenedut li:nth-child(5n + 2)::before,
.is-style-lty-jasenedut li:nth-child(5n + 2)::before {
	color: var(--oranssi);
}

.jasenedut li:nth-child(5n + 3)::before,
.is-style-lty-jasenedut li:nth-child(5n + 3)::before {
	color: var(--vihrea);
}

.jasenedut li:nth-child(5n + 4)::before,
.is-style-lty-jasenedut li:nth-child(5n + 4)::before {
	color: var(--sininen);
}

.jasenedut li:nth-child(5n + 5)::before,
.is-style-lty-jasenedut li:nth-child(5n + 5)::before {
	color: var(--violetti);
}

.nappi,
.is-style-lty-nappi .wp-block-button__link {
	display: inline-block;
	margin-top: 20px;
	background: var(--oranssi-ink);
	color: #ffffff;
	text-decoration: none;
	padding: 12px 28px;
	border-radius: 4px;
	font-size: 15px;
	letter-spacing: 1px;
	border: 0;
	cursor: pointer;
}

.nappi:hover,
.nappi:focus,
.is-style-lty-nappi .wp-block-button__link:hover,
.is-style-lty-nappi .wp-block-button__link:focus {
	background: var(--oranssi-tumma);
	color: #ffffff;
}

.nappi.nappi-sininen {
	background: var(--sininen-ink);
}

.nappi.nappi-sininen:hover,
.nappi.nappi-sininen:focus {
	background: var(--sininen-tumma);
}

/* ==========================================================================
   10. Taiteilijasivu
   ========================================================================== */

.murupolku {
	padding: 20px var(--reunus) 0;
	font-size: 13px;
	color: var(--harmaa);
}

.murupolku a {
	color: var(--harmaa);
}

.murupolku .erotin {
	padding: 0 4px;
}

.taiteilija-esittely {
	padding: 40px 0 56px;
}

.esittely-rivi {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	align-items: start;
}

.esittely-rivi .profiilikuva {
	width: 240px;
	height: 240px;
	font-size: 64px;
	margin: 0 auto;
}

.taiteilija-esittely h1 {
	font-size: 32px;
	margin-bottom: 2px;
}

.taiteilija-esittely .ala {
	color: var(--harmaa);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	margin-bottom: 18px;
}

.taiteilija-esittely .esittelyteksti > * {
	max-width: 560px;
}

.taiteilija-esittely .esittelyteksti p {
	margin-bottom: 14px;
}

.yhteystiedot {
	background: var(--kortti);
	border-left: 5px solid var(--vihrea);
	padding: 18px 22px;
	border-radius: 0 var(--pyoristys) var(--pyoristys) 0;
	margin-top: 22px;
	max-width: 420px;
}

.yhteystiedot strong {
	color: var(--tumma);
}

.yhteystiedot p {
	margin-bottom: 8px;
}

.yhteystiedot p:last-child {
	margin-bottom: 0;
}

.galleria-osio {
	background: var(--kortti);
	padding: 48px 0 56px;
}

.galleria-osio h2 {
	font-size: 24px;
	margin-bottom: 4px;
}

.teosruudukko {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.teos {
	margin: 0;
}

.teos .teoslinkki {
	display: block;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: var(--viiva);
}

.teos img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.teos .teoslinkki:hover img,
.teos .teoslinkki:focus img {
	opacity: 0.9;
}

.teos figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 12px 12px;
	color: #ffffff;
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.paluu {
	display: inline-block;
	margin-top: 32px;
}

/* Lightbox */
.lty-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	padding: 40px 20px;
	background: rgba(20, 18, 16, 0.92);
}

.lty-lightbox[hidden] {
	display: none;
}

.lty-lightbox img {
	max-width: min(100%, 1200px);
	max-height: 78vh;
	width: auto;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lty-lightbox .lty-selite {
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	max-width: 640px;
}

.lty-lightbox button {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	color: #ffffff;
	width: 48px;
	height: 48px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.lty-lightbox button:hover,
.lty-lightbox button:focus {
	background: rgba(255, 255, 255, 0.28);
}

.lty-lightbox .lty-sulje {
	top: 16px;
	right: 16px;
}

.lty-lightbox .lty-edellinen {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.lty-lightbox .lty-seuraava {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

body.lty-lightbox-auki {
	overflow: hidden;
}

/* ==========================================================================
   11. Sivut, artikkelit, arkistot ja haku
   ========================================================================== */

.sisaltoalue {
	padding: 40px 0 64px;
}

.sivun-otsikko {
	margin-bottom: 32px;
}

.sivun-otsikko h1 {
	font-size: 32px;
	margin-bottom: 4px;
}

.artikkeli {
	background: var(--kortti);
	border-radius: var(--pyoristys);
	padding: 32px;
	margin-bottom: 28px;
}

.artikkeli:last-of-type {
	margin-bottom: 0;
}

.artikkeli h2 {
	font-size: 24px;
	margin-bottom: 6px;
}

.artikkeli h2 a {
	text-decoration: none;
	color: var(--tumma);
}

.artikkeli h2 a:hover,
.artikkeli h2 a:focus {
	color: var(--sininen-tumma);
}

.artikkelin-meta {
	font-size: 13px;
	color: var(--harmaa);
	margin-bottom: 16px;
}

.artikkelin-kuva {
	margin-bottom: 20px;
}

.artikkelin-kuva img {
	border-radius: var(--pyoristys);
	display: block;
	width: 100%;
}

.sivutus {
	margin-top: 32px;
}

.sivutus .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin-right: 6px;
	background: var(--kortti);
	border-radius: 4px;
	text-decoration: none;
}

.sivutus .page-numbers.current {
	background: var(--sininen-ink);
	color: #ffffff;
}

.hakulomake {
	display: flex;
	gap: 10px;
	max-width: 480px;
	flex-wrap: wrap;
}

.hakulomake input[type="search"] {
	flex: 1 1 220px;
	padding: 11px 14px;
	border: 1px solid var(--viiva);
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	background: var(--kortti);
	color: var(--teksti);
}

.hakulomake button {
	background: var(--sininen-ink);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 11px 22px;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.hakulomake button:hover,
.hakulomake button:focus {
	background: var(--sininen-tumma);
}

.ei-tuloksia {
	background: var(--kortti);
	border-radius: var(--pyoristys);
	padding: 32px;
}

/* ==========================================================================
   12. Lohkosisältö
   ========================================================================== */

.sisalto > * {
	margin-bottom: 20px;
}

.sisalto > *:last-child {
	margin-bottom: 0;
}

.sisalto h2 {
	font-size: 26px;
	margin-top: 36px;
}

.sisalto h3 {
	font-size: 20px;
	margin-top: 28px;
}

.sisalto ul,
.sisalto ol {
	padding-left: 24px;
}

.sisalto li {
	margin-bottom: 6px;
}

.sisalto blockquote {
	border-left: 5px solid var(--keltainen);
	padding: 6px 0 6px 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 19px;
	color: var(--tumma);
}

.sisalto table {
	width: 100%;
	border-collapse: collapse;
}

.sisalto th,
.sisalto td {
	border: 1px solid var(--viiva);
	padding: 10px 12px;
	text-align: left;
}

.sisalto img {
	border-radius: var(--pyoristys);
}

.wp-block-image figcaption,
.wp-caption-text {
	font-size: 13px;
	color: var(--harmaa);
	margin-top: 6px;
}

.alignleft {
	float: left;
	margin: 0 24px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 24px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.alignwide {
	max-width: 100%;
	width: auto;
}

.alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
}

.sticky .artikkeli,
.artikkeli.sticky {
	border-top: 5px solid var(--keltainen);
}

/* ==========================================================================
   13. Kommentit
   ========================================================================== */

.kommentit {
	background: var(--kortti);
	border-radius: var(--pyoristys);
	padding: 32px;
	margin-top: 28px;
}

.kommenttilista {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.kommenttilista .children {
	list-style: none;
	padding-left: 28px;
}

.kommenttilista article {
	border-bottom: 1px solid var(--viiva);
	padding: 16px 0;
}

.kommentit input[type="text"],
.kommentit input[type="email"],
.kommentit input[type="url"],
.kommentit textarea {
	width: 100%;
	max-width: 480px;
	padding: 10px 12px;
	border: 1px solid var(--viiva);
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
}

.kommentit .submit {
	background: var(--oranssi-ink);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* ==========================================================================
   14. Alatunniste
   ========================================================================== */

.sivun-alaosa {
	background: var(--alatunniste);
	text-align: center;
	padding: 32px var(--reunus);
	font-size: 13px;
	color: var(--harmaa);
}

.sivun-alaosa strong {
	color: var(--teksti);
}

.sivun-alaosa p + p {
	margin-top: 8px;
}

.sivun-alaosa a {
	color: var(--sininen-ink);
}

/* ==========================================================================
   15. Mobiili (murtumispiste 700 px, kuten malleissa)
   ========================================================================== */

@media (max-width: 700px) {
	.ylapalkki {
		gap: 14px;
	}

	.valikkonappi {
		display: inline-flex;
	}

	.paavalikko {
		display: none;
		flex-basis: 100%;
		width: 100%;
		border-top: 1px solid var(--viiva);
		padding-top: 12px;
	}

	.paavalikko.auki {
		display: block;
	}

	.paavalikko ul {
		flex-direction: column;
		gap: 0;
	}

	.paavalikko li {
		border-bottom: 1px solid var(--viiva);
	}

	.paavalikko a {
		display: block;
		padding: 12px 0;
		border-bottom: 0;
	}

	.paavalikko .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		min-width: 0;
		padding: 0 0 8px 16px;
	}

	.kaksi-palstaa,
	.esittely-rivi,
	.taiteilijakortit {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.teosruudukko {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero {
		padding: 36px var(--reunus) 40px;
	}

	.hero h1 {
		font-size: 27px;
	}

	.hero img.logo-iso {
		width: 200px;
	}

	.osio {
		padding: 40px 0;
	}

	.artikkeli,
	.kommentit,
	.ei-tuloksia {
		padding: 24px 20px;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 20px;
	}

	.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.lty-lightbox .lty-edellinen,
	.lty-lightbox .lty-seuraava {
		top: auto;
		bottom: 16px;
		transform: none;
	}
}

/* Hallintapalkin huomiointi */
.admin-bar .lty-lightbox {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .lty-lightbox {
		top: 46px;
	}
}

/* ==========================================================================
   16. Alaotsikko, kielivalitsin ja hero-painike
   `.sv`/`.sv-otsikko` ovat vanhan rinnakkaiskielikonvention jäänteitä.
   Ne säilytetään, jottei ennen Polylangia kirjoitettu sisältö rikkoudu.
   ========================================================================== */

.alaotsikko {
	color: var(--harmaa);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: normal;
	margin: 0 0 24px;
}

.lisalinkki {
	display: inline-block;
	margin-top: 12px;
	font-size: 15px;
}

.pikkuotsikko {
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--harmaa);
	margin-bottom: 14px;
}

/* ==========================================================================
   17. Näyttelyt
   ========================================================================== */

.nayttelyn-merkit {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.tila-merkki {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--viiva);
	color: var(--tumma);
}

.tila-merkki.tila-kaynnissa {
	background: #2f6b3f;
	color: #ffffff;
}

.tila-merkki.tila-tuleva {
	background: var(--sininen-ink);
	color: #ffffff;
}

.tila-merkki.tila-paattynyt {
	background: var(--viiva);
	color: #4a4a4a;
}

.nayttelynosto {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
	margin-top: 8px;
}

.nayttely-iso .nayttely-kuva {
	display: block;
	margin-bottom: 20px;
}

/* Iso nosto on nyt 1200 px:n kontissa noin 740 px leveä, jolloin 4:3 veisi
   liikaa pystytilaa. Loivempi rajaus pitää osion hallittavana. */
.nayttely-iso .nayttely-kuva img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.nayttely-iso h3 {
	font-size: 26px;
	margin-bottom: 10px;
}

.nayttely-iso h3 a,
.nayttelykortti h3 a,
.nayttelykortti h4 a {
	color: var(--tumma);
	text-decoration: none;
}

.nayttely-iso h3 a:hover,
.nayttely-iso h3 a:focus,
.nayttelykortti h3 a:hover,
.nayttelykortti h3 a:focus,
.nayttelykortti h4 a:hover,
.nayttelykortti h4 a:focus {
	color: var(--sininen-tumma);
	text-decoration: underline;
}

.nayttelylista {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.nayttelylista li {
	border-bottom: 1px solid var(--viiva);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.nayttelylista li:last-child {
	border-bottom: 0;
}

.nayttelykortti-rivi {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	align-items: start;
}

.nayttelykortti-rivi .nayttelyn-kuva img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.nayttelykortti-rivi h4 {
	font-size: 17px;
	margin: 0;
}

.nayttelykortti-rivi .nayttelyn-merkit {
	margin-bottom: 6px;
}

.nayttelyryhma {
	margin-bottom: 48px;
}

.nayttelyryhma h2 {
	font-size: 24px;
	margin-bottom: 20px;
}

.nayttelyruudukko {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.nayttelykortti-ruutu {
	background: var(--kortti);
	display: flex;
	flex-direction: column;
}

.osio-valkoinen .nayttelykortti-ruutu {
	background: var(--tausta);
}

.nayttelykortti-ruutu .nayttelyn-kuva img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.nayttelykortti-ruutu .nayttelyn-teksti {
	padding: 20px 22px 24px;
}

.nayttelykortti-ruutu h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.nayttelykortti-ruutu p {
	margin: 0;
	font-size: 15px;
}

.nayttelykortti-ruutu.tila-paattynyt .nayttelyn-kuva img {
	filter: saturate(0.55);
}

/* Sähköpostilistan tilaus sivupalstan lopussa. Yläviiva erottaa sen tulevien
   näyttelyiden listasta, jottei painike näytä listan viimeiseltä kohdalta. */
.nayttelytilaus {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--viiva);
}

.nayttelytilaus p {
	margin: 0;
	font-size: 15px;
	color: var(--harmaa);
}

.nayttelytilaus .nappi {
	margin-top: 14px;
}

/* ==========================================================================
   18. Artikkelien korttiselain
   ========================================================================== */

.osion-ylarivi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.osion-ylarivi .alaotsikko,
.osion-ylarivi h2 {
	margin-bottom: 0;
}

.karusellin-napit {
	display: flex;
	gap: 8px;
}

.karuselli-nappi {
	width: 44px;
	height: 44px;
	border: 1px solid var(--viiva);
	background: var(--kortti);
	color: var(--tumma);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
}

.osio-valkoinen .karuselli-nappi {
	background: var(--tausta);
}

.karuselli-nappi:hover:not(:disabled),
.karuselli-nappi:focus:not(:disabled) {
	border-color: var(--sininen-ink);
}

.karuselli-nappi:disabled {
	opacity: 0.4;
	cursor: default;
}

.karuselli {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0 0 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.karuselli-kohde {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

.kortti-artikkeli {
	background: var(--kortti);
	height: 100%;
	display: flex;
	flex-direction: column;
	border-top: 5px solid var(--keltainen);
}

.osio-valkoinen .kortti-artikkeli {
	background: var(--tausta);
}

.kortti-artikkeli .kortin-kuva img,
.kortti-artikkeli .kuvan-paikka {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kuvan-paikka.vari-keltainen {
	background: linear-gradient(135deg, var(--keltainen), var(--oranssi));
}

.kuvan-paikka.vari-sininen {
	background: linear-gradient(135deg, var(--sininen), var(--violetti));
}

.kuvan-paikka.vari-oranssi {
	background: linear-gradient(135deg, var(--oranssi), var(--violetti));
}

.kuvan-paikka.vari-vihrea {
	background: linear-gradient(135deg, var(--vihrea), var(--sininen));
}

.kuvan-paikka.vari-violetti {
	background: linear-gradient(135deg, var(--violetti), var(--keltainen));
}

.kortti-artikkeli .kortin-teksti {
	padding: 18px 22px 24px;
}

.kortti-artikkeli h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

.kortti-artikkeli h3 a {
	color: var(--tumma);
	text-decoration: none;
}

.kortti-artikkeli h3 a:hover,
.kortti-artikkeli h3 a:focus {
	color: var(--sininen-tumma);
	text-decoration: underline;
}

.kortti-artikkeli .artikkelin-meta {
	margin-bottom: 8px;
}

.kortti-artikkeli p {
	margin: 0;
	font-size: 15px;
}

/* ==========================================================================
   19. Mobiili, uudet osiot
   ========================================================================== */

@media (max-width: 700px) {
	.nayttelynosto,
	.nayttelyruudukko {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.karuselli-kohde {
		flex-basis: 78%;
	}

	.nayttelyryhma {
		margin-bottom: 36px;
	}
}

@media (min-width: 701px) and (max-width: 1000px) {
	.nayttelyruudukko,
	.taiteilijakortit {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Sivupalstan näyttelykortti: tilamerkki on turha, koska "Tulossa"-otsikko
   kertoo saman. Kaksi merkkiä vierekkäin tekee pienestä kortista levottoman. */
.nayttely-sivupalsta .nayttelykortti-rivi .tila-merkki {
	display: none;
}

.nayttely-sivupalsta .nayttelykortti-rivi .pvm-merkki {
	font-size: 12px;
	padding: 3px 8px;
	margin-bottom: 0;
}

.nayttely-sivupalsta .nayttelykortti-rivi .nayttelyn-merkit {
	margin-bottom: 6px;
}

/* ==========================================================================
   20. Saavutettavuuden viimeistely
   ========================================================================== */

/* Karusellin kääre vierittää, sisällä oleva lista säilyttää semantiikkansa. */
.karuselli {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	margin-top: 24px;
	padding-bottom: 12px;
}

.karuselli-lista {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Kosketuskohteen vähimmäiskoko 44 px myös valikossa. */
.paavalikko a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.paavalikko .sub-menu a {
	min-height: 40px;
}

/* Teoksen nimi kuvan päällä: tummennettu tausta riittävää kontrastia varten. */
.teos figcaption {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0));
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Kohdistusreunus näkyy myös tummalla taustalla. */
.lty-lightbox button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

/* Kortin otsikko on sama koko riippumatta otsikkotasosta. */
.kortti h2,
.kortti h3,
.kortti h4 {
	font-size: 19px;
	margin-bottom: 4px;
}

/* ==========================================================================
   21. Forminator-lomake teeman ulkoasuun
   Lomake tulee lisäosalta, joten tässä ohitetaan vain ne kohdat, joissa sen
   oletusulkoasu poikkeaa teemasta tai jää kontrastivaatimuksen alle.
   ========================================================================== */

.forminator-ui.forminator-custom-form {
	max-width: 720px;
}

.forminator-ui.forminator-custom-form .forminator-label,
.forminator-ui.forminator-custom-form .forminator-title {
	font-family: Arial, Helvetica, sans-serif;
	color: var(--tumma);
}

.forminator-ui.forminator-custom-form .forminator-description {
	color: var(--harmaa);
}

/* Oletuspunainen jää kontrastissa alle 4,5:1 valkoista vasten. */
.forminator-ui.forminator-custom-form .forminator-required {
	color: #b32d2e;
}

.forminator-ui.forminator-custom-form input[type="text"],
.forminator-ui.forminator-custom-form input[type="email"],
.forminator-ui.forminator-custom-form input[type="url"],
.forminator-ui.forminator-custom-form input[type="number"],
.forminator-ui.forminator-custom-form textarea,
.forminator-ui.forminator-custom-form select {
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 4px;
	border-color: var(--viiva);
	color: var(--teksti);
}

.forminator-ui.forminator-custom-form input:focus-visible,
.forminator-ui.forminator-custom-form textarea:focus-visible,
.forminator-ui.forminator-custom-form select:focus-visible {
	outline: 3px solid var(--sininen-ink);
	outline-offset: 2px;
}

.forminator-ui.forminator-custom-form .forminator-button-submit {
	background: var(--oranssi-ink);
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 14px 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	min-height: 44px;
	cursor: pointer;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form .forminator-button-submit:focus {
	background: var(--oranssi-tumma);
	color: #ffffff;
}

/* ==========================================================================
   22. Ylätunnisteen asettelu ja kielivalitsin
   Työpöydällä: logo vasemmalla, valikko keskellä, kielivalitsin oikeassa
   reunassa. Mobiilissa: logo, kielivalitsin ja valikkopainike samalla
   rivillä, valikko avautuu niiden alle.
   ========================================================================== */

.ylapalkki .brandi {
	order: 1;
}

.ylapalkki .paavalikko {
	order: 2;
}

.ylapalkin-toiminnot {
	order: 3;
	display: flex;
	align-items: center;
	gap: 12px;
}

.kielivalitsin ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
}

/* Ohut erotin kielten välissä. */
.kielivalitsin li + li {
	border-left: 1px solid var(--viiva);
}

.kielivalitsin a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--sininen-ink);
	border-radius: 0;
}

.kielivalitsin a:hover,
.kielivalitsin a:focus {
	color: var(--sininen-tumma);
	background: var(--tausta);
}

.kielivalitsin .nykyinen-kieli a {
	color: var(--tumma);
	background: var(--tausta);
	box-shadow: inset 0 -3px 0 var(--oranssi);
}

@media (max-width: 700px) {
	.ylapalkki .paavalikko {
		order: 3;
	}

	.ylapalkin-toiminnot {
		order: 2;
		margin-left: auto;
	}

	.kielivalitsin a {
		min-width: 40px;
	}
}

/* ==========================================================================
   23. Muokkauskuvakkeet (vain kirjautuneille)
   Kynä vie siihen sisältöön, josta osio muodostuu; säädinkuvake mukauttimen
   osioon niissä osioissa, joissa osa sisällöstä tulee asetuksista.
   Kuvakkeet eivät päädy vieraan html:ään lainkaan.
   ========================================================================== */

.lty-muokkaus-kaare {
	position: relative;
}

.lty-muokkaus {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--kortti);
	border: 1px solid var(--harmaa);
	color: var(--tumma);
	opacity: 0.75;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

/* Säädinkuvake kynän vasemmalle puolelle: 16 + 36 + 8. */
.lty-muokkaus--asetukset {
	right: 60px;
}

/* Yksin ollessaan säädinkuvake ottaa kynän paikan. */
.lty-muokkaus--asetukset:only-child {
	right: 16px;
}

.lty-muokkaus:hover,
.lty-muokkaus:focus-visible {
	opacity: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: var(--tumma);
}

/* Kortin oma kynä on kortin sisällä, joten se ei asemoi itse. */
.lty-muokkaus-kortti {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
}

.lty-muokkaus-kortti .lty-muokkaus {
	position: static;
	width: 30px;
	height: 30px;
}

/* Kortit, joiden sisään kynä asemoituu. */
.kortin-kaare,
.nayttelykortti,
.kortti-artikkeli,
.nayttely-iso {
	position: relative;
}

/* Taiteilijakortti on itse linkki, joten se on kääreen sisällä. Kortin on
   täytettävä kääre, jotta ruudukon rivit pysyvät tasakorkuisina. */
.kortin-kaare {
	display: flex;
}

.kortin-kaare .kortti {
	flex: 1;
}

@media (max-width: 700px) {
	.lty-muokkaus {
		top: 10px;
		right: 10px;
	}

	.lty-muokkaus--asetukset {
		right: 54px;
	}
}

/* ==========================================================================
   24. Tekstin rivinpituus laajemmassa kontissa
   Kontti on 1200 px, mutta leipäteksti pysyy luettavassa mitassa. Kuvat,
   ruudukot ja laajat lohkot saavat koko leveyden.
   ========================================================================== */

.sisaltoalue .sisalto > p,
.sisaltoalue .sisalto > ul,
.sisaltoalue .sisalto > ol,
.sisaltoalue .sisalto > h2,
.sisaltoalue .sisalto > h3,
.sisaltoalue .sisalto > h4,
.sisaltoalue .sisalto > h5,
.sisaltoalue .sisalto > h6,
.sisaltoalue .sisalto > blockquote,
.sisaltoalue .sisalto > .wp-block-list,
.sisaltoalue .sisalto > .wp-block-quote {
	max-width: var(--mitta);
}

.sisaltoalue .sisalto > .alignwide,
.sisaltoalue .sisalto > .alignfull,
.sisaltoalue .sisalto > figure,
.sisaltoalue .sisalto > .wp-block-image,
.sisaltoalue .sisalto > .wp-block-gallery,
.sisaltoalue .sisalto > .wp-block-columns,
.sisaltoalue .sisalto > table,
.sisaltoalue .sisalto > .wp-block-table {
	max-width: 100%;
}

/* Sivun otsikkoalue seuraa samaa mittaa. */
.sivun-otsikko h1,
.sivun-otsikko .alaotsikko,
.sivun-otsikko p {
	max-width: var(--mitta);
}

/* ==========================================================================
   25. Tilamerkki kuvan päällä ja lisäyslinkit
   ========================================================================== */

.nayttelyn-kuva,
.nayttely-kuva-kaare {
	position: relative;
}

/* Tila näkyy heti kortista: kuvan vasen yläkulma. Tumma varjo takaa
   luettavuuden myös vaalean kuvan päällä. */
.tila-merkki.tila-kuvassa {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.nayttelykortti-rivi .tila-merkki.tila-kuvassa {
	top: 6px;
	left: 6px;
	font-size: 11px;
	padding: 3px 7px;
}

/* Sivupalstassa tilamerkki toistaisi "Tulossa"-otsikon, joka on listan
   yläpuolella – ja 80 pikselin pikkukuvassa se peittäisi puolet kuvasta. */
.nayttely-sivupalsta .nayttelykortti-rivi .tila-merkki.tila-kuvassa {
	display: none;
}

/* Lisäyslinkki: katkoviivareunus erottaa sen sisällöstä ja kertoo, että
   kyseessä on ylläpitäjän toiminto eikä kävijän painike. */
.lty-lisaa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 9px 14px;
	min-height: 44px;
	border: 1px dashed var(--harmaa);
	color: var(--sininen-ink);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lty-lisaa:hover,
.lty-lisaa:focus-visible {
	background: var(--tausta);
	border-color: var(--sininen-ink);
	color: var(--sininen-tumma);
}

.osio-vaalea .lty-lisaa:hover,
.osio-vaalea .lty-lisaa:focus-visible {
	background: var(--kortti);
}

.osion-toiminnot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: none;
}

.osion-toiminnot .nappi {
	margin-top: 12px;
}

.sivun-otsikko .lty-lisaa {
	margin-top: 16px;
}

/* ==========================================================================
   26. Pikatiedote
   Poikkeustilanteen tiedote yläosan alareunassa. Täysleveä palkki erottuu
   muusta sisällöstä; tumma teksti värillisellä pohjalla täyttää AA-kontrastin
   (keltainen 8,9:1, oranssi 5,0:1).
   ========================================================================== */

/* Yläosan sisällä palkin on rikottava heron vaakapehmuste, jotta väri
   yltää reunasta reunaan. */
.hero .pikatiedote {
	margin-left: calc(-1 * var(--reunus));
	margin-right: calc(-1 * var(--reunus));
}

.pikatiedote {
	margin-top: 40px;
	margin-bottom: -56px;
	padding: 16px 0;
	background: var(--keltainen);
	color: var(--tumma);
	text-align: left;
}

.pikatiedote--oranssi {
	background: var(--oranssi);
}

.pikatiedote__sisalto {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.pikatiedote__otsake {
	flex: none;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
	background: var(--tumma);
	color: #ffffff;
}

.pikatiedote__teksti {
	margin: 0;
	max-width: var(--mitta);
	color: var(--tumma);
}

.pikatiedote a {
	color: var(--tumma);
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pikatiedote a:hover,
.pikatiedote a:focus {
	color: #000000;
}

/* Ylätunnisteen alla (muut sivut kuin etusivu) palkki ei tarvitse
   negatiivista alamarginaalia. */
.sivun-ylaosa + .pikatiedote {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.pikatiedote {
		margin-top: 28px;
		margin-bottom: -40px;
	}

	.pikatiedote__sisalto {
		gap: 10px;
	}
}

/* ==========================================================================
   27. Korostusosio (taidelainaamo)
   Oma väri erottaa toimintakehotuksen vaalea/valkoinen-vuorottelusta.
   Violetti-ink antaa valkoiselle tekstille kontrastin 7,3:1.
   ========================================================================== */

.osio-korostus {
	background: var(--violetti-ink);
	color: #ffffff;
}

.osio-korostus h2 {
	color: #ffffff;
	margin-bottom: 10px;
}

.osio-korostus p {
	color: #ffffff;
	margin-bottom: 0;
}

.korostuksen-sisalto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.korostuksen-toiminto {
	margin: 0;
	flex: none;
}

.nappi-vaalea {
	background: #ffffff;
	color: var(--violetti-ink);
	margin-top: 0;
}

.nappi-vaalea:hover,
.nappi-vaalea:focus {
	background: var(--tausta);
	color: var(--violetti-ink);
}

.osio-korostus a:not(.nappi) {
	color: #ffffff;
}

.alatunnisteen-linkit {
	margin-top: 8px;
}

@media (max-width: 700px) {
	.korostuksen-sisalto {
		gap: 20px;
	}
}

/* ==========================================================================
   28. Ulkoinen linkki
   Nuoli kertoo, että linkki vie toiselle sivustolle uuteen välilehteen.
   ========================================================================== */

.nappi-ulkoinen,
.linkki-ulkoinen {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nappi-ulkoinen svg,
.linkki-ulkoinen svg {
	flex: none;
	/* Optinen tasaus: nuoli istuu paremmin hieman ylös nostettuna. */
	margin-top: -1px;
}

.linkki-ulkoinen {
	gap: 6px;
}