/**
 * Foundation Core — site design system layer.
 *
 * Home for redesign CSS that used to live only in the Elementor Kit's
 * "Custom CSS" textarea (a DB-stored blob with no version history). Token
 * values mirror docs/DESIGN-SYSTEM.md exactly — that document is the source
 * of truth; if the two ever disagree, the doc is right and this file is
 * stale.
 *
 * Elementor's own generated per-widget CSS still handles layout/spacing set
 * in the editor. This file only supplies things Elementor has no control
 * for: the card/hero/progress component system, and small interaction
 * polish (hover states, focus rings) applied via CSS classes added to
 * widgets/containers in the editor's "CSS Classes" field.
 */

:root {
	--color-primary: #D32226;
	--color-primary-dark: #A7090A;
	--color-secondary: #755A1E;
	--color-accent: #F56B08;
	--color-ink: #1A1512;
	--color-ink-muted: #5B5147;
	--color-surface: #FFFFFF;
	--color-surface-warm: #FAF8F4;
	--color-border: #E8E2D8;
	--color-success: #2F7D4F;
	--color-error: #B3261E;

	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;

	--radius: 6px;
	--shadow-card: 0 2px 8px rgba(26, 21, 18, 0.06);
	--shadow-card-hover: 0 8px 24px rgba(26, 21, 18, 0.10);

	--font-script: 'Alex Brush', cursive; /* already loaded by the Elementor Kit's "Script Accent" typography slot */
}

/* ---------------------------------------------------------------------
   Mobile section padding — every top-level section container carries a
   flat 32px left/right padding (Elementor's own control, set once for
   all breakpoints, no mobile override configured). At 375px wide
   that's 64px — 17% of the viewport — spent on padding before any
   content starts. Halving it on narrow screens gives content
   meaningfully more room without touching desktop/tablet.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.e-con.e-parent:not(.fnd-full-bleed) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ---------------------------------------------------------------------
   Section headers — shared by every homepage section. Applied via the
   `fnd-section-title`/`fnd-section-subtitle` CSS classes on the
   heading/text-editor widgets themselves (in addition to any
   section-specific class already there, e.g. on the photo-background
   Events section). Left-aligned, smaller than the Kit's default global
   heading size, tight spacing between title/subtitle/content.
   ------------------------------------------------------------------ */

.fnd-section-title,
.fnd-section-subtitle {
	width: 100% !important;
	flex-basis: 100% !important;
}

/* The section containers use Elementor's default flex `gap` between
   direct children (~20px), which stacks additively on top of any
   margin set here — margin and flex-gap don't collapse. Zeroing the
   container's own gap wherever a section-title is a direct child
   means these margins are the ONLY source of spacing, so they can be
   trusted to tighten things rather than compound them. */
.e-con:has(> .fnd-section-title),
.e-con-inner:has(> .fnd-section-title) {
	gap: 0 !important;
}

.fnd-section-title,
.fnd-section-title .elementor-heading-title {
	text-align: left !important;
	font-size: 1.875rem !important;
	margin: 0 0 4px !important;
}

.fnd-section-subtitle {
	margin-top: 0 !important;
	margin-bottom: 16px !important;
}

.fnd-section-subtitle p {
	text-align: left !important;
	font-size: 0.9375rem !important;
	margin: 0 !important;
}

/* Elementor gives every nested container's inner e-con-inner a default
   10px padding whether or not the container's own JSON padding is set
   to 0 — same root cause already found and fixed for the footer
   columns. Generic escape hatch for any wrapper that needs to be
   truly flush. */
.fnd-no-pad,
.fnd-no-pad > .e-con-inner {
	padding: 0 !important;
}

@media (max-width: 767px) {
	.fnd-section-title,
	.fnd-section-title .elementor-heading-title {
		font-size: 1.5rem !important;
	}
}

/* ---------------------------------------------------------------------
   Cards — Message / Testimony / Prayer Request / Project / Team Member
   All Loop Item templates share this markup shape:
   .fnd-card > .fnd-card__media (img or .fnd-card__media--placeholder)
              > .fnd-card__body > .fnd-card__meta, .fnd-card__title,
                                   .fnd-card__excerpt, .fnd-card__cta
   ------------------------------------------------------------------ */

.fnd-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fnd-card:hover,
.fnd-card:focus-within {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.fnd-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-surface-warm);
}

.fnd-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.fnd-card:hover .fnd-card__media img {
	transform: scale(1.04);
}

/* Team Member cards use a square crop instead of 16:9 */
.fnd-card--team .fnd-card__media {
	aspect-ratio: 1 / 1;
}

/* Branded fallback when a post has no featured image — never a stock
   photo or a stretched default icon. Flame-motif wordmark on warm
   surface, matching the brand's own circular badge treatment. */
.fnd-card__media--placeholder {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-surface-warm) 0%, #F3E9DA 100%);
	color: var(--color-primary);
}

.fnd-card__media--placeholder svg {
	width: 25%;
	height: 25%;
	opacity: 0.55;
}

.fnd-card__body {
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1;
}

.fnd-card__meta {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8125rem;
	color: var(--color-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fnd-card__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.15rem !important;
	line-height: 1.3;
	color: var(--color-ink);
	margin: 0;
}

.fnd-card__title a {
	color: inherit;
	text-decoration: none;
}

.fnd-card__title a:hover {
	color: var(--color-primary);
}

.fnd-card__excerpt {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem;
	color: var(--color-ink-muted);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.fnd-card__cta {
	margin-top: var(--space-2);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Project cards: "Donate" + "View Project" as one joined segmented button
   group — same row (including on a narrow phone screen), sharing a single
   outer radius that matches the card's own (var(--radius)) rather than
   each button rounding independently. The group div carries the radius +
   overflow:hidden; both buttons render square-cornered inside it, so only
   the group's outer corners end up rounded and the shared middle edge is
   a plain divider. Requested 2026-09-07. The donate button shows "Donate"
   rather than the single-project-page's full "Donate to This Project" —
   see render_project_donate_trigger_compact() in Card_Shortcodes.php — so
   the group stays one line even at a 320-375px viewport. */
.fnd-card__actions {
	display: flex;
	align-items: stretch;
	margin-top: var(--space-2);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: 0 1px 4px rgba(26, 21, 18, 0.1);
}

.fnd-card__actions .fnd-donate {
	flex: 1 1 50%;
	min-width: 0;
}

.fnd-card__actions .fnd-donate__trigger {
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	border-radius: 0 !important;
	padding: 12px !important;
	font-size: 0.875rem !important;
	line-height: 1.4 !important;
	white-space: nowrap;
	box-shadow: none;
}

.fnd-card__actions .fnd-donate__trigger:hover {
	transform: none;
	box-shadow: none;
}

.fnd-card__actions .fnd-card__cta {
	flex: 1 1 50%;
	min-width: 0;
	margin: 0;
	justify-content: center;
	padding: 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	background: var(--color-surface-warm);
	color: var(--color-ink);
	border-left: 1px solid var(--color-border);
	white-space: nowrap;
	box-sizing: border-box;
}

.fnd-card__actions .fnd-card__cta:hover {
	background: var(--color-border);
	color: var(--color-ink);
	text-decoration: none;
}

/* No donate button on this project (e.g. no linked GiveWP form yet) —
   "View Project" ends up first-child instead of second, still getting the
   group's card-radius treatment but without a divider on its (now only) edge. */
.fnd-card__actions .fnd-card__cta:first-child {
	border-left: none;
}

.fnd-card__cta:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* Project cards: funding progress */
.fnd-progress {
	margin-top: var(--space-1);
}

.fnd-progress__track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--color-border);
	overflow: hidden;
}

.fnd-progress__fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: 999px;
}

.fnd-progress__label {
	display: flex;
	justify-content: space-between;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8125rem;
	color: var(--color-ink-muted);
	margin-top: 4px;
}

.fnd-progress__online {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8125rem;
	color: var(--color-ink-muted);
	margin-top: 4px;
}

/* "Donate to This Project" / "Give to <Fund>" — a button that reveals its
   GiveWP form in a centered dialog overlay, rather than the form sitting
   permanently expanded on the page. See render_donate_trigger() in
   Card_Shortcodes.php for the full rationale: .fnd-donate__panel stays a
   real, full-width block in the layout at all times (position:fixed,
   visibility/opacity toggled) rather than display:none, because GiveWP's
   onpage embed measures container width once at mount and renders a
   near-invisible 1px sliver if that width was ever 0 — the exact bug
   fixed in commit 464eeb6 for the old always-visible layout. Behavior in
   assets/js/donation-modal.js. Modernized 2026-09-07. */
/* Elementor's global Kit CSS (.elementor-kit-5 button, plus a base
   [type="button"] reset) styles every <button> on the site with higher
   selector specificity than a single class, silently overriding
   background/border/radius/padding here. !important matches the existing
   pattern already used against this same Kit CSS elsewhere in this file
   (see .elementor-element-fndsplitleft1/right1 above). */
.fnd-donate__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 24px !important;
	margin-top: var(--space-2);
	border: none !important;
	border-radius: 999px !important;
	background: var(--color-primary) !important;
	color: #fff !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(26, 21, 18, 0.16);
}

