/*
 * SISÄLTÖTYYLIT — ladataan sekä julkiselle sivustolle että lohkoeditoriin.
 *
 * Tämä tiedosto on syy siihen, että editori näyttää samalta kuin valmis sivu.
 * Aiemmin editorityylit olivat oma, käsin ylläpidetty kopionsa, ja ne ehtivät
 * jo erkaantua: otsikkokoot, painikkeiden värit ja kaikki lohkomallien
 * komponentit puuttuivat editorista.
 *
 * SÄÄNTÖ: kaikki mikä koskee SISÄLTÖÄ (lohkot, lohkomallit, typografia,
 * painikkeet) kuuluu tänne. `style.css` sisältää vain sivuston kehyksen —
 * ylätunnisteen, valikot, alatunnisteen, kartat ja mobiilipaneelit — joita
 * editorissa ei ole.
 *
 * Kaksi asiaa tekee jaon mahdolliseksi:
 *
 * 1. `body`-valitsin toimii molemmissa. WordPress muuntaa editorityyleissä
 *    `body`-valitsimen muotoon `.editor-styles-wrapper`, joten sama sääntö
 *    osuu kummassakin ympäristössä.
 * 2. Sisällön juuri on julkisella puolella `.lovas-sivu__sisalto` ja
 *    editorissa `.is-root-container`. Molemmat on lueteltu samassa
 *    säännössä, joten rytmi on sama.
 *
 * @package LoviisanAsunnot
 */

/* =============================================================================
   1. DESIGN-TOKENIT
   Väripaletti on Loviisan kaupungin brändiohjeistosta (2025). Yhtiö on osittain
   kaupungin omistama, joten se käyttää samaa väriteemaa.

   Päävärit ovat HIEKKA ja TUMMA VIHREÄ, joita täydentävät musta ja valkoinen.

   HUOM. Vaalea vihreä (#88A7A2) antaa valkoista vasten vain 2,59:1 ja hiekkaa
   vasten 2,09:1 — se on VAIN pinta, ei koskaan teksti. Brändiohjeisto sanoo
   saman: "Vaaleiden sävyjen päällä ei saavutettavuuden takia voi käyttää muita
   vaaleita värejä."
   ========================================================================== */
:root {
	/* Brändivärit */
	--korostus:    #88A7A2;  /* vaalea vihreä — VAIN pinnat ja reunaviivat      */
	--ink:         #325E5B;  /* tumma vihreä — TEKSTI: 7,27:1 valk · 5,87:1 hiekka */
	--ink-hover:   #24443F;  /* painikkeen hover: valkoinen teksti 10,64:1      */
	--pale:        #F0E6D2;  /* hiekka — vaaleat pinnat, ylätunniste, alatunniste */
	--pale-hover:  #E4D5B8;  /* hover hiekan päällä: ink 5,02:1                 */
	--pale-line:   #D9C7A4;  /* reunaviiva hiekan päällä                        */

	/* Neutraalit */
	--dark:        #000000;  /* leipäteksti — brändin oma lisäväri, 21:1        */
	--grey-ink:    #5E5B55;  /* aputeksti: 6,77:1 valk · 5,46:1 hiekka          */
	--bg:          #FFFFFF;
	--line:        #DCCDAE;  /* koristereunat: kortit, erottimet                */
	--line-input:  #7E796C;  /* KONTROLLIEN reunat: 4,34:1 valk · 3,50:1 hiekka */

	/* Johdetut sävyt. Nämä olivat aiemmin kovakoodattuina eri puolilla
	   tyylitiedostoa, jolloin paletin vaihtaminen olisi jäänyt puolitiehen. */
	--kuva-1:      #BFD3CE;  /* kuvapaikan liukuväri, alku                      */
	--kuva-2:      #9FBAB4;  /* kuvapaikan liukuväri, loppu                     */
	--varjo:       rgba(50, 94, 91, .18);
	--varjo-vahva: rgba(50, 94, 91, .45);

	/* Typografia */
	--font: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', -apple-system,
	        BlinkMacSystemFont, Roboto, Arial, sans-serif;

	/* Mitat */
	--content:     1140px;
	--mitta-teksti:   70ch;  /* leipätekstin rivinpituus                     */
	--mitta-johdanto: 60ch;  /* johdantokappale hieman kapeampi              */
	--hdr-h:       76px;
	--bottomnav-h: 76px;

	/* Fokus — oma token, jotta värilliset osiot voivat ylikirjoittaa sen */
	--focus: var(--ink);

	/* Sivusto on tarkoituksella vain vaalea (päätös 7.8.2026, ks. README § 4).
	   Ilman tätä julistusta selain saattaa tummentaa lomakekentät ja
	   vierityspalkit itse, jos käyttöjärjestelmä on tummalla. */
	color-scheme: light;
}

