/*
Theme Name: Martti Pyykönen
Template: twentytwentyfive
Theme URI: https://marttipyykonen.fi
Author: Martti Pyykönen
Description: Henkilökohtainen asiantuntija- ja kirjoittajasivusto. Child theme Twenty Twenty-Five -teemasta, oma theme.json ja templatet.
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: marttipyykonen
*/

/* Focus states — näkyvä keyboard focus koko sivustolla (WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground);
	outline-offset: 2px;
}

/* Hero: kuva ensin, otsikko/teksti sen jälkeen mobiilissa (desktopilla
   teksti vasemmalla / kuva oikealla, DOM-järjestys pysyy ennallaan). WP:n
   columns-lohko pinoaa sarakkeet ~782px alapuolella kääräisemällä
   flex-wrap:in kautta, ei flex-direction:columnilla — order toimii silti. */
@media (max-width: 781px) {
	.hero-columns {
		display: flex;
		flex-wrap: wrap;
	}
	.hero-image-col {
		order: -1;
	}
	.hero-text-col {
		order: 2;
	}
}

/* Desktopilla (ei mobiilissa): heron tekstisarake venyy kuvan korkeudelle
   ja sen kolme sisältöryhmä (nimi+rooli / ingressi / toiminnot) jakautuvat
   tasan sille korkeudelle — ei enää yksi tiiviisti pinottu lohko kuvan
   rinnalla. .hero-text-col saa muuten .is-vertically-aligned-center
   -luokan kautta align-self:center WP:n columns-lohkolta; ylikirjoitetaan
   se täällä stretch:iksi juuri tätä saraketta varten (kuvasarake pysyy
   ennallaan, se määrittää rivin korkeuden). */
@media (min-width: 782px) {
	.hero-columns.are-vertically-aligned-center .hero-text-col.is-vertically-aligned-center {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/* Ison 2-rivisen nimen jälkeen tekstisarake on usein hieman korkeampi
	   kuin kuvan luonnollinen (aspect ratio -rajoittama) korkeus samalla
	   sarakeleveydellä. Rivin korkeus asettuu tällöin tekstin mukaan, ja
	   kuva venytetään (object-fit:cover, kasvot säilyttäen) täyttämään se
	   — ei toisin päin. Ei kiinteää min-heightia: se söisi kuvasta
	   mielivaltaisen ison palan pelkän tyhjän tilan luomiseksi. Todellinen
	   ero tekstin ja kuvan luonnollisten korkeuksien välillä on tässä
	   asettelussa pieni (~50–60px), joten rajaus jää huomaamattomaksi. */
	.hero-columns.are-vertically-aligned-center .hero-image-col.is-vertically-aligned-center {
		align-self: stretch;
		display: flex;
		/* Maltillinen, perusteltu minimikorkeus — ei tekstin täydelliseen
		   tarpeeseen asti venytetty (se söi kuvasta kohtuuttoman palan,
		   ks. git-historia) eikä täysin luonnollinen (silloin jakamiselle
		   ei jää mitään näkyvää tilaa). ~25 % rajaus kuvan alaosasta
		   (käsivarret/vartalo), ei kasvoista tai yläosasta. */
		min-height: 540px;
	}
	.hero-image-col .wp-block-image {
		width: 100%;
	}
	.hero-image-col .wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
}

/* Teemakortit (Aiheet, joista kirjoitan) — ei "palvelukortti"-ilme */
.theme-card {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.5rem;
}

/* Esiintymis- ja kirjoituskortit — ohut alaviiva erottimena, ei taustaa/varjoa */
.entry-card {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}
.entry-card:last-child {
	border-bottom: none;
}

/* Kirjoitukset-arkiston kategoriafiltteri */
.kirjoitukset-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-bottom: 2.5rem;
}
.kirjoitukset-filter a {
	text-decoration: none;
	color: var(--wp--preset--color--secondary-text);
	padding-bottom: 2px;
}
.kirjoitukset-filter a.is-active {
	color: var(--wp--preset--color--foreground);
	border-bottom: 2px solid var(--wp--preset--color--foreground);
}

/* "Julkaistu alun perin X:ssä" -laatikko ulkopuolisille kirjoituksille */
.external-notice {
	border-left: 2px solid var(--wp--preset--color--foreground);
	padding-left: 1rem;
	color: var(--wp--preset--color--secondary-text);
	font-style: italic;
}

/* Yksi yhtenäinen "label"-ääni koko sivustolle: versaali + pieni koko +
   sama kirjainvälistys + sama paino + AINA päätteetön (Inter), ei
   koskaan Source Serif 4. Kattaa navin, nimiön ja eyebrow-otsikot —
   nämä olivat aiemmin kolme hieman eri arvoin (0.04/0.06/0.08em
   kirjainväli, serif vs. sans, eri painot) toteutettua versiota
   samasta roolista, mikä oli iso osa koettua "rauhattomuutta".
   Ks. myös templates/single.html, templates/category.html,
   templates/home.html (post-terms) ja content/minusta.html
   (sivupalkin h3-labelit) jotka on yhtenäistetty samaan arvoon. */
.site-nav a,
.site-nav .wp-block-navigation-item__label,
.eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.eyebrow {
	display: block;
	color: var(--wp--preset--color--secondary-text);
	margin-bottom: 0.75rem;
}

/* Aiheet-osio: numeroitu indeksi tasakokoisten korttien sijaan —
   luetaan sisällysluettelona, ei feature-gridinä. */
.topics-index {
	border-top: 1px solid var(--wp--preset--color--border);
}
.topics-index .topic-row {
	display: flex;
	gap: 2rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	align-items: baseline;
}
/* Numero jakaa täsmälleen viereisen H3-otsikon fontin/painon/koon
   (subhead-rooli) — ainoa ero on väri. Ei enää oma erillinen
   koko/paino-yhdistelmä niin kuin ennen (28px/300 kun otsikko oli
   28px/600) — sama rooli, vain hillitympi väri erottaa sen otsikosta. */
.topics-index .topic-index-number {
	flex: 0 0 2.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--secondary-text);
}

/* "Kuka?"-osio etusivulla: epäsymmetrinen fakta+teksti-jako samalla
   mallilla kuin Minusta-sivun sivupalkki — ei sama pinottu
   yksipalstainen lohko kuin muut sektiot. */
.about-split {
	display: flex;
	gap: 3rem;
	align-items: start;
}
.about-facts {
	flex: 0 0 200px;
}
.about-facts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.about-facts li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--secondary-text);
	font-size: var(--wp--preset--font-size--meta);
}
.about-text {
	flex: 1;
	min-width: 0;
}
@media (max-width: 781px) {
	.about-split {
		flex-direction: column;
	}
	.about-facts {
		flex-basis: auto;
		width: 100%;
	}
}