.fnd-donate__trigger:hover {
	background: var(--color-primary-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(26, 21, 18, 0.22);
}

.fnd-donate__trigger:active {
	transform: translateY(0);
}

.fnd-donate__panel {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	padding: 5vh 16px;
	overflow-x: hidden;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.fnd-donate__panel.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.fnd-donate__panel-backdrop {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	background: rgba(26, 21, 18, 0.55);
	backdrop-filter: blur(2px);
}

.fnd-donate__panel-dialog {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--color-surface);
	border-radius: 20px;
	padding: 32px 20px 20px;
	box-shadow: 0 20px 60px rgba(26, 21, 18, 0.3);
	transform: translateY(12px) scale(.98);
	transition: transform .2s ease;
}

.fnd-donate__panel.is-open .fnd-donate__panel-dialog {
	transform: translateY(0) scale(1);
}

.fnd-donate__panel-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--color-surface-warm) !important;
	color: var(--color-ink) !important;
	padding: 0 !important;
	cursor: pointer;
	transition: background-color .15s ease;
}

.fnd-donate__panel-close:hover {
	background: var(--color-border) !important;
}

.fnd-donate__panel-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--color-ink);
	margin: 0 0 20px;
	padding-right: 32px;
}

.fnd-donate__panel-body {
	width: 100%;
}

body.fnd-donate-lock-scroll {
	overflow: hidden;
}

@media (max-width: 599px) {
	.fnd-donate__panel {
		padding: 0;
		align-items: stretch;
	}

	.fnd-donate__panel-dialog {
		max-width: none;
		max-height: none;
		min-height: 100%;
		border-radius: 0;
	}
}

/* Project single template's side-by-side details/donate split
   (fndsplitrow1 in Project Single, post 71). Elementor's own generated
   width (50%) plus its 48px flex-gap add up to more than 100% of the row's
   actual content width, so the two columns overflowed and flex-wrap pushed
   the second one onto its own line below the first — looked like a plain
   single-column stack instead of a side-by-side split. calc() reserves
   room for the gap up front so both columns actually fit on one row.
   Found and fixed 2026-08-25. */
.elementor-element-fndsplitleft1,
.elementor-element-fndsplitright1 {
	width: calc(50% - 24px) !important;
	flex-basis: calc(50% - 24px) !important;
}

@media (max-width: 767px) {
	.elementor-element-fndsplitleft1,
	.elementor-element-fndsplitright1 {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* Give page giving options (General Fund / Tithe / Offering / Mission
   Support) — appealing cards in the same brand language as "Ways to Give"
   below them (colored icon badge, card border/shadow, brand accent
   colors), but a distinct component, not a reuse of .fnd-involve-card:
   that section was a style reference, not a template to clone. A circular
   icon badge instead of a rounded-square one, no background watermark,
   and a real filled pill "Give Now" button instead of a text link, since
   this triggers a payment flow rather than navigating. Requested
   2026-09-07; replaces the old plain .fnd-give-fund-links component (see
   render_donate_card() / render_give_fund_links() in Card_Shortcodes.php).
   Rendered as a real <button> since it opens a dialog, which means
   undoing both the browser's default button chrome and Elementor's global
   Kit CSS that forces background/padding/radius/font onto every <button>
   site-wide (the same fight already fought for .fnd-donate__trigger
   above). */
/* 20px, not var(--space-3)/24px: matches the 20px flex gap Elementor's own
   section (.e-con-inner) already applies between the General Fund card and
   this grid, so the two gaps read as equal instead of the grid's own
   card-to-card spacing looking tighter than the space above it. */
.fnd-give-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.fnd-give-option {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	width: 100% !important;
	min-width: 0;
	text-align: left !important;
	cursor: pointer;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius) !important;
	padding: var(--space-3) !important;
	box-shadow: var(--shadow-card);
	transition: box-shadow .2s ease, transform .2s ease;
	font-family: inherit !important;
	/* .fnd-pattern-subtle needs position:relative + overflow:hidden, which
	   it already sets !important — listed here only as documentation of
	   why this box can clip/position the texture layer despite no explicit
	   position/overflow declared directly on this rule. */
}

.fnd-give-option:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* .fnd-pattern-subtle's ::before texture layer paints at z-index:0 — bump
   every visible piece above it explicitly (plain non-positioned flex
   children don't reliably win that stack otherwise; same reasoning as
   the existing .fnd-cta-pattern > .e-con-inner rule elsewhere in this
   file). */
.fnd-give-option__icon,
.fnd-give-option__body,
.fnd-give-option__cta {
	position: relative;
	z-index: 1;
}

.fnd-give-option__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	margin-bottom: var(--space-2);
	flex-shrink: 0;
}

.fnd-give-option__icon svg {
	width: 22px;
	height: 22px;
}

.fnd-give-option--red .fnd-give-option__icon { background: var(--color-primary); }
.fnd-give-option--gold .fnd-give-option__icon { background: var(--color-secondary); }
.fnd-give-option--orange .fnd-give-option__icon { background: var(--color-accent); }
.fnd-give-option--dark-red .fnd-give-option__icon { background: var(--color-primary-dark); }

/* Plain wrapper around title+text — display:contents in the default
   stacked card so it adds no box of its own (title/text behave exactly
   like direct flex-column children); .fnd-give-option--wide below turns
   it into a real flex column so title+text stack while sitting beside the
   icon and button in one row. */
.fnd-give-option__body {
	display: contents;
}

.fnd-give-option__title {
	display: block;
	white-space: normal;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-ink);
	margin-bottom: 4px;
}

.fnd-give-option__text {
	display: block;
	width: 100%;
	min-width: 0;
	white-space: normal;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-3);
}

.fnd-give-option__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-top: auto;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	color: #fff;
	transition: transform .15s ease;
}

.fnd-give-option--red .fnd-give-option__cta { background: var(--color-primary); }
.fnd-give-option--gold .fnd-give-option__cta { background: var(--color-secondary); }
.fnd-give-option--orange .fnd-give-option__cta { background: var(--color-accent); }
.fnd-give-option--dark-red .fnd-give-option__cta { background: var(--color-primary-dark); }

.fnd-give-option:hover .fnd-give-option__cta {
	transform: translateX(3px);
}

/* The General Fund card — the page's one featured/primary giving option —
   full width and a shorter, horizontal layout (icon | title+text | button
   in one row) instead of the stacked default the 3 fund cards use, per
   explicit request 2026-09-07. Reverts to the stacked layout below 600px,
   where a 3-item row would get too cramped to read. */
.fnd-give-option--wide {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4) !important;
}

.fnd-give-option--wide .fnd-give-option__icon {
	margin-bottom: 0;
}

.fnd-give-option--wide .fnd-give-option__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.fnd-give-option--wide .fnd-give-option__title {
	margin-bottom: 2px;
}

.fnd-give-option--wide .fnd-give-option__text {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.fnd-give-option--wide {
		flex-direction: column;
		align-items: flex-start;
	}

	.fnd-give-option--wide .fnd-give-option__body {
		display: contents;
	}

	.fnd-give-option--wide .fnd-give-option__cta {
		margin-top: var(--space-2);
	}
}

/* Status pill, used on Prayer Request cards (active/answered) and
   Project cards (active/completed/paused) */
.fnd-pill {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-surface-warm);
	color: var(--color-secondary);
	border: 1px solid var(--color-border);
}

.fnd-pill--active {
	background: rgba(47, 125, 79, 0.1);
	color: var(--color-success);
	border-color: rgba(47, 125, 79, 0.25);
}

.fnd-pill--answered,
.fnd-pill--completed {
	background: rgba(211, 34, 38, 0.08);
	color: var(--color-primary-dark);
	border-color: rgba(211, 34, 38, 0.2);
}

/* ---------------------------------------------------------------------
   Hero — photo-based hero used on About / Messages / Testimonies /
   Prayer Wall / Projects (single & archive), matching the homepage
   slider's overlay treatment.
   ------------------------------------------------------------------ */

.fnd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	overflow: hidden;
	padding: 0 var(--space-3) var(--space-6);
}

.fnd-hero__image {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	z-index: 0;
}

.fnd-hero__overlay {
	position: absolute;
	inset: 0;
	/* Three stops, not two: darker right at the top (so the header's white
	   nav/logo stays legible over the photo it's floating on), lighter
	   through the upper-middle (so the photo itself still reads), darker
	   again toward the bottom (so the heading/CTAs stay legible) — a
	   vignette rather than a flat top-to-bottom fade. */
	background: linear-gradient(180deg, rgba(26, 21, 18, 0.55) 0%, rgba(26, 21, 18, 0.15) 22%, rgba(26, 21, 18, 0.72) 100%);
	z-index: 1;
}

.fnd-hero__content {
	position: relative;
	z-index: 2;
	color: #fff;
	max-width: 900px;
}

.fnd-hero__eyebrow {
	font-family: var(--font-script);
	font-size: 1.5rem;
	color: #F5C9A8;
	display: block;
	margin-bottom: var(--space-1);
}

.fnd-hero__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem) !important;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	/* !important: the Elementor Kit's global heading typography sets an
	   explicit `.elementor-kit-5 h1{color:...}` (dark ink) — since that's
	   an explicit rule on the element itself rather than an inherited
	   value, it wins over the white set on the parent .fnd-hero__content
	   regardless of specificity (inheritance always loses to any explicit
	   match). Confirmed via a full matched-rules scan, not assumed. */
	color: #fff !important;
}

.fnd-hero__subtitle {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	max-width: 640px;
}

/* Homepage hero — taller, video-capable variant. Same overlay/content
   markup as the photo .fnd-hero above; adds a background <video> (tablet+
   only, to keep mobile visitors off a multi-MB autoplay download — the
   poster <img> covers mobile instead) and a two-button action row,
   matching the reference layout's single bold statement + two CTAs
   pattern rather than the old rotating 3-slide carousel. */
.fnd-hero--tall {
	min-height: 640px;
}

/* Video plays at every breakpoint, mobile included — the user
   confirmed they want it that way despite the data/battery tradeoff.
   The one exception left is prefers-reduced-motion below, which is an
   accessibility signal, not a screen-size one. */
.fnd-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	display: block;
}