/* Tummalla brändipinnalla fokusrengas ei erotu → vaihdetaan valkoiseksi */
.osio-korostus,
.has-korostus-background-color {
	--focus: #FFFFFF;
}


/* =============================================================================
   PERUSRESET
   box-sizing kuuluu jaettuun tiedostoon eikä style.css:ään: ilman sitä editori
   laskee reunukset ja täytteet content-box-mallilla, jolloin lohkojen leveydet
   ja kohdistus poikkeavat julkaistusta sivusta. Vika näkyy vasta pikselitasolla,
   joten se on helppo ohittaa silmämääräisessä vertailussa.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* Marginaalireset kuuluu tänne samasta syystä kuin box-sizing, mutta vika oli
   toinen ja hienovaraisempi. `style.css` latautuu tämän JÄLKEEN, joten siellä
   ollut `h1…h6, p { margin: 0 }` (spesifisyys 0,0,1) kumosi § 15:n
   rytmisäännöt (`:where(…) > h2`, myös 0,0,1) — samalla spesifisyydellä
   myöhempi voittaa.

   Seuraus oli editorin ja julkisen sivun ero juuri siellä missä sitä vähiten
   odottaa: editori näytti otsikkojen välit oikein (se ei lataa style.css:ää),
   julkinen sivu ei. Mitattu: kaikkien h2-otsikoiden `margin-top` oli 0 px.

   Kun reset on samassa tiedostossa ennen rytmisääntöjä, lähdejärjestys
   ratkaisee oikein päin. ÄLÄ siirrä tätä takaisin style.css:ään. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

/* =============================================================================
   PERUSTYPOGRAFIA
   `body` muuntuu editorissa `.editor-styles-wrapper`-valitsimeksi, joten sama
   sääntö antaa saman fontin ja värin molemmissa.
   ========================================================================== */
body {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--dark);
}

body a { color: var(--ink); }
body a:hover { color: var(--dark); }

/* =============================================================================
   15. SISÄLTÖLOHKOJEN VÄLISTYS JA TYPOGRAFIA
   Perusreset nollaa otsikoiden ja kappaleiden marginaalit, joten sivusisältö
   tarvitsee oman rytminsä. Sääntö koskee vain SUORIA lapsia, jotta se ei
   sotke komponenttien (kortit, askelmat) omaa sisäistä välistystä.
   ========================================================================== */
/* SPESIFISYYS ON TÄSSÄ TARKOITUKSELLINEN, älä muuta `:where()`-muotoon.

   Marginaalisäännöt kilpailevat perusresetin (`p, h2 { margin: 0 }`, 0,0,1)
   kanssa, joten ne tarvitsevat luokkavalitsimen. `:where()`-muodossa yleisin
   sääntö olisi spesifisyydeltään 0,0,0 ja häviäisi resetille: kappaleiden
   väliksi jäi mitattuna 0 px.

   Porrastus on:
     yleissääntö  0,1,0
     h2 ja h3     0,1,1  → voittaa yleissäännön
     otsikon jälkeinen  0,1,0 mutta myöhempänä → voittaa yleissäännön

   Fonttikoot alla ovat eri asia: ne saavat jäädä `:where()`-muotoon, koska
   niiden pitää hävitä komponenttien omille otsikkokooille. */
.lovas-sivu__sisalto > * + *,
.is-root-container > * + * { margin-top: 20px; }

