/*
Theme Name: Toiminnaksi
Theme URI: https://toiminnaksi.fi
Author: Toiminnaksi
Description: Kevyt ja saavutettava lohkoteema Toiminnaksin toimintaterapiasivustolle.
Version: 1.0.10
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toiminnaksi
*/

/* ---------- Perusasiat ---------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Ankkurilinkit eivät jää kiinteän ylätunnisteen alle */
[id] {
	scroll-margin-top: 6rem;
}

img {
	height: auto;
}

/* Näkyvä kohdistus näppäimistökäyttäjille */
:where(a, button, summary, input, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--coral);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--navy);
}

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

.toim-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 252, 247, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.admin-bar .toim-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.toim-header__inner {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

/* Tunnus: kolme leikkipalloa sivuston nimen edessä */
.toim-header .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.toim-header .wp-block-site-title a::before {
	content: "";
	flex: none;
	width: 2.4rem;
	height: 1.6rem;
	background: url("assets/images/tunnus.svg") no-repeat center / contain;
}

.toim-header .wp-block-site-tagline {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	padding-left: 3rem;
	line-height: 1.3;
}

.toim-header .wp-block-navigation-item__content {
	padding: 0.4rem 0.2rem;
	border-bottom: 2px solid transparent;
}

.toim-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--coral);
	border-bottom-color: currentColor;
}

/* Ota yhteyttä -nappi valikossa */
.toim-header .toim-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	border-bottom: 0;
}

.toim-header .toim-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--white);
}

/* ---------- Mobiilivalikko ----------
   Avautuu ylätunnisteen sisään sloganin alle (ei koko ruudun peittoa),
   jolloin kaikki kohdat näkyvät kerralla ja sivun sisältö siirtyy alemmas.
   WordPressin oma raja on 600 px, mutta valikon nimet mahtuvat yhdelle
   riville vasta n. 1280 px:stä, joten hampurilaisvalikko on käytössä sitä
   kapeammilla näytöillä (myös tabletit ja pienet läppärit). */

@media (max-width: 1279px) {
	.toim-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.toim-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Avaus- ja sulkupainike: selkeä kuvake ja 44 px kosketusalue */
	.toim-header .wp-block-navigation__responsive-container-open,
	.toim-header .wp-block-navigation__responsive-container-close {
		color: var(--wp--preset--color--navy);
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.toim-header .wp-block-navigation__responsive-container-open svg,
	.toim-header .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* Sumennus rikkoisi valikon sijoittelun, joten mobiilissa tausta on umpinainen */
	.toim-header {
		background: var(--wp--preset--color--base);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.toim-header__inner {
		flex-wrap: wrap !important;
		row-gap: 0;
	}

	/* Avattuna valikko siirtyy omalle rivilleen tunnuksen alle */
	.toim-header .wp-block-navigation:has(.is-menu-open) {
		flex-basis: 100%;
		position: static;
	}

	.toim-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.toim-header .wp-block-navigation__responsive-container.is-menu-open {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		overflow: visible;
		padding: 0.75rem 0 0.5rem !important;
		background: transparent !important;
		animation: none;
		z-index: auto;
	}

	.toim-header .is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
		margin-top: 0 !important;
	}

	/* Sulje-painike samalle paikalle kuin avauspainike */
	.toim-header .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 19px;
		right: clamp(1rem, 4vw, 2rem);
		padding: 0;
	}

	.toim-header .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0 !important;
		align-items: stretch !important;
	}

	.toim-header .is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
		align-items: stretch !important;
		border-top: 1px solid rgba(30, 58, 95, 0.12);
	}

	.toim-header .is-menu-open .wp-block-navigation-item {
		width: 100%;
		font-size: 1.0625rem;
		border-bottom: 1px solid rgba(30, 58, 95, 0.12);
	}

	.toim-header .is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0.7rem 0.25rem !important;
		border-bottom: 0;
	}

	.toim-header .is-menu-open .toim-nav-cta {
		border-bottom: 0;
		padding-top: 0.85rem;
	}

	.toim-header .is-menu-open .toim-nav-cta > .wp-block-navigation-item__content {
		text-align: center;
		padding: 0.75rem 1rem !important;
	}
}

/* Tabletilla Yhteystiedot-nappi ei veny koko leveydelle */
@media (min-width: 600px) and (max-width: 1279px) {
	.toim-header .is-menu-open .toim-nav-cta > .wp-block-navigation-item__content {
		display: inline-block;
		width: auto;
		padding: 0.75rem 2rem !important;
	}
}

/* ---------- Osiot ---------- */

