/*
Theme Name: Astra Child (OFEF)
Theme URI: https://ofef.test
Description: Child theme of Astra for the Olusegun Fadare Empowerment Foundation (OFEF) website.
Author: OFEF
Template: astra
Version: 2.23.0
Text Domain: astra-child
*/

/* =====================================================================
   OFEF brand utility classes.
   These implement the recurring design-language pieces from the approved
   mockups (see CLAUDE.md Decisions Log) so Elementor sections can apply
   them as CSS classes instead of repeating inline styles per page.
   Palette references Astra's global palette variables where possible:
   0 gold  1 gold-dark  2 charcoal  3 ink  4 green  5 off-white
   6 white 7 ink-soft   8 footer-black
   ===================================================================== */

/* ---- Header polish ----
   Fixes seen in live review: the Get Involved pill collapsing into a
   circle (text wrap in a fully-rounded button), and the nav wrapping to
   two rows. Also styles the footer widget columns (dark bg, light text). */
.ast-header-button-1 .ast-custom-button {
	white-space: nowrap;
	padding: 12px 26px;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	font-size: 13.5px;
	white-space: nowrap;
	padding: 0 10px;
}
/* Logo lockup: "OFEF" wordmark (gold O) + small letterspaced tagline,
   matching the mockup. Replace with an <img> logo when the client supplies
   one. */
/* Header logo: full "with text" wordmark on desktop, sized by height so the
   name stays legible. The logo carries the OFEF name, so the text lockup
   (site title + tagline) is hidden. Mobile swaps to the badge — see
   functions.php ofef_mobile_logo_css(). */
.site-header .custom-logo-link { margin-right: 6px; display: inline-flex; align-items: center; }
.site-header .custom-logo-link img,
.ast-site-identity .custom-logo-link img {
	width: auto !important;
	max-width: none !important;
	height: 56px !important;
}
.site-header .site-title,
.site-header .site-description { display: none !important; }
.site-header .site-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	letter-spacing: .01em;
	margin: 0;
}
.site-header .site-title a {
	color: #FFFFFF;
}
.site-header .site-title a:hover {
	color: #FFFFFF;
}
.site-header .site-title a::first-letter {
	color: var(--ast-global-color-0);
}
.site-header .site-description {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: #9DB3A9;
	margin-top: 5px;
	/* Wrap the long name onto two lines so the logo block stays compact and
	   doesn't crowd the nav. */
	max-width: 200px;
	white-space: normal;
}
/* Contact section: vertically centre the form + info columns. */
.ofef-vcenter > .elementor-container { align-items: center; }

/* Orange CTA bands (.ofef-band-orange): solid brand-orange sections. Keep the
   inner accents readable — the accent colour would otherwise vanish into the
   orange background. Highlight goes charcoal; eyebrow + body text go white. */
