/* =========================================================================
   Teklye Grade Theme — per-grade design tokens.
   One selector block per grade; tokens consumed by the base styles below.
   Deployed identically to all 12 sites; only the matching block activates.
   ========================================================================= */

body.grade-1 {
	--teklye-bg: #FFFDF0;
	--teklye-heading: #E63946;
	--teklye-body: #1D3557;
	--teklye-link: #457B9D;
	--teklye-accent: #FFB703;
	--teklye-heading-font: 'Fredoka', system-ui, sans-serif;
	--teklye-body-font: 'Nunito', system-ui, sans-serif;
}
body.grade-2 {
	--teklye-bg: #F1FAEE;
	--teklye-heading: #2A9D8F;
	--teklye-body: #264653;
	--teklye-link: #E76F51;
	--teklye-accent: #F4A261;
	--teklye-heading-font: 'Nunito', system-ui, sans-serif;
	--teklye-body-font: 'Nunito', system-ui, sans-serif;
}
body.grade-3 {
	--teklye-bg: #E0F2FE;
	--teklye-heading: #0369A1;
	--teklye-body: #0F172A;
	--teklye-link: #D97706;
	--teklye-accent: #06B6D4;
	--teklye-heading-font: 'Comfortaa', system-ui, sans-serif;
	--teklye-body-font: 'Comfortaa', system-ui, sans-serif;
}
body.grade-4 {
	--teklye-bg: linear-gradient(to bottom, #FFFBEB, #FEF3C7);
	--teklye-heading: #9A3412;
	--teklye-body: #431407;
	--teklye-link: #047857;
	--teklye-accent: #F59E0B;
	--teklye-heading-font: 'Andika', system-ui, sans-serif;
	--teklye-body-font: 'Andika', system-ui, sans-serif;
}
body.grade-5 {
	--teklye-bg: #FAF5FF;
	--teklye-heading: #6B21A8;
	--teklye-body: #1E1B4B;
	--teklye-link: #2563EB;
	--teklye-accent: #EC4899;
	--teklye-heading-font: 'Baloo 2', system-ui, sans-serif;
	--teklye-body-font: 'Baloo 2', system-ui, sans-serif;
}
body.grade-6 {
	--teklye-bg: #F0F9FF;
	--teklye-heading: #1E3A8A;
	--teklye-body: #111827;
	--teklye-link: #0EA5E9;
	--teklye-accent: #F97316;
	--teklye-heading-font: 'Rubik', system-ui, sans-serif;
	--teklye-body-font: 'Rubik', system-ui, sans-serif;
}
body.grade-7 {
	--teklye-bg: #F4F7F6;
	--teklye-heading: #365314;
	--teklye-body: #1C1917;
	--teklye-link: #B45309;
	--teklye-accent: #65A30D;
	--teklye-heading-font: 'Cabin', system-ui, sans-serif;
	--teklye-body-font: 'Cabin', system-ui, sans-serif;
}
body.grade-8 {
	--teklye-bg: linear-gradient(to bottom, #FFF7ED, #FFEDD5);
	--teklye-heading: #991B1B;
	--teklye-body: #1F2937;
	--teklye-link: #06B6D4;
	--teklye-accent: #EA580C;
	--teklye-heading-font: 'Montserrat', system-ui, sans-serif;
	--teklye-body-font: 'Montserrat', system-ui, sans-serif;
}
body.grade-9 {
	--teklye-bg: #FAFAF9;
	--teklye-heading: #701A75;
	--teklye-body: #292524;
	--teklye-link: #0284C7;
	--teklye-accent: #A21CAF;
	--teklye-heading-font: 'Plus Jakarta Sans', system-ui, sans-serif;
	--teklye-body-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
body.grade-10 {
	--teklye-bg: #F8FAFC;
	--teklye-heading: #0F172A;
	--teklye-body: #334155;
	--teklye-link: #4F46E5;
	--teklye-accent: #06B6D4;
	--teklye-heading-font: 'Inter', system-ui, sans-serif;
	--teklye-body-font: 'Inter', system-ui, sans-serif;
}
body.grade-11 {
	--teklye-bg: #FEFCE8;
	--teklye-heading: #78350F;
	--teklye-body: #1C1917;
	--teklye-link: #15803D;
	--teklye-accent: #CA8A04;
	--teklye-heading-font: 'Lora', Georgia, serif;
	--teklye-body-font: 'Open Sans', system-ui, sans-serif;
}
body.grade-12 {
	--teklye-bg: radial-gradient(circle, #FFFFFF, #F8FAF6);
	--teklye-heading: #1E293B;
	--teklye-body: #0F172A;
	--teklye-link: #BE123C;
	--teklye-accent: #854D0E;
	--teklye-heading-font: 'Merriweather', Georgia, serif;
	--teklye-body-font: 'Lato', system-ui, sans-serif;
}

/* Neutral fallback when grade detection fails (dev/misconfigured install). */
body.grade-none {
	--teklye-bg: #FFFFFF;
	--teklye-heading: #222222;
	--teklye-body: #333333;
	--teklye-link: #1155CC;
	--teklye-accent: #888888;
	--teklye-heading-font: system-ui, sans-serif;
	--teklye-body-font: system-ui, sans-serif;
}

/* =========================================================================
   Base styles — consume the tokens above.
   ========================================================================= */

body {
	background: var(--teklye-bg, #fff);
	background-attachment: fixed;
	color: var(--teklye-body, #333);
	font-family: var(--teklye-body-font, system-ui, sans-serif);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--teklye-heading-font, system-ui, sans-serif);
	color: var(--teklye-heading, #222);
}

a {
	color: var(--teklye-link, #1155CC);
}

/* Gradient grades (4, 8, 12): give content a translucent-white treatment so
   body text stays legible against the gradient stops. */
body.grade-4 .wp-block-post-content,
body.grade-8 .wp-block-post-content,
body.grade-12 .wp-block-post-content,
body.grade-4 .teklye-memory-verse,
body.grade-8 .teklye-memory-verse,
body.grade-12 .teklye-memory-verse,
body.grade-4 .teklye-lesson-media section,
body.grade-8 .teklye-lesson-media section,
body.grade-12 .teklye-lesson-media section {
	background-color: rgba(255, 255, 255, 0.72);
	border-radius: 14px;
	padding: clamp(1rem, 3vw, 2rem);
}

/* =========================================================================
   Plugin components (teklye- classes emitted by teklye-course-media).
   ========================================================================= */

.teklye-memory-verse {
	border-left: 6px solid var(--teklye-accent, #888);
	background: color-mix(in srgb, var(--teklye-accent, #888) 12%, transparent);
	padding: 1rem 1.25rem;
	border-radius: 12px;
	margin: 0 0 1.75rem;
}
.teklye-memory-verse__label {
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}
.teklye-memory-verse__text {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0;
	border: 0;
	padding: 0;
}
.teklye-memory-verse__scripture {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	opacity: 0.85;
}

.teklye-lesson-media > section {
	margin: 2rem 0;
}
.teklye-media-label {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
	border-bottom: 3px solid var(--teklye-accent, #888);
	padding-bottom: 0.35rem;
}

.teklye-infographics__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}
.teklye-infographic img,
.teklye-mindmap__img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.teklye-infographic figcaption {
	font-size: 0.85rem;
	opacity: 0.8;
	margin-top: 0.4rem;
}
.teklye-audio audio,
.teklye-video video {
	width: 100%;
}

/* Site header bar (curated, replaces the auto page list). */
.teklye-topbar {
	background: rgba(255, 255, 255, 0.72);
	border-bottom: 1px solid color-mix(in srgb, var(--teklye-body, #333) 10%, transparent);
	padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
	gap: 1rem;
}
.teklye-topbar__brand a,
.teklye-topbar .wp-block-site-title a {
	font-family: var(--teklye-heading-font);
	color: var(--teklye-heading);
	text-decoration: none;
	font-size: 1.05rem;
	line-height: 1.2;
}
.teklye-topbar__nav {
	display: flex;
	gap: clamp(0.9rem, 2.5vw, 1.6rem);
	flex-wrap: wrap;
	align-items: center;
}
.teklye-topbar__nav a {
	font-family: var(--teklye-heading-font);
	font-weight: 600;
	color: var(--teklye-body);
	text-decoration: none;
	font-size: 0.98rem;
}
.teklye-topbar__nav a:hover { color: var(--teklye-link); }

/* Story body text — larger, kid-friendly reading size inside Tutor lessons.
   Overrides Tutor's small .tutor-fs-6 wrapper. body prefix wins specificity. */
body .tutor-lesson-wrapper,
body .tutor-lesson-wrapper p,
body .tutor-lesson-wrapper li {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	line-height: 1.9;
	color: var(--teklye-body, #333);
}
body .tutor-lesson-wrapper h3,
body .tutor-lesson-wrapper .wp-block-heading {
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
	margin-top: 1.6rem;
}