/*!
Theme Name: Al-Irshad Institute
Theme URI: https://alirshad.net/
Description: Custom child theme for Al-Irshad Islamic Institute. Owns its own header, footer and templates so the site does not depend on the parent theme's unconfigured options, while still inheriting Profecient for anything not overridden. All CRM behaviour lives in the Al-Irshad CRM plugin, never here.
Author: Al-Irshad Islamic Institute
Template: profecient-theme
Version: 1.2.2
License: GPL-2.0-or-later
Text Domain: alirshad-child
Tags: custom-menu, featured-images, translation-ready, full-width-template
*/

/* =========================================================================
   1. Design tokens
   ====================================================================== */

:root {
	/* Brand — fixed by the client's specification. */
	--ai-green: #0b5d3b;
	--ai-green-dark: #073b25;
	--ai-green-light: #157a4f;
	--ai-gold: #c9a227;
	--ai-gold-light: #e3c85f;
	--ai-cream: #faf8f2;

	--ai-ink: #1c2320;
	--ai-body: #4d5551;
	--ai-muted: #78807c;
	--ai-line: #e5e0d4;
	--ai-white: #fff;

	--ai-max: 1180px;
	--ai-gutter: clamp(1.15rem, 4vw, 2.5rem);
	--ai-radius: 12px;
	--ai-radius-lg: 20px;

	--ai-shadow-sm: 0 1px 3px rgba(7, 59, 37, .06), 0 4px 14px rgba(7, 59, 37, .05);
	--ai-shadow: 0 4px 12px rgba(7, 59, 37, .07), 0 14px 40px rgba(7, 59, 37, .07);

	--ai-serif: "Marcellus", Georgia, "Times New Roman", serif;
	--ai-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ai-header-h: 84px;
}

/* Parent theme drives several components off these; repointing them at the brand
   palette is cheaper and safer than overriding the parent's rules one by one. */
body {
	--profecient-primary-color: var(--ai-green);
	--profecient-secondary-color: var(--ai-gold);
	--profecient-text-color: var(--ai-body);
	--profecient-accent-color: var(--ai-gold);
	--profecient-tertiary-color: var(--ai-cream);
	--essential-primary-color: var(--ai-green);
	--essential-secondary-color: var(--ai-gold);
}

/* =========================================================================
   2. Base
   ====================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ai-body {
	margin: 0;
	background: var(--ai-white);
	color: var(--ai-body);
	font-family: var(--ai-sans);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Prefixed with `body` deliberately — (0,1,2) rather than (0,1,1).
   Elementor's global kit emits `.elementor-kit-13 h1 { color: #2A160D;
   font-family: "Kanit"; font-size: 84px; ... }`, which is (0,1,1) exactly like a bare
   `.ai-body h1`, and its stylesheet loads after this one. On equal specificity the later
   sheet wins, so every heading on the site was rendering in Kanit at Elementor's dark
   brown — including the hero, where dark-on-dark made the headline almost unreadable.
   The kit class is also stripped from pages this theme renders (see functions.php); this
   is the belt to that braces, and it stops any other plugin pulling the same trick.
   text-transform and font-style are reset explicitly because the kit sets those too. */
body.ai-body h1,
body.ai-body h2,
body.ai-body h3,
body.ai-body h4 {
	margin: 0 0 .6em;
	color: var(--ai-ink);
	font-family: var(--ai-serif);
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
}

body.ai-body h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.35rem); }
body.ai-body h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
body.ai-body h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
body.ai-body h4 { font-size: 1.1rem; }

.ai-body p { margin: 0 0 1.15em; }
.ai-body p:last-child { margin-bottom: 0; }

.ai-body a {
	color: var(--ai-green);
	text-decoration: none;
	transition: color .15s ease;
}

.ai-body a:hover { color: var(--ai-gold); }

.ai-body img { max-width: 100%; height: auto; display: block; }

.ai-body ul, .ai-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.ai-body li { margin-bottom: .35em; }