.ofef-band-orange .ofef-eyebrow { color: #FFFFFF !important; }
.ofef-band-orange .ofef-hl { color: #15201C; }
.ofef-band-orange .elementor-widget-text-editor,
.ofef-band-orange .elementor-widget-text-editor p { color: #FFFFFF !important; }
.ofef-band-orange .ofef-brush::after { background: rgba(21, 32, 28, .25); }

/* Green bands (.ofef-band-green): the brand orange clashes on forest green, so
   accents that sit DIRECTLY on the green go white — clean and easy on the eyes.
   (Accents inside white cards on a green section keep their orange.) */
.ofef-band-green .ofef-eyebrow { color: #FFFFFF !important; }
.ofef-band-green .ofef-hl { color: #FFFFFF; }
.ofef-band-green .ofef-brush::after { background: rgba(255, 255, 255, .42); }

/* Testimonials ("Stories of Change"): pin name/role/quote colours so the role
   stops rendering in the default green (an orange highlight + green role read as
   a clashing combo). Name charcoal, role orange, quote in soft ink. */
.elementor-testimonial-name, .elementor-testimonial__name { color: var(--ast-global-color-2) !important; font-weight: 700; }
.elementor-testimonial-job, .elementor-testimonial__title { color: var(--ast-global-color-0) !important; }
.elementor-testimonial-content, .elementor-testimonial__text { color: var(--ast-global-color-7); }

/* Admin-managed testimonials ([ofef_testimonials]) — cards matching the brand. */
.ofef-testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	max-width: 1000px;
	margin: 0 auto;
}
.ofef-testi {
	position: relative;
	margin: 0;
	background: var(--ast-global-color-6);
	border: 1px solid #ECE7DC;
	border-radius: 16px;
	padding: 30px 30px 26px;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .06);
}
.ofef-testi::before {
	content: "\201C";
	position: absolute;
	top: 10px;
	right: 24px;
	font-family: Georgia, serif;
	font-size: 62px;
	line-height: 1;
	color: var(--ast-global-color-0);
	opacity: .22;
}
.ofef-testi-quote {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ast-global-color-7);
	font-style: italic;
}
.ofef-testi-person { display: flex; align-items: center; gap: 14px; }
.ofef-testi-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.ofef-testi-name {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	color: var(--ast-global-color-2);
}
.ofef-testi-role { display: block; font-size: 13px; color: var(--ast-global-color-0); }
@media (max-width: 767px) { .ofef-testimonials { grid-template-columns: 1fr; } }

/* Nav: compact spacing + gold dropdown carets (were default grey). */
.main-header-menu > .menu-item > .menu-link {
	font-size: 14px;
	font-weight: 600;
}
.main-header-menu .ast-header-navigation-arrow,
.main-header-menu .dropdown-menu-toggle,
.main-header-menu .ast-header-navigation-arrow svg,
.main-header-menu .ast-arrow-svg {
	color: var(--ast-global-color-0);
	fill: var(--ast-global-color-0);
}
/* Dropdown panel: dark, matching the header — Astra's option didn't take,
   so force it here (was light text on a light default panel = unreadable). */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu,
.main-header-menu .sub-menu .menu-item {
	background-color: #1C2A24;
}
.main-header-menu .sub-menu {
	border-top: 2px solid var(--ast-global-color-0);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.main-header-menu .sub-menu .menu-link {
	color: #D9E2DD;
}
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	color: var(--ast-global-color-0);
	background-color: #15201C;
}
/* Header layout: logo (left, auto) | nav (center, flexible, centered) |
   button (right, auto). The flexible middle centers the nav so it's evenly
   spaced from both the logo and the Get Involved button. */
@media (min-width: 922px) {
	.ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: auto 1fr auto !important;
		align-items: center;
	}
	.site-header-primary-section-center {
		justify-content: center;
	}
	.site-header .site-title {
		font-size: 26px;
		line-height: 1;
	}
	.ast-builder-menu-1 .main-header-menu {
		flex-wrap: nowrap;
		justify-content: center;
	}
}

/* ---- Mobile menu: mirror the dark charcoal + orange desktop dropdown look.
   Astra's mobile menu uses different, higher-specificity containers than the
   desktop nav, so it ignored the desktop rules and fell back to Astra's light
   defaults (white dropdowns, a green tint, sticky tap-hover). These rules
   force the dark styling and an orange active/current state. ---- */
@media (max-width: 921px) {
	/* Astra sets the mobile menu bg to palette green (--ast-global-color-4) and
	   the mobile content area to white — override both with the EXACT Astra
	   selectors (incl. .main-navigation) so specificity matches, plus the
	   generic ones. This is the light-green + white-dropdown fix. */
	.ast-builder-menu-mobile .main-navigation .main-header-menu,
	.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
	.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu,
	.ast-mobile-header-wrap .ast-mobile-header-content,
	.ast-mobile-header-wrap .main-header-menu,
	.ast-builder-menu-mobile .main-header-menu,
	.ast-builder-menu-mobile .main-header-menu .menu-item,
	.ast-builder-menu-mobile .main-header-menu .sub-menu,
	.ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item {
		background-color: #15201C !important;
	}
	/* Nested dropdowns a touch darker + a hairline divider for depth. */
	.ast-builder-menu-mobile .main-header-menu .sub-menu {
		background-color: #101915 !important;
		border-top: 1px solid rgba(255, 255, 255, .06);
	}
	/* Links + row dividers. */
	.ast-builder-menu-mobile .main-header-menu .menu-link,
	.ast-builder-menu-mobile .main-header-menu a {
		color: #D9E2DD !important;
		border-color: rgba(255, 255, 255, .07) !important;
	}
	/* Current page = orange. */
	.ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link,
	.ast-builder-menu-mobile .main-header-menu .current-menu-ancestor > .menu-link {
		color: var(--ast-global-color-0) !important;
	}
	/* Tap/hover feedback — kept subtle + orange so a stuck :hover (normal on
	   touch) reads as intentional rather than a white flash. */
	.ast-builder-menu-mobile .main-header-menu .menu-link:hover,
	.ast-builder-menu-mobile .main-header-menu .menu-item:focus-within > .menu-link,
	.ast-builder-menu-mobile .main-header-menu .menu-item:hover > .menu-link {
		color: var(--ast-global-color-0) !important;
		background-color: #1C2A24 !important;
	}
	/* Dropdown expand arrows + the hamburger/close icon = orange. */
	.ast-builder-menu-mobile .ast-header-navigation-arrow,
	.ast-builder-menu-mobile .dropdown-menu-toggle,
	.ast-builder-menu-mobile .dropdown-menu-toggle::before,
	.ast-mobile-header-wrap .menu-toggle,
	.main-header-menu-toggle .mobile-menu-toggle-icon {
		color: var(--ast-global-color-0) !important;
	}
}

/* Mobile: centre buttons. The two-column CTA rows put one button aligned right
   and the next aligned left so they sit together on desktop; when the columns
   stack on a phone that left them staggered to opposite edges. Centre them. */
@media (max-width: 767px) {
	/* Two-column CTA rows (button aligned right + next aligned left): centre. */
	.elementor-widget-button,
	.elementor-widget-button .elementor-button-wrapper,
	.elementor-widget-button .elementor-button-align-stretch {
		text-align: center !important;
		justify-content: center !important;
	}
	/* Hero-style flex button rows (.ofef-btn-row) stay left-aligned via the
	   wrap's justify-content — centre it too so those buttons don't hug the
	   left edge on a phone. */
	.ofef-btn-row > .elementor-widget-wrap {
		justify-content: center !important;
	}
}

/* ---- Footer widget columns ---- */
.site-footer .footer-widget-area h4 {
	color: #FFFFFF;
	font-size: 15px;
	margin-bottom: 12px;
}
.site-footer,
.site-footer p,
.site-footer li {
	color: #B9C4BE;
	font-size: 13.5px;
}
.site-footer a {
	color: #B9C4BE;
}
.site-footer a:hover {
	color: var(--ast-global-color-0);
}
.ofef-foot-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

/* ===== Footer (single HTML block, 4-column grid) ===== */
/* Astra puts the single footer widget in a grid column that's only ~1/3
   wide; force the footer row + section to full width so our own grid can
   span it. */
.site-footer .ast-builder-footer-grid-columns {
	display: block !important;
	grid-template-columns: none !important;
}
.site-footer .site-footer-primary-section-1,
.site-footer .site-primary-footer-inner-wrap {
	width: 100% !important;
	max-width: 100% !important;
}
.site-footer .ofef-footer {
	max-width: 1160px;
	margin: 0 auto;
	padding: 62px 24px 30px;
}
.ofef-footer-grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1.1fr 1.7fr;
	gap: 44px;
}
.ofef-footer-grid h4 {
	color: #fff;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 16px;
}
.ofef-footer-grid p {
	font-size: 13.5px;
	line-height: 1.65;
	color: #B9C4BE;
	margin: 0 0 12px;
}
.ofef-flogo {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 27px;
	line-height: 1;
	color: #fff;
	letter-spacing: .01em;
}
.ofef-flogo .ofef-fo { color: var(--ast-global-color-0); }
.ofef-flogo-img { display: block; width: auto; max-width: 240px; height: auto; margin-bottom: 18px; }
@media (max-width: 921px) { .ofef-flogo-img { max-width: 200px; } }
.ofef-ftag {
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 9.5px !important;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #8A9A92 !important;
	margin: 6px 0 16px !important;
}
.ofef-fsocials {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.ofef-fsocials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #35443D;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #D9E2DD;
	transition: .2s;
}
.ofef-fsocials a svg { width: 15px; height: 15px; }
.ofef-fsocials a:hover {
	background: var(--ast-global-color-0);
	border-color: var(--ast-global-color-0);
	color: #15201C;
}
.ofef-fsoon {
	font-size: 12px !important;
	color: #7E8D86 !important;
	font-style: italic;
	margin-top: 12px !important;
}
.ofef-fcontact {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	color: #B9C4BE;
}
.ofef-fcontact a { color: #B9C4BE; text-decoration: none; }
.ofef-fcontact a:hover { color: var(--ast-global-color-0); }
.ofef-ficon {
	flex: none;
	color: var(--ast-global-color-0);
	margin-top: 2px;
}
.ofef-ficon svg { width: 14px; height: 14px; display: block; }
.ofef-newsletter { margin-top: 20px; }
.ofef-nl-notice {
	font-size: 12.5px !important;
	color: var(--ast-global-color-0) !important;
	margin: 0 0 8px !important;
	font-weight: 600;
}
.ofef-newsletter label {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	color: #fff;
	margin-bottom: 9px;
}
.ofef-newsletter-row { display: flex; }
.ofef-newsletter-row input {
	flex: 1;
	min-width: 0;
	border: 1px solid #35443D;
	background: #182420;
	color: #fff;
	border-radius: 999px 0 0 999px;
	padding: 11px 16px;
	font-size: 13px;
	outline: none;
}
.ofef-newsletter-row input:focus { border-color: var(--ast-global-color-0); }
.ofef-newsletter-row button {
	border: 0;
	background: var(--ast-global-color-0);
	color: #15201C;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	border-radius: 0 999px 999px 0;
	padding: 11px 22px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
}
.ofef-newsletter-row button:hover { background: var(--ast-global-color-1); }
@media (max-width: 900px) {
	.ofef-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
	.ofef-footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* =====================================================================
   Consistent typography scale across all Elementor page content.
   Fixes size/weight drift between sections so headings, body and card
   titles read as one system (scoped to .elementor-page so the Astra
   header/footer are untouched).
   ===================================================================== */
.elementor-page .elementor-widget-heading h1 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(32px, 4.4vw, 54px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.01em;
}
.elementor-page .elementor-widget-heading h2 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(26px, 3.3vw, 40px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.01em;
}
.elementor-page .elementor-widget-heading h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 20px;
	font-weight: 700;
}
.elementor-page .elementor-widget-text-editor {
	font-size: 16px;
	line-height: 1.65;
}
/* Card titles/descriptions (icon-box + image-box) share one scale */
.elementor-page .elementor-icon-box-title,
.elementor-page .elementor-image-box-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.elementor-page .elementor-icon-box-description,
.elementor-page .elementor-image-box-description {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ast-global-color-7);
}