/* Täysleveät osiot liittyvät toisiinsa ilman rakoja */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull:last-child {
	margin-block-end: 0;
}

.toim-osio > .wp-block-columns,
.toim-hero > .wp-block-columns {
	gap: clamp(2rem, 5vw, 4.5rem);
}

.toim-osio {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.toim-osio--tiivis {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Pieni yläotsikko otsikon yllä */
.toim-esiotsikko {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--coral);
	margin-bottom: 0.25rem;
}

.toim-ingressi {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* ---------- Hero ---------- */

.toim-hero {
	position: relative;
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Koristepallot taustalla */
.toim-hero::before,
.toim-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.toim-hero::before {
	width: 26rem;
	height: 26rem;
	right: -8rem;
	top: -9rem;
	background: var(--wp--preset--color--sage-light);
}

.toim-hero::after {
	width: 9rem;
	height: 9rem;
	left: -3rem;
	bottom: 2rem;
	background: var(--wp--preset--color--sun);
	opacity: 0.35;
}

.toim-hero > * {
	position: relative;
	z-index: 1;
}

.toim-hero h1 {
	margin-top: 0;
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	letter-spacing: -0.02em;
}

/* Pääotsikon alle tuleva iskulause */
.toim-alaotsikko {
	margin-top: 0.25rem;
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--wp--preset--color--coral);
}

.toim-hero__kuva {
	position: relative;
}

.toim-hero__kuva img {
	border-radius: 2rem 2rem 2rem 0.5rem;
	box-shadow: 0 30px 60px -30px rgba(30, 58, 95, 0.45);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.toim-hero__kuva::after {
	content: "";
	position: absolute;
	width: 4.5rem;
	height: 4.5rem;
	right: -1rem;
	bottom: -1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--coral-bright);
	z-index: -1;
}

/* ---------- Kuvat ---------- */

.toim-kuva img {
	border-radius: 1.5rem;
	width: 100%;
	object-fit: cover;
}

/* Rajaus painottuu yläosaan, jotta kasvot pysyvät kuvassa */
.toim-kuva--pysty img {
	aspect-ratio: 4 / 5;
	object-position: 50% 15%;
}

/* Leveä kuvanauha sivun sisällä */
.toim-kuva--nauha {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.toim-kuva--nauha img {
	height: clamp(160px, 22vw, 280px);
	object-fit: cover;
}

.toim-banneri {
	margin-top: 0;
	margin-bottom: 0;
}

.toim-banneri img {
	width: 100%;
	height: clamp(120px, 16vw, 220px);
	object-fit: cover;
	display: block;
}

/* ---------- Tarkistuslista ---------- */

ul.is-style-checklist {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 0.75rem;
}

ul.is-style-checklist > li {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 1rem;
	padding: 0.9rem 1rem 0.9rem 2.85rem;
	line-height: 1.5;
	box-shadow: 0 1px 2px rgba(30, 58, 95, 0.06), 0 8px 20px -14px rgba(30, 58, 95, 0.25);
}

/* Pieni keltainen pallo luettelomerkkinä */
ul.is-style-checklist > li::before {
	content: "";
	position: absolute;
	left: 1.3rem;
	top: 1.35rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sun);
}

/* Pallolista: keltaiset pallot luettelomerkkeinä */
ul.is-style-pallot {
	list-style: none;
	padding-left: 0;
}

ul.is-style-pallot > li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.4rem;
}

ul.is-style-pallot > li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.6em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sun);
}

/* ---------- Lainaus ---------- */

.wp-block-quote.toim-lainaus {
	position: relative;
	background: var(--wp--preset--color--sage-light);
	border-radius: 1.5rem;
	padding: 2.25rem 1.75rem 1.5rem 1.75rem;
	margin: 2rem 0 0;
	color: var(--wp--preset--color--sage);
	font-style: normal;
}

.wp-block-quote.toim-lainaus::before {
	content: "\201D";
	position: absolute;
	top: -1.4rem;
	left: 1.5rem;
	font-size: 5rem;
	line-height: 1;
	font-weight: 900;
	color: var(--wp--preset--color--coral-bright);
}

.wp-block-quote.toim-lainaus p {
	margin: 0;
}

/* Iso nostolainaus sivun alussa */
.wp-block-quote.toim-lainaus--iso {
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 2.75rem);
	margin-top: 1.5rem;
	margin-bottom: var(--wp--preset--spacing--50);
	border-radius: 2rem;
	font-size: clamp(1.375rem, 2.8vw, 2rem);
	font-weight: 700;
	line-height: 1.35;
}