.fnd-hero__image--mobile-only {
	display: none;
}

/* Respect reduced-motion preference: never autoplay, fall back to the
   still poster frame at any breakpoint. */
@media (prefers-reduced-motion: reduce) {
	.fnd-hero__video {
		display: none;
	}

	.fnd-hero__image--mobile-only {
		display: block;
	}
}

.fnd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--space-2);
}

.fnd-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding: 11px 20px;
	border-radius: var(--radius);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* color: #fff !important on both variants below: the Elementor Kit's
   global link color (`.elementor-kit-5 a{color:#D32226}`) matches any
   plain <a> — including these — at higher specificity (0,1,1) than a
   single class selector, and loads after site.css. Same conflict class
   as the hero title's h1 color, confirmed the same way. */
.fnd-hero__btn--primary {
	background: var(--color-primary);
	color: #fff !important;
	border: 1.5px solid var(--color-primary);
}

.fnd-hero__btn--primary:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: #fff !important;
	transform: translateY(-1px);
}

.fnd-hero__btn--secondary {
	background: rgba(255, 255, 255, 0.08);
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.fnd-hero__btn--secondary:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff !important;
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.fnd-hero--tall {
		min-height: 520px;
	}

	.fnd-hero {
		padding-bottom: var(--space-5);
	}

	.fnd-hero__title {
		font-size: 1.75rem !important;
	}

	.fnd-hero__btn {
		padding: 8px 14px;
		font-size: 0.75rem;
	}
}

/* ---------------------------------------------------------------------
   Upcoming Events — homepage teaser (real events only; graceful empty
   state when none are scheduled, same principle as Projects/Testimonies
   launching empty rather than showing invented placeholder content).
   ------------------------------------------------------------------ */

.fnd-events-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	width: 100%;
}

@media (max-width: 1024px) {
	.fnd-events-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.fnd-events-grid {
		grid-template-columns: 1fr;
	}
}

.fnd-events-empty {
	width: 100%;
	max-width: 520px;
	text-align: center;
	padding: var(--space-5) var(--space-3);
	border: 1.5px dashed var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface-warm);
}

/* Rounded corners on the Daily Prayer Charge video callout — Elementor's
   core Video widget has no border-radius control of its own. */
.fnd-video-rounded,
.fnd-video-rounded .elementor-wrapper,
.fnd-video-rounded .elementor-custom-embed-image-overlay {
	border-radius: 20px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Daily Prayer Charge callout — eyebrow, schedule badge, scripture
   pull-quote. The video/text 2-column layout itself stays plain
   Elementor containers; these classes just style the extra pieces.
   ------------------------------------------------------------------ */

.fnd-prayer-callout__eyebrow {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}

.fnd-prayer-callout__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--space-2) 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
}

.fnd-prayer-callout__badge svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.fnd-prayer-callout__quote {
	margin: var(--space-2) 0 0;
	padding-left: var(--space-2);
	border-left: 3px solid var(--color-primary);
	font-family: 'Open Sans', sans-serif;
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--color-ink-muted);
}

.fnd-events-empty p {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	color: var(--color-ink-muted);
	margin: 0 0 var(--space-2);
}

/* Calendar-tile date badge, overlaid on an Event card's media (top-left,
   the classic "torn calendar page" convention). .fnd-card__media needs
   position:relative as the positioning context — added narrowly here
   rather than on the shared .fnd-card__media rule so other card types
   are untouched. */
.fnd-card__media {
	position: relative;
}

.fnd-cal-tile {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	background: var(--color-surface);
	box-shadow: 0 2px 8px rgba(26, 21, 18, 0.2);
	overflow: hidden;
}

.fnd-cal-tile__month {
	width: 100%;
	padding: 3px 0;
	background: var(--color-primary);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}

.fnd-cal-tile__day {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-ink);
}

/* ---------------------------------------------------------------------
   Upcoming Events — full-bleed photo section variant. The heading/
   subtitle/grid/empty-state markup is identical to the plain version
   above; this just recolors things for the dark photo background using
   Elementor's own native container background-image + overlay (no
   custom shortcode markup needed for the photo/scrim itself).
   ------------------------------------------------------------------ */

/* !important on min-height: Elementor's own `.e-con{min-height:var(--min-
   height,...)}` base rule shares this class selector's specificity and
   loads later, so a plain declaration loses the tie — same recurring
   conflict class documented elsewhere in this file. */
.fnd-events-full {
	position: relative;
	min-height: 620px !important;
	display: flex;
	align-items: center;
}

.fnd-events-full .fnd-events-full__heading {
	color: #fff;
}

.fnd-events-full .fnd-events-full__subtitle {
	color: rgba(255, 255, 255, 0.85);
}

.fnd-events-full .fnd-events-empty {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(4px);
}

.fnd-events-full .fnd-events-empty p {
	color: rgba(255, 255, 255, 0.9);
}

.fnd-events-full .fnd-events-empty .fnd-card__cta {
	color: #fff;
}

@media (max-width: 767px) {
	.fnd-events-full {
		min-height: 480px !important;
	}
}

/* ---------------------------------------------------------------------
   Events calendar ([foundation_events_calendar]) — a real month grid
   instead of a card list / plain-text empty state. Frosted-glass card
   so it reads as a distinct object sitting on the full-bleed photo
   background rather than a random floating grid of numbers.
   ------------------------------------------------------------------ */

.fnd-cal {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 14px;
	padding: var(--space-4);
	width: 100%;
	max-width: 460px;
	color: #fff;
}

/* Desktop: spread the card into a landscape layout — date grid on the
   left at a fixed comfortable width, event list filling the remaining
   width on the right — instead of one narrow column stranded in a much
   wider full-bleed section. */
@media (min-width: 992px) {
	.fnd-cal {
		max-width: 1100px;
		display: grid;
		grid-template-columns: 400px 1fr;
		column-gap: var(--space-5);
	}

	.fnd-cal__header {
		grid-column: 1 / -1;
	}

	.fnd-cal__weekdays {
		grid-column: 1;
	}

	.fnd-cal__grid {
		grid-column: 1;
	}

	.fnd-cal__list,
	.fnd-cal__empty {
		grid-column: 2;
		grid-row: 2 / span 2;
		margin-top: 0;
		padding-top: 0;
		padding-left: var(--space-4);
		border-top: none;
		border-left: 1px solid rgba(255, 255, 255, 0.18);
		align-self: start;
		max-height: 400px !important;
		overflow-y: auto;
	}

	.fnd-cal__empty {
		text-align: left;
	}
}

.fnd-cal__header {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	text-align: center;
	color: #fff !important;
	margin: 0 0 var(--space-2) !important;
}

.fnd-cal__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: var(--space-1);
}

.fnd-cal__weekdays span {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.55);
}

.fnd-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.fnd-cal__cell {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.fnd-cal__daynum {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.7);
}

.fnd-cal__cell--today {
	background: rgba(255, 255, 255, 0.14);
}

.fnd-cal__cell--today .fnd-cal__daynum {
	color: #fff;
	font-weight: 700;
}

.fnd-cal__cell--event {
	background: var(--color-primary);
}

.fnd-cal__cell--event .fnd-cal__daynum {
	color: #fff;
	font-weight: 700;
}

.fnd-cal__dot {
	position: absolute;
	bottom: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
}

.fnd-cal__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding-top: var(--space-2);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	max-height: 320px;
	overflow-y: auto;
}

.fnd-cal__list-item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	text-decoration: none;
	padding: 6px 4px;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.fnd-cal__list-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.fnd-cal__list-date {
	flex: 0 0 auto;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--color-accent);
}

.fnd-cal__list-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	color: #fff;
}

.fnd-cal__list-title em {
	font-style: normal;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 6px;
}

.fnd-cal__empty {
	text-align: center;
	margin-top: var(--space-3);
	padding-top: var(--space-2);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.fnd-cal__empty p {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 8px;
}

.fnd-cal__empty-cta {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-primary-dark) !important;
}

/* ---------------------------------------------------------------------
   Section rhythm & small polish
   ------------------------------------------------------------------ */

.fnd-section--warm {
	background: var(--color-surface-warm);
}

/* Icon circle used consistently across icon-box widgets, replacing the
   stray-badge artifact noted in the roadmap's visual bug-fix pass. */
.fnd-icon-circle .elementor-icon-box-icon .elementor-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-surface-warm);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	transition: background 0.2s ease, color 0.2s ease;
}

.fnd-icon-circle:hover .elementor-icon-box-icon .elementor-icon {
	background: var(--color-primary);
	color: #fff;
}

/* Card wrapper for icon-box content (Programs, Get Involved) — gives
   plain icon-box widgets the same card language (surface, border,
   shadow, hover lift) as the CPT card system, instead of sitting bare
   in a flex row. */
.fnd-program-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: var(--space-3);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
}

.fnd-program-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.fnd-program-card .elementor-icon-box-wrapper {
	text-align: center;
}

.fnd-program-card .elementor-icon-box-title,
.fnd-program-card .elementor-icon-box-title a {
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   Programs bento grid ([foundation_programs_bento]) — one big square
   (left), one horizontal card (top right), two squares below it
   (bottom right). 4 columns x 2 rows lets the big item span the left
   half across both rows while the right half still splits independently
   into a full-width top row and two half-width bottom cells.
   ------------------------------------------------------------------ */

.fnd-bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: var(--space-3);
	width: 100%;
}