/* ---- Script eyebrow label above section headings ---- */
.ofef-eyebrow {
	font-family: 'Dancing Script', 'Segoe Script', cursive;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ast-global-color-0);
	display: block;
	margin-bottom: 6px;
}
.ofef-eyebrow--green {
	color: var(--ast-global-color-4);
}

/* ---- Gold word highlight inside headings ---- */
.ofef-hl {
	color: var(--ast-global-color-0);
}

/* ---- Brush-stroke underline highlight ---- */
.ofef-brush {
	position: relative;
	white-space: nowrap;
}
.ofef-brush::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 9px;
	background: var(--ast-global-color-0);
	opacity: .55;
	border-radius: 50% 40% 55% 45%/70% 60% 80% 50%;
	transform: rotate(-.6deg);
}

/* ---- Soft wave section edges (apply to the Elementor section) ----
   Smooth, shallow single-scallop waves rather than jagged random spikes.
   Many closely-spaced points at a gentle ~14px amplitude following one
   cosine period read as a soft, continuous curve. Same wave reused top and
   bottom (mirrored) so a stack of sections stays visually consistent. */
.ofef-torn-bottom {
	clip-path: polygon(
		0 0, 100% 0,
		100% calc(100% - 6px), 94% calc(100% - 8px), 88% calc(100% - 12px),
		82% calc(100% - 17px), 76% calc(100% - 20px), 70% calc(100% - 21px),
		64% calc(100% - 20px), 58% calc(100% - 17px), 50% calc(100% - 12px),
		42% calc(100% - 8px), 36% calc(100% - 6px), 30% calc(100% - 6px),
		24% calc(100% - 9px), 18% calc(100% - 13px), 12% calc(100% - 17px),
		6% calc(100% - 19px), 0 calc(100% - 18px)
	);
}
.ofef-torn-top {
	clip-path: polygon(
		0 18px, 6% 19px, 12% 17px, 18% 13px, 24% 9px, 30% 6px, 36% 6px,
		42% 8px, 50% 12px, 58% 17px, 64% 20px, 70% 21px, 76% 20px,
		82% 17px, 88% 12px, 94% 8px, 100% 6px,
		100% 100%, 0 100%
	);
}
.ofef-torn-both {
	clip-path: polygon(
		0 18px, 6% 19px, 12% 17px, 18% 13px, 24% 9px, 30% 6px, 36% 6px,
		42% 8px, 50% 12px, 58% 17px, 64% 20px, 70% 21px, 76% 20px,
		82% 17px, 88% 12px, 94% 8px, 100% 6px,
		100% calc(100% - 6px), 94% calc(100% - 8px), 88% calc(100% - 12px),
		82% calc(100% - 17px), 76% calc(100% - 20px), 70% calc(100% - 21px),
		64% calc(100% - 20px), 58% calc(100% - 17px), 50% calc(100% - 12px),
		42% calc(100% - 8px), 36% calc(100% - 6px), 30% calc(100% - 6px),
		24% calc(100% - 9px), 18% calc(100% - 13px), 12% calc(100% - 17px),
		6% calc(100% - 19px), 0 calc(100% - 18px)
	);
}

