@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
/*
 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);
}

/* ---------------------------------------------------------
   15. Nav bar (Theme Builder header, Code module)
--------------------------------------------------------- */
.site-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 56px;
	background: rgba(253, 248, 239, .96);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
body.scrolled .site-nav {
	border-color: var(--warm-200);
	box-shadow: 0 2px 24px rgba(30, 18, 8, .06);
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-brand-svg { width: 44px; height: 44px; flex: none; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav-brand-letena {
	font: 700 22px/1 "Cormorant Garamond", serif;
	color: var(--teal);
	letter-spacing: -.3px;
}
.nav-brand-ethiopia {
	font: 700 9px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.nav-links { display: flex; gap: 2px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.nav-links li { list-style: none !important; }
.lh-hero { padding-top: 42px !important; }
.nav-links a {
	font: 600 13.5px/1 "Plus Jakarta Sans", sans-serif;
	color: var(--ink-mid);
	padding: 8px 14px;
	border-radius: var(--r-pill);
	transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--warm-100); color: var(--teal); }
.nav-links a.active { background: var(--teal-lt); color: var(--teal-dk); font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid var(--warm-200);
	border-radius: var(--r-pill);
	overflow: hidden;
	cursor: pointer;
	font: 800 12px/1 "Plus Jakarta Sans", sans-serif;
	user-select: none;
}
.lang-toggle span {
	padding: 7px 13px;
	background: transparent;
	color: var(--ink-soft);
	transition: background .2s, color .2s;
}
.lang-toggle #lt-am { font-family: "Noto Sans Ethiopic", sans-serif; }
.lang-toggle #lt-en.is-active,
.lang-toggle #lt-am.is-active { background: var(--teal); color: #fff; }
.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--marigold);
	color: var(--navy);
	font: 700 13px/1 "Noto Sans Ethiopic", sans-serif;
	padding: 10px 20px;
	border-radius: var(--r-pill);
	box-shadow: 0 3px 14px rgba(235, 171, 32, .4);
	transition: transform .2s var(--spring), box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(235, 171, 32, .5); }
.nav-cta-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--navy);
	opacity: .6;
	animation: navCtaPulse 2s ease-in-out infinite;
}
@keyframes navCtaPulse {
	0%, 100% { transform: scale(1); opacity: .6; }
	50%      { transform: scale(.5); opacity: .2; }
}
@media (max-width: 1100px) {
	.site-nav { padding: 0 32px; }
}
@media (max-width: 780px) {
	.site-nav { padding: 0 20px; }
	.nav-links { display: none; }
}

/* ---------------------------------------------------------
   16. Footer (Theme Builder footer, Code module)
--------------------------------------------------------- */
.site-footer { background: var(--navy); padding: 64px 56px 32px; }
.ft-inner { max-width: 1200px; margin: 0 auto; }
.ft-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ft-tagline {
	font: italic 400 15px/1.5 "Cormorant Garamond", serif;
	color: rgba(255, 255, 255, .35);
	max-width: 220px;
	margin: 4px 0 18px;
}
.ft-contact {
	font-size: 12.5px;
	color: rgba(255, 255, 255, .3);
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 5px;
}
.ft-contact a { color: inherit; }
.ft-socials { display: flex; gap: 7px; margin-top: 16px; }
.ft-soc {
	width: 32px; height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	display: flex; align-items: center; justify-content: center;
	font: 800 10px/1 "Plus Jakarta Sans", sans-serif;
	color: rgba(255, 255, 255, .3);
	transition: background .15s, color .15s;
}
.ft-soc:hover { background: rgba(235, 171, 32, .15); color: var(--marigold); }
.ft-col-h {
	font: 800 10px/1 "Plus Jakarta Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .4);
	margin-bottom: 14px;
}
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ft-links a { font-size: 13px; color: rgba(255, 255, 255, .28); transition: color .15s; }
.ft-links a:hover { color: rgba(235, 171, 32, .8); }
.ft-bottom {
	max-width: 1200px;
	margin: 24px auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .15);
	flex-wrap: wrap;
	gap: 8px;
}
.am-only { display: none; }
body.lang-am .am-only { display: inline; }
body.lang-am .en-only { display: none; }
@media (max-width: 1100px) {
	.ft-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 680px) {
	.ft-top { grid-template-columns: 1fr; padding-bottom: 32px; }
	.site-footer { padding: 48px 20px 24px; }
}


/* Full-bleed scrollbar-gap fix: width:100vw on .lh-hero/.lh-privacy is measured against the full viewport including the vertical scrollbar, while the page content area is narrower by the scrollbar width. That mismatch leaves a thin white sliver on one edge. Hiding horizontal overflow on the root elements clips it without affecting vertical scrolling. */
html, body {
  overflow-x: hidden;
}

/* Full-bleed fix: .lh-hero and .lh-privacy sit inside a Divi row capped at 1080px, leaving white gutters on wide viewports. Break them out to span the viewport while .lh-wrap keeps content centered. */
.lh-hero, .lh-privacy {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.lh-hero .lh-wrap, .lh-privacy .lh-wrap {
  margin-left: auto;
  margin-right: auto;
}


/* Logo container fix (finding 6/25): vertical lockup logo was cramped at 44px, making the wordmark illegible. Sized up while keeping 1:1 aspect; nav has overflow:visible so this does not clip. */
.nav-brand-logo {
  width: 60px !important;
  height: 60px !important;
}


/* Footer contrast fix (finding 7): links, contact info, and legal line were white at 0.15-0.3 opacity on navy (#16103f), all failing 4.5:1. The --on-navy-body/--on-navy-muted tokens referenced by the audit do not actually exist in this file, so the values are set directly here: 0.82 and 0.64 white opacity on this navy compute to roughly 10:1 and 7.7:1, both clearing 4.5:1 with margin. */
.ft-links a {
  color: rgba(255,255,255,0.82);
}
.ft-links a:hover {
  color: #fff;
}
.ft-contact {
  color: rgba(255,255,255,0.82);
}
.ft-bottom {
  color: rgba(255,255,255,0.64);
}