/*
Theme Name: MGM
Theme URI: https://mgmswahili.org
Author: Nyumbani Hosting
Description: Custom theme for Mundeke Gospel Mission — deep blue and warm orange, a quick-contact top bar, a full-cover photo hero with optional carousel, and dropdown navigation with an animated mobile menu. Built to pair with the MGM Suite plugin.
Version: 2.6.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mgm
*/

/* ---------- Tokens ---------- */
:root {
	--paper: #F7F9FB;
	--ink: #1A2530;
	--ink-soft: #5B6B7C;
	--blue: #14568F;
	--navy: #0A2C4E;
	--accent: #C2500F;
	--orange: #ED6A1F;
	--orange-deep: #8A4A08;
	--card: #FFFFFF;
	--line: #DDE5EE;
	--on-deep: #EAF2FA;
	--on-deep-soft: #A7BED4;
	--shadow: 0 2px 10px rgba(16, 32, 52, 0.07);
	--font-display: 'Bricolage Grotesque', 'Albert Sans', system-ui, sans-serif;
	--font-body: 'Albert Sans', system-ui, sans-serif;
}

@font-face {
	font-family: 'Albert Sans';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/albert.woff2') format('woff2');
}

@font-face {
	font-family: 'Albert Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/albert-it.woff2') format('woff2');
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/bricolage.woff2') format('woff2');
}

/* ---------- Base ---------- */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--blue);
}

:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 28px;
}

.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.eyebrow em {
	font-style: normal;
	color: var(--ink-soft);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: none;
}

.eyebrow::before {
	content: "";
	width: 24px;
	height: 3px;
	flex: none;
	border-radius: 2px;
	background: var(--orange);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15.5px;
	padding: 12px 26px;
	border-radius: 8px;
}

.btn-gold {
	background: var(--orange);
	color: #35180A;
	box-shadow: 0 3px 0 rgba(138, 74, 8, 0.35);
}

.btn-gold:hover {
	filter: brightness(1.05);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--ink);
}

/* ---------- Top contact bar ---------- */
.top-bar {
	background: var(--navy);
	color: var(--on-deep);
	font-size: 13px;
}

.top-bar-inner {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 8px 28px;
	flex-wrap: wrap;
}

.top-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--on-deep);
	text-decoration: none;
	opacity: 0.92;
}

.top-item svg {
	color: var(--orange);
	flex: none;
}

a.top-item:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.top-item-social {
	margin-left: auto;
}

/* ---------- Header ---------- */
.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 18px 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	color: var(--ink);
}

.brand-mark {
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 8px;
	background: var(--navy);
	color: var(--on-deep);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.02em;
	border-bottom: 4px solid var(--orange);
}

/* Custom logo: scaled to the header regardless of the uploaded size */
.brand img.brand-logo {
	height: 46px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	flex: none;
	display: block;
}

.brand-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	display: block;
}

.brand-sub {
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: block;
}

.main-nav {
	margin-left: auto;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 500;
}

.main-nav a {
	text-decoration: none;
	color: var(--ink);
	opacity: 0.85;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
	opacity: 1;
	color: var(--blue);
}

.main-nav > ul > li > a {
	display: inline-block;
	padding: 6px 2px;
	position: relative;
}

.main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	height: 2.5px;
	border-radius: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.main-nav > ul > li > a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Dropdown submenus */
.main-nav li.menu-item-has-children {
	position: relative;
}

.main-nav li.menu-item-has-children > a::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	margin-right: 8px;
	float: right;
	margin-top: 8px;
	margin-left: 8px;
	opacity: 0.55;
}

.main-nav ul.sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: -14px;
	min-width: 230px;
	display: block;
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--orange);
	border-radius: 10px;
	box-shadow: 0 18px 40px -14px rgba(10, 44, 78, 0.35);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}

.main-nav li:hover > ul.sub-menu,
.main-nav li:focus-within > ul.sub-menu,
.main-nav li.open > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav ul.sub-menu li {
	width: 100%;
}

.main-nav ul.sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	opacity: 1;
}

.main-nav ul.sub-menu a:hover {
	background: var(--paper);
	color: var(--blue);
}

.site-header .btn {
	padding: 10px 22px;
	flex: none;
}