/* ---- Card treatment (soft shadow, rounded, white even on dark) ----
   When .ofef-card is on an Elementor COLUMN, the white background must live on
   the inner wrap (with a margin) so adjacent cards show a real gap between
   them — a background on the column itself makes neighbours touch. */
.ofef-card {
	background: var(--ast-global-color-6);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	overflow: hidden;
}
.elementor-column.ofef-card {
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}
.elementor-column.ofef-card > .elementor-widget-wrap,
.elementor-column.ofef-card > .elementor-element-populated {
	background: var(--ast-global-color-6);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	margin: 0 13px 26px;
	padding: 32px 28px;
}
@media (max-width: 767px) {
	.elementor-column.ofef-card > .elementor-widget-wrap,
	.elementor-column.ofef-card > .elementor-element-populated { margin: 0 0 22px; }
}

/* ---- Hero: constrain text column + inline the two CTA buttons ---- */
.ofef-hero-text {
	max-width: 600px;
}
/* Buttons live in a nested single-column row (.ofef-btn-row); flip that
   column's widget-wrap to a horizontal flex row so they sit side by side.
   Elementor sets flex-direction:column on the wrap, so !important is needed. */
.ofef-btn-row > .elementor-widget-wrap {
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
	justify-content: flex-start;
}
.ofef-btn-row > .elementor-widget-wrap > .elementor-widget-button {
	width: auto;
	max-width: none;
	margin: 0 !important;
}
/* Both hero buttons the same height: the ghost button has a 2px border and
   the gold one didn't, which offset them. Give both a 2px border (transparent
   on the gold) so their box heights match exactly. */
.ofef-btn-row .elementor-button {
	border: 2px solid transparent;
	display: flex;
	align-items: center;
}

/* The hero media column holds only absolutely-positioned collage tiles, so as
   a flex item it would shrink to zero width (min-width:auto = content = 0).
   Pin its width so the collage has room. */
.ofef-hero-media {
	flex: 0 0 46% !important;
	max-width: 46% !important;
	width: 46% !important;
	min-width: 0;
	align-self: stretch;
}
.ofef-hero-text .elementor-widget-heading h1 {
	font-size: clamp(38px, 4vw, 56px);
	line-height: 1.08;
	margin-bottom: .35em;
}
.ofef-hero-text .elementor-widget-text-editor {
	font-size: 17px;
	margin-bottom: 8px;
}

/* ---- Modern team / person cards (photo fills the card top) ---- */
.ofef-person {
	background: var(--ast-global-color-6);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	transition: transform .2s, box-shadow .2s;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ofef-person:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(21, 32, 28, .16);
}
.ofef-person-photo {
	position: relative;
	aspect-ratio: 4 / 5; /* portrait frame: generous headroom for these shots */
	background: linear-gradient(150deg, var(--ast-global-color-4) 0%, #15201C 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ofef-person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor to the top so the head is always kept and only the lower body is
	   cropped when the photo has to fill the frame. */
	object-position: center top;
	filter: grayscale(1) contrast(1.03);
	transition: filter .3s ease;
}
.ofef-person:hover .ofef-person-photo img {
	filter: none; /* colour on hover, matching the site's photo treatment */
}
.ofef-person-mono {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 60px;
	color: var(--ast-global-color-0);
	letter-spacing: .02em;
	z-index: 1;
}
.ofef-person-photo::after {
	content: "";
	position: absolute;
	right: -34px;
	bottom: -34px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 85, 0, .16);
}
.ofef-person-body { padding: 24px 26px 28px; text-align: left; }
.ofef-person-role {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ast-global-color-0);
}
.ofef-person-name {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 19px;
	color: var(--ast-global-color-2);
	margin: 6px 0 10px;
	line-height: 1.2;
}
.ofef-person-bio {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ast-global-color-7);
	margin: 0;
}

/* ---- Partner cards (acronym badge + name + description) ---- */
.ofef-partnercard {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	height: 100%;
}
/* Logo/mark tile — fixed square so real logos and the text fallback share the
   same footprint. Greyscale + muted at rest, full colour on hover (applied to
   the whole card so hovering anywhere lights up the mark). */
.ofef-partner-mark {
	flex: none;
	width: 66px;
	height: 66px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
}
.ofef-partner-mark--text {
	background: linear-gradient(150deg, var(--ast-global-color-4), #15201C);
}
.ofef-partner-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .8;
	transition: filter .25s ease, opacity .25s ease;
}
.ofef-partnercard:hover .ofef-partner-logo {
	filter: none;
	opacity: 1;
}
.ofef-partner-badge {
	color: var(--ast-global-color-0);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .02em;
	text-align: center;
	padding: 4px;
	filter: grayscale(1);
	transition: filter .25s ease;
}
.ofef-partnercard:hover .ofef-partner-badge {
	filter: none;
}
.ofef-partner-body h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ast-global-color-2);
	margin: 0 0 6px;
	line-height: 1.25;
}
.ofef-partner-body p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ast-global-color-7);
	margin: 0;
}

/* ---- Footer legal links row (aligns with the grid columns above; it lives
        inside .ofef-footer which already provides the max-width + side padding,
        so no extra centering/padding here) ---- */
