/*
Theme Name: Timo Kurkela
Theme URI: https://www.instagram.com/timokurkela/
Author: Timo Kurkela
Description: Trubaduuri, laulaja & laulunopettaja – lohkoteema. Teeman painikkeella voi luoda sivut (Etusivu, Trubaduuri, Häät, Perhejuhlat, Yritystilaisuudet, Kokoonpanot, Laulunopetus, Referenssit, Yhteys) valmiilla sisällöllä.
Version: 1.6.4
Requires at least: 6.6
Tested up to: 6.8
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: timo-kurkela
*/

/* ==========================================================================
   Perusasetukset
   ========================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { display: block; }
input, select, textarea, button { font-family: inherit; }

@keyframes tkRiseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Lohkojen väliset oletusvälit pois osioiden väliltä. */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
body :is(.wp-block-post-content, .is-root-container) > * { margin-block: 0; }
body .tk-main { margin: 0; }

/* Leipäteksti */
body .tk-inner p { color: var(--wp--preset--color--body); }
body .tk-inner h1, body .tk-inner h2 { text-wrap: balance; }
body .tk-inner h2 { font-size: clamp(30px, 4.4vw, 46px); }

/* ==========================================================================
   Ylätunniste ja valikko
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

body .tk-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid #E2DACB;
	transition: box-shadow 0.3s ease;
}
/* Sumennus on erillisessä kerroksessa: backdrop-filter suoraan ylätunnisteessa
   rajaisi mobiilivalikon (position: fixed) ylätunnisteen kokoiseksi. */
body .tk-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(247, 244, 238, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
header.is-scrolled .tk-header { box-shadow: 0 1px 28px rgba(33, 30, 26, 0.11); }

body .tk-header__inner {
	min-height: 74px;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
}

body .tk-brand { padding: 14px 0; flex-shrink: 0; }
@media (max-width: 420px) {
	body .tk-brand .tk-brand__tag { letter-spacing: 0.1em; }
}
body .tk-brand > * { margin: 0; }
body .tk-brand__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(19px, 2.4vw, 23px);
	letter-spacing: 0.02em;
	line-height: 1;
}
body .tk-brand__name a { color: var(--wp--preset--color--ink); text-decoration: none; }
body .tk-brand .tk-brand__tag {
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: #6B6458;
	line-height: 1.3;
}

body .tk-nav .wp-block-navigation__container { gap: clamp(18px, 2.4vw, 34px); align-items: center; flex-wrap: nowrap; }
body .tk-nav .wp-block-navigation-item__content { white-space: nowrap; }
body .tk-nav .wp-block-navigation-item__content {
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: color 0.25s, border-color 0.25s, background 0.25s;
}
body .tk-nav .wp-block-navigation-item__content:hover,
body .tk-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--bronze);
	border-bottom-color: var(--wp--preset--color--accent);
}
body .tk-nav .tk-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 12px 22px;
	border: 0;
	border-radius: 2px;
}
body .tk-nav .tk-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* Hampurilaispainike */
body .tk-nav .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border: 1px solid #DFD7C9;
	border-radius: 2px;
	color: var(--wp--preset--color--ink);
}

/* Mobiilivalikko näytetään alle 1024 px leveillä näytöillä (WordPressin oletus on 600 px). */
@media (min-width: 600px) and (max-width: 1023px) {
	body .tk-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	body .tk-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

body .tk-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: 18px clamp(18px, 4vw, 40px) 24px;
}
body .tk-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; align-items: stretch; }
body .tk-nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}
body .tk-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid #E7E0D2; }
body .tk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 0 !important;
	font-size: 16px;
	letter-spacing: 0.08em;
	border: 0;
}
body .tk-nav .is-menu-open .tk-nav-cta { border-bottom: 0; margin-top: 14px; }
body .tk-nav .wp-block-navigation__responsive-container.is-menu-open .tk-nav-cta > .wp-block-navigation-item__content { text-align: center; }

/* ==========================================================================
   Osiot
   ========================================================================== */