.ai-body blockquote {
	margin: 1.8em 0;
	padding: 1.2em 1.5em;
	background: var(--ai-cream);
	border-left: 4px solid var(--ai-gold);
	border-radius: 0 var(--ai-radius) var(--ai-radius) 0;
	font-family: var(--ai-serif);
	font-size: 1.12rem;
	color: var(--ai-ink);
}

.ai-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .7rem 1.2rem;
	background: var(--ai-green);
	color: #fff;
}

.ai-skip:focus { left: 1rem; top: 1rem; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   3. Layout helpers
   ====================================================================== */

.ai-wrap {
	width: 100%;
	max-width: var(--ai-max);
	margin-inline: auto;
	padding-inline: var(--ai-gutter);
}

.ai-wrap--narrow { max-width: 760px; }

.ai-section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.ai-section--cream { background: var(--ai-cream); }
.ai-section--green { background: var(--ai-green); color: rgba(255,255,255,.86); }
body.ai-body .ai-section--green h2,
body.ai-body .ai-section--green h3 { color: #fff; }
.ai-section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

.ai-sechead { max-width: 680px; margin-bottom: clamp(1.8rem, 1.4rem + 1vw, 2.75rem); }
.ai-sechead--center { margin-inline: auto; text-align: center; }

.ai-eyebrow {
	display: block;
	margin-bottom: .7rem;
	font-family: var(--ai-sans);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ai-gold);
}

.ai-section--green .ai-eyebrow { color: var(--ai-gold); }

.ai-sechead p {
	margin-top: .4rem;
	font-size: 1.05rem;
	color: var(--ai-muted);
}

.ai-section--green .ai-sechead p { color: rgba(255,255,255,.75); }

/* A slim gold rule used under headings. */
.ai-rule {
	width: 56px;
	height: 3px;
	margin: 1rem 0 0;
	background: var(--ai-gold);
	border: 0;
	border-radius: 2px;
}

.ai-sechead--center .ai-rule { margin-inline: auto; }

/* =========================================================================
   4. Buttons
   ====================================================================== */

.ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.9rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--ai-sans);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ai-btn:hover { transform: translateY(-2px); }

/* Every colour rule below is scoped with .ai-body on purpose. Buttons are <a> elements,
   and the base rules `.ai-body a` and `.ai-nav a` are both specificity (0,1,1) — a bare
   `.ai-btn--ghost` (0,1,0) loses to them, which silently rendered white-on-image hero
   buttons in dark green. `.ai-body .ai-btn--*` is (0,2,0) and wins cleanly. */

.ai-body .ai-btn--primary {
	background: var(--ai-gold);
	border-color: var(--ai-gold);
	color: #3a2c00;
	box-shadow: 0 6px 18px rgba(201, 162, 39, .28);
}

.ai-body .ai-btn--primary:hover,
.ai-body .ai-btn--primary:focus { background: #d9b02c; border-color: #d9b02c; color: #3a2c00; }

.ai-body .ai-btn--green {
	background: var(--ai-green);
	border-color: var(--ai-green);
	color: #fff;
}

.ai-body .ai-btn--green:hover,
.ai-body .ai-btn--green:focus { background: var(--ai-green-dark); border-color: var(--ai-green-dark); color: #fff; }

.ai-body .ai-btn--ghost {
	background: transparent;
	border-color: rgba(255,255,255,.55);
	color: #fff;
}

.ai-body .ai-btn--ghost:hover,
.ai-body .ai-btn--ghost:focus { background: #fff; border-color: #fff; color: var(--ai-green-dark); }

.ai-body .ai-btn--outline {
	background: transparent;
	border-color: var(--ai-green);
	color: var(--ai-green);
}

.ai-body .ai-btn--outline:hover,
.ai-body .ai-btn--outline:focus { background: var(--ai-green); color: #fff; }

.ai-btn--sm { padding: .55rem 1.25rem; font-size: .85rem; }

.ai-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: 1.8rem;
}

.ai-more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: .92rem;
}

.ai-more::after { content: "→"; transition: transform .18s ease; }
.ai-more:hover::after { transform: translateX(3px); }

/* =========================================================================
   5. Header
   ====================================================================== */

.ai-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--ai-line);
}