.lovas-sivu__sisalto > h2,
.is-root-container > h2 { margin-top: 44px; }

.lovas-sivu__sisalto > h3,
.is-root-container > h3 { margin-top: 30px; }

/* Neljäs otsikkotaso tarvitaan, kun sisällössä on aito nelitasoinen hierarkia
   (saavutettavuusseloste). Ilman omaa sääntöä h4 peri vain perusresetin ja
   renderöityi 16 px:llä eli TÄSMÄLLEEN leipätekstin kokoisena — otsikko ei voi
   olla tekstiä pienempi tai samankokoinen, koska silloin taso ei erotu
   silmämääräisesti (WCAG 1.3.1 täyttyy merkkauksesta, mutta visuaalinen
   hierarkia ei). */
.lovas-sivu__sisalto > h4,
.is-root-container > h4 { margin-top: 26px; }

.lovas-sivu__sisalto > :where(h2, h3, h4) + *,
.is-root-container > :where(h2, h3, h4) + * { margin-top: 10px; }

/* :where() antaa spesifisyyden 0, joten komponenttien omat otsikkokoot
   voittavat. Ilman sitä nämä säännöt (0,1,1) ohittivat osioiden otsikot
   (0,1,0) — palvelukortin 16 px:n otsikko renderöityi 24 px:llä. */
:where(.lovas-sivu__sisalto, .is-root-container) :where(h2) { font-size: 24px; line-height: 1.25; }
:where(.lovas-sivu__sisalto, .is-root-container) :where(h3) { font-size: 19px; line-height: 1.3; }
:where(.lovas-sivu__sisalto, .is-root-container) :where(h4) { font-size: 17px; line-height: 1.35; }

/* Leipätekstin rivinpituus luettavaksi. Komponenttien sisällä leveys tulee
   komponentilta, joten rajaus koskee vain suoria lapsia. */
/* Rivinpituus. Koskee vain SUORIA lapsia, joten komponenttien sisällä olevat
   kappaleet saavat leveytensä komponentilta.

   Editorissa tämä ei riitä: WordPressin oma asettelusääntö on samaa
   spesifisyyttä mutta myöhemmässä tyylitiedostossa. Ylikirjoitus on
   `editor.css`:ssä ja käyttää samoja mittatokeneita, joten arvo on silti
   vain yhdessä paikassa. */
:where(.lovas-sivu__sisalto, .is-root-container) > :where(p, ul, ol) { max-width: var(--mitta-teksti); }

:where(.lovas-sivu__sisalto, .is-root-container) :where(ul, ol) { padding-left: 1.4em; }
:where(.lovas-sivu__sisalto, .is-root-container) li + li { margin-top: 6px; }

@media (max-width: 600px) {
	.lovas-sivu__sisalto > h2,
	.is-root-container > h2 { margin-top: 32px; }
	:where(.lovas-sivu__sisalto, .is-root-container) :where(h2) { font-size: 21px; }
}


/* =============================================================================
   12. ETUSIVUN OSAT: HERO, NOSTOT, PALVELUKORTTI
   Kaikki rakennettu ydinlohkoista, joten CSS kohdistuu lohkoluokkiin.
   ========================================================================== */

/* --- Hero (core/media-text) ---------------------------------------------- */
/* Pinta on --ink eikä --korostus: valkoinen teksti vaalealla vihreällä jäisi
   2,59:1:een, tummalla vihreällä suhde on 7,27:1. */
.lovas-hero {
	background: var(--ink);
	color: #fff;
	border-radius: 0;
	margin-bottom: 40px;
	--focus: #FFFFFF;
}
.lovas-hero .wp-block-media-text__content { padding: 44px 40px; }
.lovas-hero__otsikko {
	font-size: 34px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 12px;
	color: #fff;
}
.lovas-hero__teksti {
	font-size: 16px;
	max-width: 46ch;
	margin-bottom: 22px;
	color: #fff;
}
.lovas-hero .wp-block-media-text__media {
	background: linear-gradient(135deg, var(--kuva-1), var(--kuva-2));
	min-height: 240px;
}
.lovas-hero .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lovas-hero__napit { gap: 12px; }