.nav-toggle {
	display: none;
	background: none;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	padding: 11px 10px;
	cursor: pointer;
	color: var(--ink);
	transition: border-color 0.18s ease, background 0.18s ease;
}

.nav-toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
}

.nav-toggle-box i {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.22s ease, opacity 0.18s ease;
	transform-origin: center;
}

.nav-toggle[aria-expanded="true"] {
	border-color: var(--orange);
	background: rgba(237, 106, 31, 0.08);
	color: var(--orange-deep);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(1) {
	transform: translateY(5.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box i:nth-child(3) {
	transform: translateY(-5.75px) rotate(-45deg);
}

/* ---------- Hero (front page): full-cover photo, optional carousel ---------- */
.hero-cover {
	position: relative;
	min-height: clamp(520px, 72vh, 760px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--navy);
	color: var(--on-deep);
}

.hero-media,
.hero-slide {
	position: absolute;
	inset: 0;
}

img.hero-slide {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none;
}

.hero-slide {
	opacity: 0;
	transition: opacity 0.9s ease;
}

.hero-slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: none;
	}
}

.hero-cover::after {
	/* readability overlay */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 44, 78, 0.88) 0%, rgba(10, 44, 78, 0.62) 46%, rgba(10, 44, 78, 0.28) 100%);
	z-index: 1;
}

.hero-cover .wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 84px;
	padding-bottom: 96px;
}

.hero-content {
	max-width: 640px;
}

.hero-cover .eyebrow {
	color: #FFC79E;
}

.hero-cover .eyebrow em {
	color: var(--on-deep-soft);
}

.hero-cover h1 {
	font-size: clamp(40px, 5.4vw, 64px);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #FFFFFF;
	text-shadow: 0 2px 24px rgba(6, 24, 43, 0.45);
}

.hero-cover .lede {
	font-size: 19px;
	color: var(--on-deep);
	opacity: 0.94;
	margin: 24px 0 32px;
	max-width: 34em;
}

.hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.hero-cover .btn-ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.75);
}

.hero-cover .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

.hero-note {
	font-size: 13px;
	color: var(--on-deep-soft);
	margin-top: 18px;
}

/* Carousel controls */
.hero-nav {
	position: absolute;
	right: 28px;
	bottom: 30px;
	z-index: 3;
	display: flex;
	gap: 10px;
}

.hero-nav button {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	background: rgba(10, 44, 78, 0.45);
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.18s ease;
}

.hero-nav button:hover {
	background: var(--orange);
	border-color: var(--orange);
}

.hero-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 34px;
	z-index: 3;
	display: flex;
	gap: 9px;
}

.hero-dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: transform 0.18s ease, background 0.18s ease;
}

.hero-dots button.is-active {
	background: var(--orange);
	transform: scale(1.3);
}

/* ---------- Impact strip ---------- */
.impact {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 34px 0;
}