.fnd-bento-item {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: var(--radius);
	overflow: hidden;
	padding: var(--space-2);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.fnd-content-bento--dark .fnd-bento-item:not(.fnd-bento-item--viewmore) {
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.fnd-content-bento--dark .fnd-bento-item:not(.fnd-bento-item--viewmore):hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.fnd-bento-item:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.fnd-bento-item--big {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	min-height: 460px;
}

.fnd-bento-item--wide {
	grid-column: 3 / 5;
	grid-row: 1;
	min-height: 218px;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
}

.fnd-bento-item--small {
	grid-row: 2;
	min-height: 218px;
}

.fnd-bento-item__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.fnd-bento-item__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 21, 18, 0.15) 0%, rgba(26, 21, 18, 0.8) 100%);
	z-index: 1;
}

.fnd-bento-item--gradient {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.fnd-bento-item__icon {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	margin-bottom: var(--space-1);
	flex: 0 0 auto;
}

.fnd-bento-item--wide .fnd-bento-item__icon {
	margin-bottom: 0;
}

.fnd-bento-item__icon svg {
	width: 18px;
	height: 18px;
}

/* Weekly Fellowship / Outreach's corner badge, upgraded from the default
   translucent-white-on-photo treatment (rgba(255,255,255,.16) background,
   white icon) — against a busy warm-toned photo that reads as a barely
   visible, oddly-tinted smudge rather than a real icon. Matches the solid-
   white-circle + colored-glyph look already proven on the play icon
   (.fnd-bento-item__icon--play) instead, just bigger and with its own
   per-card accent color. */
.fnd-bento-item__icon--solid {
	background: #fff;
	width: 48px;
	height: 48px;
}

.fnd-bento-item__icon--solid svg {
	width: 22px;
	height: 22px;
}

.fnd-bento-item__icon--gold {
	color: var(--color-secondary);
}

.fnd-bento-item__icon--orange {
	color: var(--color-accent);
}

.fnd-bento-item__body {
	position: relative;
	z-index: 2;
}

.fnd-bento-item--wide .fnd-bento-item__body {
	flex: 1;
}

.fnd-bento-item__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1.25 !important;
	margin: 0 0 4px !important;
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.35);
}

.fnd-bento-item--viewmore .fnd-bento-item__title {
	color: inherit !important;
	text-shadow: none;
}

.fnd-bento-item--big .fnd-bento-item__title {
	font-size: 1.25rem !important;
}

.fnd-bento-item--row .fnd-bento-item__title {
	font-size: 0.875rem !important;
}

.fnd-bento-item__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fnd-bento-item__meta {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
	.fnd-bento-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
	}

	.fnd-bento-item--big {
		grid-column: 1 / 3;
		grid-row: auto;
		min-height: 320px;
	}

	.fnd-bento-item--wide {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.fnd-bento-item--small {
		grid-column: span 1;
		grid-row: auto;
	}
}

@media (max-width: 767px) {
	.fnd-bento-grid {
		grid-template-columns: 1fr;
	}

	.fnd-bento-item--big,
	.fnd-bento-item--wide,
	.fnd-bento-item--small {
		grid-column: 1;
	}

	.fnd-bento-item--wide {
		flex-direction: column;
		align-items: flex-start;
	}

	/* .fnd-bento-item--prayer's own row layout above is !important (needed
	   to beat Elementor Kit's <button> chrome — see the rule itself), which
	   would otherwise also beat this column stack that every other
	   .fnd-bento-item--wide tile gets on mobile. */
	.fnd-bento-item--prayer {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* ---------------------------------------------------------------------
   Content bento ([foundation_content_bento]) — shared by "Latest
   Messages" and "Get Inspired". Reuses .fnd-bento-grid/.fnd-bento-item
   above for the top block (big + wide + 2 small), then adds a second
   row of 4 equal squares plus a 5th "View More" square underneath.
   `.fnd-content-bento--light|--dark` only changes the non-photo chrome
   (meta label, View More tile) — every photo item already carries its
   own scrim, so it reads correctly on either background.
   ------------------------------------------------------------------ */

.fnd-content-bento__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-3);
	width: 100%;
	margin-top: var(--space-3);
}

.fnd-bento-item--row {
	grid-row: auto;
	min-height: 180px;
}

.fnd-bento-item__meta {
	position: relative;
	z-index: 2;
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 4px;
}

.fnd-bento-item--viewmore {
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-2);
	border: 1px dashed rgba(26, 21, 18, 0.22);
	background: #FAF8F4;
	color: var(--color-primary-dark);
	transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.fnd-bento-item--viewmore:hover {
	background: #F1EBDF;
}

.fnd-bento-item--viewmore .fnd-bento-item__icon {
	background: rgba(26, 21, 18, 0.08);
	color: var(--color-primary-dark);
	margin-bottom: 0;
}

.fnd-bento-item--viewmore .fnd-bento-item__title {
	font-size: 1rem;
}

.fnd-content-bento--dark .fnd-bento-item--viewmore {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.fnd-content-bento--dark .fnd-bento-item--viewmore:hover {
	background: rgba(255, 255, 255, 0.12);
}

.fnd-content-bento--dark .fnd-bento-item--viewmore .fnd-bento-item__icon {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* [foundation_programs_bento]'s 5th tile — "Watch Us Live" — added as its
   own full-width row below the fixed 4-tile grid (which has no 5th cell;
   see the 4-item .fnd-bento-item--big/--wide/--small placement above),
   reusing the shared .fnd-bento-item component the same way
   .fnd-content-bento__row does. No photo, so it gets a brand gradient
   instead of a background image + scrim. Added 2026-09-08. */
.fnd-programs-bento__row {
	width: 100%;
	margin-top: var(--space-3);
}

.fnd-bento-item--live {
	gap: var(--space-3);
	min-height: 0;
	padding: 18px 20px !important;
	background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
	/* It's a <button data-fnd-live-trigger> now (opens the on-page modal),
	   not an <a>, so the shared .fnd-bento-item box/typography reset gets
	   the native button chrome removed explicitly here. Elementor's Kit
	   CSS (`.elementor-kit-5 button`) targets plain <button> elements at
	   higher specificity than this single class and loads after this
	   file, silently winning on display/width/padding/border — without
	   `display:flex !important` the button falls back to Kit's inline-
	   block default and the icon/body/chevron just stack in normal flow
	   instead of sitting in a row — same conflict already documented on
	   .fnd-donate__trigger above. */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	border: none !important;
	width: 100% !important;
	font: inherit;
	text-align: left !important;
	/* Browsers' UA stylesheet sets `white-space: nowrap` on <button> —
	   inherited by the title/text below, which otherwise run straight off
	   the edge instead of wrapping (visible on narrow/mobile widths). */
	white-space: normal !important;
	cursor: pointer;
}

.fnd-bento-item--live .fnd-bento-item__icon {
	position: relative;
	margin-bottom: 0;
	width: 56px;
	height: 56px;
	background: #fff;
	color: var(--color-primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.fnd-bento-item--live:hover .fnd-bento-item__icon {
	transform: scale(1.08);
}

.fnd-bento-item--live .fnd-bento-item__icon svg {
	position: relative;
	z-index: 1;
	width: 20px;
	height: 20px;
	/* Optically center the play triangle — an equilateral shape reads
	   left-heavy inside a perfectly centered circular badge. */
	margin-left: 2px;
}

.fnd-bento-item__icon-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #fff;
	opacity: 0.55;
	animation: fnd-live-pulse 2.2s ease-out infinite;
}

@keyframes fnd-live-pulse {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

.fnd-bento-item--live .fnd-bento-item__body {
	flex: 1;
	min-width: 0;
}

.fnd-bento-item--live .fnd-bento-item__title {
	font-size: 1.0625rem !important;
	margin-bottom: 2px !important;
}

.fnd-bento-item--live .fnd-bento-item__text {
	font-size: 0.875rem;
}

.fnd-bento-item__chevron {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	color: rgba(255, 255, 255, 0.85);
	transition: transform 0.2s ease;
}

.fnd-bento-item__chevron svg {
	width: 18px;
	height: 18px;
}

.fnd-bento-item--live:hover .fnd-bento-item__chevron {
	transform: translateX(3px);
}

/* Daily Prayer Charge tile in the 4-item grid above — same live-stream
   modal as "Watch Us Live" (data-fnd-live-trigger is handled generically by
   livestream-modal.js, which already supports multiple triggers on one
   page), reusing its pulsing play-icon treatment instead of the tile's old
   static flame icon/plain link. It keeps the .fnd-bento-item--wide photo
   layout (image + scrim + title/text), so — like .fnd-bento-item--live
   above — it needs the native <button> chrome stripped and the row layout
   re-asserted against Elementor's Kit CSS. Added 2026-09-14. */
.fnd-bento-item--prayer {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	border: none !important;
	background: none !important;
	width: 100% !important;
	font: inherit;
	text-align: left !important;
	white-space: normal !important;
	cursor: pointer;
}

.fnd-bento-item__icon--play {
	position: relative;
	background: #fff;
	color: var(--color-primary);
}

.fnd-bento-item__icon--play svg {
	position: relative;
	z-index: 1;
	margin-left: 1px;
}

/* Daily Prayer Charge's play affordance, bigger and paired with a "Watch
   Live" label + a YouTube-style corner LIVE badge — reads as its own live
   channel card rather than a plain photo tile with a small icon in the
   corner. Two classes deep (.fnd-bento-item--prayer .fnd-bento-item__icon--
   play) beats the base .fnd-bento-item__icon's 38px on specificity alone,
   no !important needed. */
.fnd-bento-item--prayer .fnd-bento-item__icon--play {
	width: 56px;
	height: 56px;
}

.fnd-bento-item--prayer .fnd-bento-item__icon--play svg {
	width: 22px;
	height: 22px;
}

.fnd-bento-item__watch-live {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.fnd-bento-item__watch-live-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
}

.fnd-bento-item__live-badge {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
}

.fnd-bento-item__live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary);
	animation: fnd-live-pulse 2.2s ease-out infinite;
}

@media (max-width: 1024px) {
	.fnd-content-bento__row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.fnd-content-bento__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.fnd-bento-item--row {
		min-height: 160px;
	}

	/* Stays a compact single row even on mobile — .fnd-bento-item--row's
	   160px min-height above is meant for the taller photo-card rows in
	   .fnd-content-bento__row, not this one. */
	.fnd-bento-item--live {
		min-height: 0 !important;
	}

	.fnd-bento-item__chevron {
		width: 22px;
		height: 22px;
	}
}

/* "Watch Us Live" opens this on-page modal instead of a new tab — a
   channel `live_stream` embed (see Feature_Card::render_programs_bento())
   rather than a specific video id, so it always shows whatever's live
   right now. Same structural pattern as .fnd-donate__panel (fixed overlay
   kept in the layout, visibility/opacity toggled by
   assets/js/livestream-modal.js) but a dark video dialog instead of a
   light form dialog, and the iframe itself is only created on open /
   removed on close so a hidden autoplaying stream never keeps playing
   behind the overlay. */
.fnd-live-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	max-width: 100vw;
	padding: 5vh 16px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fnd-live-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.fnd-live-modal__backdrop {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: 100vw;
	background: rgba(10, 8, 6, 0.82);
	backdrop-filter: blur(2px);
}

.fnd-live-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 860px;
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
	transform: translateY(12px) scale(.98);
	transition: transform 0.2s ease;
}

.fnd-live-modal.is-open .fnd-live-modal__dialog {
	transform: translateY(0) scale(1);
}

.fnd-live-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #fff !important;
	padding: 0 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fnd-live-modal__close svg {
	width: 18px;
	height: 18px;
}

.fnd-live-modal__close:hover {
	background: rgba(0, 0, 0, 0.8) !important;
}

.fnd-live-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.fnd-live-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fnd-live-modal__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	transition: color 0.15s ease;
}