.ofef-foot-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.ofef-foot-legal a {
	color: #8A9A92;
	text-decoration: none;
	font-size: 12.5px;
}
.ofef-foot-legal a:hover { color: var(--ast-global-color-0); }
.ofef-foot-credit {
	margin-left: auto;
	color: #6E7E76;
	font-size: 12.5px;
}
.ofef-foot-credit a { color: #8A9A92; }
.ofef-foot-credit a:hover { color: var(--ast-global-color-0); }
@media (max-width: 600px) {
	.ofef-foot-credit { margin-left: 0; }
}

/* ---- Cookie consent banner ---- */
.ofef-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	background: #15201C;
	border: 1px solid #2A3A33;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .35s ease, transform .35s ease;
}
.ofef-cookie.show { opacity: 1; transform: translateY(0); }
.ofef-cookie-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.ofef-cookie-inner p {
	margin: 0;
	color: #C9D6CF;
	font-size: 13.5px;
	flex: 1;
	min-width: 220px;
}
.ofef-cookie-inner a { color: var(--ast-global-color-0); text-decoration: underline; }
.ofef-cookie-actions { display: flex; gap: 10px; }
.ofef-cookie-actions button {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	border: 1px solid transparent;
}
.ofef-cookie-decline {
	background: transparent;
	border-color: #3A4A43;
	color: #D9E2DD;
}
.ofef-cookie-decline:hover { border-color: #D9E2DD; }
.ofef-cookie-accept {
	background: var(--ast-global-color-0);
	color: #15201C;
	border-color: var(--ast-global-color-0);
}
.ofef-cookie-accept:hover { background: var(--ast-global-color-1); }

/* ---- Social share row ---- */
.ofef-share {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 28px 0 4px;
	padding-top: 22px;
	border-top: 1px solid var(--ast-global-color, #E4E0D6);
	border-top-color: rgba(21, 32, 28, .1);
}
.ofef-share-label {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--ast-global-color-2);
	margin-right: 4px;
}
.ofef-share-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #E0DCD1;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ast-global-color-2);
	cursor: pointer;
	transition: .2s;
	padding: 0;
}
.ofef-share-btn svg { width: 15px; height: 15px; }
.ofef-share-btn:hover { color: #fff; transform: translateY(-2px); }
.ofef-share-btn.s-fb:hover { background: #1877F2; border-color: #1877F2; }
.ofef-share-btn.s-x:hover  { background: #000; border-color: #000; }
.ofef-share-btn.s-wa:hover { background: #25D366; border-color: #25D366; }
.ofef-share-btn.s-li:hover { background: #0A66C2; border-color: #0A66C2; }
.ofef-share-btn.s-copy:hover { background: var(--ast-global-color-0); border-color: var(--ast-global-color-0); color: #15201C; }
.ofef-share-btn.s-copy.copied { background: var(--ast-global-color-4); border-color: var(--ast-global-color-4); color: #fff; }
/* Share row on dark single-post themes stays legible via inherited color */

/* ---- Vision / Mission / Values cards (white cards, left-aligned, icon in
        a rounded gold-tint square) ---- */
.ofef-vmv .elementor-icon-box-wrapper {
	text-align: left;
}
.ofef-vmv .elementor-icon-box-icon {
	margin-bottom: 16px;
}
.ofef-vmv .elementor-icon-box-icon .elementor-icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 85, 0, .13);
	border-radius: 14px;
	font-size: 24px;
}

/* ---- Icon list: align the icon to the FIRST line, not the vertical centre
        of a multi-line item (fixes the off-looking icon on wrapped items) ---- */
.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start !important;
}
.elementor-widget-icon-list .elementor-icon-list-icon {
	margin-top: 4px;
}
.elementor-widget-icon-list .elementor-icon-list-text {
	line-height: 1.55;
}

/* ---- Core value cards (compact, centred: icon chip + name + descriptor) ---- */
.ofef-valcard .elementor-icon-box-wrapper { text-align: center; }
.ofef-valcard .elementor-icon-box-icon { margin-bottom: 12px; }
.ofef-valcard .elementor-icon-box-icon .elementor-icon {
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 85, 0, .13);
	border-radius: 50%;
	font-size: 20px;
}
.ofef-valcard .elementor-icon-box-title { font-size: 15.5px; font-weight: 800; margin-top: 2px; }
.ofef-valcard .elementor-icon-box-description { font-size: 12.5px; color: var(--ast-global-color-7); line-height: 1.5; }

/* =====================================================================
   MOBILE RESPONSIVENESS
   ===================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 921px) {
	/* Hero: collage goes full width below the text and centres. */
	.ofef-hero-media {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.ofef-collage { max-width: 430px; margin: 26px auto 0; }
	.ofef-hero-text { max-width: 100% !important; }
}

@media (max-width: 767px) {
	/* Elementor's "stretched section" JS can leave a fixed pixel width wider
	   than a phone viewport (content then runs off the right edge). Force real
	   full-width so columns/content stay inside the screen. */
	.elementor-section.elementor-section-stretched {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100%;
	}
	/* Give boxed content real side breathing room (was touching the edges). */
	.elementor-section.elementor-section-boxed > .elementor-container {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
		max-width: 100%;
	}
	/* Tame the big display type on small screens. */
	.elementor-page .elementor-widget-heading h1,
	.ofef-hero-text .elementor-widget-heading h1 { font-size: 32px !important; line-height: 1.12; }
	.elementor-page .elementor-widget-heading h2 { font-size: 25px !important; }
	.ofef-page-banner h1 { font-size: 30px; }
	/* Cards keep a little side spacing when stacked. */
	.elementor-column.ofef-card > .elementor-widget-wrap,
	.elementor-column.ofef-card > .elementor-element-populated { margin: 0 0 20px; }
	/* Stat strip blocks: comfortable height when stacked. */
	.ofef-stat { padding: 30px 20px; }
	/* Footer + collage never cause sideways scroll. The rotated collage tiles
	   overflow their box; on a phone that widens the whole document, which
	   Elementor's stretch JS then propagates to every section (pushing hero
	   text off-screen). Clip them on mobile. */
	.ofef-collage { max-width: 340px; overflow: hidden; padding: 10px; }
	/* Hero text column: guarantee side padding so the eyebrow/lead don't run
	   under the screen edge, and shrink the (unwrappable) script eyebrow. */
	.elementor-column.ofef-hero-text {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
	/* Bulletproof: cap the hero text widgets to the viewport so they can never
	   run off-screen even if the stretched section computes a wider width. */
	.ofef-hero-text .elementor-widget-container {
		max-width: 100%;
		overflow-wrap: break-word;
	}
	.ofef-eyebrow { font-size: 18px; }
}

/* ---- Icon-boxes placed directly on a green section: force light text
        (their default title is charcoal = invisible on green) ---- */
.ofef-icons-onGreen .elementor-icon-box-title,
.ofef-icons-onGreen .elementor-icon-box-title a {
	color: #FFFFFF !important;
}
.ofef-icons-onGreen .elementor-icon-box-description {
	color: #D9E6DF !important;
}
/* Icons sitting directly on green go white too (orange icon on green clashes). */
.ofef-icons-onGreen .elementor-icon-box-icon i,
.ofef-icons-onGreen .elementor-icon-box-icon svg {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}

/* ---- Donate: bank details block + equal-height give cards ---- */
.ofef-bankbox {
	margin-top: 8px;
	border-top: 1px solid #E4E0D6;
	padding-top: 16px;
	display: grid;
	gap: 12px;
}
.ofef-bankbox > div {
	font-size: 14px;
	color: var(--ast-global-color-2);
	font-weight: 600;
}
.ofef-bankbox span {
	display: block;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ast-global-color-7);
	font-weight: 700;
	margin-bottom: 2px;
}
.ofef-bankbox em { color: var(--ast-global-color-7); font-weight: 400; }
.ofef-give .elementor-icon-box-wrapper { text-align: left; }

/* ---- Programme detail: lead paragraph + sticky media ---- */
.ofef-lead {
	font-size: 18px !important;
	line-height: 1.6;
	color: var(--ast-global-color-2) !important;
	font-weight: 600;
	margin-bottom: 18px !important;
}
/* Programme detail media: a substantial portrait image that fills the column,
   lifted with a soft shadow and a decorative gold accent behind it (was a
   small, flat, natural-size image dwarfed by the taller text column). */
.ofef-sticky-media {
	position: relative;
}
.ofef-sticky-media::before {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -18px;
	width: 62%;
	height: 58%;
	background: repeating-linear-gradient(45deg, rgba(255, 85, 0,.16) 0 6px, transparent 6px 12px), rgba(255, 85, 0, .10);
	border-radius: 16px;
	z-index: 0;
}
.ofef-sticky-media .elementor-widget-container,
.ofef-sticky-media img {
	position: relative;
	z-index: 1;
}
.ofef-sticky-media .elementor-widget-container { width: 100%; }
.ofef-sticky-media img {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	box-shadow: 0 22px 48px rgba(21, 32, 28, .20);
}
/* Mobile: the two columns stack (Elementor handles that). Make the image a
   calmer landscape crop, give it breathing room above, and hide the decorative
   gold accent — it's a desktop flourish that only clutters a narrow screen. */
@media (max-width: 920px) {
	.ofef-sticky-media { margin-top: 26px; }
	.ofef-sticky-media img { aspect-ratio: 16 / 10; }
	.ofef-sticky-media::before { display: none; }
}

/* ---- Programme preview cards (flush-top B&W image, padded body) ---- */
.ofef-pcard {
	display: flex;
	flex-direction: column;
	background: var(--ast-global-color-6);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	text-decoration: none;
	height: 100%;
	transition: transform .2s, box-shadow .2s;
}
.ofef-pcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(21, 32, 28, .14);
}
.ofef-pcard-img {
	display: block;
	height: 200px;
	overflow: hidden;
}
.ofef-pcard-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	display: block;
}
.ofef-pcard-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-align: left;
}
.ofef-pcard-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.28;
	color: var(--ast-global-color-2);
}
.ofef-pcard-desc {
	font-family: 'Public Sans', sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ast-global-color-7);
}
.ofef-pcard-more {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ast-global-color-0);
	margin-top: 2px;
}
.ofef-pcard:hover .ofef-pcard-more {
	text-decoration: underline;
}