body .tk-section { padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(64px, 9vw, 110px); }
body .tk-section.tk-pt-0 { padding-top: 0; }
/* Jos yläkuva on suoraan ennen osiota, osio tarvitsee normaalin yläreunan välin. */
body .wp-block-cover + .tk-section.tk-pt-0 { padding-top: clamp(64px, 9vw, 110px); }
body .tk-section.tk-pt-sm { padding-top: clamp(28px, 4vw, 56px); }
body .tk-section.tk-pb-sm { padding-bottom: clamp(20px, 3vw, 40px); }
body .tk-section.tk-page-intro { padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(28px, 4vw, 48px); }

body .tk-sand { background: var(--wp--preset--color--sand); }
/* Kaksi hiekanväristä osiota peräkkäin sulautuisi yhteen: lomaketta edeltävä osio vaaleaksi. */
body .wp-block-post-content > .tk-sand:not(.tk-contact):has(+ .tk-sand.tk-contact) { background: var(--wp--preset--color--paper); }
/* Tilaisuustyyppien ruudukko (Perhejuhlat, Yritystilaisuudet) hiekanväriseksi, jotta
   vaaleat osiot eivät jatku pitkänä yhtenäisenä jaksona. Ei koske lomaketta edeltävää osiota. */
body .wp-block-post-content > .tk-section:not(.tk-sand):not(.tk-dark):has(> .tk-inner > .tk-steps--wide):not(:has(+ .tk-contact)) {
	background: var(--wp--preset--color--sand);
	padding-top: clamp(56px, 8vw, 100px);
}
/* Taustavärillinen osio tarvitsee täyden yläreunan välyksen. */
body .tk-section.tk-sand.tk-pt-sm,
body .tk-section.tk-dark.tk-pt-sm { padding-top: clamp(56px, 8vw, 100px); }
body .tk-dark { background: var(--wp--preset--color--night); color: var(--wp--preset--color--cream); }
body .tk-dark :is(h1, h2, h3) { color: var(--wp--preset--color--cream); }
body .tk-dark .tk-inner p { color: #CFC6B7; }
body .tk-dark a { color: var(--wp--preset--color--gold); }
body .tk-dark a:hover { color: #fff; }

body .tk-stack > .tk-inner > * + * { margin-block-start: clamp(56px, 8vw, 110px); }

/* Tekstiluokat */
body .tk-eyebrow {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	line-height: 1.4;
}
body .tk-inner .tk-eyebrow { color: var(--wp--preset--color--bronze); }
body .tk-inner .tk-eyebrow--muted { color: var(--wp--preset--color--muted); }
body .tk-dark .tk-inner .tk-eyebrow,
body .tk-hero .tk-inner .tk-eyebrow { color: var(--wp--preset--color--gold); letter-spacing: 0.3em; }
body .tk-eyebrow + * { margin-block-start: 14px; }

body .tk-inner .tk-h-md { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.15; }
body .tk-inner .tk-h-sm { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.2; }
body .tk-narrow { max-width: 20ch; }
body .tk-measure { max-width: 52ch; }
body .tk-measure-wide { max-width: 58ch; }
body .tk-inner .tk-intro-gap { margin-bottom: clamp(28px, 4vw, 46px); }
body .tk-inner .tk-after-grid { margin-top: clamp(28px, 4vw, 44px); }
body .tk-inner .wp-block-heading + p { margin-block-start: 18px; }

body .tk-inner .tk-statement {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 300;
	font-size: clamp(21px, 3vw, 32px);
	line-height: 1.45;
	max-width: 40ch;
	color: var(--wp--preset--color--ink);
	text-wrap: pretty;
}
body .tk-statement + p { margin-block-start: 22px; }

body .tk-inner .tk-pullquote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(20px, 2.6vw, 24px);
	line-height: 1.5;
	max-width: 30ch;
	color: var(--wp--preset--color--ink);
	text-wrap: balance;
}

body .tk-page-intro h1 { max-width: 24ch; font-size: clamp(34px, 6vw, 66px); line-height: 1.06; }
body .tk-inner .tk-page-lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.65; max-width: 56ch; margin-top: 20px; }
body .tk-inner .tk-note { font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--muted); max-width: 62ch; }