.fnd-live-modal__fallback:hover {
	color: #fff;
}

@media (max-width: 599px) {
	.fnd-live-modal {
		padding: 0;
	}

	.fnd-live-modal__dialog {
		max-width: none;
		width: 100%;
		border-radius: 0;
	}
}

/* ---------------------------------------------------------------------
   Gallery mosaic ([foundation_gallery_mosaic]) — "Moments Together"
   homepage teaser. Asymmetric photo grid (big + wide + 2 small + 2
   wide) instead of a flat uniform gallery grid, with a subtle hover
   zoom so it feels alive rather than static.
   ------------------------------------------------------------------ */

/* Every image inside a mosaic tile is position:absolute now (for the
   crossfade rotation below), which removes the last piece of in-flow
   content the grid's flex-item ancestors used to size themselves
   against — same "Elementor flex-item shrinks to fit" pattern
   documented elsewhere in this file. Force full width explicitly on
   the widget wrapper so it doesn't collapse. */
.elementor-element-galteasmo1,
.elementor-element-galteasmo1 > .elementor-widget-container,
.elementor-element-galteasmo1 .elementor-shortcode {
	width: 100% !important;
}

.fnd-mosaic-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 160px);
	gap: var(--space-2);
	width: 100%;
}

.fnd-mosaic-item {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fnd-mosaic-item:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.fnd-mosaic-item__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1.4s ease, transform 0.5s ease;
}

.fnd-mosaic-item__img.is-active {
	opacity: 1;
}

.fnd-mosaic-item:hover .fnd-mosaic-item__img.is-active {
	transform: scale(1.06);
}

.fnd-mosaic-hint {
	display: none;
}

.fnd-mosaic-item--big {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.fnd-mosaic-item--wide-tr {
	grid-column: 3 / 5;
	grid-row: 1;
}

.fnd-mosaic-item--sm {
	grid-row: 2;
}

.fnd-mosaic-item--wide-bl {
	grid-column: 1 / 3;
	grid-row: 3;
}

.fnd-mosaic-item--wide-br {
	grid-column: 3 / 5;
	grid-row: 3;
}

@media (max-width: 1024px) {
	.fnd-mosaic-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 160px);
	}

	.fnd-mosaic-item--big {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.fnd-mosaic-item--wide-tr {
		grid-column: 1 / 3;
		grid-row: 3;
	}

	.fnd-mosaic-item--sm {
		grid-column: span 1;
		grid-row: 4;
	}

	.fnd-mosaic-item--wide-bl,
	.fnd-mosaic-item--wide-br {
		grid-column: 1 / 3;
		grid-row: auto;
	}
}

/* Mobile keeps the same multi-photo grid as tablet/desktop (just at a
   smaller row height) rather than a one-at-a-time carousel — the whole
   point of a gallery teaser is showing several real photos at once.
   Tapping a tile opens it larger via the lightbox (gallery-mosaic.js);
   the crossfade rotation below runs at every breakpoint too. */
@media (max-width: 480px) {
	.fnd-mosaic-grid {
		grid-template-rows: repeat(4, 130px);
		gap: var(--space-1);
	}
}

.fnd-mosaic-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 12, 10, 0.92);
	padding: var(--space-3);
}

.fnd-mosaic-lightbox.is-open {
	display: flex;
}

.fnd-mosaic-lightbox img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
}

.fnd-mosaic-lightbox__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fnd-mosaic-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* ---------------------------------------------------------------------
   Get Involved cards ([foundation_involve_grid]) — 4 real ways to
   engage, each with its own brand-accent color (rotating through the
   actual palette: red / gold / orange / dark red, not arbitrary
   colors) rather than 4 identical bare icon-boxes. A large faint
   watermark icon adds depth without competing with the real icon
   badge.
   ------------------------------------------------------------------ */

.fnd-involve-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	width: 100%;
}

.fnd-involve-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.fnd-involve-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-3);
	text-decoration: none;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.fnd-involve-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.fnd-involve-card__watermark {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 100px;
	height: 100px;
	opacity: 0.06;
	transform: rotate(12deg);
	pointer-events: none;
}

.fnd-involve-card__watermark svg {
	width: 100%;
	height: 100%;
}

.fnd-involve-card__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	color: #fff;
	margin-bottom: var(--space-2);
}

.fnd-involve-card__icon svg {
	width: 24px;
	height: 24px;
}

.fnd-involve-card--red .fnd-involve-card__icon,
.fnd-involve-card--red .fnd-involve-card__watermark {
	background: var(--color-primary);
	color: var(--color-primary);
}

.fnd-involve-card--red .fnd-involve-card__icon {
	color: #fff;
}

.fnd-involve-card--gold .fnd-involve-card__icon,
.fnd-involve-card--gold .fnd-involve-card__watermark {
	background: var(--color-secondary);
	color: var(--color-secondary);
}

.fnd-involve-card--gold .fnd-involve-card__icon {
	color: #fff;
}

.fnd-involve-card--orange .fnd-involve-card__icon,
.fnd-involve-card--orange .fnd-involve-card__watermark {
	background: var(--color-accent);
	color: var(--color-accent);
}

.fnd-involve-card--orange .fnd-involve-card__icon {
	color: #fff;
}

.fnd-involve-card--dark-red .fnd-involve-card__icon,
.fnd-involve-card--dark-red .fnd-involve-card__watermark {
	background: var(--color-primary-dark);
	color: var(--color-primary-dark);
}

.fnd-involve-card--dark-red .fnd-involve-card__icon {
	color: #fff;
}

.fnd-involve-card--red:hover { border-color: var(--color-primary); }
.fnd-involve-card--gold:hover { border-color: var(--color-secondary); }
.fnd-involve-card--orange:hover { border-color: var(--color-accent); }
.fnd-involve-card--dark-red:hover { border-color: var(--color-primary-dark); }

.fnd-involve-card__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	color: var(--color-ink) !important;
	margin: 0 0 6px !important;
}

.fnd-involve-card__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-ink-muted);
	margin: 0 0 var(--space-2);
	flex: 1;
}

.fnd-involve-card__cta {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	transition: transform 0.2s ease;
}

.fnd-involve-card--red .fnd-involve-card__cta { color: var(--color-primary); }
.fnd-involve-card--gold .fnd-involve-card__cta { color: var(--color-secondary); }
.fnd-involve-card--orange .fnd-involve-card__cta { color: var(--color-accent); }
.fnd-involve-card--dark-red .fnd-involve-card__cta { color: var(--color-primary-dark); }

.fnd-involve-card:hover .fnd-involve-card__cta {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.fnd-involve-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.fnd-involve-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   "Partner With Us" CTA band — subtle repeating dot pattern layered
   over the solid red background via a ::before overlay (kept separate
   from Elementor's own background control, which only supports one
   layer at a time), plus a white newsletter card that sits on top.
   ------------------------------------------------------------------ */

.fnd-cta-pattern {
	position: relative;
	overflow: hidden !important;
}

.fnd-cta-pattern::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.14), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.1), transparent 40%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 14px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat, repeat;
	pointer-events: none;
	z-index: 0;
}

.fnd-cta-pattern::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -60px;
	width: 260px;
	height: 260px;
	transform: translateY(-50%) rotate(-8deg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2c-1 3-4 4.5-4 8a4 4 0 0 0 8 0c0-1.2-.4-2-1-2.8.6 2-.5 3.3-1.5 3.3-1.4 0-2-1-2-2.2 0-1.6 1.5-2.7 1.5-5C13 2.6 12.6 2.2 12 2z'/%3E%3Cpath d='M8.5 13.5A3.5 3.5 0 0 0 12 17a3.5 3.5 0 0 0 3.5-3.5c0-.7-.15-1.2-.4-1.7.1 1.5-.9 2.4-1.9 2.4-.9 0-1.6-.6-1.6-1.5 0-.5.2-1 .5-1.5-1.3.6-2 1.7-2 2.8z' fill-opacity='0.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.07;
	pointer-events: none;
	z-index: 0;
}

