/* =========================================================================
   Teklye landing page (front-page.html).
   Uses the per-grade tokens from grades.css so every grade re-themes itself,
   wrapped in the Mahibere Teklehaimanot design language (sunburst, cross,
   tricolor, gold-for-holy).
   ========================================================================= */

.teklye-hero,
.teklye-how,
.teklye-stories,
.teklye-cta {
	--teklye-ink-soft: color-mix(in srgb, var(--teklye-body, #333) 72%, transparent);
}

/* ---------- HERO ---------- */
.teklye-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(circle at 50% 32%,
			#ffffff 0%,
			color-mix(in srgb, var(--teklye-accent, #f2b705) 22%, #fff) 42%,
			color-mix(in srgb, var(--teklye-accent, #f2b705) 42%, var(--teklye-bg, #fff)) 120%);
}
.teklye-hero__rays {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
	background: repeating-conic-gradient(from 0deg at 50% 32%,
		rgba(255, 255, 255, 0.60) 0deg 6deg, transparent 6deg 12deg);
	-webkit-mask: radial-gradient(circle at 50% 32%, #000 0%, transparent 58%);
	        mask: radial-gradient(circle at 50% 32%, #000 0%, transparent 58%);
}
.teklye-hero__inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}
.teklye-eyebrow,
.teklye-section-eyebrow {
	font-family: var(--teklye-heading-font);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--teklye-accent, #c98a00) 78%, #000);
	margin: 0 0 0.75rem;
}
/* Hero eyebrow carries the cross icon, so it lays out inline. */
.teklye-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.teklye-eyebrow svg { color: var(--teklye-accent, #f2b705); }
/* Section eyebrows (e.g. "Start exploring") are a centered block. */
.teklye-section-eyebrow {
	display: block;
	text-align: center;
}

.teklye-hero__am {
	font-family: 'Noto Serif Ethiopic', Georgia, serif;
	font-size: clamp(1.6rem, 5vw, 2.8rem);
	line-height: 1.1;
	color: var(--teklye-heading);
	margin: 0 0 0.15em;
}
.teklye-hero__title {
	font-family: var(--teklye-heading-font);
	font-size: clamp(1.9rem, 5.5vw, 3.2rem);
	line-height: 1.1;
	color: var(--teklye-heading);
	margin: 0.1em 0 0.35em;
}
.teklye-hero__title a { color: inherit; text-decoration: none; }
.teklye-hero__lead {
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
	color: var(--teklye-body);
	max-width: 34ch;
	margin: 0 auto 1.25rem;
}
.teklye-hero__lead strong { color: color-mix(in srgb, var(--teklye-heading) 85%, #000); }

.teklye-tricolor {
	height: 8px;
	width: 168px;
	margin: 0 auto 1.75rem;
	border-radius: 999px;
	background: linear-gradient(90deg,
		#15A33A 0 33.3%, #F2B705 33.3% 66.6%, #D62828 66.6% 100%);
}

/* ---------- BUTTONS (printed-shadow "stack") ---------- */
.teklye-btn .wp-block-button__link,
a.teklye-btn {
	font-family: var(--teklye-heading-font);
	font-weight: 600;
	border-radius: 999px;
	padding: 0.85rem 1.9rem;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	border: none;
}
.teklye-btn--lg .wp-block-button__link,
a.teklye-btn.teklye-btn--lg { font-size: 1.15rem; padding: 1rem 2.3rem; }

.teklye-btn--primary .wp-block-button__link,
a.teklye-btn--primary {
	background: var(--teklye-link);
	color: #fff;
	box-shadow: 0 5px 0 color-mix(in srgb, var(--teklye-link) 62%, #000);
}
.teklye-btn--gold .wp-block-button__link,
a.teklye-btn--gold {
	background: var(--teklye-accent);
	color: var(--teklye-body); /* gold takes dark ink, never white */
	box-shadow: 0 5px 0 color-mix(in srgb, var(--teklye-accent) 60%, #000);
}
.teklye-btn--ghost .wp-block-button__link,
a.teklye-btn--ghost {
	background: transparent;
	color: var(--teklye-link);
	box-shadow: inset 0 0 0 2.5px var(--teklye-link);
}
.teklye-btn .wp-block-button__link:hover,
a.teklye-btn:hover { transform: translateY(-2px); }
.teklye-btn .wp-block-button__link:focus-visible,
a.teklye-btn:focus-visible { outline: 3px solid var(--teklye-accent); outline-offset: 3px; }

/* ---------- HOW IT WORKS ---------- */
.teklye-how {
	padding: clamp(3rem, 6vw, 4.5rem) 1.25rem;
	text-align: center;
}
.teklye-how__wrap { max-width: 1000px; margin: 0 auto; }
.teklye-how__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.teklye-feature {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--teklye-body) 12%, transparent);
	border-radius: 20px;
	padding: 1.75rem 1.25rem;
	box-shadow: 0 6px 22px rgba(31, 36, 48, 0.08);
}
.teklye-feature__ic {
	display: inline-grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 18px;
	margin-bottom: 0.75rem;
	color: var(--teklye-link);
	background: color-mix(in srgb, var(--teklye-accent) 18%, transparent);
}
.teklye-feature__ic svg { width: 34px; height: 34px; }
.teklye-feature h3 {
	font-family: var(--teklye-heading-font);
	color: var(--teklye-heading);
	margin: 0 0 0.4rem;
	font-size: 1.55rem;
}
.teklye-feature p { margin: 0; color: var(--teklye-ink-soft); font-size: 1.15rem; line-height: 1.6; }

/* ---------- BIBLE STORIES ---------- */
.teklye-stories {
	padding: clamp(3rem, 6vw, 4.5rem) 1.25rem;
}
.teklye-stories__title {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	color: var(--teklye-heading);
	margin: 0.15rem 0 0.4rem;
}
.teklye-stories__lead {
	color: var(--teklye-ink-soft);
	max-width: 46ch;
	margin: 0 auto 2rem;
}
.teklye-stories .wp-block-buttons { margin-top: 2.25rem; }

/* Give Tutor's course grid room to breathe. */
.teklye-stories .tutor-courses { margin-top: 0.5rem; }

/* ---------- CLOSING CTA ---------- */
.teklye-cta {
	padding: clamp(2.5rem, 6vw, 4rem) 1.25rem clamp(3.5rem, 7vw, 5rem);
}
.teklye-cta__card {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(2rem, 5vw, 3rem);
	border-radius: 28px;
	background: color-mix(in srgb, var(--teklye-accent) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--teklye-accent) 45%, transparent);
}
.teklye-cta__cross { color: var(--teklye-heading); margin-bottom: 0.5rem; }
.teklye-cta__card h2 {
	font-family: var(--teklye-heading-font);
	color: var(--teklye-heading);
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	margin: 0 0 0.5rem;
}
.teklye-cta__card p {
	color: var(--teklye-body);
	max-width: 46ch;
	margin: 0 auto 1.5rem;
}

/* Gradient grades (4, 8, 12): keep hero/cards legible over the body gradient. */
body.grade-4 .teklye-feature,
body.grade-8 .teklye-feature,
body.grade-12 .teklye-feature,
body.grade-4 .teklye-cta__card,
body.grade-8 .teklye-cta__card,
body.grade-12 .teklye-cta__card { background: rgba(255, 255, 255, 0.85); }