/* Painikkeiden lohkotyylit värillisellä pinnalla */
.wp-block-button.is-style-lovas-valkoinen .wp-block-button__link {
	background: #fff;
	color: var(--ink);
	border-radius: 0;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}
.wp-block-button.is-style-lovas-reunus .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 0;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}
.wp-block-button.is-style-lovas-reunus .wp-block-button__link:hover {
	background: #fff;
	color: var(--ink);
}

/* --- Nostot (Ajankohtaista, palvelukortti) ------------------------------- */
.lovas-nosto,
.lovas-palvelukortti {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--korostus);
	padding: 20px;
	height: 100%;
}
.lovas-palvelukortti { background: var(--pale); border-color: var(--pale-line); }

.lovas-nosto__otsikko {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 10px;
}
.lovas-nosto__linkki {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.lovas-ajankohtaista__lista { list-style: none; margin: 0; padding: 0; }
.lovas-ajankohtaista__kohta + .lovas-ajankohtaista__kohta {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.lovas-ajankohtaista__nimi {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.lovas-ajankohtaista__nimi:hover { text-decoration: underline; }
.lovas-ajankohtaista__tiedot {
	font-size: 13px;
	color: var(--grey-ink);
	margin-top: 2px;
}
.lovas-ajankohtaista__ote::before { content: " · "; }

.lovas-palvelukortti p { font-size: 14px; margin-bottom: 10px; }
.lovas-palvelukortti__paivystys {
	border-top: 1px solid var(--pale-line);
	padding-top: 10px;
}

@media (max-width: 600px) {
	.lovas-hero .wp-block-media-text__content { padding: 22px 18px; }
	.lovas-hero__otsikko { font-size: 22px; }
	.lovas-hero .wp-block-media-text__media { min-height: 140px; }
	.lovas-hero__napit .wp-block-button { width: 100%; }
	.lovas-hero__napit .wp-block-button__link { width: 100%; justify-content: center; }
}


/* --- Ydinlohkon painike ------------------------------------------------- */
/* Ilman tätä ydinlohkon painike jää WordPressin omaan tummaan sävyyn eikä
   noudata teeman muotokieltä. Tarkempien is-style-sääntöjen (0,3,0) alle jäävä
   perussääntö (0,1,0) ei ohita niitä, joten heron painikkeet säilyvät. */
.wp-block-button__link {
	background-color: var(--ink);
	color: #fff;
	border-radius: 0;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
.wp-block-button__link:hover { background-color: var(--ink-hover); color: #fff; }
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}



/* =============================================================================
   14. HAE ASUNTOA -SIVUN OSAT
   Rakennettu ydinlohkoista, joten CSS kohdistuu lohkoluokkiin.
   ========================================================================== */

.lovas-johdanto {
	font-size: 18px;
	color: var(--grey-ink);
	max-width: var(--mitta-johdanto);
}

/* --- Hakuprosessin askelmat --------------------------------------------- */
/* Numerot tulevat CSS-laskurista eivätkä tekstistä: kun ylläpitäjä lisää tai
   poistaa askeleen, numerointi korjaantuu itsestään eikä jää epäjärjestykseen. */
.lovas-askeleet {
	counter-reset: lovas-askel;
	gap: 16px;
	margin-bottom: 36px;
}

.lovas-askel {
	counter-increment: lovas-askel;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--korostus);
	padding: 18px;
}

.lovas-askel::before {
	content: counter(lovas-askel);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 10px;
	/* Ainoa pyöreä elementti mobiilin keskipainikkeen lisäksi — sama valinta
	   kuin hyväksytyssä prototyypissä. */
	border-radius: 50%;
	/* --korostus valkoisella numerolla jäisi 2,59:1. */
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.lovas-askel p { font-size: 15px; line-height: 1.55; }

/* --- Hakemuskortit ------------------------------------------------------- */
.lovas-hakemuskortit { gap: 16px; margin-bottom: 32px; }

.lovas-hakemuskortti {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--korostus);
	padding: 22px;
	display: flex;
	flex-direction: column;
}

.lovas-hakemuskortti h3 { font-size: 18px; margin: 0 0 8px; }
.lovas-hakemuskortti p {
	font-size: 15px;
	color: var(--grey-ink);
	line-height: 1.55;
	margin: 0 0 16px;
}
/* Painike kortin alareunaan, jotta eri mittaiset tekstit eivät hajota riviä. */
.lovas-hakemuskortti .wp-block-buttons { margin-top: auto; }
.lovas-hakemuskortti .wp-block-button,
.lovas-hakemuskortti .wp-block-button__link { width: 100%; }

/* --- Toissijainen painike vaalealla pohjalla ----------------------------- */
.wp-block-button.is-style-lovas-toissijainen .wp-block-button__link {
	background-color: #fff;
	color: var(--ink);
	border: 2px solid var(--ink);
}
.wp-block-button.is-style-lovas-toissijainen .wp-block-button__link:hover,
.wp-block-button.is-style-lovas-toissijainen .wp-block-button__link:focus-visible {
	background-color: var(--pale);
	color: var(--ink);
}

/* --- Loppuhuomautus ------------------------------------------------------ */
/* Ei max-widthia: yläviiva toimii osioerottimena, ja lyhyeksi katkaistuna se
   näyttäisi vahingolta eikä valinnalta. Teksti on niin lyhyt, ettei rivinpituus
   ehdi kasvaa ongelmaksi. */
.lovas-huomio {
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--grey-ink);
}

@media (max-width: 600px) {
	.lovas-johdanto { font-size: 16px; }
	.lovas-askeleet, .lovas-hakemuskortit { gap: 12px; }
}


/* =============================================================================
   20. LOMAKKEET (Contact Form 7)
   CF7 tuottaa oman markupinsa, joten tyylit kohdistuvat sen luokkiin. Kentät
   ovat suorakulmaisia kuten muukin teema.
   ========================================================================== */

/* --- Hunajapurkki -------------------------------------------------------- */
/* Piilotus ei ole `display: none`: osa roboteista ohittaa piilotetut kentät,
   ja juuri ne halutaan ansaan. Kenttä siirretään pois näkyvistä mutta se on
   olemassa. `aria-hidden` ja `tabindex="-1"` (PHP:ssä) pitävät sen pois
   ruudunlukijalta ja sarkainjärjestyksestä. */
.lovas-hunajapurkki {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Kentät -------------------------------------------------------------- */
.wpcf7-form { max-width: 640px; }

.wpcf7-form p { margin-bottom: 18px; }

.wpcf7-form label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 6px;
}

.lovas-pakollinen {
	font-weight: 400;
	color: var(--grey-ink);
}

/* Ohjeteksti kentän alla. `display: block` erottaa sen labelista, johon se ei
   kuulu — ruudunlukija lukisi muuten kentän nimeksi koko ohjeen. */
.lovas-ohje {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--grey-ink);
}

/* CF7 muuntaa lomakepohjan rivinvaihdot `<br>`-elementeiksi (`wpcf7_autop`).
   Rivinvaihto ohjetekstin edellä työnsi tekstin 35,6 px:n päähän omasta
   kentästään, kun väli seuraavaan kenttään oli 18 px — ohje näytti siis
   kuuluvan SEURAAVALLE kentälle. Läheisyys on se, mistä yhteenkuuluvuus
   luetaan, joten vika oli aito eikä kosmeettinen.

   Lomakepohjasta rivinvaihto on poistettu, mutta pohja on tietokannassa ja
   ylläpitäjän muokattavissa: tämä sääntö pitää välistyksen oikeana silloinkin
   kun rivinvaihto palaa muokkauksessa. */
.wpcf7-form br:has(+ .lovas-ohje) { display: none; }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="file"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	/* 16 px on tarkoituksellinen: pienemmällä iOS zoomaa sivun automaattisesti
	   kenttään napautettaessa, jolloin asettelu hyppää eikä siitä pääse
	   takaisin ilman nipistystä. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	color: var(--dark);
	background: #fff;
	/* Kontrollien reuna on --line-input eikä --line: koristereuna jää
	   1,27:1:een eikä täytä 3:1 vaatimusta (WCAG 1.4.11). */
	border: 1px solid var(--line-input);
	border-radius: 0;
	padding: 12px;
	min-height: 48px;
}