.fnd-cta-pattern > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Academy bento tile's own on-theme watermark (the same graduation-cap
   glyph as its badge icon, just big and faint) — .fnd-cta-pattern's own
   ::after is a generic flame reused across every gradient/red card
   sitewide, not specific to any one program, so on its own the Academy
   tile read as a plain red card with a tiny corner icon. z-index:1 sits
   above the shared pattern's ::before/::after (z-index:0) but below the
   real icon/body content (z-index:2). */
.fnd-bento-item__watermark {
	position: absolute;
	z-index: 1;
	bottom: -24px;
	right: -24px;
	width: 220px;
	height: 220px;
	opacity: 0.14;
	transform: rotate(-8deg);
	pointer-events: none;
	/* Anchors on this card inherit the theme's link color (the same red as
	   the card's own gradient background — confirmed in-browser: the icon
	   badge's currentColor comes out identical to --color-primary), not the
	   white .fnd-bento-item sets on its title/text via explicit !important
	   rules. Left as currentColor this rendered as an invisible red-on-red
	   smudge; the existing flame pattern avoids the same trap by hardcoding
	   fill="white" directly in its SVG data URI instead of relying on
	   currentColor. */
	color: #fff;
}

.fnd-bento-item__watermark svg {
	width: 100%;
	height: 100%;
}

/* Ink-toned equivalent of .fnd-cta-pattern for cards on a light surface
   (e.g. the "Visit Us" wide card) — same dot/diagonal/glow structure,
   just dark-on-light instead of white-on-red. */
.fnd-pattern-subtle {
	position: relative;
	overflow: hidden !important;
}

.fnd-pattern-subtle::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 15% 15%, rgba(211, 34, 38, 0.07), transparent 45%),
		repeating-linear-gradient(135deg, rgba(26, 21, 18, 0.04) 0px, rgba(26, 21, 18, 0.04) 2px, transparent 2px, transparent 14px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%231A1512' fill-opacity='0.08'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat, repeat;
	pointer-events: none;
	z-index: 0;
}

/* Ablaze Purpose Academy bento tile — the icon badge was nearly
   invisible (translucent white icon on a translucent white circle,
   both washed out against the red gradient). Bigger, solid white
   circle with the icon in brand red reads clearly instead. */
.fnd-bento-item--gradient .fnd-bento-item__icon {
	width: 60px;
	height: 60px;
	background: #fff;
	color: var(--color-primary);
}

.fnd-bento-item--gradient .fnd-bento-item__icon svg {
	width: 30px;
	height: 30px;
}

.fnd-newsletter-card {
	background: var(--color-surface);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	padding: var(--space-3) var(--space-4);
	margin-top: var(--space-3);
	max-width: 480px;
	width: 100%;
}

.fnd-newsletter-card__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700 !important;
	font-size: 1.0625rem !important;
	color: var(--color-ink) !important;
	margin: 0 0 4px !important;
	text-align: center !important;
}

.fnd-newsletter-card__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875rem;
	color: var(--color-ink-muted);
	text-align: center;
	margin: 0 0 var(--space-2);
}

.fnd-newsletter-card .elementor-form .elementor-field-group {
	margin-bottom: 10px;
}

.fnd-newsletter-card .elementor-button {
	background-color: var(--color-primary) !important;
	border-radius: var(--radius) !important;
	width: 100%;
}

/* Compact footer newsletter bar — its own full-width row between the
   column grid and the copyright bar, not a card squeezed into a
   column. Intro text left, inline email+button right. */
.fnd-footer-newsletter {
	flex-wrap: wrap;
}

.fnd-footer-newsletter__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem;
	margin: 0;
	flex: 1 1 260px;
}

/* Both the wrapper class AND its inner <p> need the color: the
   text-editor widget wraps content in a <p>, and Elementor's Kit sets
   an explicit color on <p> tags that beats a merely-inherited value
   from the wrapper — same rule as everywhere else in this file that
   fixes text color with a `<wrapper>, <wrapper> p` pair. */
.fnd-footer-newsletter__text,
.fnd-footer-newsletter__text p {
	color: rgba(255, 255, 255, 0.7) !important;
}

.fnd-footer-newsletter__text strong {
	color: #fff !important;
}

.fnd-footer-newsletter__form-wrap {
	flex: 0 1 380px !important;
	width: 380px !important;
	max-width: 100%;
}

.fnd-footer-newsletter .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
}

.fnd-footer-newsletter .elementor-field-group {
	flex: 1 1 auto !important;
	width: auto !important;
}

.fnd-footer-newsletter .e-form__buttons {
	flex: 0 0 auto !important;
	width: auto !important;
}

.fnd-footer-newsletter .elementor-button {
	width: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Visually hidden but still readable by screen readers — a label
   above a single inline email field just adds height without adding
   clarity the placeholder doesn't already give. */
.fnd-footer-newsletter .elementor-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fnd-footer-newsletter .elementor-field-group input {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #fff !important;
	height: 42px;
}

.fnd-footer-newsletter .elementor-field-group input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.fnd-footer-newsletter .elementor-button {
	background-color: var(--color-primary) !important;
	border-radius: var(--radius) !important;
	height: 42px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.fnd-footer-newsletter .elementor-form-fields-wrapper {
		flex-wrap: wrap;
	}

	.fnd-footer-newsletter .elementor-field-group,
	.fnd-footer-newsletter .e-form__buttons {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Footer columns — Elementor's own `width` setting on a nested
   container doesn't reliably control its flex-basis when the
   container itself is a flex item (generated CSS keeps
   --container-widget-width:100% regardless); same root cause already
   documented for the header's desktop/mobile split, fixed the same
   way: an explicit CSS class instead of trusting the JSON control. */
.fnd-footer-col {
	flex: 0 0 auto !important;
	padding: 0 !important;
}

.fnd-footer-col--logo {
	width: 26% !important;
}

.fnd-footer-col--links,
.fnd-footer-col--contact,
.fnd-footer-col--give {
	width: 20% !important;
}

@media (max-width: 1024px) {
	.fnd-footer-col--logo {
		width: 100% !important;
	}

	.fnd-footer-col--links,
	.fnd-footer-col--contact,
	.fnd-footer-col--give {
		width: 27% !important;
	}
}

@media (max-width: 767px) {
	.fnd-footer-col {
		width: 100% !important;
	}
}

.fnd-footer-social {
	margin-top: 4px;
}

.fnd-footer-social .elementor-icon {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-footer-social .elementor-icon:hover {
	background: var(--color-primary) !important;
	color: #fff !important;
}

/* Script accent — hero taglines only, never body copy or buttons */
.fnd-script {
	font-family: var(--font-script);
	color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Feature grid ([foundation_feature_card]) — homepage "Find Your Place"
   3-up row: a wide light card with a photo, a dark photo card with a
   play-button affordance, and a brand-gradient card. Three variants,
   one shared card shell.
   ------------------------------------------------------------------ */

.fnd-feature-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: stretch;
	width: 100%;
}

.fnd-feature-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	min-height: 340px;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fnd-feature-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.fnd-feature-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: var(--space-3);
	flex: 1;
}

.fnd-feature-card__eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-1);
	opacity: 0.85;
}

.fnd-feature-card__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 10px;
}

.fnd-feature-card__text {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.fnd-feature-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-3);
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
}

/* Wide variant: light surface, content left, real photo right */
.fnd-feature-card--wide {
	flex: 1 1 40%;
	background: var(--color-surface-warm);
	flex-direction: row;
	align-items: stretch;
}

.fnd-feature-card--wide .fnd-feature-card__body {
	flex: 1 1 62%;
	justify-content: center;
}

.fnd-feature-card--wide .fnd-feature-card__title,
.fnd-feature-card--wide .fnd-feature-card__cta {
	color: var(--color-ink);
}

.fnd-feature-card--wide .fnd-feature-card__text {
	color: var(--color-ink-muted);
}

.fnd-feature-card--wide .fnd-feature-card__cta {
	color: var(--color-primary);
}

.fnd-feature-card__image {
	flex: 1 1 38%;
	min-width: 0;
	align-self: stretch;
}

.fnd-feature-card__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

/* Photo variant: real background photo + dark scrim + play affordance */
.fnd-feature-card--photo {
	flex: 1 1 26%;
	justify-content: flex-end;
	color: #fff;
}

.fnd-feature-card__bg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	z-index: 0;
}

.fnd-feature-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 21, 18, 0.35) 0%, rgba(26, 21, 18, 0.82) 100%);
	z-index: 1;
}

.fnd-feature-card--photo .fnd-feature-card__title,
.fnd-feature-card--photo .fnd-feature-card__cta {
	color: #fff;
}

.fnd-feature-card--photo .fnd-feature-card__text {
	color: rgba(255, 255, 255, 0.85);
}

.fnd-feature-card__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
	transition: transform 0.2s ease, background 0.2s ease;
}

.fnd-feature-card__play svg {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}

.fnd-feature-card:hover .fnd-feature-card__play {
	transform: scale(1.08);
	background: #fff;
}

/* Gradient variant: brand red-to-accent */
.fnd-feature-card--gradient {
	flex: 1 1 26%;
	justify-content: flex-end;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
}

.fnd-feature-card--gradient .fnd-feature-card__title,
.fnd-feature-card--gradient .fnd-feature-card__cta {
	color: #fff;
}