/* ---- Hero photo cascade (overlapping documentary-photo collage) ----
   Placeholder gradient tiles until client photography is supplied; the
   B&W/colour treatment and overlap match the mockup. */
.ofef-collage {
	position: relative;
	/* Explicit width + height (not min-height): the tiles are absolutely
	   positioned, so with no in-flow content the box would otherwise
	   shrink-wrap to 0 in either axis and the % tile sizes resolve to 0. */
	width: 100%;
	height: 480px;
	min-height: 480px;
}
.ofef-cph {
	position: absolute;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
		linear-gradient(135deg, #3A4540, #202925 55%, #39433E);
}
.ofef-cph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.05);
	transition: filter .35s ease, transform .35s ease;
}
/* Hover swap: B&W tiles reveal colour, the colour accent tile goes B&W. */
.ofef-cph:hover img {
	filter: none;
	transform: scale(1.03);
}
.ofef-cph span {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 11px;
	letter-spacing: .04em;
	color: #B9C4BE;
	padding: 10px 12px;
	text-transform: uppercase;
}
.ofef-cph-colour {
	border: 3px solid var(--ast-global-color-0);
}
.ofef-cph-colour img { filter: none; }
.ofef-cph-colour:hover img {
	filter: grayscale(1) contrast(1.05);
	transform: scale(1.03);
}
.ofef-cph-colour span { color: #FFF6E3; }
.ofef-cph-1 { width: 52%; height: 45%; top: 0;   left: 4%;  transform: rotate(-4deg); }
.ofef-cph-2 { width: 44%; height: 40%; top: 6%;  right: 0;  transform: rotate(3deg); }
.ofef-cph-3 { width: 40%; height: 38%; bottom: 8%; left: 0; transform: rotate(2deg); }
.ofef-cph-4 { width: 34%; height: 32%; bottom: 0; right: 22%; transform: rotate(-3deg); }
.ofef-cph-5 { width: 30%; height: 30%; bottom: 16%; right: 0; transform: rotate(5deg); }
.ofef-collage-heart {
	position: absolute;
	top: -14px;
	right: 8%;
	font-size: 26px;
	color: var(--ast-global-color-0);
	z-index: 2;
}
.ofef-collage-dots {
	position: absolute;
	left: -6px;
	bottom: -8px;
	letter-spacing: 5px;
	color: var(--ast-global-color-0);
	font-size: 14px;
}
@media (max-width: 860px) {
	.ofef-collage { height: 360px; min-height: 360px; margin-top: 14px; }
}

/* ---- B&W documentary photo treatment (colour reveal on hover) ---- */
.ofef-photo-bw img {
	filter: grayscale(1) contrast(1.05);
	border-radius: 14px;
	transition: filter .45s ease;
}
.ofef-photo-bw:hover img,
a:hover .ofef-photo-bw img,
.ofef-pcard:hover .ofef-pcard-img img,
.ofef-news-card:hover .ofef-news-thumb img {
	filter: none;
}
.ofef-pcard-img img,
.ofef-news-thumb img {
	transition: filter .45s ease;
}
.ofef-photo-frame img {
	border: 4px solid var(--ast-global-color-0);
	border-radius: 14px;
}

/* ---- Stat strip blocks ---- */
.ofef-stat {
	text-align: center;
	color: var(--ast-global-color-6);
	padding: 38px 26px;
}
.ofef-stat b,
.ofef-stat .ofef-stat-number {
	display: block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: clamp(26px, 3vw, 40px);
	font-variant-numeric: tabular-nums;
}
.ofef-stat--green { background: var(--ast-global-color-4); }
.ofef-stat--gold  { background: var(--ast-global-color-0); color: var(--ast-global-color-2); }
.ofef-stat--charcoal { background: var(--ast-global-color-2); }

/* ---- Category/status badge ---- */
.ofef-badge {
	display: inline-block;
	background: var(--ast-global-color-0);
	color: var(--ast-global-color-2);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 12px;
}

/* ---- Contact form (styles the ofef-core [ofef_contact_form] output) ---- */
.ofef-contact-form {
	background: var(--ast-global-color-6);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	padding: 30px;
	display: grid;
	gap: 4px;
}
.ofef-contact-form label {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	display: block;
	margin-bottom: 6px;
}
.ofef-contact-form input,
.ofef-contact-form select,
.ofef-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E4E0D6;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	background: var(--ast-global-color-5);
}
.ofef-contact-form input:focus,
.ofef-contact-form select:focus,
.ofef-contact-form textarea:focus {
	outline: 2px solid var(--ast-global-color-0);
}
.ofef-contact-notice {
	border-radius: 10px;
	padding: 12px 16px;
	background: var(--ast-global-color-5);
	border-left: 4px solid var(--ast-global-color-0);
	font-weight: 600;
}