.admin-bar .ai-header { top: 32px; }

.ai-header__bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--ai-header-h);
}

.ai-brand {
	display: flex;
	align-items: center;
	gap: .8rem;
	flex-shrink: 0;
}

.ai-brand img { max-height: 56px; width: auto; }

.ai-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.ai-brand__name {
	font-family: var(--ai-serif);
	font-size: 1.12rem;
	color: var(--ai-green-dark);
}

.ai-brand__tag {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ai-gold);
}

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

.ai-nav ul {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-nav li { margin: 0; position: relative; }

.ai-nav a {
	display: block;
	padding: .4rem 0;
	font-size: .93rem;
	font-weight: 500;
	color: var(--ai-ink);
}

.ai-nav a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	background: var(--ai-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.ai-nav a:hover::after,
.ai-nav .current-menu-item > a::after,
.ai-nav .current_page_item > a::after { transform: scaleX(1); }

/* Sub-menus. */
.ai-nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	display: block;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

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

.ai-nav ul ul a { padding: .5rem 1.1rem; }
.ai-nav ul ul a::after { display: none; }
.ai-nav ul ul a:hover { background: var(--ai-cream); }

.ai-header__cta { flex-shrink: 0; }

/* The nav CTA is a button, not a nav link — no underline sweep. */
.ai-nav .ai-btn::after { display: none; }

.ai-burger {
	display: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 1px solid var(--ai-line);
	border-radius: 10px;
	cursor: pointer;
}

.ai-burger span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 3px auto;
	background: var(--ai-ink);
	transition: transform .2s ease, opacity .2s ease;
}

.ai-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ai-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ai-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
	.ai-burger { display: block; flex-shrink: 0; }
	.ai-header__cta { display: none; }

	/* The brand block measured 305px next to a 44px burger inside 338px of content, which
	   pushed the menu button off the right edge. Let it shrink instead. */
	.ai-brand { min-width: 0; gap: .55rem; }
	.ai-brand img { max-height: 42px; }
	.ai-brand__text { min-width: 0; }

	.ai-brand__name {
		font-size: .98rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

@media (max-width: 420px) {
	/* Below this the tagline is the first thing that can go without losing meaning. */
	.ai-brand__tag { display: none; }
	.ai-brand img { max-height: 36px; }
	.ai-brand__name { font-size: .92rem; }
}

@media (max-width: 1023px) {

	.ai-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		margin: 0;
		padding: .5rem var(--ai-gutter) 1.5rem;
		background: #fff;
		border-bottom: 1px solid var(--ai-line);
		box-shadow: var(--ai-shadow);
		max-height: calc(100vh - var(--ai-header-h));
		overflow-y: auto;
	}

	.ai-nav.is-open { display: block; }

	.ai-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

	.ai-nav li { border-bottom: 1px solid var(--ai-line); }
	.ai-nav li:last-child { border-bottom: 0; }
	.ai-nav a { padding: .85rem 0; font-size: 1rem; }
	.ai-nav a::after { display: none; }

	.ai-nav ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 .4rem .9rem;
	}

	.ai-nav__cta { margin-top: 1rem; }
	.ai-nav__cta .ai-btn { width: 100%; }
}

@media (min-width: 1024px) {
	.ai-nav__cta { display: none; }
}

/* =========================================================================
   6. Hero
   ====================================================================== */

.ai-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 62vh, 660px);
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
	background: var(--ai-green-dark);
	overflow: hidden;
}

.ai-hero__bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .38;
}

.ai-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(7,59,37,.92) 0%, rgba(7,59,37,.72) 45%, rgba(7,59,37,.42) 100%);
}

.ai-hero__inner { position: relative; z-index: 2; max-width: 720px; }