.wp-block-quote.toim-lainaus--iso::before {
	top: -2.2rem;
	left: clamp(1.25rem, 4vw, 3.5rem);
	font-size: 7rem;
}

.wp-block-quote.toim-lainaus--iso p {
	max-width: 28em;
}

/* ---------- Avattava osio (Koulutukset) ---------- */

.wp-block-details {
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(30, 58, 95, 0.15);
	border-radius: 1rem;
	padding: 0;
	overflow: hidden;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	padding: 1rem 1.25rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

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

.wp-block-details summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--coral);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

.wp-block-details > :last-child {
	margin-bottom: 1.25rem;
}

.wp-block-details h4 {
	font-size: 1rem;
	margin-top: 1.25rem;
}

.wp-block-details ul {
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Vastaanotto ---------- */

.toim-faktat {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.85rem;
}

.toim-faktat > li {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	line-height: 1.5;
}

.toim-faktat > li::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.45em;
	border-radius: 50%;
	background: var(--wp--preset--color--sun);
	box-shadow: 0 0 0 4px rgba(242, 184, 75, 0.25);
}

/* ---------- Etusivun linkit alasivuille ---------- */

.toim-linkit {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--50);
}

.toim-linkki h3 {
	position: relative;
	padding-left: 1.6rem;
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

/* Värikäs pallo otsikon edessä, kiertää tunnuksen värejä */
.toim-linkki h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	background: var(--wp--preset--color--coral-bright);
}

.toim-linkki:nth-child(3n + 2) h3::before {
	background: var(--wp--preset--color--sun);
}

.toim-linkki:nth-child(3n) h3::before {
	background: var(--wp--preset--color--sage);
}

.toim-linkki h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.toim-linkki h3 a:hover {
	color: var(--wp--preset--color--coral);
	text-decoration: underline;
}

.toim-linkki p {
	margin: 0;
	padding-left: 1.6rem;
	color: var(--wp--preset--color--ink);
}

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

.toim-footer {
	background: var(--wp--preset--color--navy);
	color: #E9EEF5;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
}

.toim-footer h2,
.toim-footer h3 {
	color: var(--wp--preset--color--white);
}

.toim-footer h3 {
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sun);
}

.toim-footer a {
	color: var(--wp--preset--color--white);
}

.toim-footer a:hover {
	color: var(--wp--preset--color--sun);
}

/* Tummalla pohjalla kohdistusrengas keltaisena (kontrasti 6,4:1) */
.toim-footer :focus-visible {
	outline-color: var(--wp--preset--color--sun);
}

.toim-footer ul {
	list-style: none;
	padding-left: 0;
}

.toim-footer li {
	margin-bottom: 0.35rem;
}

.toim-footer .toim-yhteys-iso {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	margin: 0;
}

.toim-footer .wp-block-button__link {
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--navy);
}

.toim-footer .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.toim-footer__ala {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	font-size: 0.875rem;
	color: #C9D3E0;
}

.toim-footer__ala p {
	margin: 0;
}

.toim-footer__slogan {
	font-weight: 800;
	color: var(--wp--preset--color--sun);
}

.toim-footer__ala a {
	color: #E9EEF5;
}

/* ---------- Alasivut ---------- */

.toim-sivu-otsikko {
	background: var(--wp--preset--color--sand);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

.toim-sivu-otsikko .wp-block-post-title {
	margin: 0;
}

.toim-sivu-sisalto {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Alasivun sisältö alkaa samasta reunasta kuin otsikko ja logo;
   pelkät tekstikappaleet pidetään luettavan levyisinä (n. 75 merkkiä) */
.toim-sivu-sisalto > :is(p, ul, ol, h2, h3, h4, .wp-block-buttons, .wp-block-image, .wp-block-quote, .wp-block-details):not(.alignwide):not(.alignfull) {
	max-width: 760px;
	margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
}

/* ---------- Mobiili ---------- */

@media (max-width: 781px) {
	.toim-hero::before {
		width: 16rem;
		height: 16rem;
		right: -7rem;
		top: -6rem;
	}

	.toim-header .wp-block-site-title {
		font-size: 1.3rem;
	}

	.toim-header .wp-block-site-title a::before {
		width: 2rem;
		height: 1.35rem;
	}

	.toim-header .wp-block-site-tagline {
		padding-left: 2.6rem;
		font-size: 0.75rem;
	}

	.toim-kuva--pysty img {
		aspect-ratio: 1 / 1;
	}

	.toim-kaanna-mobiili {
		flex-direction: column-reverse;
	}
}