/* ══════════════════════════════════════════════════════════════
   ZADANIAKI — HOME PAGE SECTIONS
   Built to DESIGN.md: "The Organized Playroom".
   Cool canvas, alternating Blue Mist bands, flat by default,
   red reserved for purchase, delight colours under 10%.

   Fonts cascade from the theme (Bricolage Grotesque / Source
   Sans 3) — this file never declares a family.

   TYPE UNITS: the kidz theme sizes its root element at 10px (the
   62.5% technique), so the rem values in DESIGN.md — authored
   against a 16px root — would render 37.5% too small and would
   silently break the 16px body-copy floor. The ramp is therefore
   expressed here in px, converted 1:1 from the documented rem
   steps: body 1rem = 16px, label 0.8125rem = 13px, title
   clamp(1.1875rem,2vw,1.5rem) = clamp(19px,2vw,24px), headline
   clamp(1.5rem,2.8vw,2.125rem) = clamp(24px,2.8vw,34px).
   Do not "fix" these back to rem.
   ══════════════════════════════════════════════════════════════ */
body.kt-asset-home-sections {
	/* palette — DESIGN.md section 2, no additions */
	--ink: #2d3d54;        /* School Ink Blue   */
	--body: #404e65;       /* Body Slate        */
	--muted: #6f7f92;      /* Muted Slate       */
	--sky: #56b0f2;        /* Clear Sky Blue    */
	--red: #fa2519;        /* Action Red        */
	--white: #fdfefe;      /* Cool White        */
	--mist: #f4f9fd;       /* Blue Mist         */
	--line: #d9e7f2;       /* Soft Blue Divider */

	/* delight — tiny age accents only, together under 10% */
	--orange: #f39c4a;
	--green: #27ae60;
	--purple: #8f56d9;

	/* type ramp — DESIGN.md section 3, converted to px (see header) */
	--t-headline: clamp(24px, 2.8vw, 34px);
	--t-title: clamp(19px, 2vw, 24px);
	--t-body: 16px;
	--t-label: 13px;
	--lh-body: 1.65;

	/* rounded scale */
	--r-control: 10px;
	--r-surface: 18px;
	--r-pill: 999px;

	/* spacing scale */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s6: 24px;
	--s8: 32px;
	--s12: 48px;
	--s16: 64px;
	--s-section: 76px;

	/* elevation vocabulary */
	--lift-image: 0 6px 14px rgba(45, 61, 84, .08);
	--lift-hover: 0 8px 22px rgba(45, 61, 84, .11);

	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

.kth,
.kth * {
	box-sizing: border-box;
}

.kth {
	color: var(--body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

.kth img {
	max-width: 100%;
	display: block;
}

.kth a {
	color: inherit;
}

/* the theme runs content through wpautop; strip the empties it leaves */
.kth p:empty {
	display: none;
}

.kth-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding-left: var(--s6);
	padding-right: var(--s6);
}

/* ── type ramp ──────────────────────────────────────────────── */
.kth-h2 {
	font-size: var(--t-headline);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.12;
	color: var(--ink);
	margin: 0;
}

/* body copy never drops below 16px — The Read It Once Rule */
.kth-lead {
	font-size: var(--t-body);
	line-height: var(--lh-body);
	max-width: 65ch;
}

/* ── section bands ──────────────────────────────────────────── */
.kth-band {
	padding: var(--s12) 0;
}

@media (min-width: 760px) {
	.kth-band {
		padding: var(--s-section) 0;
	}
}

.kth-band--mist {
	background: var(--mist);
}

/* ══ AGE TILES ═══════════════════════════════════════════════
   Five discrete products, so a card per product is permitted
   (The No Container Card Rule). This row is the only action in
   its viewport — The One Decision Rule.
   ═════════════════════════════════════════════════════════════ */
.kth-ages-head {
	max-width: 65ch;
	margin: 0 0 var(--s8);
}

.kth-ages-head .kth-lead {
	margin: var(--s3) 0 0;
}

.kth-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s3);
}

@media (min-width: 760px) {
	.kth-tiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--s4);
	}
}

.kth-tile {
	--ac: var(--ink);
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--r-surface);
	background: var(--white);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.kth-tile:hover,
.kth-tile:focus-visible {
	border-color: var(--ac);
	box-shadow: var(--lift-hover);
	text-decoration: none;
}

.kth-tile:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 2px;
}

.kth-tile-media {
	position: relative;
	background: var(--mist);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.kth-tile-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* the age chip is the one tiny tertiary accent per tile */
.kth-tile-badge {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	padding: var(--s1) var(--s3);
	border-radius: var(--r-pill);
	background: var(--ac);
	color: var(--white);
	line-height: 1.3;
}

.kth-tile-num {
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.kth-tile-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--s4);
}

