/*
 Theme Name:   Letena Divi Child
 Theme URI:    https://letenaethiopia.com
 Description:  Letena Ethiopia child theme for Divi 5. Registers CPTs, ACF
               field groups, and design tokens (global colors, typography,
               pill + card components) used by the Divi 5 Theme Builder.
 Author:       Letena / Allure Communications
 Template:     Divi
 Version:      1.0.0
 Text Domain:  letena
*/

/* ---------------------------------------------------------
   1. Design tokens (also seeded as Divi 5 Global Colors)
--------------------------------------------------------- */
:root {
	--marigold:    #ebab20;
	--marigold-lt: #fdf3d0;
	--marigold-dk: #c8920a;

	--teal:    #477287;
	--teal-lt: #deeaf0;
	--teal-dk: #305866;

	--coral:    #cd6962;
	--coral-lt: #faeeed;

	--navy: #16103f;

	--purple:    #5d489c;
	--purple-lt: #ede9f8;

	--cream:    #fdf8ef;
	--warm-50:  #faf4e3;
	--warm-100: #f4ead0;
	--warm-200: #e8d9b0;

	--ink:       #1e1208;
	--ink-mid:   #4a3820;
	--ink-soft:  #8a7455;
	--ink-muted: #b8a882;

	--r:      18px;
	--r-sm:   10px;
	--r-pill: 999px;

	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------
   2. Typography
--------------------------------------------------------- */
:lang(am),
.lang-am,
[data-am] {
	font-family: "Noto Sans Ethiopic", sans-serif;
}
html[lang="am"] body {
	font-family: "Noto Sans Ethiopic", sans-serif;
}

/* ---------------------------------------------------------
   3. Kickers (small uppercase taglines above headings)
--------------------------------------------------------- */
.kicker {
	font: 800 10.5px/1.4 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--coral);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.kicker::before {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.kicker-teal { color: var(--teal); }
.kicker-gold { color: var(--marigold-dk); }
.kicker-purp { color: var(--purple); }

/* ---------------------------------------------------------
   4. Header scroll state (set by JS toggling body.scrolled)
--------------------------------------------------------- */
body.scrolled #et-boc .et-l--header {
	border-bottom: 1px solid var(--warm-200);
	box-shadow: 0 2px 24px rgba(30, 18, 8, .06);
}

/* ---------------------------------------------------------
   5. Topic + Format + Region filter pills
--------------------------------------------------------- */
.tp,
.ft,
.rp {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1.5px solid var(--warm-200);
	border-radius: var(--r-pill);
	font: 700 12.5px/1 "Plus Jakarta Sans", sans-serif;
	color: var(--ink-mid);
	background: #fff;
	margin: 0 6px 8px 0;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tp:hover,
.ft:hover,
.rp:hover {
	border-color: var(--teal);
	color: var(--teal-dk);
}
.tp.active,
.rp.active {
	background: var(--teal);
	color: #fff;
	border-color: var(--teal);
}
.ft.active {
	border-bottom: 2px solid var(--teal);
	background: var(--teal-lt);
	color: var(--teal-dk);
}

/* ---------------------------------------------------------
   6. Format tag (top-left of card image)
--------------------------------------------------------- */
.fmt-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font: 800 9.5px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
}
.fmt-video     { background: var(--navy); }
.fmt-blog      { background: var(--teal); }
.fmt-factsheet { background: var(--marigold); color: var(--ink); }
.fmt-faq       { background: var(--purple); }
.fmt-podcast   { background: var(--coral); }
.fmt-research  { background: var(--ink); }

/* ---------------------------------------------------------
   7. Letena card surface (reusable container)
--------------------------------------------------------- */
.letena-card {
	background: #fff;
	border: 1.5px solid var(--warm-200);
	border-radius: var(--r);
	overflow: hidden;
	transition: transform .3s var(--spring), box-shadow .3s ease;
}
.letena-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(30, 18, 8, .08);
}

/* Q&A variant: text-only, marigold left border */
.letena-card.is-faq {
	border-left: 3px solid var(--marigold);
	padding: 20px;
}