.ai-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1.25rem;
	padding: .4rem 1rem;
	background: rgba(201,162,39,.16);
	border: 1px solid rgba(201,162,39,.45);
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ai-gold);
}

body.ai-body .ai-hero h1 { color: #fff; margin-bottom: 1rem; }

.ai-hero__text {
	max-width: 620px;
	font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
	color: rgba(255,255,255,.85);
}

/* =========================================================================
   7. Page header (interior pages)
   ====================================================================== */

.ai-pagehead {
	position: relative;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	background: var(--ai-green-dark);
	overflow: hidden;
}

.ai-pagehead__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .28;
}

.ai-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(7,59,37,.9), rgba(7,59,37,.6));
}

.ai-pagehead__inner { position: relative; z-index: 2; }
body.ai-body .ai-pagehead h1 { margin: 0; color: #fff; }

.ai-pagehead__text {
	max-width: 620px;
	margin: .8rem 0 0;
	color: rgba(255,255,255,.82);
}

.ai-crumbs {
	margin: 0 0 .9rem;
	font-size: .82rem;
	color: rgba(255,255,255,.65);
}

.ai-crumbs a { color: rgba(255,255,255,.85); }
.ai-crumbs a:hover { color: var(--ai-gold); }
.ai-crumbs span { margin: 0 .45rem; opacity: .55; }

/* =========================================================================
   8. Cards & grids
   ====================================================================== */

.ai-grid { display: grid; gap: clamp(1.1rem, .9rem + .8vw, 1.9rem); }
.ai-grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.ai-grid--3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.ai-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ai-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	box-shadow: var(--ai-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ai-card:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow); }

.ai-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ai-cream); }

.ai-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.ai-card:hover .ai-card__media img { transform: scale(1.05); }

.ai-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.45rem 1.5rem; }
.ai-card__title { margin: 0 0 .55rem; font-size: 1.2rem; }
.ai-card__title a { color: var(--ai-ink); }
.ai-card__title a:hover { color: var(--ai-green); }
.ai-card__text { flex: 1; margin: 0 0 1.15rem; font-size: .95rem; color: var(--ai-muted); }

.ai-tag {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: .8rem;
	padding: .22rem .7rem;
	background: var(--ai-cream);
	border: 1px solid var(--ai-line);
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ai-green);
}

.ai-meta {
	margin: 0 0 .7rem;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ai-muted);
}

/* Value / feature tiles. */
.ai-tile {
	padding: 1.6rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ai-line);
	border-radius: var(--ai-radius);
	text-align: center;
}

.ai-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 1rem;
	background: var(--ai-cream);
	border-radius: 50%;
	color: var(--ai-green);
}

.ai-tile__icon svg { width: 26px; height: 26px; }
.ai-tile h3 { margin: 0 0 .45rem; font-size: 1.1rem; }
.ai-tile p { margin: 0; font-size: .92rem; color: var(--ai-muted); }

/* =========================================================================
   9. Split (image + text)
   ====================================================================== */

.ai-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.8rem, 1.4rem + 2vw, 3.5rem);
	align-items: center;
}

.ai-split__media { position: relative; }

.ai-split__media img {
	width: 100%;
	border-radius: var(--ai-radius-lg);
	box-shadow: var(--ai-shadow);
}

/* Gold frame offset behind the image. */
.ai-split__media::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 2px solid var(--ai-gold);
	border-radius: var(--ai-radius-lg);
	z-index: -1;
}

.ai-split--flip .ai-split__media { order: 2; }
.ai-split--flip .ai-split__media::before { inset: 18px 18px -18px -18px; }

.ai-checks { margin: 1.3rem 0 0; padding: 0; list-style: none; }

.ai-checks li {
	position: relative;
	margin-bottom: .6rem;
	padding-left: 1.9rem;
	font-size: .96rem;
}

.ai-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--ai-green);
	border-radius: 50%;
}