.kth-tile-name {
	font-size: var(--t-body);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

/* hierarchy inside the tile comes from weight and colour, not from
   shrinking body copy below the 16px floor */
.kth-tile-what {
	font-size: var(--t-body);
	line-height: 1.5;
	color: var(--muted);
	margin-top: var(--s2);
	flex: 1;
}

.kth-tile-price {
	margin-top: var(--s4);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.kth-tile-price s {
	font-weight: 400;
	color: var(--muted);
	margin-right: var(--s2);
}

.kth-tile--3 { --ac: var(--sky); }
.kth-tile--4 { --ac: var(--orange); }
.kth-tile--5 { --ac: var(--green); }
.kth-tile--6 { --ac: var(--purple); }
.kth-tile--7 { --ac: var(--ink); }

/* ══ MECHANISM ═══════════════════════════════════════════════
   Three steps, no cards. Structure comes from the tonal band, a
   leading numeral, and 1px rules.
   ═════════════════════════════════════════════════════════════ */
.kth-how-head {
	max-width: 65ch;
	margin: 0 0 var(--s8);
}

.kth-how-head .kth-lead {
	margin: var(--s3) 0 0;
}

.kth-steps {
	display: grid;
	gap: var(--s6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
	.kth-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s8);
	}
}

.kth-step {
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}

.kth-step-n {
	display: block;
	font-size: var(--t-title);
	font-weight: 700;
	line-height: 1;
	color: var(--sky);
}

.kth-step h3 {
	font-size: var(--t-title);
	font-weight: 700;
	color: var(--ink);
	margin: var(--s3) 0 var(--s2);
	line-height: 1.25;
}

.kth-step p {
	margin: 0;
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

/* trust row */
.kth-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s8);
	margin: var(--s12) 0 0;
	padding-top: var(--s6);
	border-top: 1px solid var(--line);
}

.kth-trust span {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--muted);
}

.kth-trust i {
	width: 6px;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--sky);
	flex: none;
	font-style: normal;
}

/* ══ FOUNDER — asymmetric, left-aligned evidence ═════════════ */
.kth-founder-grid {
	display: grid;
	gap: var(--s8);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 860px) {
	.kth-founder-grid {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: var(--s12);
	}
}

/* the portrait source is tall; below the two-column breakpoint it
   would otherwise run the full content width */
.kth-founder-photo {
	max-width: 280px;
}

@media (min-width: 860px) {
	.kth-founder-photo {
		max-width: none;
	}
}

.kth-founder-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--r-surface);
	box-shadow: var(--lift-image);
}

.kth-founder-body .kth-h2 {
	margin: 0 0 var(--s4);
}

.kth-founder-body p {
	margin: 0 0 var(--s4);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	max-width: 65ch;
}

.kth-founder-sign {
	font-size: var(--t-label) !important;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--muted);
}

.kth-founder-anchor {
	display: inline-block;
	padding: var(--s3) var(--s4);
	border-radius: var(--r-control);
	background: var(--mist);
	border: 1px solid var(--line);
	font-size: var(--t-body);
	font-weight: 700;
	color: var(--ink);
}

/* ══ BUTTONS — DESIGN.md section 5 ═══════════════════════════ */
.kth-cta,
.kth-cta-2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px var(--s6);
	border-radius: var(--r-control);
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

/* purchase intent only — The Red Means Buy Rule */
.kth-cta {
	background: var(--red);
	color: var(--white) !important;
}

/* secondary: everything that is not a purchase action */
.kth-cta-2 {
	background: var(--sky);
	color: var(--white) !important;
	text-shadow: 0 1px 2px rgba(45, 61, 84, .28);
}

.kth-cta:hover,
.kth-cta:focus-visible,
.kth-cta-2:hover,
.kth-cta-2:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.kth-cta:focus-visible,
.kth-cta-2:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kth-cta,
	.kth-cta-2,
	.kth-tile {
		transition: none;
	}

	.kth-cta:hover,
	.kth-cta-2:hover {
		transform: none;
	}
}

/* ══ DIGITAL FALLBACK ════════════════════════════════════════ */
.kth-digital-head {
	max-width: 65ch;
	margin: 0 0 var(--s8);
}

/* the theme styles h1 from an ID scope (#home-text h1), so this
   needs the same weight to win */
body.kt-asset-home-sections #home-text .kth-digital-head h1 {
	font-size: var(--t-headline);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.12;
	color: var(--ink);
	margin: 0 0 var(--s3);
}

.kth-digital-head p {
	margin: 0;
	font-size: var(--t-body);
	line-height: var(--lh-body);
}

.kth-pdfs {
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
	.kth-pdfs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kth-pdf {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	padding: var(--s4);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-control);
	text-decoration: none;
	transition: border-color 180ms var(--ease-out);
	min-height: 44px;
}

.kth-pdf:hover,
.kth-pdf:focus-visible {
	border-color: var(--sky);
	text-decoration: none;
}

.kth-pdf:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 2px;
}

.kth-pdf b {
	font-size: var(--t-body);
	line-height: 1.3;
	color: var(--ink);
}

.kth-pdf span {
	font-size: var(--t-label);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ══ THEME OVERRIDES ═════════════════════════════════════════ */
/* the html/text sections render without .container so the tonal
   bands can run full width */
body.kt-asset-home-sections #home-html,
body.kt-asset-home-sections #home-text {
	margin: 0;
	padding: 0;
}

body.kt-asset-home-sections #home-text .container,
body.kt-asset-home-sections #home-text .row,
body.kt-asset-home-sections #home-text [class^="col-"] {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.kt-asset-home-sections #home-text .entry-content {
	margin: 0;
}