body .tk-label-heading,
body .tk-inner .tk-label-heading {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Painikkeet
   ========================================================================== */

body .wp-block-buttons { gap: 14px; }
body .tk-inner .wp-block-buttons:not(:first-child) { margin-block-start: 28px; }
body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}
body .wp-block-button.is-style-tk-light .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--paper);
}
body .wp-block-button.is-style-tk-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}
body .wp-block-button.is-style-tk-ghost .wp-block-button__link {
	background: rgba(20, 18, 15, 0.3);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
}
body .wp-block-button.is-style-tk-ghost .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
}
body .wp-block-button.is-style-tk-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
body .wp-block-button.is-style-tk-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
body .wp-block-button.is-style-tk-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream);
	border-color: #6A6253;
}
body .wp-block-button.is-style-tk-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--night);
}
body .tk-hero .wp-block-button__link { min-height: 54px; padding-left: 32px; padding-right: 32px; }

/* ==========================================================================
   Hero (Cover-lohko)
   ========================================================================== */

body .wp-block-cover.tk-hero {
	min-height: min(460px, 70svh);
	align-items: flex-end;
	background: var(--wp--preset--color--night);
	padding: clamp(70px, 10vw, 110px) clamp(18px, 4vw, 40px) clamp(40px, 6vw, 72px);
}
body .wp-block-cover.tk-hero--home { min-height: min(620px, calc(100svh - 74px)); padding-bottom: clamp(48px, 7vw, 86px); }
body .wp-block-cover.tk-hero--tall { min-height: min(540px, 78svh); }
body .wp-block-cover.tk-hero--contact { min-height: 0; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 100px); align-items: center; }
body .wp-block-cover.tk-hero .wp-block-cover__inner-container { width: 100%; margin: 0; }
body .tk-hero > .wp-block-cover__inner-container > .tk-inner { animation: tkRiseIn 0.9s ease both; }

body .tk-hero h1 { color: #fff; max-width: 16ch; }
body .tk-hero h1.tk-display {
	max-width: none;
	font-size: clamp(42px, 8.5vw, 92px);
	line-height: 1.02;
	letter-spacing: -0.015em;
}
body .tk-hero .tk-inner .tk-hero-lead {
	margin-top: 20px;
	max-width: 46ch;
	font-size: clamp(17px, 2.2vw, 21px);
	line-height: 1.55;
	color: #F2EADE;
}
body .tk-hero--home .tk-inner .tk-eyebrow { color: #E3D5C2; font-size: 12px; }
body .tk-hero .tk-inner .wp-block-buttons:not(:first-child) { margin-top: clamp(26px, 4vw, 40px); }

/* ==========================================================================
   Sarakkeet ja kuvat
   ========================================================================== */

body .wp-block-columns.tk-split { gap: clamp(28px, 5vw, 64px); margin-bottom: 0; }
body .tk-split--top > .wp-block-column { align-self: flex-start; }
/* Puhelimella sarakkeet pinoutuvat: kuva aina ensin, ettei kaksi kuvaa osu peräkkäin. */
@media (max-width: 781px) {
	body .wp-block-columns.tk-split > .wp-block-column:has(> .wp-block-image) { order: -1; }
}
body .tk-stack .wp-block-columns { margin-bottom: 0; }

body .tk-photo { margin: 0; overflow: hidden; border-radius: 2px; background: #121110; }
body .tk-photo img {
	width: 100%;
	height: clamp(300px, 42vw, 520px);
	object-fit: cover;
	object-position: 50% 40%;
	transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body .tk-photo--tall img { height: clamp(320px, 44vw, 560px); }
body .tk-photo--short img { height: clamp(280px, 38vw, 460px); }
body .tk-photo:hover img { transform: scale(1.035); }

/* ==========================================================================
   Ruudukot: ruudukko venyy koko leveydelle (auto-fit) kuten alkuperäisessä mallissa.
   ========================================================================== */

/* WordPress lisää ruudukoille container-type: inline-size -asetuksen. Safari voi
   piirtää tällaisen ruudukon nollan levyisenä, jolloin teksti valuu kirjain
   kerrallaan allekkain. Teema ei käytä container-kyselyjä, joten asetus pois. */
body .is-layout-grid { container-type: normal; }

body .tk-reviews { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3vw, 38px); }
body .tk-reviews--light { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
body .tk-cards { grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 26px); }
body .tk-prices { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: clamp(20px, 3vw, 28px); }
body .tk-prices:has(.tk-price--small) { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(18px, 2.5vw, 28px); }
body .tk-videos { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
body .tk-steps { grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr)); gap: clamp(16px, 1.8vw, 26px); }
body .tk-steps--wide { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(24px, 3vw, 36px); }
body .tk-songlists { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
body .tk-quote-tiles { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(20px, 2.5vw, 32px); }
body .tk-two-lists { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); }
body .tk-facts { gap: 18px 22px; }
body .tk-facts--row { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); border-top: 1px solid var(--wp--preset--color--line); padding-top: 26px; }
body .tk-facts--plain { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); padding-top: 22px; }
body :is(.tk-reviews, .tk-cards, .tk-prices, .tk-videos, .tk-steps, .tk-songlists, .tk-quote-tiles, .tk-two-lists, .tk-facts) > * { margin: 0; min-width: 0; }