.ai-checks li::after {
	content: "";
	position: absolute;
	left: .32rem;
	top: .72em;
	width: .42rem;
	height: .22rem;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

@media (max-width: 700px) {
	.ai-split__media::before { display: none; }
	.ai-split--flip .ai-split__media { order: 0; }
}

/* =========================================================================
   10. Donate strip
   ====================================================================== */

.ai-cta {
	position: relative;
	padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
	background: var(--ai-green);
	overflow: hidden;
}

.ai-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(201,162,39,.22), transparent 55%);
}

.ai-cta__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	align-items: center;
	justify-content: space-between;
}

body.ai-body .ai-cta h2 { margin: 0 0 .4rem; color: #fff; }
.ai-cta p { margin: 0; max-width: 560px; color: rgba(255,255,255,.8); }

/* =========================================================================
   11. Entry content (pages & posts)
   ====================================================================== */

.ai-entry { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }

.ai-entry__content > * { max-width: 100%; }

.ai-entry__content h2 { margin-top: 2em; }
.ai-entry__content h3 { margin-top: 1.7em; }

.ai-entry__thumb {
	margin: 0 0 2rem;
	border-radius: var(--ai-radius-lg);
	overflow: hidden;
}

.ai-postmeta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.2rem;
	margin: 0 0 1.8rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ai-line);
	font-size: .85rem;
	color: var(--ai-muted);
}

.ai-postnav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ai-line);
	font-size: .92rem;
}

/* Pagination. */
.ai-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.ai-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .6rem;
	background: #fff;
	border: 1px solid var(--ai-line);
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ai-ink);
}

.ai-pagination .page-numbers:hover { border-color: var(--ai-green); color: var(--ai-green); }

.ai-pagination .page-numbers.current {
	background: var(--ai-green);
	border-color: var(--ai-green);
	color: #fff;
}

/* =========================================================================
   12. Founder / profile
   ====================================================================== */

.ai-profile {
	display: grid;
	grid-template-columns: minmax(240px, 320px) 1fr;
	gap: clamp(1.8rem, 1.4rem + 2vw, 3.25rem);
	align-items: start;
}

.ai-profile__photo {
	position: sticky;
	top: calc(var(--ai-header-h) + 1.5rem);
}

.ai-profile__photo img {
	width: 100%;
	border-radius: var(--ai-radius-lg);
	box-shadow: var(--ai-shadow);
}

.ai-profile__name { margin: 1.1rem 0 .2rem; font-size: 1.35rem; }
.ai-profile__role { margin: 0; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ai-gold); }

@media (max-width: 860px) {
	.ai-profile { grid-template-columns: 1fr; }
	.ai-profile__photo { position: static; max-width: 340px; }
}

/* =========================================================================
   13. Footer
   ====================================================================== */

.ai-footer {
	background: var(--ai-green-dark);
	color: rgba(255,255,255,.72);
	font-size: .93rem;
}

.ai-footer a { color: rgba(255,255,255,.82); }
.ai-footer a:hover { color: var(--ai-gold); }

/* Explicit breakpoints, not auto-fit. `minmax(240px,1.5fr) repeat(auto-fit,minmax(160px,1fr))`
   resolved to `240px 160px` = 400px of columns inside a 338px container on a 375px phone,
   giving the whole page 68px of horizontal scroll. auto-fit cannot drop below its own
   minmax floor, so on narrow screens it overflows instead of wrapping. */
.ai-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

@media (min-width: 560px) {
	.ai-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.ai-footer__top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

.ai-footer h3 {
	margin: 0 0 1rem;
	font-family: var(--ai-sans);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
}

.ai-footer ul { margin: 0; padding: 0; list-style: none; }
.ai-footer li { margin-bottom: .5rem; }

.ai-footer__brand img { max-height: 62px; margin-bottom: 1rem; }
.ai-footer__brand p { max-width: 340px; }

.ai-footer__contact li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}

.ai-footer__contact svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: .3em; color: var(--ai-gold); }

.ai-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .84rem;
}

.ai-footer__bottom p { margin: 0; }