.impact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.impact b {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 34px;
	color: var(--blue);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.impact span {
	font-size: 14px;
	color: var(--ink-soft);
}

/* ---------- Sections ---------- */
.section {
	padding: 84px 0;
}

.sec-head {
	max-width: 640px;
	margin-bottom: 48px;
}

.sec-head h2 {
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.sec-head p {
	color: var(--ink-soft);
	margin-top: 14px;
	font-size: 17.5px;
}

/* ---------- Program cards ---------- */
.prog-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.prog {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}

.prog-chip {
	height: 4px;
	background: linear-gradient(90deg, var(--orange), var(--blue));
}

.prog-body {
	padding: 24px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.prog-sw {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.prog h3 {
	font-size: 20px;
	font-weight: 700;
}

.prog h3 a {
	color: inherit;
	text-decoration: none;
}

.prog p {
	font-size: 14.5px;
	color: var(--ink-soft);
	flex: 1;
	margin: 0;
}

.prog-more {
	font-size: 14px;
	font-weight: 700;
	color: var(--blue);
	text-decoration: none;
}

.prog-more:hover {
	text-decoration: underline;
}

/* ---------- Donate section ---------- */
.donate-section {
	background: var(--navy);
	color: var(--on-deep);
}

.donate-section .inner {
	padding: 84px 0;
}

.donate-section .eyebrow {
	color: var(--orange);
}

.donate-section .eyebrow em {
	color: var(--on-deep-soft);
}

.donate-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: start;
}

.donate-section h2 {
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 800;
	color: var(--on-deep);
}

.donate-section .lede {
	color: var(--on-deep-soft);
	margin: 20px 0 34px;
	font-size: 17.5px;
	max-width: 32em;
}

.donate-section .mgm-donate {
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.45);
	max-width: none;
}

/* ---------- Carousels (front page: events, galleries, news) ---------- */
.sec-head-row {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.sec-more {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--blue);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 6px;
}

.sec-more:hover {
	text-decoration: underline;
}

.mgm-carousel {
	position: relative;
}

.mgm-carousel-track,
.mgm-carousel .mgm-carousel-viewport .mgm-galleries,
.mgm-carousel .mgm-carousel-viewport .mgm-staff {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	-webkit-overflow-scrolling: touch;
}

/* the plugin renders .mgm-galleries / .mgm-staff as grids — inside a carousel they become tracks */
.mgm-carousel .mgm-carousel-viewport .mgm-galleries,
.mgm-carousel .mgm-carousel-viewport .mgm-staff {
	grid-template-columns: none;
}

.mgm-carousel-track > *,
.mgm-carousel .mgm-carousel-viewport .mgm-galleries-card {
	flex: 0 0 min(320px, 80vw);
	scroll-snap-align: start;
	margin: 0;
}

/* Team carousel: four members visible, the rest slide in */
.mgm-staff-carousel .mgm-staff .mgm-staff-card {
	flex: 0 0 calc((100% - 66px) / 4);
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 960px) {
	.mgm-staff-carousel .mgm-staff .mgm-staff-card {
		flex-basis: calc((100% - 44px) / 3);
	}
}

@media (max-width: 640px) {
	.mgm-staff-carousel .mgm-staff .mgm-staff-card {
		flex-basis: min(240px, 72vw);
	}
}

.mgm-carousel-track:focus-visible,
.mgm-carousel-viewport:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 2px;
	border-radius: 8px;
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: var(--card);
	color: var(--ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	padding: 0 0 3px;
}

.carousel-prev {
	left: -14px;
}

.carousel-next {
	right: -14px;
}

.carousel-btn:hover:not(:disabled) {
	background: var(--orange);
	border-color: var(--orange);
	color: #35180A;
}

.carousel-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.mgm-carousel.no-scroll .carousel-btn {
	display: none;
}

/* Event cards inside the carousel */
.event-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: var(--shadow);
	padding: 22px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.event-card .event-date {
	box-shadow: none;
	background: var(--paper);
}

.event-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.event-card h3 {
	font-size: 18px;
	font-weight: 700;
}

.event-card h3 a {
	color: inherit;
	text-decoration: none;
}

.event-card p {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* News cards inside the carousel keep their look, just sized for the track */
.mgm-carousel-track .news-card p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Events ---------- */
.event-row {
	display: flex;
	gap: 26px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}

.event-row:first-of-type {
	border-top: 1px solid var(--line);
}

.event-date {
	width: 74px;
	flex: none;
	text-align: center;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 0;
	font-family: var(--font-display);
	box-shadow: var(--shadow);
}

.event-date b {
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
}

.event-date span {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.event-row h3 {
	font-size: 19px;
	font-weight: 700;
}

.event-row h3 a {
	color: inherit;
	text-decoration: none;
}

.event-row p {
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 4px 0 0;
}

.event-row .btn {
	margin-left: auto;
	flex: none;
}

.event-meta {
	font-size: 14px;
	color: var(--ink-soft);
}

/* ---------- News cards ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.news-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}

.news-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.news-card-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.news-card time {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.news-card h3 {
	font-size: 19px;
	font-weight: 700;
}

.news-card h3 a {
	color: inherit;
	text-decoration: none;
}

.news-card p {
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 0;
	flex: 1;
}

/* ---------- Page / article content ---------- */
.page-header {
	padding: 64px 0 0;
}

.page-header h1 {
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Page hero: featured image as a full-width cover band */
.page-hero {
	position: relative;
	background-color: var(--navy);
	padding: 110px 0 64px;
	overflow: hidden;
}

img.page-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	max-width: none;
	z-index: 0;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(10, 44, 78, 0.86) 0%, rgba(10, 44, 78, 0.55) 55%, rgba(10, 44, 78, 0.25) 100%);
	z-index: 1;
}

.page-hero .wrap {
	position: relative;
	z-index: 2;
}

.page-hero .eyebrow {
	color: #FFC79E;
}

.page-hero h1 {
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	text-shadow: 0 2px 22px rgba(6, 24, 43, 0.45);
}

/* Richer long-form content (About us, Our Team, …) — fills the full container */
.entry-content.entry-content-rich {
	max-width: none;
}

.entry-content-rich h2 {
	padding-top: 14px;
	position: relative;
}

.entry-content-rich h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 4px;
	border-radius: 2px;
	background: var(--orange);
}

.entry-content-rich h3 {
	color: var(--blue);
}

.entry-content-rich blockquote {
	background: var(--navy);
	color: var(--on-deep);
	font-style: normal;
	border-left: 4px solid var(--orange);
	border-radius: 12px;
	padding: 22px 26px;
	margin: 1.8em 0;
}

.entry-content-rich blockquote p {
	margin: 0;
}

.entry-content-rich blockquote strong {
	color: #FFC79E;
}

.entry-content-rich ul li,
.entry-content-rich ol li {
	margin-bottom: 8px;
}

.entry-content-rich ul li::marker {
	color: var(--orange);
}

.entry-content-rich ol li::marker {
	color: var(--blue);
	font-weight: 700;
}

.entry-content-rich figure {
	margin: 2em 0;
}

.entry-content-rich figure img,
.entry-content-rich img {
	border-radius: 14px;
	box-shadow: 0 16px 36px -18px rgba(10, 44, 78, 0.4);
}

.entry-content-rich .lead,
.entry-content-rich p.lead strong {
	font-size: 19px;
	color: var(--ink);
}

.team-cta .inner {
	text-align: center;
}

.team-cta .lede {
	max-width: 38em;
	margin-left: auto;
	margin-right: auto;
}

.team-cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

.team-cta .btn-ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.75);
}