/* ==========================================================================
   Palautteet (Lainaus-lohko)
   ========================================================================== */

body .wp-block-quote.tk-review {
	margin: 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid #3B362E;
	display: flex;
	flex-direction: column;
	gap: 16px;
	quotes: none;
}
body .wp-block-quote.tk-review::before {
	content: "★★★★★";
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--wp--preset--color--gold);
}
body .wp-block-quote.tk-review > * { margin: 0; }
body .tk-inner .wp-block-quote.tk-review p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: #EFE6D9;
}
body .wp-block-quote.tk-review cite {
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9C9385;
}
body .tk-reviews--light .wp-block-quote.tk-review {
	background: var(--wp--preset--color--sand);
	border: 0;
	border-radius: 2px;
	padding: clamp(24px, 3vw, 34px);
}
body .tk-reviews--light .wp-block-quote.tk-review::before { color: var(--wp--preset--color--bronze); font-size: 12px; }
body .tk-inner .tk-reviews--light .wp-block-quote.tk-review p { color: #2B2721; line-height: 1.65; }
body .tk-reviews--light .wp-block-quote.tk-review cite { color: var(--wp--preset--color--muted); font-size: 12px; letter-spacing: 0.16em; margin-top: auto; }

/* ==========================================================================
   Tilaisuuskortit
   ========================================================================== */

body .tk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #E2DACB;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
body .tk-card:hover { border-color: var(--wp--preset--color--gold); transform: translateY(-6px); box-shadow: 0 22px 50px rgba(33, 30, 26, 0.15); }
body .tk-card > * { margin: 0; }
body .tk-card .tk-card__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 196px;
	margin: 0;
	background: radial-gradient(120% 90% at 50% 18%, rgba(200, 168, 130, 0.30) 0%, rgba(200, 168, 130, 0.05) 48%, rgba(0, 0, 0, 0) 72%), var(--wp--preset--color--night);
}
body .tk-card .tk-card__icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(200, 168, 130, 0) 0%, rgba(200, 168, 130, 0.75) 50%, rgba(200, 168, 130, 0) 100%);
}
body .tk-card .tk-card__icon img { width: 104px; height: 104px; }
body .tk-card__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 24px; }
body .tk-card .tk-card__body > * { margin: 0; }
body .tk-inner .tk-card__title { font-size: 27px; font-weight: 400; line-height: 1.15; margin-bottom: 12px; }
body .tk-inner .tk-card__text { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
body .tk-card .tk-card__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-top: 1px solid #EAE3D6;
	padding-top: 18px;
}
body .tk-card__foot > * { margin: 0; }
body .tk-inner :is(.tk-card__meta, .tk-card__link) { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; }
body .tk-inner .tk-card__meta { color: var(--wp--preset--color--muted); }
body .tk-card__link a { color: var(--wp--preset--color--bronze); text-decoration: none; white-space: nowrap; }
body .tk-card__link a::after { content: ""; position: absolute; inset: 0; }

/* ==========================================================================
   Hinnat, paneelit, tietoparit
   ========================================================================== */