/* ---------------------------------------------------------
   8. Pill buttons (gold, teal, outline) – usable in Divi
   modules by adding the class via "CSS Class" field
--------------------------------------------------------- */
.btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--r-pill);
	font: 700 14px/1 "Plus Jakarta Sans", sans-serif;
	text-decoration: none;
	transition: transform .2s var(--spring), box-shadow .2s ease, background .2s ease;
}
.btn-pill:hover  { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30, 18, 8, .12); }
.btn-gold        { background: var(--marigold);    color: var(--ink); }
.btn-gold:hover  { background: var(--marigold-dk); color: #fff; }
.btn-teal        { background: var(--teal);        color: #fff; }
.btn-teal:hover  { background: var(--teal-dk); }
.btn-outline {
	background: transparent;
	color: var(--ink-mid);
	border: 1.5px solid var(--warm-200);
}
.btn-outline:hover {
	border-color: var(--teal);
	color: var(--teal-dk);
}

/* ---------------------------------------------------------
   9. Status badge (SRH Club card)
--------------------------------------------------------- */
.status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font: 800 9.5px/1.6 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.status-active  { background: var(--teal-lt);    color: var(--teal-dk); }
.status-forming { background: var(--marigold-lt);color: var(--marigold-dk); }
.status-paused  { background: #efe9dd;           color: var(--ink-soft); }

/* ---------------------------------------------------------
   10. Page-level layout primitives (used by every template)
--------------------------------------------------------- */
.lt-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.lt-section {
	padding: 80px 0;
}
.lt-hero {
	padding-top: 120px;
}
.lt-hero-sm {
	padding-top: 80px;
	padding-bottom: 48px;
}
.lt-h1 {
	font: 700 clamp(36px, 6vw, 64px)/1.05 "Cormorant Garamond", serif;
	color: var(--ink);
	letter-spacing: -1px;
	margin: 0 0 18px;
}
.lt-h2 {
	font: 700 clamp(26px, 3.4vw, 40px)/1.15 "Cormorant Garamond", serif;
	color: var(--ink);
	letter-spacing: -0.5px;
	margin: 0 0 8px;
}
.lt-sub {
	font: 400 16px/1.65 "Plus Jakarta Sans", sans-serif;
	color: var(--ink-mid);
	margin: 0;
}
.lt-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px;
}
.lt-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.lt-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
@media (max-width: 980px) {
	.lt-grid-2,
	.lt-grid-3,
	.lt-grid-4 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   11. Home hero specifics
--------------------------------------------------------- */
.lt-hero-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 48px;
	align-items: center;
}
@media (max-width: 980px) {
	.lt-hero-grid { grid-template-columns: 1fr; }
}
.lt-cta-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0;
	max-width: 360px;
}
.lt-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.lt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font: 600 12px/1 "Plus Jakarta Sans", sans-serif;
	color: var(--ink-mid);
	background: rgba(255, 255, 255, .55);
	border: 1px solid var(--warm-200);
}

/* Chat mockup */
.lt-chat-mock {
	background: #fff;
	border: 1.5px solid var(--warm-200);
	border-radius: 24px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 16px 40px rgba(30, 18, 8, .06);
}
.lt-chat-doc {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 4px 12px;
	border-bottom: 1px solid var(--warm-100);
	font: 700 12px/1 "Plus Jakarta Sans", sans-serif;
	color: var(--ink-soft);
}
.lt-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #25d366;
	display: inline-block;
}
.lt-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
}
.lt-bubble-in {
	align-self: flex-start;
	background: var(--warm-50);
	color: var(--ink-mid);
}
.lt-bubble-out {
	align-self: flex-end;
	background: var(--teal-lt);
	color: var(--teal-dk);
}

/* ---------------------------------------------------------
   12. Sticky filter bar (Library)
--------------------------------------------------------- */
.lt-sticky-filter {
	position: sticky;
	top: 68px;
	z-index: 100;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	padding: 16px 0;
	border-bottom: 1px solid var(--warm-200);
}
.lt-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* ---------------------------------------------------------
   13. Sticky CTA (Single Library Resource)
--------------------------------------------------------- */
.lt-sticky-cta {
	position: sticky;
	bottom: 20px;
	z-index: 90;
	max-width: 600px;
	margin: 32px auto 0;
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-pill);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font: 600 14px/1 "Plus Jakarta Sans", sans-serif;
	box-shadow: 0 16px 40px rgba(30, 18, 8, .25);
}

/* ---------------------------------------------------------
   14. Footer brand mark hint (used in the global footer)
--------------------------------------------------------- */
.brand-letena {
	font: 700 28px/1 "Cormorant Garamond", serif;
	color: var(--marigold);
	letter-spacing: -0.3px;
}
.brand-ethiopia {
	font: 700 9px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}