/* ---- Volunteer form (shares .ofef-contact-form styling) ---- */
.ofef-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 18px;
}
.ofef-form-row > p { margin: 0; }
.ofef-volunteer-form > p { margin: 0 0 2px; }
.ofef-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ofef-form-notice {
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 4px;
	background: var(--ast-global-color-5);
	border-left: 4px solid var(--ast-global-color-0);
	font-weight: 600;
	line-height: 1.5;
}
.ofef-form-notice.is-success { border-left-color: var(--ast-global-color-4); }
.ofef-form-notice.is-error { border-left-color: #C0392B; }
.ofef-check-list .elementor-icon-list-icon i { color: var(--ast-global-color-4); }
.ofef-formcard { align-self: start; }
@media (max-width: 767px) {
	.ofef-form-row { grid-template-columns: 1fr; }
}

/* Programmes CPT archive: Astra wraps the content in a flex .ast-container,
   which made the full-bleed banner and the card grid sit side-by-side as
   flex children. Force the archive content area to a full-width block so the
   banner spans the top and the grid sits centered beneath it. */
.post-type-archive-programme .site-content > .ast-container {
	display: block;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.post-type-archive-programme #primary,
.post-type-archive-programme .content-area,
.post-type-archive-programme .ast-container > #primary {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ---- Page banner (used by archive-programme.php; Elementor pages build
        their own banner sections with the same look) ---- */
.ofef-page-banner {
	background:
		linear-gradient(rgba(21, 32, 28, .85), rgba(42, 122, 92, .82)),
		repeating-linear-gradient(-45deg, #26332D 0 4px, #182420 4px 10px);
	color: #fff;
	padding: 74px 24px;
}
.ofef-page-banner .ofef-banner-inner {
	max-width: 1160px;
	margin: 0 auto;
}
.ofef-page-banner h1 {
	color: #fff;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 800;
	margin: .1em 0;
}
.ofef-page-banner p {
	color: #C9D6CF;
	max-width: 60ch;
}
.ofef-banner-crumb {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8DA096;
	margin-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.ofef-banner-crumb a {
	color: #B9C4BE;
	text-decoration: none;
	transition: color .15s;
}
.ofef-banner-crumb a:hover {
	color: var(--ast-global-color-0);
}
.ofef-crumb-sep {
	color: #5B6B63;
	font-weight: 400;
}
.ofef-crumb-current {
	color: var(--ast-global-color-0);
}
/* The breadcrumb sits inside an Elementor text-editor widget; kill its default
   bottom margin so spacing is controlled by the breadcrumb itself. */
.ofef-page-banner .ofef-banner-crumb,
.elementor-widget-text-editor .ofef-banner-crumb { margin-top: 0; }

/* ---- News / programme card grids (shortcode + archive template) ---- */
.ofef-news-grid,
.ofef-programme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.ofef-archive-wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 64px 24px;
}
.ofef-news-thumb {
	display: block;
	min-height: 170px;
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px),
		linear-gradient(135deg, #3A4540, #202925 55%, #39433E);
}
.ofef-news-thumb img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
}
.ofef-news-body {
	padding: 20px 22px;
}
.ofef-news-body h2,
.ofef-news-body h3 {
	font-size: 17px;
	margin: 10px 0 6px;
}
.ofef-news-body h2 a,
.ofef-news-body h3 a {
	text-decoration: none;
	color: var(--ast-global-color-2);
}
.ofef-news-body p {
	font-size: 13.5px;
	color: var(--ast-global-color-7);
}
.ofef-news-date {
	font-size: 12.5px;
	color: var(--ast-global-color-7);
}
.ofef-learn {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--ast-global-color-0);
	text-decoration: none;
}
.ofef-news-empty {
	text-align: center;
	color: var(--ast-global-color-7);
	padding: 40px 0;
}