.team-cta .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---------- Darasa (Swahili classes) ---------- */
.darasa-facts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.darasa-fact {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 4px solid var(--orange);
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow: var(--shadow);
}

.darasa-fact-num {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 40px;
	color: var(--blue);
	line-height: 1;
	margin-bottom: 14px;
}

.darasa-fact h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.darasa-fact p {
	color: var(--ink-soft);
	margin: 0;
}

.darasa-cta .inner {
	text-align: center;
}

.darasa-cta .lede {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

.darasa-cta-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

.darasa-cta .btn-ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.75);
}

.darasa-cta .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

.darasa-promoted {
	margin-top: 26px;
	font-size: 13px;
	color: var(--on-deep-soft);
}

.darasa-register-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 54px;
	align-items: start;
}

.darasa-register-facts {
	list-style: none;
	padding: 0;
	margin: 26px 0 0;
	display: grid;
	gap: 12px;
}

.darasa-register-facts li {
	background: var(--card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 10px;
	padding: 13px 16px;
	margin: 0;
}

.darasa-register-form {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 30px 28px;
	box-shadow: var(--shadow);
}

.darasa-register-form h2 {
	font-size: 24px;
	margin-bottom: 18px;
}

/* Lessons */
.lesson-meta {
	display: flex;
	gap: 18px;
	color: var(--ink-soft);
	font-size: 15px;
	margin-top: 10px;
}

.lesson-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0 1.6em;
	background: var(--card);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.lesson-content th {
	background: var(--navy);
	color: var(--on-deep);
	text-align: left;
	padding: 11px 16px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
}

.lesson-content td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
}

.lesson-content tr:nth-child(even) td {
	background: var(--paper);
}

.lesson-content td:first-child {
	font-weight: 700;
	color: var(--blue);
}

.lesson-nav {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.lesson-nav a {
	text-decoration: none;
	font-weight: 600;
}

.lesson-nav-next {
	margin-left: auto;
}

/* My Darasa portal */
.mgm-darasa-portal .mgm-portal-hello {
	font-size: 30px;
	margin-bottom: 18px;
}

.mgm-portal-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 26px 26px 22px;
	box-shadow: var(--shadow);
	margin-bottom: 22px;
}