.wpcf7-form textarea { min-height: 140px; resize: vertical; }

.wpcf7-form select {
	/* Oma nuoli, jotta kenttä näyttää samalta selaimesta riippumatta. */
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
	                  linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
	border-color: var(--ink);
}

/* Valintaruutu: kosketusalue riittävän suureksi ja teksti normaalipainoiseksi,
   koska se on lause eikä kentän nimi. */
.lovas-valintarivi .wpcf7-list-item { margin: 0; }
.lovas-valintarivi label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	min-height: 48px;
	padding: 12px 0;
}
.lovas-valintarivi input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	flex-shrink: 0;
	accent-color: var(--ink);
}

/* --- Lähetyspainike ------------------------------------------------------ */
.wpcf7-form .wpcf7-submit {
	min-height: 52px;
	padding: 0 26px;
	background: var(--ink);
	color: #fff;
	border: none;
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible { background: var(--ink-hover); }

/* --- Virheet ja vastaus -------------------------------------------------- */
/* Virhe ei saa olla pelkkä väri (WCAG 1.4.1), joten mukana on teksti ja
   paksumpi reuna. Punainen on tässä teeman ulkopuolinen sävy tarkoituksella:
   se on ainoa paikka, jossa tarvitaan varoitusta, eikä brändipaletissa ole
   siihen väriä. Mitatut kontrastit: 6,54:1 valkoista ja 5,28:1 hiekkaa vasten
   — molemmat riittävät sekä tekstinä että reunaviivana. */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #B3261E;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: #B3261E;
	border-width: 2px;
}