body .tk-price {
	display: flex;
	flex-direction: column;
	gap: 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: clamp(28px, 4vw, 40px);
	background: var(--wp--preset--color--card);
}
body .tk-price > * { margin: 0; }
body .tk-inner .tk-price__label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
body .tk-inner .tk-price__title { font-size: clamp(24px, 3vw, 30px); font-weight: 300; line-height: 1.2; }
body .tk-inner .tk-price__amount { font-family: var(--wp--preset--font-family--serif); font-size: clamp(34px, 5vw, 46px); line-height: 1; color: var(--wp--preset--color--ink); }
body .tk-inner .tk-price__text { font-size: 16px; line-height: 1.7; }
body .tk-price .tk-price__cta { margin-top: auto; }
body .tk-price--featured { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }
body .tk-price--featured .tk-price__title { color: var(--wp--preset--color--cream); }
body .tk-inner .tk-price--featured .tk-price__label { color: var(--wp--preset--color--gold); }
body .tk-inner .tk-price--featured .tk-price__amount { color: #fff; }
body .tk-inner .tk-price--featured .tk-price__text { color: #CFC6B7; }
body .tk-price--small { gap: 10px; padding: clamp(26px, 3.5vw, 36px); border-color: #DCD3C3; }
body .tk-inner .tk-price--small .tk-price__amount { font-size: clamp(32px, 4.5vw, 42px); }
body .tk-inner .tk-price--small .tk-price__text { font-size: 15px; line-height: 1.65; }

body .tk-panel { background: var(--wp--preset--color--sand); border-radius: 2px; padding: clamp(26px, 4vw, 40px); }
body .tk-panel > * { margin: 0; }
body .tk-inner .tk-panel__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
}
body .tk-items > * { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
body .tk-items > *:last-child { border-bottom: 0; }
body .tk-items > * > * { margin: 0; }
body .tk-inner .tk-item__title { font-family: var(--wp--preset--font-family--serif); font-size: 19px; line-height: 1.3; color: var(--wp--preset--color--ink); }
body .tk-inner .tk-item__text { margin-top: 5px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }
body .tk-panel .wp-block-buttons { margin-top: 26px; }

body .tk-fact > * { margin: 0; }
body .tk-inner .tk-fact__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 6px; }
body .tk-inner .tk-fact__value { font-family: var(--wp--preset--font-family--serif); font-size: 17px; line-height: 1.4; color: var(--wp--preset--color--ink); }
body .tk-panel .tk-inner .tk-fact__value,
body .tk-panel .tk-fact__value,
body .tk-step .tk-fact__value { font-size: 20px; line-height: 1.35; }
body .tk-inner .tk-facts--plain .tk-fact__value { font-family: var(--wp--preset--font-family--sans); font-size: 16px; line-height: 1.5; color: #2B2721; }

/* Vaiheet ja ruudut (ylärajaviiva) */
body .tk-step { border-top: 1px solid var(--wp--preset--color--line); padding-top: 20px; }
body .tk-step > * { margin: 0; }
body .tk-inner .tk-step__num { font-family: var(--wp--preset--font-family--serif); font-size: 28px; line-height: 1; color: #C9B9A4; margin-bottom: 10px; }
body .tk-step h3 { font-size: 20px; font-weight: 400; margin-bottom: 9px; }
body .tk-steps--wide .tk-step { padding-top: 22px; }
body .tk-steps--wide .tk-step h3 { font-size: 21px; margin-bottom: 10px; }
body .tk-step .tk-label-heading { margin-bottom: 10px; }
body .tk-inner .tk-step__text { font-size: 15px; line-height: 1.68; text-wrap: pretty; }

/* Listat */
body .tk-songlist > * { margin: 0; }
body .tk-songlist .tk-label-heading { margin-bottom: 18px; }
body .tk-list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 16px; line-height: 1.5; color: #2B2721; }
body .tk-list-plain li { margin: 0; }
body .tk-list-plain--muted { gap: 14px; line-height: 1.55; color: var(--wp--preset--color--body); }
body .tk-two-lists > * > * { margin: 0; }
body .tk-two-lists .tk-label-heading { margin-bottom: 20px; }

/* Ohjelmisto (Tiedot-lohko) */
body .tk-accordions { border-top: 1px solid var(--wp--preset--color--line); }
body .tk-accordions > * { margin: 0; }
body .wp-block-details.tk-accordion { border-bottom: 1px solid var(--wp--preset--color--line); }
body .tk-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(18px, 2.4vw, 24px);
	color: var(--wp--preset--color--ink);
}
body .tk-accordion summary::-webkit-details-marker { display: none; }
body .tk-accordion summary::after { content: "+"; color: var(--wp--preset--color--bronze); font-size: 22px; line-height: 1; }
body .tk-accordion[open] summary::after { content: "–"; }
body .tk-songs {
	list-style: none;
	margin: 0;
	padding: 0 0 28px;
	columns: 3 240px;
	column-gap: 40px;
	font-size: 15px;
	line-height: 2;
	color: var(--wp--preset--color--body);
}
body .tk-songs li { break-inside: avoid; margin: 0; }

/* Usein kysyttyä (UKK): vastaukset avattavien kysymysten sisällä */
body .tk-faq .wp-block-details > p { margin: 0; padding: 0 0 24px; max-width: 62ch; font-size: 16px; line-height: 1.7; }
/* UKK-otsikko samaan tyyliin kuin ohjelmisto: pieni harmaa "FAQ" ja pienempi otsikko. */
body .tk-faq-section .tk-inner > h2.wp-block-heading { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.2; }
body .tk-faq-section .tk-inner > h2.wp-block-heading:first-child::before {
	content: "FAQ";
	display: block;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.28em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
/* Kun UKK tulee suoraan saman värisen osion (esim. ohjelmiston) perään, väli tiiviimmäksi. */
body .wp-block-post-content > .tk-section:not(.tk-sand):not(.tk-dark) + .tk-faq-section { padding-top: clamp(16px, 2vw, 24px); }

/* Keikkalista (Keikat-sivu) */
body .tk-gigs { border-top: 1px solid var(--wp--preset--color--line); }
body .tk-gigs > * { margin: 0; }
body .tk-gig {
	display: grid;
	grid-template-columns: minmax(130px, 200px) 1fr;
	gap: 6px 32px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
body .tk-gig > *, body .tk-gig__body > * { margin: 0; }
body .tk-inner .tk-gig__date { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--bronze); }
body .tk-inner .tk-gig__title { font-size: clamp(20px, 2.4vw, 24px); font-weight: 400; line-height: 1.25; }
body .tk-inner .tk-gig__details { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }
body .tk-inner .tk-gigs-past-title { margin-top: clamp(48px, 7vw, 80px); margin-bottom: 18px; }
body .tk-gigs--past { opacity: 0.7; }
@media (max-width: 600px) {
	body .tk-gig { grid-template-columns: 1fr; }
}

/* Laatikko */
body .tk-callout {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--wp--preset--color--card);
}

/* Lainausruudut (laulunopetus) */
body .tk-inner .tk-quote-tile {
	margin: 0;
	border-top: 1px solid #3B362E;
	padding-top: 20px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	color: #EFE6D9;
}

/* Videot */
body .tk-videos .wp-block-embed { margin: 0; }
body .tk-videos .wp-block-embed__wrapper { background: #2A251F; border-radius: 2px; overflow: hidden; }
body .tk-videos figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #CFC6B7; text-align: left; }

/* ==========================================================================
   Yhteydenotto
   ========================================================================== */

body .tk-contact .wp-block-columns.tk-split { gap: clamp(36px, 5vw, 76px); }
/* #yhteydenotto-linkki pysähtyy kiinteän ylävalikon alapuolelle. */
#yhteydenotto, #hinnat { scroll-margin-top: calc(74px + var(--wp-admin--admin-bar--height, 0px)); }
body .tk-contact h2 { font-size: clamp(27px, 3.8vw, 42px); line-height: 1.14; }
body .tk-contact-rows { margin-top: 30px; border-top: 1px solid #DCD3C3; }
body .tk-contact-rows > * { margin: 0; }
body .tk-contact-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 18px 0;
	border-bottom: 1px solid #DCD3C3;
	transition: padding-left 0.3s ease;
}
body .tk-contact-row:has(a):hover { padding-left: 10px; }
body .tk-contact-row > * { margin: 0; }
body .tk-contact-row .tk-fact__label { margin: 0; }
body .tk-inner .tk-contact-row__value { font-family: var(--wp--preset--font-family--serif); font-size: clamp(17px, 2.4vw, 22px); color: var(--wp--preset--color--ink); overflow-wrap: anywhere; }
body .tk-contact-row__value a { color: var(--wp--preset--color--ink); text-decoration: none; }
body .tk-contact-row__value a:hover { color: var(--wp--preset--color--bronze); }
/* Yhteys-sivun lomake keskellä sivua, otsikko keskitettynä. */
body .tk-form-wrap { max-width: 640px; margin-left: auto; margin-right: auto; }
body .tk-form-wrap > * + * { margin-top: 24px; }
body .tk-form-wrap > .wp-block-heading { text-align: center; max-width: none; }

/* Jetpack-lomake */
body .tk-form { display: flex; flex-wrap: wrap; gap: 18px; }
body .tk-form :is(label, .grunion-field-label, .jetpack-field-label) {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
body .tk-form :is(input[type="text"], input[type="email"], input[type="date"], input[type="tel"], select, textarea) {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	background: var(--wp--preset--color--paper);
	border: 1px solid #DCD3C3;
	border-radius: 2px;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
}
/* Jetpack värittää pudotusvalikon valkoiseksi omalla tyylillään. */
body .tk-form select { background-color: var(--wp--preset--color--paper) !important; }
body .tk-form textarea { padding: 14px 16px; min-height: 150px; line-height: 1.6; resize: vertical; }
body .tk-form :is(input, select, textarea):focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
body .tk-form :is(button, .wp-block-button__link) {
	min-height: 56px;
	padding: 0 32px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 2px;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
body .tk-form :is(button, .wp-block-button__link):hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--bronze); color: #fff; }

/* Yhteys-sivun kortit */
body .tk-contact-cards { display: flex; flex-direction: column; gap: 14px; }
body .tk-contact-cards > * { margin: 0; }
body .tk-contact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 22px 56px 22px 26px;
	border: 1px solid #4A443A;
	border-radius: 2px;
	background: rgba(247, 244, 238, 0.03);
	color: var(--wp--preset--color--cream);
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body .tk-contact-card::after { content: "→"; position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; }
body .tk-contact-card:hover { background: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
body .tk-contact-card > * { margin: 0; }
body .tk-hero .tk-inner .tk-contact-card p { color: inherit; }
body .tk-contact-card__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
body .tk-contact-card__value { font-family: var(--wp--preset--font-family--serif); font-size: clamp(19px, 2.6vw, 27px); line-height: 1.15; overflow-wrap: anywhere; }
body .tk-contact-card__value a { color: inherit; text-decoration: none; }
body .tk-contact-card__value a::after { content: ""; position: absolute; inset: 0; }
body .tk-hero--contact .wp-block-columns { gap: clamp(36px, 5vw, 72px); margin: 0; }

/* ==========================================================================
   Alatunniste
   ========================================================================== */

body .tk-footer {
	background: var(--wp--preset--color--night);
	color: #CFC6B7;
	padding-top: clamp(48px, 6vw, 76px);
	padding-bottom: 36px;
}
body .tk-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); }
body .tk-footer__grid > * { margin: 0; }
body .tk-footer__grid > * > * { margin: 0; }
body .tk-footer .tk-footer__name { font-family: var(--wp--preset--font-family--serif); font-size: 24px; color: var(--wp--preset--color--cream); margin-bottom: 8px; }
body .tk-footer .tk-footer__text { font-size: 14px; line-height: 1.7; }
body .tk-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
body .tk-footer__links li { margin: 0; }
body .tk-footer__links a { color: #CFC6B7; text-decoration: none; font-size: 14px; letter-spacing: 0.08em; overflow-wrap: anywhere; }
body .tk-footer__links a:hover { color: #fff; }
body .tk-footer .tk-footer__copy {
	margin-top: clamp(36px, 5vw, 56px);
	padding-top: 22px;
	border-top: 1px solid #322D26;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #8A8275;
}

/* ==========================================================================
   Näkyviin liukuvat osiot (theme.js lisää luokat; ilman JS:ää kaikki näkyy heti)
   ========================================================================== */

.tk-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.tk-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body .tk-hero > .wp-block-cover__inner-container > .tk-inner { animation: none; }
	.tk-reveal { opacity: 1; transform: none; transition: none; }
	body .tk-card, body .tk-photo img { transition: none; }
	body .tk-card:hover { transform: none; }
}