/* ---- Vertical milestones timeline (Our Story) ---- */
.ofef-tl {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
.ofef-tl::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #E4E0D6;
	transform: translateX(-50%);
}
.ofef-tl-item {
	position: relative;
	width: calc(50% - 34px);
	background: var(--ast-global-color-6);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(21, 32, 28, .09);
	padding: 20px 22px;
	margin-bottom: 30px;
	box-sizing: border-box;
}
.ofef-tl-item:nth-child(odd) {
	margin-left: auto;
}
.ofef-tl-item::before {
	content: "";
	position: absolute;
	top: 24px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ast-global-color-0);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--ast-global-color-0);
}
.ofef-tl-item:nth-child(odd)::before {
	left: -45px;
}
.ofef-tl-item:nth-child(even)::before {
	right: -45px;
}
.ofef-tl-item .ofef-tl-year {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	color: var(--ast-global-color-4);
	font-size: 15px;
	display: block;
}
.ofef-tl-item h3 {
	font-size: 16px;
	margin: 4px 0;
}
.ofef-tl-item p {
	font-size: 14px;
	color: var(--ast-global-color-7);
	margin: 4px 0 0;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.ofef-news-grid,
	.ofef-programme-grid {
		grid-template-columns: 1fr;
	}
	.ofef-tl::before {
		left: 8px;
	}
	.ofef-tl-item {
		width: auto;
		margin-left: 34px !important;
	}
	.ofef-tl-item::before {
		left: -33px !important;
		right: auto !important;
	}
}

/* =====================================================================
   Accessibility
   - Clear, brand-coloured keyboard focus ring on every interactive
     element (only for keyboard users, via :focus-visible, so mouse
     clicks don't show a ring).
   - Respect users who ask for reduced motion.
   ===================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ofef-share-btn:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--ast-global-color-0);
	outline-offset: 2px;
	border-radius: 4px;
}
/* On dark sections a gold ring can wash out — add a dark halo for contrast. */
.ofef-footer a:focus-visible,
.ofef-page-banner a:focus-visible {
	outline-color: var(--ast-global-color-0);
	box-shadow: 0 0 0 5px rgba(21, 32, 28, .55);
}

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

/* =====================================================================
   Photo gallery ([ofef_gallery]) + lightbox
   ===================================================================== */
/* Masonry via CSS columns: each photo keeps its natural aspect ratio (no crop,
   no filler background), tiles pack vertically into columns. */
.ofef-gallery {
	column-count: 4;
	column-gap: 14px;
}
.ofef-gallery-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	break-inside: avoid;
	box-shadow: 0 8px 22px rgba(21, 32, 28, .10);
}
.ofef-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(1) contrast(1.03);
	transition: transform .4s ease, filter .3s ease;
}
.ofef-gallery-item:hover img {
	transform: scale(1.04);
	filter: none;
}
.ofef-gallery-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(21, 32, 28, .35) 100%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.ofef-gallery-item:hover::after { opacity: 1; }
.ofef-gallery-empty { text-align: center; color: var(--ast-global-color-7); }
@media (max-width: 900px) { .ofef-gallery { column-count: 3; } }
@media (max-width: 600px) { .ofef-gallery { column-count: 2; column-gap: 10px; } .ofef-gallery-item { margin-bottom: 10px; } }

/* Lightbox */
.ofef-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(16, 25, 21, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ofef-lightbox[hidden] { display: none; }
.ofef-lb-img {
	max-width: 90vw;
	max-height: 86vh;
	border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.ofef-lb-close,
.ofef-lb-prev,
.ofef-lb-next {
	position: absolute;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	cursor: pointer;
	line-height: 1;
	transition: background .2s ease, transform .2s ease;
}
.ofef-lb-close {
	top: 20px;
	right: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 26px;
}
.ofef-lb-prev,
.ofef-lb-next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 30px;
}
.ofef-lb-prev { left: 20px; }
.ofef-lb-next { right: 20px; }
.ofef-lb-close:hover,
.ofef-lb-prev:hover,
.ofef-lb-next:hover { background: var(--ast-global-color-0); color: var(--ast-global-color-2); border-color: var(--ast-global-color-0); }
.ofef-lb-prev:hover { transform: translateY(-50%) scale(1.08); }
.ofef-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.ofef-lb-count {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, .8);
	font-size: 13px;
	letter-spacing: .05em;
}
@media (max-width: 600px) {
	.ofef-lb-prev { left: 8px; }
	.ofef-lb-next { right: 8px; }
	.ofef-lb-close { top: 12px; right: 12px; }
}