.mgm-portal-card h3 {
	font-size: 22px;
	margin-bottom: 12px;
}

.mgm-portal-facts,
.mgm-portal-lessons {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	display: grid;
	gap: 8px;
}

.mgm-portal-lessons li {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.mgm-portal-lessons a {
	font-weight: 600;
	text-decoration: none;
}

.mgm-portal-date {
	color: var(--ink-soft);
	font-size: 14px;
}

@media (max-width: 960px) {
	.darasa-facts-grid {
		grid-template-columns: 1fr;
	}

	.darasa-register-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

.content-area {
	padding: 44px 0 84px;
}

.entry-content {
	max-width: 720px;
}

.entry-content h2 {
	font-size: 30px;
	margin: 1.4em 0 0.5em;
}

.entry-content h3 {
	font-size: 23px;
	margin: 1.3em 0 0.5em;
}

.entry-content a {
	color: var(--blue);
}

.entry-content blockquote {
	border-left: 4px solid var(--orange);
	margin: 1.4em 0;
	padding: 4px 0 4px 22px;
	color: var(--ink-soft);
	font-style: italic;
}

.entry-content img {
	border-radius: 8px;
}

.entry-content .wp-block-gallery,
.entry-content .alignwide {
	max-width: 1084px;
}

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
}

.entry-meta {
	font-size: 14px;
	color: var(--ink-soft);
	margin-top: 10px;
}

/* Archive lists */
.archive-list {
	display: grid;
	gap: 22px;
}

.pagination {
	margin-top: 44px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	padding: 8px 15px;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
	font-size: 14.5px;
}

.pagination .current {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--on-deep);
}

/* ---------- Forms (contact / volunteer / newsletter) ---------- */
.mgm-form {
	max-width: 560px;
	display: grid;
	gap: 16px;
	margin: 24px 0;
}

.mgm-form label {
	font-weight: 600;
	font-size: 14.5px;
	display: grid;
	gap: 6px;
}

.mgm-form input[type="text"],
.mgm-form input[type="email"],
.mgm-form input[type="tel"],
.mgm-form select,
.mgm-form textarea {
	border: 1.5px solid var(--line);
	border-radius: 8px;
	padding: 11px 14px;
	font: inherit;
	background: var(--card);
	color: var(--ink);
	width: 100%;
}

.mgm-form textarea {
	min-height: 140px;
	resize: vertical;
}

.mgm-form .btn {
	justify-self: start;
}

.mgm-form-hp {
	position: absolute !important;
	left: -9999px;
}

.form-success {
	background: color-mix(in srgb, var(--blue) 12%, transparent);
	border: 1px solid var(--blue);
	color: var(--blue);
	border-radius: 8px;
	padding: 14px 18px;
	font-weight: 600;
}

/* ---------- Contact page template ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 64px;
	align-items: start;
}

.contact-info {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	gap: 18px;
	max-width: 480px;
}

.contact-info li {
	border-left: 4px solid var(--orange);
	padding: 4px 0 4px 18px;
	font-size: 16px;
}

.contact-info-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 2px;
}

.contact-form-col {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 32px;
	box-shadow: var(--shadow);
}

.contact-form-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
}

/* ---------- Gallery viewer navigation ---------- */
.gallery-nav {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.gallery-nav-all {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 600px) {
	.gallery-nav {
		flex-direction: column;
		align-items: stretch;
	}

	.gallery-nav .btn {
		text-align: center;
	}
}

/* ---------- About page giving band ---------- */
.about-give .inner {
	padding: 64px 0;
}

.about-give h2 {
	margin-bottom: 24px;
}

.about-give-progress {
	max-width: 560px;
	margin-bottom: 28px;
}

@media (max-width: 960px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}

/* Footer newsletter */
.newsletter-form {
	display: flex;
	border: 1.5px solid rgba(244, 238, 223, 0.3);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 12px;
}

.newsletter-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	border: 0;
	background: transparent;
	color: var(--on-deep);
}

.newsletter-form input::placeholder {
	color: var(--on-deep-soft);
}

.newsletter-form button {
	background: var(--orange);
	color: #35180A;
	padding: 10px 18px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--navy);
	color: var(--on-deep);
	margin-top: 84px;
}