.wpcf7-response-output {
	margin: 20px 0 0;
	padding: 16px;
	border: 2px solid var(--line-input);
	font-size: 15px;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ink);
	background: var(--pale);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #B3261E;
}

.wpcf7-spinner { margin-left: 12px; }

/* --- Kiireellisen vian nosto --------------------------------------------- */
/* Hiekkainen laatikko ennen lomaketta. Tarkoitus on, että hätätilanteessa oleva
   asukas ei täytä lomaketta ja jää odottamaan vastausta. */
.lovas-kiireellinen {
	background: var(--pale);
	border: 1px solid var(--pale-line);
	border-top: 4px solid var(--ink);
	padding: 22px;
	margin-bottom: 8px;
}
.lovas-kiireellinen h2 { margin-top: 0; font-size: 20px; }
.lovas-kiireellinen p { margin-bottom: 12px; }
.lovas-kiireellinen p:last-of-type { margin-bottom: 18px; }

@media (max-width: 600px) {
	.lovas-kiireellinen { padding: 18px; }
	.wpcf7-form .wpcf7-submit { width: 100%; }
}


/* =============================================================================
   16. UUTEEN VÄLILEHTEEN AVAUTUVAT LINKIT
   Merkinnän lisää suodatin (inc/linkit.php), joten sääntö koskee myös linkkejä
   jotka ylläpitäjä lisää itse editorin "Avaa uudessa välilehdessä" -valinnalla.
   ========================================================================== */

:root {
	--ulkoinen-kuvake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
}

/* Nuoli on taustakuva eikä pseudoelementin teksti: taustakuvaa ei lueta
   ääneen, joten ruudunlukija saa merkityksen vain piilotekstistä eikä kuule
   kuvaketta erikseen. */
.lovas-uusi-valilehti::after {
	content: "";
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-left: .35em;
	vertical-align: baseline;
	background-color: currentColor;
	opacity: .75;
	-webkit-mask: var(--ulkoinen-kuvake) no-repeat center / contain;
	mask: var(--ulkoinen-kuvake) no-repeat center / contain;
}

.wp-block-button__link.lovas-uusi-valilehti::after { opacity: .85; }