.fnd-feature-card--gradient .fnd-feature-card__text {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1024px) {
	.fnd-feature-card--wide {
		flex: 1 1 100%;
	}

	.fnd-feature-card--photo,
	.fnd-feature-card--gradient {
		flex: 1 1 calc(50% - var(--space-3) / 2);
	}
}

/* Mobile: keep the desktop card look (wide card stays a row, image
   beside text) instead of restyling for a narrow screen. The grid
   becomes a horizontal swipe strip — each card sized to show ~1.5
   cards at once (a deliberate peek so the row visibly continues off
   the right edge) with scroll-snap so it settles on card boundaries,
   plus a "Swipe" hint since a peeking edge alone doesn't reliably
   read as "more content" to every visitor. */
.fnd-feature-grid__hint {
	display: none;
}

@media (max-width: 767px) {
	.fnd-feature-grid {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -16px;
		padding: 0 16px;
		width: auto;
	}

	.fnd-feature-grid::-webkit-scrollbar {
		display: none;
	}

	.fnd-feature-card {
		flex: 0 0 80vw;
		scroll-snap-align: start;
	}

	.fnd-feature-card--wide,
	.fnd-feature-card--photo,
	.fnd-feature-card--gradient {
		flex: 0 0 80vw;
	}

	.fnd-feature-grid__hint {
		display: flex;
		align-items: center;
		gap: 6px;
		justify-content: center;
		margin-top: 10px;
		font-family: 'Open Sans', sans-serif;
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--color-ink-muted);
	}

	.fnd-feature-grid__hint svg {
		width: 14px;
		height: 14px;
		animation: fnd-hint-slide 1.6s ease-in-out infinite;
	}
}

