﻿/* ============================================================================
   Talpha.css — the Talpha lesson world, sealed.

   ONE stylesheet for every Talpha lesson / Info / Test page. Replaces the old
   tutorial.css + Lesson.css pair (and the per-page inline <style> blocks).

   Everything is scoped under .lesson-card — the wrapper LessonScaffold puts on
   every lesson page — so it cannot leak OUT to the rest of the app, and bare
   global rules cannot leak IN. .lesson-card is to Talpha what .auth-root is to
   the auth pages.

   Font roles (the deliberate decision):
     --font-display  Fredoka  -> headings, buttons, callout labels
     --font-body     Nunito   -> reading copy (paragraphs, labels, callout body)
   Flip the whole world's fonts by changing those two lines.

   Note: the page background that tutorial.css used to set on <body> is gone on
   purpose (it was a global leak). The card itself is white; if a lesson page
   wants a tinted page background behind the card, set it at the page/layout
   level, not here.
   ============================================================================ */

.lesson-card {
	/* --- tokens, local to the Talpha world (not in :root, not shared) --- */
	--font-display: 'Fredoka', sans-serif;
	--font-body: 'Nunito', sans-serif;
	--lesson-radius: 12px;
	--lesson-body: #555;
	--lesson-heading: #1a1a1a;
	--glyph-color: #2255FF; /* electric-blue accent from the palette */
	/* base callout box (a plain .callout with no variant) */
	--callout-accent: #E05A2B;
	--callout-accent-bg: #FFF0E8;
	--callout-divider: rgba(224, 90, 43, 0.2);
	/* callout colour variants */
	--callout-tip-bg: #FFF4A3;
	--callout-tip-border: #FFD600;
	--callout-tip-label: #6B5800;
	--callout-tip-body: #5A4A00;
	--callout-success-bg: #B8F5B8;
	--callout-success-border: #44DD44;
	--callout-success-label: #006600;
	--callout-success-body: #1a6b1a;
	--callout-locked-bg: #FFE0EF;
	--callout-locked-border: #FF0066;
	--callout-locked-label: #CC0052;
	--callout-locked-body: #882244;
	/* --- the card surface (was .fredoka-page) --- */
	background: #ffffff;
	padding: 2rem;
	border-radius: var(--lesson-radius);
	font-family: var(--font-body);
	color: var(--lesson-body);
}

	/* ── Reading copy = Nunito ────────────────────────────────────────────────── */
	.lesson-card p,
	.lesson-card label {
		font-family: var(--font-body);
		font-size: 1.25rem;
		line-height: 1.6;
		font-weight: 400;
		color: var(--lesson-body);
		margin-bottom: 14px;
	}

	.lesson-card small,
	.lesson-card .callout-body {
		font-family: var(--font-body);
	}

	/* ── Display / chrome = Fredoka ───────────────────────────────────────────── */
	.lesson-card h1,
	.lesson-card h2,
	.lesson-card h3,
	.lesson-card h4,
	.lesson-card h5,
	.lesson-card .btn,
	.lesson-card .callout-label {
		font-family: var(--font-display);
	}

	/* Heading sizes — merged here from the old bare tutorial.css h1/h2/h3.
   (Fredoka loads up to weight 700, so heavier weights clamp to 700.) */
	.lesson-card h1 {
		font-size: 36px;
		font-weight: 700;
		line-height: 1.15;
		color: var(--lesson-heading);
		margin-bottom: 14px;
	}

	.lesson-card h2 {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.20;
		color: var(--lesson-heading);
		margin-top: 30px;
		margin-bottom: 10px;
	}

	.lesson-card h3 {
		font-size: 17px;
		font-weight: 700;
		line-height: 1.30;
		color: var(--lesson-heading);
		margin-top: 22px;
		margin-bottom: 8px;
	}

	.lesson-card strong,
	.lesson-card .btn-primary,
	.lesson-card .callout-label,
	.lesson-card .callout-body {
		font-weight: 500;
	}

	/* ── Callout base box (was .callout in tutorial.css) ──────────────────────── */
	.lesson-card .callout {
		font-size: 18px;
		line-height: 1.65;
		color: var(--lesson-heading);
		background: var(--callout-accent-bg);
		border-left: 3px solid var(--callout-accent);
		border-radius: 0 8px 8px 0;
		padding: 12px 16px;
		margin: 18px 0;
	}

	.lesson-card .callout-label {
		font-size: 20px;
		letter-spacing: 0.08em;
		margin-bottom: 4px;
	}

	/* ── Callout variants — layer on the base box above ───────────────────────── */
	.lesson-card .callout-tip {
		background: var(--callout-tip-bg);
		border-left-color: var(--callout-tip-border);
	}

		.lesson-card .callout-tip .callout-label {
			color: var(--callout-tip-label);
		}

		.lesson-card .callout-tip .callout-body {
			color: var(--callout-tip-body);
		}

	.lesson-card .callout-success {
		background: var(--callout-success-bg);
		border-left-color: var(--callout-success-border);
	}

		.lesson-card .callout-success .callout-label {
			color: var(--callout-success-label);
		}

		.lesson-card .callout-success .callout-body {
			color: var(--callout-success-body);
		}

	.lesson-card .callout-locked {
		background: var(--callout-locked-bg);
		border-left-color: var(--callout-locked-border);
	}

		.lesson-card .callout-locked .callout-label {
			color: var(--callout-locked-label);
		}

		.lesson-card .callout-locked .callout-body {
			color: var(--callout-locked-body);
		}

	/* ── Hero glyph (the big Thai character on Test pages) ────────────────────── */
	/* Real Thai script, so it uses a Thai display face — deliberately NOT Fredoka. */
	.lesson-card .hero-glyph {
		font-size: 9rem;
		line-height: 1;
		color: var(--glyph-color);
		font-family: 'Sarabun', 'Noto Sans Thai', sans-serif;
	}

	.lesson-card .hero-roman {
		letter-spacing: 0.1em;
		color: var(--lesson-body);
	}

	/* ── Divider + drop-cap (from tutorial.css, now scoped) ───────────────────── */
	.lesson-card hr {
		border: none;
		border-top: 1px solid var(--callout-divider);
		margin: 26px 0;
	}

@media (max-width: 600px) {
	.lesson-card .drop-cap p {
		text-align: left;
	}
}