/* Floating WhatsApp. */
.ai-whatsapp {
	position: fixed;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: #25d366;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
	color: #fff;
	transition: transform .18s ease;
}

.ai-whatsapp:hover { transform: scale(1.07); color: #fff; }
.ai-whatsapp svg { width: 26px; height: 26px; }

/* =========================================================================
   14. Utility
   ====================================================================== */

.ai-center { text-align: center; }
.ai-mt-0 { margin-top: 0; }
.ai-empty {
	padding: 3rem 1.5rem;
	background: var(--ai-cream);
	border: 1px dashed var(--ai-line);
	border-radius: var(--ai-radius);
	text-align: center;
	color: var(--ai-muted);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* =========================================================================
   15. CRM components on dark grounds
   ====================================================================== */

/* The plugin's outline button is green-on-white by design; on the green video band that
   would be invisible. Re-skin it here rather than weakening the plugin's own default. */
.ai-section--green .air-btn--outline {
	border-color: rgba(255,255,255,.55);
	color: #fff;
}

.ai-section--green .air-btn--outline:hover,
.ai-section--green .air-btn--outline:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ai-green-dark);
}

/* Impact counters sit directly on the page, so give them the theme's card treatment. */
.ai-section--tight .air-impact {
	border-color: var(--ai-line);
	box-shadow: var(--ai-shadow-sm);
}

/* =========================================================================
   16. Sticky mobile donate bar
   =========================================================================
   Most traffic arrives on a phone from a WhatsApp share. Once the hero scrolls away the
   primary action is gone, and the header CTA is hidden behind the burger on mobile — so
   the single most important button on a donation site disappears. This keeps it reachable
   without covering content, and it never appears on the donate page itself. */

.ai-stickycta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95;
	display: none;
	gap: .6rem;
	align-items: center;
	padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--ai-line);
	box-shadow: 0 -4px 18px rgba(7, 59, 37, .1);
}

.ai-stickycta__text {
	flex: 1;
	min-width: 0;
	font-size: .78rem;
	line-height: 1.3;
	color: var(--ai-muted);
}

.ai-stickycta__text strong {
	display: block;
	font-size: .88rem;
	color: var(--ai-ink);
}

.ai-stickycta .ai-btn { flex-shrink: 0; padding: .6rem 1.25rem; font-size: .88rem; }

/* Comfortable tap targets on touch screens.
   Measured on the live site at 375px: every footer link was 16-25px tall and the
   breadcrumb link 16px, well under the ~44px a thumb needs. Padding rather than
   min-height, so the text stays where the design puts it and only the hit area grows. */
@media (max-width: 1023px) {
	.ai-footer li { margin-bottom: 0; }

	.ai-footer li > a {
		display: inline-block;
		padding-block: .55rem;
	}

	.ai-footer__contact li { padding-block: .35rem; }

	.ai-crumbs a {
		display: inline-block;
		padding-block: .45rem;
	}
}

@media (max-width: 1023px) {
	.ai-stickycta { display: flex; }

	/* Keep the floating WhatsApp button clear of the bar. */
	.ai-whatsapp { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }

	/* And stop the bar covering the end of the page. */
	.ai-footer__bottom { padding-bottom: calc(1.25rem + 3.6rem); }
}

/* =========================================================================
   17. Campaign progress on a brand-new campaign
   ====================================================================== */

/* A 0% bar reads as "nobody gives here". Until there is something to show, say so. */
.air-progress__bar--empty .air-progress__fill { background: var(--ai-line); }

.ai-newcampaign {
	display: inline-block;
	margin: .4rem 0 0;
	padding: .2rem .65rem;
	background: var(--ai-cream);
	border: 1px solid var(--ai-line);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ai-green);
}

/* Legal / accountability row, above the copyright line. */
.ai-footer__legal {
	padding-block: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.ai-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-footer__legal li { margin: 0; }

.ai-footer__legal a {
	font-size: .82rem;
	color: rgba(255, 255, 255, .7);
}

.ai-footer__legal a:hover { color: var(--ai-gold); }