@keyframes fnd-hint-slide {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------------
   Header & footer polish
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   Header — logo (left) + two mutually-exclusive right-side clusters:
   .fnd-header-desktop (inline nav with a native "Prayers" dropdown for
   Prayer Wall/Testimonies + Give button + account icon, ≥1025px) and
   .fnd-header-mobile (the single grouped [foundation_main_menu] trigger,
   <1025px). Only one is ever visible at a given width — a plain flexbox
   space-between on the row needs none of the absolute-positioning/
   flex-grow fights the old single-shared-layout header required.
   ------------------------------------------------------------------ */

.elementor-location-header {
	position: relative;
	z-index: 200;
}

.fnd-header-row {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

/* Mobile: swap the full wordmark for the icon-only mark (the full lockup
   doesn't fit at this width) — same pattern as before, just no longer
   entangled with a 3-zone layout. */
.fnd-header-logo-icon {
	display: none;
}

@media (max-width: 767px) {
	.fnd-header-logo-full {
		display: none;
	}

	.fnd-header-logo-icon {
		display: block;
	}
}

/* !important on both sides of this toggle: Elementor generates its own
   per-element CSS (post-31.css, `.elementor-element-fndhdesk1{display:
   flex}` etc.) at equal specificity to a single class selector, loaded
   *after* this file, so a plain override loses on source order alone —
   same root cause already documented elsewhere in this file for other
   Elementor-vs-site.css conflicts. */
.fnd-header-desktop {
	display: none !important;
}

@media (min-width: 1025px) {
	.fnd-header-desktop {
		display: flex !important;
		/* Elementor's own base `.e-con{width:var(--width,100%)}` rule was
		   stretching this cluster to fill nearly the entire row (898px of
		   content that only needs ~500px), leaving the nav/Give/account
		   items packed to the *left* of that oversized box instead of
		   hugging the right edge — confirmed via computed rect widths.
		   Sizing to content lets the row's own space-between correctly
		   push the whole tight group flush right, next to the logo on
		   the left. */
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.fnd-header-mobile {
		display: none !important;
	}
}

/* Desktop inline nav — link hover/active, plus the native "Prayers"
   submenu (Elementor's own nav-menu widget dropdown for hierarchical WP
   menu items) restyled to match the site's card/dropdown language
   instead of Elementor's bare default. */
/* color: ...!important — Elementor's own generated per-widget CSS
   (.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item
   {color:var(--e-global-color-text)}, in post-31.css) has three classes
   of specificity against this rule's two, and resolves to the Kit's
   accent orange rather than the intended ink color — confirmed via a
   full matched-rules scan, not assumed. */
.fnd-nav-professional .elementor-item {
	letter-spacing: 0.01em;
	padding: 8px 18px !important;
	color: var(--color-ink) !important;
	transition: color 0.15s ease;
}

.fnd-nav-professional .elementor-item:hover {
	color: var(--color-primary) !important;
}

.fnd-nav-professional .sub-arrow {
	margin-inline-start: 4px;
}

.fnd-nav-professional .sub-arrow svg {
	width: 10px;
	height: 10px;
}

.fnd-nav-professional ul.sub-menu {
	background: var(--color-surface) !important;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
	padding: 8px !important;
	min-width: 200px;
	border: none !important;
}

.fnd-nav-professional ul.sub-menu .elementor-item {
	padding: 10px 12px !important;
	border-radius: 4px;
	color: var(--color-ink) !important;
	font-family: 'Montserrat', sans-serif;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-nav-professional ul.sub-menu .elementor-item:hover {
	background: var(--color-surface-warm);
	color: var(--color-primary) !important;
}

/* Give button — Elementor's own per-widget generated CSS
   (.elementor-element-fnddeskgv .elementor-button{...}) already beats the
   Kit's global button style on specificity, this just trims the size down
   from Elementor's default "md" padding to something header-appropriate. */
.fnd-header-cta .elementor-button {
	padding: 10px 22px !important;
	font-size: 0.9375rem !important;
}

/* Desktop account icon + dropdown ([foundation_account_icon]) */
.fnd-account {
	position: relative;
	display: flex;
	align-items: center;
}

.fnd-account__trigger {
	/* !important required: the Elementor Kit's own global button style
	   (`.elementor-kit-5 button{...}`) targets bare <button> elements at
	   higher specificity (0,1,1) than a single class selector (0,1,0). */
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: none !important;
	background: #E7E5E2 !important;
	color: #5B5147 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-account__trigger svg {
	width: 19px;
	height: 19px;
}

.fnd-account__trigger:hover,
.fnd-account__trigger:focus-visible,
.fnd-account.is-open .fnd-account__trigger {
	background: #D8D5D0 !important;
	color: var(--color-primary) !important;
}

.fnd-account__dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 190px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
	padding: 8px;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 300;
}

.fnd-account.is-open .fnd-account__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fnd-account__greeting {
	padding: 6px 10px 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-ink-muted);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 4px;
	white-space: nowrap;
}

.fnd-account__link {
	padding: 8px 10px;
	border-radius: 4px;
	color: var(--color-ink);
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-account__link:hover {
	background: var(--color-surface-warm);
	color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Grouped menu ([foundation_main_menu]) — trigger + dropdown panel
   listing nav links, Give, and account/login, all as one list.
   ------------------------------------------------------------------ */

.fnd-menu {
	position: relative;
}

.fnd-menu__trigger {
	/* !important throughout: the Elementor Kit's own global button style
	   (`.elementor-kit-5 button{...}`) targets bare <button> elements at
	   higher specificity (0,1,1) than a single class selector (0,1,0) and
	   wins outright otherwise — the exact same conflict already documented
	   (and fixed the same way) for the old .fnd-account__trigger button. */
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px;
	background: transparent !important;
	border: 1.5px solid currentColor;
	border-radius: var(--radius) !important;
	padding: 9px 16px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.02em;
	color: var(--color-ink) !important;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.fnd-menu__trigger:hover,
.fnd-menu__trigger:focus {
	background: transparent !important;
}

.fnd-menu__trigger:hover {
	opacity: 0.8;
}

.fnd-menu__trigger svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.fnd-menu__icon-close {
	display: none;
}

.fnd-menu__trigger.is-open .fnd-menu__icon-open {
	display: none;
}

.fnd-menu__trigger.is-open .fnd-menu__icon-close {
	display: block;
}


.fnd-menu__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 250px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	background: var(--color-surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card-hover);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 300;
}

.fnd-menu__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.fnd-menu__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.fnd-menu__nav a {
	display: block;
	padding: 10px 12px;
	border-radius: 4px;
	color: var(--color-ink);
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-menu__nav a:hover,
.fnd-menu__nav a[aria-current="page"] {
	background: var(--color-surface-warm);
	color: var(--color-primary);
}

.fnd-menu__divider {
	height: 1px;
	background: var(--color-border);
	margin: 6px 4px;
}

.fnd-menu__give {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 12px;
	border-radius: 4px;
	background: var(--color-primary);
	color: #fff !important;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.15s ease;
}

.fnd-menu__give:hover {
	background: var(--color-primary-dark);
	color: #fff !important;
}

.fnd-menu__give svg {
	width: 16px;
	height: 16px;
}

.fnd-menu__greeting {
	padding: 8px 12px 4px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-ink-muted);
}

.fnd-menu__account-link {
	display: block;
	padding: 8px 12px;
	border-radius: 4px;
	color: var(--color-ink);
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
	transition: background 0.15s ease, color 0.15s ease;
}

.fnd-menu__account-link:hover {
	background: var(--color-surface-warm);
	color: var(--color-primary);
}

/* ---------------------------------------------------------------------
   Transparent-over-hero header, scroll-triggered solid state. Scoped to
   body.fnd-transparent-header (added only on templates with a full-bleed
   hero directly beneath the header — currently just the homepage; see
   Frontend\Assets::add_transparent_header_class) so inner pages without
   a hero yet keep the plain solid header from the block above.
   ------------------------------------------------------------------ */

body.fnd-transparent-header .elementor-location-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

body.fnd-transparent-header .fnd-header-row {
	background: transparent;
	border-bottom-color: transparent;
}

body.fnd-transparent-header .fnd-menu__trigger {
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Desktop cluster in the overlay state: white nav links, white-outlined
   account icon. The Give button keeps its brand-red fill in both states
   (it's a CTA, not nav chrome) so it isn't touched here. */
body.fnd-transparent-header .fnd-nav-professional .elementor-item {
	color: #fff !important;
}

body.fnd-transparent-header .fnd-account__trigger {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-header-row {
	background: var(--color-surface);
	border-bottom-color: var(--color-border);
	box-shadow: 0 2px 12px rgba(26, 21, 18, 0.08);
	/* Shrinks once scrolled, so the fixed/floating header takes up less
	   room over the page content — the padding set on this container in
	   the header's Elementor settings is the "at rest / top of page"
	   size. */
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.fnd-header-logo-full img {
	transition: width 0.25s ease;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-header-logo-full img {
	width: 56px !important;
}

@media (max-width: 1024px) {
	body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-header-logo-full img {
		width: 50px !important;
	}
}

.fnd-header-logo-icon img {
	transition: width 0.25s ease;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-header-logo-icon img {
	width: 52px !important;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-menu__trigger {
	color: var(--color-ink) !important;
	border-color: var(--color-border) !important;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-nav-professional .elementor-item {
	color: var(--color-ink) !important;
}

body.fnd-transparent-header .elementor-location-header.fnd-header--solid .fnd-account__trigger {
	background: #E7E5E2 !important;
	color: #5B5147 !important;
}

/* Footer icon-list links (Quick Links, legal links) — Elementor's
   icon-list widget has no built-in link hover control, so this fills
   that in for a footer that otherwise feels static/dead. */
.fnd-footer-links .elementor-icon-list-item a {
	transition: color 0.15s ease, padding-left 0.15s ease;
}

.fnd-footer-links .elementor-icon-list-item a:hover {
	color: var(--color-accent) !important;
	padding-left: 4px;
}

/* Legal links (Privacy Policy / Terms of Use) — same list widget as
   Quick Links, but on one line instead of stacked, since it's only
   ever two short items sitting in the copyright bar. */
.fnd-footer-legal .elementor-icon-list-items {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 20px;
}

/* Footer logo — sits on a near-black background, so it gets slightly
   reduced opacity at rest and full opacity on hover, a common pattern
   for a wordmark placed on dark footers. */
.fnd-footer-logo {
	opacity: 0.92;
	transition: opacity 0.15s ease;
}

.fnd-footer-logo:hover {
	opacity: 1;
}

/* ---------------------------------------------------------------------
   Contact form card — the Elementor form widget on a plain background
   reads as loose/unfinished; wrapping it in the same white-card-plus-
   shadow language as the rest of the site (Daily Prayer Charge, the
   newsletter cards) gives it a defined edge instead of floating.
   ------------------------------------------------------------------ */

.fnd-contact-form-card {
	background: var(--color-surface);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	padding: var(--space-4) !important;
	max-width: 640px;
	width: 100%;
}

.fnd-contact-form-card .elementor-field-group {
	margin-bottom: var(--space-2);
}

.fnd-contact-form-card .elementor-field-label {
	color: var(--color-ink) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.fnd-contact-form-card .elementor-field {
	border-radius: var(--radius) !important;
}

.fnd-contact-form-card .elementor-button {
	background-color: var(--color-primary) !important;
	border-radius: var(--radius) !important;
}

/* ---------------------------------------------------------------------
   Team grid ([foundation_team_grid]) — About page Leadership section.
   Auto-fit so 5 real people wrap naturally (3+2) without needing a
   fixed column count tuned to today's headcount.
   ------------------------------------------------------------------ */

.fnd-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
	width: 100%;
}

.fnd-team-card {
	text-align: center;
}

.fnd-team-card__photo {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 0 var(--space-2);
	box-shadow: 0 6px 16px rgba(26, 21, 18, 0.18);
	padding: 4px;
	border: 2px solid rgba(211, 34, 38, 0.3);
}

.fnd-team-card__photo img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

.fnd-team-card__name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem !important;
	color: var(--color-ink);
	margin: 0 0 2px;
}

.fnd-team-card__role {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0;
}

.fnd-team-card__bio-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fnd-team-card__bio {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-ink-muted);
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fnd-team-card__bio-checkbox:checked ~ .fnd-team-card__bio {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.fnd-team-card__bio p {
	margin: 0;
}

.fnd-team-card__bio-toggle {
	display: inline-block;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-primary);
	margin-top: 4px;
}

.fnd-team-card__bio-toggle-less {
	display: none;
}

.fnd-team-card__bio-checkbox:checked ~ .fnd-team-card__bio-toggle .fnd-team-card__bio-toggle-more {
	display: none;
}

.fnd-team-card__bio-checkbox:checked ~ .fnd-team-card__bio-toggle .fnd-team-card__bio-toggle-less {
	display: inline;
}

.fnd-team-card__social {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.fnd-team-card__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	transition: background 0.15s ease;
}

.fnd-team-card__social-icon svg {
	width: 15px;
	height: 15px;
}

.fnd-team-card__social-icon:hover {
	background: var(--color-primary-dark);
}

/* No real profile URL entered yet (roadmap item 15) — shown, not hidden,
   so the admin can see at a glance which platforms are waiting on a link. */
.fnd-team-card__social-icon--empty {
	background: var(--color-border);
	color: var(--color-ink-muted);
	cursor: default;
}

/* Full Gallery page — native WP gallery widget has zero styling of its
   own (square thumbnails, no radius, no hover), so it reads as raw
   and unfinished next to the rest of the site. A uniform grid is the
   right call here (unlike the homepage teaser's mosaic) since this
   page's job is browsing everything, not a curated preview — just
   needs the same card-language polish as everywhere else. */
.elementor-image-gallery .gallery-item {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.elementor-image-gallery .gallery-item:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.elementor-image-gallery .gallery-icon {
	overflow: hidden;
}

.elementor-image-gallery .gallery-icon img {
	transition: transform 0.4s ease;
}

.elementor-image-gallery .gallery-item:hover .gallery-icon img {
	transform: scale(1.06);
}

/* About page vision pull-quote — same script accent as hero taglines,
   sized up for a standalone quote line. */
.fnd-about-quote {
	display: block;
	font-size: 1.75rem !important;
	line-height: 1.3;
	margin: var(--space-3) 0 !important;
}

/* ---------------------------------------------------------------------
   Legal/utility pages (Privacy Policy, Terms of Use) render through the
   theme's bare default template, not Elementor, so they have none of the
   site's container width or spacing — give them a readable column
   instead of raw edge-to-edge text.
   ------------------------------------------------------------------ */
body.page-id-3 .page-header,
body.page-id-33 .page-header {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-5) var(--space-3) 0;
}

body.page-id-3 .page-content,
body.page-id-33 .page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-3) var(--space-6);
}

body.page-id-3 .page-content h2,
body.page-id-33 .page-content h2 {
	color: var(--color-ink) !important;
	margin-top: var(--space-4);
}

body.page-id-3 .page-content p,
body.page-id-33 .page-content p,
body.page-id-3 .page-content li,
body.page-id-33 .page-content li {
	color: var(--color-ink-muted) !important;
	line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Single-post templates (Articles/Message/Testimony/Project/Prayer
   Request) — shared utility classes tagged onto each Theme Builder
   template's hero/content/comments containers. Real dynamic content
   (title, date, custom fields) stays untouched; this only adds a soft
   cream hero band, a readable content column, and image/meta styling.
   ------------------------------------------------------------------ */
.fnd-single-hero {
	text-align: center;
}

.fnd-single-image img {
	border-radius: 14px;
	box-shadow: var(--shadow-card);
	width: 100%;
	height: 420px;
	object-fit: cover;
}

@media (max-width: 767px) {
	.fnd-single-image img {
		height: 240px;
	}
}

.fnd-single-meta {
	margin-top: var(--space-2) !important;
	padding-top: var(--space-2);
	border-top: 1px solid rgba(26, 21, 18, 0.08);
}

.fnd-single-content,
.fnd-single-comments {
	max-width: 760px !important;
	margin: 0 auto !important;
}

.fnd-single-content .elementor-widget-theme-post-content p,
.fnd-single-content .elementor-widget-theme-post-content li {
	color: var(--color-ink-muted);
	line-height: 1.8;
	font-size: 1.05rem;
}

.fnd-single-content .elementor-widget-theme-post-content h2,
.fnd-single-content .elementor-widget-theme-post-content h3 {
	color: var(--color-ink) !important;
	margin-top: var(--space-4);
}

.fnd-single-content .elementor-widget-theme-post-content img {
	border-radius: 10px;
	max-width: 100%;
	height: auto;
}

.fnd-single-content .elementor-widget-theme-post-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-2);
	margin-left: 0;
	font-style: italic;
	color: var(--color-ink-muted);
}

/* Secondary "Give via Paystack" link — a plain hosted-payment-page link,
   shown alongside the primary GiveWP "Donate to This Project" button only
   on a project's single page (project_paystack_url postmeta), not on
   card-grid summaries. Outline style (not a solid button) to read as the
   secondary option next to the solid-red primary donate button. */
.fnd-paystack-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: var(--space-2);
	padding: 12px 24px;
	border: 1.5px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-primary);
	background: transparent;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.fnd-paystack-link:hover {
	background: var(--color-primary);
	color: #fff;
}

/* [foundation_payment_bg] — the org's own giving flyer (QR code, phone
   mockup, bank transfer details), displayed on the Give page's "Prefer a
   Bank Transfer?" band as a real readable graphic. */
.fnd-payment-bg-image {
	display: block;
	width: 100%;
	max-width: 560px;
	margin: var(--space-3) auto 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}