body.home .site-footer,
body.page-template-default .site-footer {
	margin-top: 0;
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 44px;
	padding: 64px 0 48px;
}

.foot-grid h4 {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 16px;
}

.foot-grid p,
.foot-grid a,
.foot-grid li {
	font-size: 14.5px;
	color: var(--on-deep-soft);
	text-decoration: none;
}

.foot-grid a:hover {
	color: var(--on-deep);
}

.foot-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.foot-bottom {
	border-top: 1px solid rgba(244, 238, 223, 0.16);
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--on-deep-soft);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hero-content > * {
		animation: mgm-rise 0.7s ease both;
	}

	.hero-content > *:nth-child(2) {
		animation-delay: 0.1s;
	}

	.hero-content > *:nth-child(3) {
		animation-delay: 0.2s;
	}

	.hero-content > *:nth-child(4) {
		animation-delay: 0.3s;
	}

	@keyframes mgm-rise {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.donate-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.prog-grid {
		grid-template-columns: 1fr 1fr;
	}

	.news-grid {
		grid-template-columns: 1fr 1fr;
	}

	.impact-grid {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
	}

	.foot-grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-header-inner {
		flex-wrap: wrap;
		gap: 14px;
		padding: 14px 0;
	}

	.nav-toggle {
		display: block;
		margin-left: auto;
		order: 2;
	}

	.site-header .header-donate {
		order: 3;
	}

	/* Slide-down mobile panel */
	.main-nav {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		transition: grid-template-rows 0.28s ease, opacity 0.22s ease;
	}

	.main-nav.is-open {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.main-nav > ul {
		min-height: 0;
		overflow: hidden;
		flex-direction: column;
		gap: 0;
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 12px;
		box-shadow: var(--shadow);
		margin: 4px 0 16px;
		padding: 6px;
		visibility: hidden;
		transition: visibility 0.28s;
	}

	.main-nav.is-open > ul {
		visibility: visible;
	}

	.main-nav li {
		border-top: 1px solid var(--line);
	}

	.main-nav > ul > li:first-child {
		border-top: none;
	}

	.main-nav a {
		display: block;
		padding: 13px 12px;
		font-size: 16px;
		border-radius: 8px;
		opacity: 1;
	}

	.main-nav a:hover,
	.main-nav li.open > a {
		background: var(--paper);
	}

	.main-nav > ul > li > a {
		padding: 13px 12px;
	}

	.main-nav > ul > li > a::after {
		display: none;
	}

	/* Accordion chevron: down when closed, up when open */
	.main-nav li.menu-item-has-children > a::before {
		margin-top: 6px;
		transition: transform 0.2s ease;
	}

	.main-nav li.open > a::before {
		transform: rotate(-135deg) translateY(-3px);
	}

	/* Submenus expand inline under their parent */
	.main-nav ul.sub-menu {
		position: static;
		min-width: 0;
		border: none;
		border-left: 3px solid var(--orange);
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 12px;
		margin: 2px 0 10px 12px;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		transition: none;
	}

	.main-nav li.open > ul.sub-menu {
		display: block;
	}

	.main-nav ul.sub-menu a {
		padding: 11px 12px;
		font-size: 15px;
		color: var(--ink-soft);
	}

	.main-nav ul.sub-menu a:hover {
		color: var(--blue);
	}

	.main-nav ul.sub-menu li:first-child {
		border-top: none;
	}

	/* Top bar: keep phone + e-mail one tap away, drop the rest */
	.top-item-address,
	.top-item-social {
		display: none;
	}

	.top-bar-inner {
		gap: 16px;
		padding: 7px 20px;
		justify-content: center;
	}

	.hero-nav {
		right: 16px;
		bottom: 18px;
	}
}

@media (max-width: 600px) {
	.prog-grid,
	.news-grid {
		grid-template-columns: 1fr;
	}

	.foot-grid {
		grid-template-columns: 1fr;
	}

	.event-row {
		flex-wrap: wrap;
	}

	.event-row .btn {
		margin-left: 98px;
	}

	.hero-cover .wrap {
		padding-top: 64px;
		padding-bottom: 88px;
	}

	.section {
		padding: 64px 0;
	}
}