/**
 * Site A (Cornerstone Baptist Church) demo stylesheet.
 *
 * Colors/radii are hardcoded to the handoff's literal hex values rather
 * than referencing the styles/site-a.json CSS custom properties. Reason:
 * those custom properties only resolve correctly when the "Site A" style
 * variation is the ACTIVE variation in Appearance > Editor > Styles -- an
 * extra manual step a site owner could easily forget after import. The
 * style-variation file still exists and matters (it's what gives editors
 * matching color-picker swatches in the block editor), but the frontend
 * CSS here is self-sufficient so the demo renders correctly regardless.
 *
 * Enqueued only on Site A templates/CPTs -- see inc/enqueue.php.
 */

.sa-header,
.sa-footer,
.sa-hero,
.sa-strip,
.sa-welcome,
.sa-band,
.sa-section,
.sa-ministry-grid,
.sa-events-list,
.sa-give-band,
.sa-cta-centered {
	font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	box-sizing: border-box;
}

.sa-header *, .sa-footer *, .sa-hero *, .sa-strip *, .sa-welcome *,
.sa-band *, .sa-section *, .sa-ministry-grid *, .sa-events-list *,
.sa-give-band *, .sa-cta-centered * {
	box-sizing: border-box;
}

.sa-h1, .sa-h2, .sa-wordmark__text {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", ui-serif, Georgia, serif);
	font-weight: 500;
}

/* ---------- Header ---------- */

.sa-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(245, 240, 232, 0.85);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(26, 21, 18, 0.10);
}

.sa-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.sa-wordmark {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-wordmark__text {
	font-size: 24px;
}

.sa-wordmark__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-wordmark__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--sa-muted, #5C5347);
}

.sa-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.sa-nav a {
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
}

.sa-nav a:hover {
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sa-link-cta {
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
}

.sa-link-cta:hover {
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
}

.sa-burger span {
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--sa-ink, #1A1512);
	border-radius: 2px;
}

.sa-mobile-nav {
	display: none;
	flex-direction: column;
	padding: 6px 24px 22px;
	border-top: 1px solid rgba(26, 21, 18, 0.10);
	background: rgba(245, 240, 232, 0.98);
	backdrop-filter: blur(14px);
}

.sa-mobile-nav a {
	text-align: start;
	border-bottom: 1px solid rgba(26, 21, 18, 0.08);
	font-size: 17px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
	padding: 15px 2px;
}

.sa-mobile-nav__give {
	margin-top: 14px;
	text-align: center;
	border-bottom: none !important;
}

.sa-mobile-nav.is-open {
	display: flex;
}

@media (max-width: 820px) {
	.sa-nav,
	.sa-header__actions .sa-link-cta,
	.sa-header__actions .sa-btn {
		display: none;
	}
	.sa-burger {
		display: flex;
	}
}

/* ---------- Buttons ---------- */

.sa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	text-decoration: none;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s cubic-bezier(.16, 1, .3, 1);
}

.sa-btn--lg {
	padding: 16px 32px;
	font-size: 16px;
}

.sa-btn--small {
	padding: 12px 20px;
	font-size: 14px;
}

.sa-btn--maroon {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-btn--maroon:hover {
	background: var(--wp--preset--color--sa-maroon-dark, #632127);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

.sa-btn--ghost {
	background: rgba(251, 246, 238, 0.10);
	border: 1px solid rgba(251, 246, 238, 0.45);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	backdrop-filter: blur(4px);
}

.sa-btn--ghost:hover {
	background: rgba(251, 246, 238, 0.20);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

.sa-btn--outline-light {
	background: none;
	border: 1px solid rgba(234, 240, 247, 0.4);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-btn--outline-light:hover {
	background: rgba(234, 240, 247, 0.1);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	transform: translateY(-2px);
}

.sa-btn--outline-dark {
	background: none;
	border: 1px solid rgba(26, 21, 18, 0.25);
	color: var(--wp--preset--color--sa-ink, #1A1512);
	white-space: nowrap;
}

.sa-btn--outline-dark:hover {
	background: var(--wp--preset--color--sa-ink, #1A1512);
	color: var(--wp--preset--color--sa-bone, #F5F0E8);
	transform: translateY(-2px);
}

.sa-btn--ink {
	background: var(--wp--preset--color--sa-ink, #1A1512);
	color: var(--wp--preset--color--sa-bone, #F5F0E8);
}

.sa-btn--ink:hover {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

.sa-text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--sa-maroon, #7C2D34);
	padding-bottom: 4px;
	width: fit-content;
}

.sa-text-link:hover {
	border-bottom-color: var(--wp--preset--color--sa-maroon-dark, #632127);
}

/* ---------- Shared section scaffolding ---------- */

.sa-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 110px 32px;
}

.sa-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 44px;
}

.sa-band {
	position: relative;
	overflow: hidden;
}

.sa-band--surface {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	border-top: 1px solid rgba(26, 21, 18, 0.07);
	border-bottom: 1px solid rgba(26, 21, 18, 0.07);
}

.sa-band--navy {
	background: var(--wp--preset--color--sa-navy, #1C3454);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-band > .sa-section {
	padding: 110px 32px;
}

.sa-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-eyebrow--on-dark {
	/* One-off: cream tint tuned for legibility on the hero photo scrim,
	   not a core brand color -- no matching theme.json token by design. */
	color: #E7D8C4;
}

.sa-eyebrow--on-navy {
	color: var(--wp--preset--color--sa-tan, #D9A97A);
}

.sa-eyebrow--centered {
	justify-content: center;
}

.sa-eyebrow__num {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-style: italic;
	font-size: 19px;
	color: inherit;
}

.sa-rule {
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.sa-h1 {
	font-size: clamp(42px, 6vw, 90px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 16ch;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-h1 em {
	font-style: italic;
	font-weight: 400;
	/* One-off: warmer than sa-cream-warm specifically for the emphasized
	   word in the hero H1 -- a deliberate accent shade, not a token. */
	color: #F0DCC4;
}

.sa-h2 {
	font-size: clamp(30px, 4vw, 56px);
	line-height: 1.08;
	margin: 0 0 24px;
	max-width: 18ch;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-h2 em {
	font-style: italic;
	font-weight: 400;
}

.sa-h2--on-navy {
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-on-navy {
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
}

/* ---------- Hero ---------- */

.sa-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	/* One-off: near-black safety background, visible only for the
	   instant before the hero photo/scrim paint over it -- not a
	   design token since nothing else in the demo ever shows this
	   color deliberately. */
	background: #101018;
}

.sa-hero__img,
.sa-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-hero__video {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.sa-hero__video.is-visible {
	opacity: 1;
}

.sa-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(178deg, rgba(12, 14, 24, 0.50) 0%, rgba(12, 14, 24, 0.10) 30%, rgba(11, 12, 20, 0.34) 60%, rgba(9, 10, 17, 0.90) 100%);
}

.sa-hero__masthead {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 32px 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(251, 246, 238, 0.24);
	padding-bottom: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	/* One-off: same reasoning as .sa-eyebrow--on-dark above -- cream
	   tint for legibility on the hero photo, not a token. */
	color: #E7D8C4;
}

.sa-hero__content {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px 76px;
	width: 100%;
}

.sa-hero__sub {
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.6;
	/* One-off: cream tint for the hero subhead paragraph on the photo
	   background -- see .sa-eyebrow--on-dark above for the pattern. */
	color: #E4DBCB;
	max-width: 50ch;
	margin: 30px 0 38px;
}

.sa-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.sa-hero__times {
	/* One-off: same hero-photo cream tint as .sa-hero__sub above. */
	color: #E4DBCB;
	font-size: 15px;
	margin-inline-start: 8px;
}

/* ---------- Times/Location strip ---------- */

.sa-strip {
	background: var(--wp--preset--color--sa-navy, #1C3454);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-strip__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr auto;
}

.sa-strip__cell {
	padding: 40px 36px 40px 0;
	border-inline-end: 1px solid rgba(234, 240, 247, 0.16);
}

.sa-strip__cell--action {
	display: flex;
	align-items: center;
	padding-inline-start: 36px;
	border-inline-end: none;
}

.sa-strip__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-tan, #D9A97A);
	margin-bottom: 10px;
}

.sa-strip__value {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 22px;
	font-weight: 500;
}

.sa-strip__note {
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	font-size: 14px;
	margin-top: 5px;
}

@media (max-width: 960px) {
	.sa-strip__inner {
		grid-template-columns: 1fr 1fr;
	}
	.sa-strip__cell {
		border-inline-end: none;
		border-bottom: 1px solid rgba(234, 240, 247, 0.16);
		padding: 28px 0;
	}
}

/* ---------- Welcome split ---------- */

.sa-welcome {
	max-width: 1240px;
	margin: 0 auto;
	padding: 130px 32px 110px;
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	gap: 80px;
	align-items: center;
}

.sa-welcome__media {
	position: relative;
}

.sa-welcome__frame {
	position: absolute;
	top: -22px;
	left: -22px;
	right: 44px;
	bottom: 44px;
	border: 1px solid rgba(124, 45, 52, 0.40);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	pointer-events: none;
}

.sa-welcome__img-wrap {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
}

.sa-welcome__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-welcome__img-small {
	position: absolute;
	bottom: -34px;
	left: -34px;
	width: 180px;
	aspect-ratio: 5 / 4;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	overflow: hidden;
	border: 7px solid var(--wp--preset--color--sa-bone, #F5F0E8);
	box-shadow: 0 22px 46px rgba(20, 15, 11, 0.22);
}

.sa-welcome__img-small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-welcome__badge {
	position: absolute;
	top: -28px;
	right: -20px;
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	padding: 22px 26px;
	max-width: 190px;
	box-shadow: 0 20px 44px rgba(20, 15, 11, 0.24);
}

.sa-welcome__badge-num {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 6px;
}

.sa-welcome__copy p {
	font-size: 18px;
	line-height: 1.75;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	max-width: 50ch;
	margin: 0 0 18px;
}

@media (max-width: 900px) {
	.sa-welcome {
		grid-template-columns: 1fr;
		gap: 60px;
		padding-top: 72px;
	}
	.sa-welcome__img-small {
		display: none;
	}
}

/* ---------- Ministries preview grid ---------- */

.sa-ministry-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.sa-ministry-card__img {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
}

.sa-ministry-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-ministry-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 22px;
	margin: 20px 0 9px;
	padding-top: 20px;
	border-top: 1px solid rgba(26, 21, 18, 0.15);
}

.sa-ministry-card p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0;
}

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

/* ---------- Events feed (dynamic query) ---------- */

.sa-events-list {
	display: flex;
	flex-direction: column;
}

.sa-event-row {
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 28px 8px;
	border-top: 1px solid rgba(26, 21, 18, 0.12);
	transition: background 0.3s ease, padding 0.3s ease;
}

.sa-event-row:hover {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	padding-inline-start: 22px;
	padding-inline-end: 18px;
}

@media (max-width: 600px) {
	.sa-event-row {
		grid-template-columns: 56px 1fr !important;
		grid-template-areas: "date body" "date tag";
		gap: 6px 16px;
		padding: 18px 4px;
	}

	.sa-event-row__date {
		grid-area: date;
		width: 56px;
		height: 56px;
	}

	.sa-event-row__date time:first-child {
		font-size: 22px;
	}

	.sa-event-row__body {
		grid-area: body;
	}

	.sa-event-row__body h3 {
		font-size: 19px;
	}

	.sa-event-row__tag {
		grid-area: tag;
		justify-self: start;
		align-self: start;
	}
}

.sa-event-row__date {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	border: 1px solid rgba(26, 21, 18, 0.16);
	color: var(--wp--preset--color--sa-navy, #1C3454);
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 20px;
	font-weight: 500;
	gap: 0;
}

.sa-event-row__date time:first-child {
	font-size: 28px;
}

.sa-event-row__body h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 24px;
	margin: 0 0 6px;
}

.sa-event-row__time {
	font-size: 14px;
	color: var(--wp--preset--color--sa-faint, #786C59);
	margin: 0;
}

.sa-event-row__tag {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	background: rgba(124, 45, 52, 0.1);
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

/* ---------- Give band ---------- */

.sa-give-band {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 104px 32px;
}

.sa-give-band__img {
	aspect-ratio: 5 / 4;
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
}

.sa-give-band__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.sa-give-band {
		grid-template-columns: 1fr;
	}
}

/* ---------- Centered CTA ---------- */

.sa-cta-centered {
	max-width: 1240px;
	margin: 0 auto;
	padding: 130px 32px;
	text-align: center;
}

.sa-cta-centered .sa-h2,
.sa-cta-centered .sa-eyebrow {
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.sa-cta-centered p {
	font-size: 19px;
	line-height: 1.7;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	max-width: 56ch;
	margin: 0 auto 36px;
}

/* ---------- Footer ---------- */

.sa-footer {
	background: var(--wp--preset--color--sa-footer-bg, #17120E);
	color: var(--wp--preset--color--sa-footer-text, #C4B8A5);
}

.sa-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 32px 40px;
}

.sa-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(196, 184, 165, 0.18);
}

.sa-footer__wordmark {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-footer__brand p {
	font-size: 15px;
	line-height: 1.7;
	max-width: 34ch;
	margin: 0 0 20px;
}

.sa-footer__social {
	display: flex;
	gap: 10px;
}

.sa-footer__social span {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(196, 184, 165, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	/* One-off: cream tint for the icon glyph against the dark footer
	   background -- not reused elsewhere, no matching token. */
	color: #F0E7D8;
}

.sa-footer__heading {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-faint, #786C59);
	margin-bottom: 20px;
}

.sa-footer__col {
	display: flex;
	flex-direction: column;
	gap: 13px;
	align-items: flex-start;
}

.sa-footer__col a {
	color: var(--wp--preset--color--sa-footer-text, #C4B8A5);
	font-size: 15px;
	text-decoration: none;
}

.sa-footer__col a:hover {
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-footer__gather {
	font-size: 15px;
	line-height: 1.9;
}

.sa-footer__gather-strong {
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-footer__gather-spacer {
	margin-top: 12px;
}

.sa-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sa-newsletter__consent {
	flex-basis: 100%;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--sa-footer-text, #C4B8A5);
	margin-top: 6px;
}

.sa-newsletter__consent input {
	margin-top: 3px;
	flex-shrink: 0;
}

.sa-newsletter__consent a {
	color: inherit;
	text-decoration: underline;
}

.sa-newsletter input[type="email"] {
	flex: 1;
	background: rgba(196, 184, 165, 0.08);
	border: 1px solid rgba(196, 184, 165, 0.25);
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	padding: 12px 18px;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	min-width: 0;
}

.sa-newsletter input[type="email"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--sa-tan, #D9A97A);
	outline-offset: 2px;
}

.sa-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 28px;
	font-size: 13px;
	color: var(--wp--preset--color--sa-faint, #786C59);
}

.sa-footer__bottom a {
	color: var(--wp--preset--color--sa-faint, #786C59);
}

.sa-footer__bottom a:hover {
	color: var(--wp--preset--color--sa-footer-text, #C4B8A5);
}

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

@media (max-width: 600px) {
	.sa-footer__grid {
		grid-template-columns: 1fr;
	}
	.sa-strip__inner,
	.sa-ministry-grid,
	.sa-give-band {
		grid-template-columns: 1fr;
	}
	.sa-welcome {
		padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
}

/* ---------- Sermon video embed (single-sermon.html) ---------- */

.sa-video-embed {
	margin: 1.5rem 0 2rem;
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	overflow: hidden;
}

.sa-video-embed iframe {
	display: block;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.sa-hero__video {
		display: none;
	}
}

/* =====================================================================
   Additions for the remaining 7 pages (Our Story, Ministries, Sermons,
   Events, Give, Plan a Visit, Contact)
   ===================================================================== */

/* ---------- Reusable secondary-page hero (navy band + faint photo) ---------- */

.sa-hero-sub {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--sa-navy, #1C3454);
	font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

.sa-hero-sub--maroon {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-hero-sub__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.34;
}

.sa-hero-sub__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 32, 54, 0.72), rgba(16, 26, 44, 0.92));
}

.sa-hero-sub__scrim--maroon {
	background: linear-gradient(180deg, rgba(74, 24, 29, 0.7), rgba(60, 18, 22, 0.92));
}

.sa-hero-sub__content {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 130px 32px 110px;
}

.sa-hero-sub__desc {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	max-width: 56ch;
	margin: 28px 0 0;
}

.sa-hero-sub--maroon .sa-hero-sub__desc {
	/* One-off: sa-muted-navy (used by the default sub-hero above) reads
	   muddy against the maroon scrim specifically -- this warmer cream
	   is tuned for that one background variant only. */
	color: #EAD3C2;
}

.sa-info-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 34px;
}

.sa-info-chip {
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	border: 1px solid rgba(234, 240, 247, 0.35);
	padding: 9px 18px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

/* ---------- Generic split (text + media, reused across pages) ---------- */

.sa-split {
	max-width: 1240px;
	margin: 0 auto;
	padding: 120px 32px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 72px;
	align-items: center;
}

.sa-split--section {
	padding: 120px 32px;
}

.sa-split--reverse {
	grid-template-columns: 1fr 1fr;
}

.sa-band .sa-split {
	padding: 120px 32px;
}

.sa-split__copy p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	max-width: 50ch;
	margin: 0 0 18px;
}

.sa-split__media {
	aspect-ratio: 5 / 4;
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
}

.sa-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-split__media--map {
	aspect-ratio: 16 / 10;
}

.sa-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	background: rgba(124, 45, 52, 0.1);
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	margin-bottom: 20px;
}

@media (max-width: 900px) {
	.sa-split,
	.sa-split--reverse {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* ---------- Section head variants ---------- */

.sa-section--centered-head {
	text-align: start;
}

.sa-section__head--centered {
	display: block;
	text-align: center;
	margin-bottom: 60px;
}

.sa-section__head--centered .sa-h2,
.sa-section__head--centered .sa-eyebrow {
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.sa-section--top-flush {
	padding-top: 0;
}

.sa-section--tight-top {
	padding-top: 0;
}

/* ---------- Mission statement ---------- */

.sa-mission {
	max-width: 1080px;
	margin: 0 auto;
	padding: 120px 32px;
	text-align: center;
}

.sa-mission__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	margin-bottom: 26px;
}

.sa-mission__statement {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.25;
	margin: 0;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-mission__statement em {
	font-style: italic;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

/* ---------- Beliefs grid ---------- */

.sa-beliefs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: rgba(26, 21, 18, 0.1);
	border: 1px solid rgba(26, 21, 18, 0.1);
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	overflow: hidden;
}

.sa-belief-card {
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	padding: 44px 40px;
}

.sa-belief-card__num {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	margin-bottom: 16px;
}

.sa-belief-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 28px;
	margin: 0 0 14px;
}

.sa-belief-card p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0;
	max-width: 44ch;
}

@media (max-width: 700px) {
	.sa-beliefs {
		grid-template-columns: 1fr;
	}
}

/* ---------- Timeline ---------- */

.sa-timeline {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin-top: 60px;
}

.sa-timeline-item {
	padding: 32px 24px 0;
	border-top: 2px solid rgba(217, 169, 122, 0.5);
	position: relative;
}

.sa-timeline-item::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 24px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-timeline-item__year {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 30px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	margin-bottom: 12px;
}

.sa-timeline-item p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	margin: 0;
}

@media (max-width: 900px) {
	.sa-timeline {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* ---------- Leadership grid (dynamic -- staff CPT) ---------- */

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

.sa-leader-card__img {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	overflow: hidden;
	margin-bottom: 18px;
}

.sa-leader-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-leader-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 4px;
}

.sa-leader-card__role {
	font-size: 14px;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	font-weight: 600;
	margin: 0;
}

@media (max-width: 900px) {
	.sa-leadership-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Ministries grid (dynamic -- ministry CPT) ---------- */

.sa-ministries-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 52px;
}

.sa-ministry-tile {
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.08);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1), box-shadow 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-ministry-tile:hover {
	border-color: rgba(124, 45, 52, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(26, 21, 18, 0.12);
}

.sa-ministry-tile__media {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.sa-ministry-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-ministry-tile__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-navy, #1C3454);
	background: rgba(245, 240, 232, 0.92);
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	margin: 0;
}

.sa-ministry-tile__body {
	padding: 26px 26px 30px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sa-ministry-tile__body h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 25px;
	margin: 0 0 12px;
}

.sa-ministry-tile__body p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0 0 20px;
	flex: 1;
}

.sa-ministry-tile__more {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

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

/* ---------- Filter chips ---------- */

.sa-filter-chips {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sa-chip {
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	border: 1px solid rgba(26, 21, 18, 0.18);
	color: var(--wp--preset--color--sa-muted, #5C5347);
	text-decoration: none;
	transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s cubic-bezier(.16, 1, .3, 1);
}

.sa-chip:hover {
	border-color: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	transform: translateY(-2px);
}

/* ---------- Featured sermon (dynamic) ---------- */

.sa-featured-sermon > .sa-section,
.sa-featured-sermon .wp-block-query {
	max-width: 1240px;
	margin: 0 auto;
	padding: 120px 32px;
}

.sa-featured-sermon .wp-block-query {
	padding: 120px 32px;
}

.sa-featured-sermon__grid {
	display: grid !important;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}

.sa-featured-sermon__media {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	overflow: hidden;
}

.sa-featured-sermon__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-featured-sermon__badge {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

.sa-h1--sermon {
	font-size: clamp(34px, 4.4vw, 56px);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	margin: 18px 0 16px;
	max-width: none;
}

.sa-featured-sermon__meta {
	gap: 14px;
	font-size: 16px;
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	margin: 0 0 22px;
}

.sa-featured-sermon__meta p {
	margin: 0;
}

.sa-featured-sermon__meta p:not(:last-child)::after {
	content: "\00b7";
	margin-inline-start: 14px;
}

.sa-featured-sermon__excerpt {
	font-size: 17px;
	line-height: 1.7;
	/* One-off: cool blue-grey tint for legibility on this card's navy
	   background -- distinct hue family from the warm cream tints used
	   on the maroon/photo variants elsewhere in this file. */
	color: #C7D1DD;
	max-width: 46ch;
	margin: 0 0 30px;
}

/* ---------- Play button (decorative) ---------- */

.sa-play-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(124, 45, 52, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.sa-play-btn::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-inline-start: 15px solid var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	margin-inline-start: 4px;
}

.sa-play-btn--lg {
	width: 78px;
	height: 78px;
}

.sa-play-btn--lg::after {
	border-top-width: 13px;
	border-bottom-width: 13px;
	border-inline-start-width: 21px;
	margin-inline-start: 6px;
}

/* ---------- Sermon grid ---------- */

.sa-sermon-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 40px;
}

.sa-sermon-card {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	border: 1px solid rgba(26, 21, 18, 0.08);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1), box-shadow 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-sermon-card:hover {
	border-color: rgba(124, 45, 52, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(26, 21, 18, 0.12);
}

.sa-sermon-card__media {
	position: relative;
	height: 190px;
	overflow: hidden;
}

.sa-sermon-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-sermon-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-navy, #1C3454);
	background: rgba(245, 240, 232, 0.94);
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	margin: 0;
}

.sa-sermon-card__body {
	padding: 22px 24px 26px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sa-sermon-card__meta {
	gap: 8px;
	font-size: 12.5px;
	color: var(--wp--preset--color--sa-faint, #786C59);
	margin-bottom: 8px;
}

.sa-sermon-card__meta p {
	margin: 0;
}

.sa-sermon-card__meta p:not(:last-child)::after {
	content: "\00b7";
	margin-inline-start: 8px;
}

.sa-sermon-card__body h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 8px;
}

.sa-sermon-card__speaker {
	font-size: 14px;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	font-weight: 600;
	margin: 0;
}

@media (max-width: 960px) {
	.sa-featured-sermon__grid {
		grid-template-columns: 1fr;
	}
	.sa-sermon-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Featured event (static) ---------- */

.sa-featured-event {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	border: 1px solid rgba(26, 21, 18, 0.1);
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	overflow: hidden;
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
}

.sa-featured-event__media {
	position: relative;
	min-height: 420px;
	overflow: hidden;
}

.sa-featured-event__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-featured-event__badge {
	position: absolute;
	top: 22px;
	left: 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

.sa-featured-event__body {
	padding: 56px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sa-featured-event__body p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	max-width: 44ch;
	margin: 0 0 28px;
}

@media (max-width: 900px) {
	.sa-featured-event {
		grid-template-columns: 1fr;
	}
	.sa-featured-event__body {
		padding: 40px 32px;
	}
}

/* ---------- Event card grid (dynamic) ---------- */

.sa-event-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 44px;
}

.sa-event-card {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	border: 1px solid rgba(26, 21, 18, 0.08);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1), box-shadow 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-event-card:hover {
	border-color: rgba(124, 45, 52, 0.5);
	transform: translateY(-4px);
	box-shadow: 0 18px 34px rgba(26, 21, 18, 0.12);
}

.sa-event-card__media {
	position: relative;
	height: 190px;
	overflow: hidden;
}

.sa-event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-event-card__date-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	background: rgba(28, 52, 84, 0.94);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
}

.sa-event-card__date-chip time:first-child {
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
}

.sa-event-card__date-chip time:last-child {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--sa-tan, #D9A97A);
	margin-top: 2px;
}

.sa-event-card__tag {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	background: rgba(245, 240, 232, 0.94);
	padding: 5px 12px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

.sa-event-card__body {
	padding: 24px 24px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sa-event-card__body h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 23px;
	margin: 0 0 8px;
}

.sa-event-card__meta {
	gap: 6px;
	font-size: 13px;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	font-weight: 600;
	margin-bottom: 12px;
}

.sa-event-card__meta p {
	margin: 0;
}

.sa-event-card__meta p:not(:last-child)::after {
	content: "\00b7";
	margin-inline-start: 6px;
}

.sa-event-card__body p:last-child {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0;
}

@media (max-width: 960px) {
	.sa-event-card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Weekly rhythms ---------- */

.sa-rhythms {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(234, 240, 247, 0.14);
	border: 1px solid rgba(234, 240, 247, 0.14);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	overflow: hidden;
}

.sa-rhythm-card {
	background: var(--wp--preset--color--sa-navy, #1C3454);
	padding: 40px 34px;
	transition: background 0.3s ease;
}

.sa-rhythm-card:hover {
	background: var(--wp--preset--color--sa-navy-deep, #20395C);
}

.sa-rhythm-card__when {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-tan, #D9A97A);
	margin-bottom: 12px;
}

.sa-rhythm-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 24px;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	margin: 0 0 8px;
}

.sa-rhythm-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	margin: 0;
}

@media (max-width: 900px) {
	.sa-rhythms {
		grid-template-columns: 1fr;
	}
}

/* ---------- Give panel ---------- */

.sa-give-panel {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	border: 1px solid rgba(26, 21, 18, 0.1);
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	padding: 38px;
	box-shadow: 0 20px 44px rgba(26, 21, 18, 0.06);
}

.sa-give-panel__toggle {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.sa-give-panel__toggle-btn {
	flex: 1;
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.14);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	font-family: inherit;
	padding: 12px 0;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
}

.sa-give-panel__toggle-btn.is-active {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	border-color: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-amount-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}

.sa-amount-btn {
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.14);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	font-family: inherit;
	padding: 16px 0;
	border-radius: var(--wp--custom--radius--sa-input, 12px);
}

.sa-amount-btn:hover {
	border-color: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-amount-btn.is-active {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	border-color: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-give-panel__custom {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.14);
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	padding: 14px 18px;
	margin-bottom: 18px;
}

.sa-give-panel__custom span {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 22px;
	color: var(--wp--preset--color--sa-faint, #786C59);
}

.sa-give-panel__custom input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	font-size: 16px;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	font-family: inherit;
	min-width: 0;
}

.sa-give-panel__custom input:focus-visible {
	outline: 2px solid var(--wp--preset--color--sa-maroon, #7C2D34);
	outline-offset: 2px;
	border-radius: 2px;
}

.sa-give-panel__submit {
	width: 100%;
	padding: 16px 0;
}

.sa-give-panel__note {
	font-size: 12.5px;
	color: var(--wp--preset--color--sa-faint, #786C59);
	text-align: center;
	margin: 14px 0 0;
}

/* ---------- Impact stats ---------- */

.sa-stats {
	max-width: 1240px;
	margin: 0 auto;
	padding: 90px 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.sa-stat {
	text-align: center;
}

.sa-stat__num {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 500;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	line-height: 1;
}

.sa-stat__label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin-top: 12px;
	max-width: 22ch;
	margin-inline-start: auto;
	margin-inline-end: auto;
}

@media (max-width: 900px) {
	.sa-stats {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Allocation bars ---------- */

.sa-allocation {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sa-allocation-row__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-allocation-row__head span:last-child {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 22px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-progress {
	height: 8px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	background: rgba(26, 21, 18, 0.09);
	overflow: hidden;
}

.sa-progress__fill {
	height: 100%;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	background: var(--wp--preset--color--sa-navy, #1C3454);
}

/* ---------- Ways to give ---------- */

.sa-ways-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sa-way-card {
	background: rgba(234, 240, 247, 0.05);
	border: 1px solid rgba(234, 240, 247, 0.14);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	padding: 32px 28px;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-way-card:hover {
	border-color: rgba(217, 169, 122, 0.55);
	transform: translateY(-4px);
}

.sa-way-card__tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-tan, #D9A97A);
	margin-bottom: 16px;
}

.sa-way-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 23px;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	margin: 0 0 12px;
}

.sa-way-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted-navy, #A9B6C7);
	margin: 0;
}

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

/* ---------- Scripture CTA ---------- */

.sa-scripture-cta {
	max-width: 1000px;
	margin: 0 auto;
	padding: 120px 32px;
	text-align: center;
}

.sa-scripture-cta p {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.3;
	margin: 0 0 20px;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-scripture-cta__ref {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

/* ---------- Visit steps ---------- */

.sa-visit-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 60px;
}

.sa-step-card {
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.08);
	border-radius: var(--wp--custom--radius--sa-card, 16px);
	padding: 34px 30px;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1), box-shadow 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-step-card:hover {
	border-color: rgba(124, 45, 52, 0.45);
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(26, 21, 18, 0.10);
}

.sa-step-card__num {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	margin-bottom: 16px;
}

.sa-step-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 12px;
}

.sa-step-card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0;
}

@media (max-width: 960px) {
	.sa-visit-steps {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- FAQ ---------- */

.sa-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 56px;
	margin-top: 48px;
}

.sa-faq-item {
	border-top: 1px solid rgba(26, 21, 18, 0.14);
	padding: 26px 0;
}

.sa-faq-item h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 21px;
	margin: 0 0 10px;
}

.sa-faq-item p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 0;
	max-width: 44ch;
}

@media (max-width: 700px) {
	.sa-faq-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Contact page ---------- */

.sa-contact-hero {
	max-width: 1240px;
	margin: 0 auto;
	padding: 120px 32px 56px;
}

.sa-h1--dark {
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-h1--dark-em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-contact-hero__desc {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	max-width: 54ch;
	margin: 24px 0 0;
}

.sa-contact-grid {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 32px 120px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: start;
}

.sa-contact-form {
	background: var(--wp--preset--color--sa-surface, #FBF8F2);
	border: 1px solid rgba(26, 21, 18, 0.1);
	border-radius: var(--wp--custom--radius--sa-media, 18px);
	padding: 40px;
	box-shadow: 0 20px 44px rgba(26, 21, 18, 0.05);
}

.sa-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.sa-form-field {
	margin-bottom: 16px;
}

.sa-form-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-faint, #786C59);
	margin-bottom: 8px;
}

.sa-form-field input,
.sa-form-field textarea {
	width: 100%;
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.14);
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	padding: 14px 16px;
	font-size: 15px;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	font-family: inherit;
	outline: none;
	resize: vertical;
}

.sa-form-field input:focus-visible,
.sa-form-field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--sa-maroon, #7C2D34);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-contact-form__submit {
	width: 100%;
	padding: 16px 0;
	margin-top: 6px;
}

.sa-contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.sa-contact-sidebar__map {
	aspect-ratio: 3 / 2;
}

.sa-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 480px) {
	.sa-info-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.sa-info-grid__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	margin-bottom: 8px;
}

.sa-info-grid__value {
	font-size: 15px;
	line-height: 1.6;
	/* One-off: softer than sa-ink for the Contact page's address/phone/
	   email values -- subtle hierarchy against the bold labels above
	   them, not a token. 10.8:1 against sa-bone, well past AA. */
	color: #3B342C;
}

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

@media (max-width: 600px) {
	.sa-form-row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Department directory ---------- */

.sa-dept-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.sa-dept-card {
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.08);
	border-radius: var(--wp--custom--radius--sa-input, 12px);
	padding: 28px 26px;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.16, 1, .3, 1), box-shadow 0.3s cubic-bezier(.16, 1, .3, 1);
}

.sa-dept-card:hover {
	border-color: rgba(124, 45, 52, 0.45);
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(26, 21, 18, 0.10);
}

.sa-dept-card__tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
	margin-bottom: 12px;
}

.sa-dept-card h3 {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 20px;
	margin: 0;
}

.sa-dept-card p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	margin: 10px 0 0;
}

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

/* ---------- hero__ctas centered variant ---------- */

.sa-hero__ctas--centered {
	justify-content: center;
}

/* ---------- Responsive: collapse remaining grids on mobile ---------- */

@media (max-width: 600px) {
	.sa-amount-grid {
		grid-template-columns: 1fr 1fr;
	}
	.sa-visit-steps,
	.sa-event-card-grid,
	.sa-sermon-grid,
	.sa-ministries-grid,
	.sa-leadership-grid,
	.sa-ways-grid,
	.sa-dept-grid {
		grid-template-columns: 1fr;
	}
	.sa-timeline {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Native-block adapter rules
   Added when static sections were refactored from raw wp:html into real
   Gutenberg blocks (core/group, core/heading, core/paragraph, core/image,
   core/buttons) for genuine drag-and-drop editability, per Section 2's
   "native Gutenberg, no page builder needed" requirement. core/image
   wraps output in <figure class="wp-block-image">, and core/button puts
   custom classNames on the WRAPPING div rather than the <a> itself -- both
   need small adapter rules rather than changes to the component styles
   already written above.
   ===================================================================== */

/* core/image figure wrapper neutralization -- let the existing
   .sa-*__media / .sa-*__img box rules keep controlling aspect-ratio and
   overflow exactly as before. */
[class^="sa-"] .wp-block-image,
[class*=" sa-"] .wp-block-image {
	margin: 0;
	height: 100%;
	line-height: 0;
}

[class^="sa-"] .wp-block-image img,
[class*=" sa-"] .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* core/button base reset -- className lands on .wp-block-button, the
   actual visual button lives on the nested .wp-block-button__link. This
   file only loads on Site A pages/CPTs, so a broad selector here is safe. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	text-decoration: none;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s cubic-bezier(.16, 1, .3, 1);
}

.wp-block-buttons {
	gap: 14px;
}

.sa-btn-lg .wp-block-button__link {
	padding: 16px 32px;
	font-size: 16px;
}

.sa-btn-maroon .wp-block-button__link {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

.sa-btn-maroon .wp-block-button__link:hover {
	background: var(--wp--preset--color--sa-maroon-dark, #632127);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

.sa-btn-ghost .wp-block-button__link {
	background: rgba(251, 246, 238, 0.10);
	border: 1px solid rgba(251, 246, 238, 0.45);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	backdrop-filter: blur(4px);
}

.sa-btn-ghost .wp-block-button__link:hover {
	background: rgba(251, 246, 238, 0.20);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

.sa-btn-outline-light .wp-block-button__link {
	background: none;
	border: 1px solid rgba(234, 240, 247, 0.4);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-btn-outline-light .wp-block-button__link:hover {
	background: rgba(234, 240, 247, 0.1);
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	transform: translateY(-2px);
}

.sa-btn-outline-dark .wp-block-button__link {
	background: none;
	border: 1px solid rgba(26, 21, 18, 0.25);
	color: var(--wp--preset--color--sa-ink, #1A1512);
	white-space: nowrap;
}

.sa-btn-outline-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--sa-ink, #1A1512);
	color: var(--wp--preset--color--sa-bone, #F5F0E8);
	transform: translateY(-2px);
}

.sa-btn-ink .wp-block-button__link {
	background: var(--wp--preset--color--sa-ink, #1A1512);
	color: var(--wp--preset--color--sa-bone, #F5F0E8);
}

.sa-btn-ink .wp-block-button__link:hover {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	transform: translateY(-2px);
}

/* core/read-more (used for per-post CTA buttons inside dynamic query
   loops -- Sermons page) needs the same button treatment. */
.sa-btn-maroon.wp-block-read-more,
a.wp-block-read-more.sa-btn-maroon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	text-decoration: none;
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

a.wp-block-read-more.sa-btn-outline-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid rgba(234, 240, 247, 0.4);
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	text-decoration: none;
	background: none;
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

/* core/heading and core/paragraph carry a wp-block-* class alongside our
   own -- no conflict, just noting it so future edits aren't surprised. */

/* ==========================================================================
   Core-block chrome compatibility (v0.8.0)
   --------------------------------------------------------------------------
   parts/header-site-a.html and parts/footer-site-a.html were rebuilt from
   raw wp:html into real core blocks (site-title, navigation, buttons,
   social-links, columns) so every piece of the chrome is editable in the
   Site Editor. The rules below map the core blocks' own markup onto the
   existing Site A design language; the original sa-* component rules above
   are untouched and continue to style everything else.
   ========================================================================== */

/* --- Site title as the wordmark (header + footer) --- */
.sa-header .wp-block-site-title,
.sa-header .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", ui-serif, Georgia, serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
	margin: 0;
}

.sa-footer .wp-block-site-title,
.sa-footer .wp-block-site-title a {
	font-size: 22px;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	text-decoration: none;
	margin: 0 0 12px;
}

/* --- Header navigation (core navigation block) --- */
.sa-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-ink, #1A1512);
	text-decoration: none;
}

.sa-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

/* Mobile overlay: inherit the drawer's warm surface instead of core's
   default white, and keep the toggle visible against it. */
.sa-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--sa-paper, #F5F0E8);
	padding-top: 76px;
}

.sa-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	padding: 10px 0;
}

.sa-header .wp-block-navigation__responsive-container-open,
.sa-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

/* --- Header action buttons (core buttons block) --- */
.sa-header__actions .wp-block-button.sa-link-cta .wp-block-button__link {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}

.sa-header__actions .wp-block-button.sa-link-cta .wp-block-button__link:hover {
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}

.sa-header__actions .wp-block-button.sa-btn--maroon .wp-block-button__link {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
	border-radius: var(--wp--custom--radius--sa-pill, 100px);
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 500;
}

.sa-header__actions .wp-block-button.sa-btn--maroon .wp-block-button__link:hover {
	background: var(--wp--preset--color--sa-maroon-dark, #632127);
}

/* --- Footer navigation + headings --- */
.sa-footer h2.sa-footer__heading {
	margin: 0 0 14px;
}

.sa-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	opacity: 0.85;
	text-decoration: none;
	font-size: 15px;
}

.sa-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	opacity: 1;
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

/* --- Footer social links (core social-links block, replacing the old
       placeholder text spans) --- */
.sa-footer .wp-block-social-links {
	margin-top: 18px;
	gap: 10px;
}

.sa-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
}

.sa-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--sa-maroon, #7C2D34);
}

/* Motion accessibility: if the buyer re-adds the hero background video
   (patterns/site-a-hero-video.php), stop it for visitors who've asked
   their OS for reduced motion -- the poster frame shows instead. */
@media (prefers-reduced-motion: reduce) {
	.sa-hero__video {
		display: none;
	}
}

/* Prayer request form (patterns/prayer-request-form.php) -- 0.11.0 */
.sa-form-field--checkbox label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--sa-muted, #5C5347);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	cursor: pointer;
}

.sa-form-field--checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--sa-maroon, #7C2D34);
	cursor: pointer;
}

/* Windows High Contrast Mode / forced-colors (0.11.0). In forced-colors
   the browser replaces the palette with the user's own system colors;
   the job here is not to fight that but to keep STRUCTURE legible where
   this design relies on color alone: photo scrims lose their gradient
   (so text needs a real backing), decorative accent squares/underlines
   get system-colored borders so they still register as elements, and
   buttons keep visible boundaries once their background is stripped. */
@media (forced-colors: active) {
	.sa-hero__scrim,
	.sa-hero::before {
		background: Canvas;
		opacity: 0.85;
	}

	.wp-block-button__link,
	.sa-btn,
	.sa-give-panel__toggle-btn,
	.sa-amount-btn {
		border: 1px solid ButtonText;
	}

	.sa-give-panel__toggle-btn.is-active,
	.sa-amount-btn.is-active {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
		border-color: Highlight;
	}

	.civictrust-style-switcher {
		border: 1px solid CanvasText;
	}
}

/* prefers-contrast: users asking for MORE contrast get the muted text
   ramp promoted one step -- the AA-passing values become the AAA-leaning
   ink, without redesigning anything. */
@media (prefers-contrast: more) {
	:root {
		--wp--preset--color--sa-muted: var(--wp--preset--color--sa-ink, #1A1512);
		--wp--preset--color--sa-faint: var(--wp--preset--color--sa-muted, #5C5347);
	}
}

/* =====================================================================
 * Shared demo utilities (0.26.0) — factored once so every variation
 * overlay composes instead of copying. `.sa-grain` is the film-grain
 * layer; `sa-rise` is the shared entrance keyframe. Overlays own their
 * own timing/easing (each register has its own pacing personality);
 * the keyframe and grain live here because they are identical.
 * Both are inert on their own: nothing animates or textures unless a
 * variation overlay (or Phase 1's Site A layer below it) opts in.
 * ===================================================================== */

.sa-grain {
	position: relative;
}
.sa-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.3;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes sa-rise {
		from { opacity: 0; transform: translateY(14px); }
		to { opacity: 1; transform: translateY(0); }
	}
}

/* =====================================================================
 * Site A director's cut (0.26.0) — also the BASELINE the other sa-
 * demos inherit until their own phase tunes pacing: hero entrance,
 * band atmosphere, and the pull-verse quote treatment. Overlays load
 * after this file and may retime/replace any of it (Site F already
 * choreographs its own hero; its later rules win).
 * ===================================================================== */

/* --- Atmosphere: film grain on the photo hero, warm wash on surface
       bands. Wash colors come from sa tokens, so each variation
       generates its own atmosphere automatically. --- */
.sa-hero .sa-hero__scrim {
	/* Grain layered OVER the original 178deg scrim gradient, copied
	   verbatim — the scrim carries the hero text's contrast, so its
	   darkness must not change by a single stop. */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(178deg, rgba(12, 14, 24, 0.50) 0%, rgba(12, 14, 24, 0.10) 30%, rgba(11, 12, 20, 0.34) 60%, rgba(9, 10, 17, 0.90) 100%);
}
.sa-band--surface {
	background:
		radial-gradient(100% 120% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--sa-maroon, #7C2D34) 4%, transparent), transparent 55%),
		var(--wp--preset--color--sa-surface, #FBF8F2);
}

/* --- Typographic moment: the pull-verse. Any quote block inside a
       demo band becomes a scripture/mission feature: large serif
       italic, hanging quotation mark, maroon citation. --- */
.sa-band .wp-block-quote {
	border: 0;
	margin: 2.2em auto;
	padding: 0 0 0 0.5em;
	max-width: 22ch;
	position: relative;
}
.sa-band .wp-block-quote::before {
	content: "\201C";
	position: absolute;
	left: -0.45em;
	top: -0.18em;
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: 3.2em;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--sa-maroon, #7C2D34) 34%, transparent);
}
.sa-band .wp-block-quote p {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-style: italic;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.4;
	color: var(--wp--preset--color--sa-ink, #1A1512);
}
.sa-band .wp-block-quote cite {
	display: block;
	margin-top: 0.8em;
	font-style: normal;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sa-maroon, #7C2D34);
}
.sa-band--navy .wp-block-quote p { color: var(--wp--preset--color--sa-cream, #EAF0F7); }
.sa-band--navy .wp-block-quote cite { color: var(--wp--preset--color--sa-cream-warm, #FBF6EE); }

/* --- Choreography: one hero entrance, then stillness. Baseline
       pacing is Site A's dissolve; variation overlays retime. --- */
@media (prefers-reduced-motion: no-preference) {
	.sa-hero__masthead,
	.sa-hero__content > * {
		animation: sa-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.sa-hero__content > *:nth-child(2) { animation-delay: 0.09s; }
	.sa-hero__content > *:nth-child(3) { animation-delay: 0.18s; }
	.sa-hero__content > *:nth-child(4) { animation-delay: 0.27s; }
	.sa-hero__content > *:nth-child(5) { animation-delay: 0.36s; }
}

/* --- 0.30.0: new Site A pages (Watch / Prayer / Next Steps / Team /
       Groups). Small additions only — the pages ride existing card
       systems. --- */
.sa-steps-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	counter-reset: none;
}
@media (min-width: 720px) { .sa-steps-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sa-steps-grid { grid-template-columns: repeat(3, 1fr); } }
.sa-step-card h2,
.sa-step-card__title {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 12px;
}
.sa-podcast-feed code {
	display: inline-block;
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--wp--preset--color--sa-bone, #F5F0E8);
	border: 1px solid rgba(26, 21, 18, 0.12);
	user-select: all; /* one click selects the whole feed URL */
}

/* ---- CTA block nested inside a deep band (fixed 2026-07-12) ------------
 * .sa-cta-centered sets color: sa-ink at line 26. When the class sits ON
 * the band section, .sa-band--navy (line 318) is later at equal
 * specificity and wins, so the text is cream -- correct. But visit-site-a
 * nests a bare <div class="sa-cta-centered"> INSIDE the navy section, and
 * there the class beats the parent's inherited cream: ink #1A1512 on navy
 * #1C3454 = 1.44:1. The closing CTA of the Visit page was near-invisible.
 *
 * Scoped to the nested case only, so the standalone light-page usage of
 * .sa-cta-centered is untouched. This is the one rule in this fix set that
 * lives in the shared base, because the bug is in the base's own cascade
 * and every variation inherits it; it changes nothing for any element that
 * is not a .sa-cta-centered inside a .sa-band--navy.
 *
 * Contrast (computed, per variation, cream on that variation's navy):
 *   site-a #EAF0F7 on #1C3454 = 12.35:1   site-b #E9E9E4 on #111112 = 15.6:1
 *   site-c #FFFFFF on #6D28D9 =  7.10:1   local  #E7EDF0 on #1E3A4C = 10.07:1
 */
.sa-band--navy .sa-cta-centered {
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

/* ---- Direct colors nested inside a deep band (fixed 2026-07-12) --------
 * .sa-band--navy hands its subtree `color: sa-cream`, but INHERITANCE loses
 * to any direct declaration. Three container/heading rules in this file set
 * a color outright -- .sa-h2 (sa-ink), and .sa-section / .sa-cta-centered
 * via the grouped container rule at the top -- so wherever one of them is
 * nested inside a navy band, dark ink lands on the dark band and the base's
 * own cream never gets a chance.
 *
 * Shipped 0.47.3 rendered:
 *   next-steps-site-a  bare .sa-h2 on navy   #1A1512 on #1C3454 = 1.44:1
 *   home-local         bare .sa-h2 on navy   #141A1F on #1E3A4C = 1.47:1
 *   donate-site-c      bare .sa-h2 on navy   #221B2E on #6D28D9 = 2.34:1
 *   about/events-site-a nested .sa-section   #1A1512 on #1C3454 = 1.44:1
 *   visit-site-a       nested .sa-cta-centered              = 1.44:1
 *
 * Templates that remembered the .sa-h2--on-navy modifier were already fine;
 * these are the ones that did not, and nothing forced them to. Restoring the
 * band's own intent at specificity (0,2,0) fixes every case at once and is
 * inert anywhere a navy band is not an ancestor.
 *
 * Contrast after fix, per variation (cream on that variation's navy):
 *   site-a 12.35:1 | site-b 15.60:1 | site-c 7.10:1 | local-services 10.07:1
 *   law-firm 17.26:1
 */
.sa-band--navy .sa-section,
.sa-band--navy .sa-cta-centered {
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-band--navy .sa-h2 {
	color: var(--wp--preset--color--sa-cream-warm, #FBF6EE);
}

/* ---- The hero is a DARK surface; it must hand down light text ----------
 * .sa-hero is the photo hero: it always paints a dark backdrop (photo +
 * scrim, over a near-black safety fill). Yet the grouped container rule at
 * the top of this file gives it `color: sa-ink` -- the LIGHT-page default.
 *
 * Every text element inside the hero papers over this with its own explicit
 * light one-off: .sa-hero__masthead, .sa-hero__sub, .sa-hero__times and
 * .sa-eyebrow--on-dark are all hardcoded cream. The H1 is the only one that
 * never got one -- .sa-h1 declares no color at all -- so it falls back to
 * inheritance and picks up sa-ink from .sa-hero.
 *
 * It is not rescued by global styles either: theme.json sets
 * elements.heading.color.text to var(--wp--preset--color--primary), and the
 * sa-* variations replace the palette wholesale without a `primary` slug, so
 * that declaration resolves to an undefined custom property and drops.
 *
 * Rather than add a sixth one-off, state the rule the surface actually
 * implies -- the same thing .sa-band--navy already does for its subtree.
 * This makes the four existing cream one-offs redundant (harmlessly), and
 * nothing inside a hero was relying on inheriting the dark ink.
 *
 * The final proof is a browser: the true backdrop is a photograph, which no
 * static model can sample. See LIVE-TEST-PLAN.md.
 */
.sa-hero {
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

/* =====================================================================
 * APP SHOWCASE — motion voice ("Live / computational")
 *
 * home-app-showcase sells the AI Canvas: live, sandboxed, interactive
 * apps ("Running right now, on this page. This is not a screenshot.").
 * It loads site-a.css and so inherits sa-rise -- a soft pastoral
 * dissolve that undersells a page whose whole thesis is EXECUTION. The
 * variation (site-c) restyles color but not motion, so the fix is
 * scoped here to the template's body class rather than a new overlay.
 *
 * The register is computational: a crisp hero entrance, and feature
 * cards that snap into place in sequence like modules mounting in a
 * running app -- rendering, not drifting.
 *
 * Active band on this template is the site-c violet (#6D28D9); the
 * signature tick uses cream #FFFFFF on it = 7.10:1. All motion gated on
 * prefers-reduced-motion.
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Hero: a crisp mount, not a dissolve. 5px throw, 0.3s, a precise
	   curve, tight 55ms cadence -- it renders into place. */
	.page-template-home-app-showcase .sa-hero__content > * {
		animation-name: as-mount;
		animation-duration: 0.3s;
		animation-timing-function: cubic-bezier(0.3, 0.9, 0.2, 1);
	}
	.page-template-home-app-showcase .sa-hero__content > *:nth-child(2) { animation-delay: 0.055s; }
	.page-template-home-app-showcase .sa-hero__content > *:nth-child(3) { animation-delay: 0.11s; }
	.page-template-home-app-showcase .sa-hero__content > *:nth-child(4) { animation-delay: 0.165s; }
	.page-template-home-app-showcase .sa-hero__content > *:nth-child(5) { animation-delay: 0.22s; }

	@keyframes as-mount {
		from { opacity: 0; transform: translateY(5px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Signature: the capability cards mount in sequence, each with a
	   brief scale-settle -- the feel of modules coming online. Only the
	   first row staggers; the rest inherit the base card transition so
	   the effect stays a hero-adjacent moment, not a page-long parade. */
	.page-template-home-app-showcase .sa-way-card:nth-child(-n+4) {
		animation: as-boot 0.42s cubic-bezier(0.3, 0.9, 0.2, 1) both;
	}
	.page-template-home-app-showcase .sa-way-card:nth-child(1) { animation-delay: 0.24s; }
	.page-template-home-app-showcase .sa-way-card:nth-child(2) { animation-delay: 0.33s; }
	.page-template-home-app-showcase .sa-way-card:nth-child(3) { animation-delay: 0.42s; }
	.page-template-home-app-showcase .sa-way-card:nth-child(4) { animation-delay: 0.51s; }

	@keyframes as-boot {
		from { opacity: 0; transform: translateY(8px) scale(0.98); }
		to   { opacity: 1; transform: translateY(0) scale(1); }
	}
}

/* ==== Testimonials carousel (home) =====================================
 * Token-driven so all variations re-skin it automatically. One quote shown
 * at a time; JS toggles .is-active. Motion is gated on prefers-reduced-motion
 * (the fade/slide only applies when motion is welcome; without it the active
 * quote simply appears). Colors resolve through sa-* slugs -- on the navy band
 * the quote uses sa-cream, controls use sa-border/sa-cream. */
.sa-testimonials {
	max-width: 780px;
	margin: 40px auto 0;
	text-align: center;
}

.sa-testimonials__viewport {
	position: relative;
	min-height: 180px;
	display: grid;
}

.sa-testimonial {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sa-testimonial.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.sa-testimonial {
		transition: opacity 0.45s ease;
	}
}

.sa-testimonial__quote {
	font-family: var(--wp--preset--font-family--sa-heading, "Newsreader", serif);
	font-size: clamp(20px, 2.6vw, 30px);
	line-height: 1.4;
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	margin: 0 0 24px;
}

.sa-testimonial__by {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sa-testimonial__name {
	font-weight: 600;
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
}

.sa-testimonial__meta {
	font-size: 14px;
	color: var(--wp--preset--color--sa-muted-navy, #9FB4C0);
}

.sa-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 32px;
}

.sa-testimonials__prev,
.sa-testimonials__next {
	width: 44px;
	height: 44px;
	border-radius: var(--sa-pill, 999px);
	border: 1px solid var(--wp--preset--color--sa-border, rgba(255,255,255,0.25));
	background: transparent;
	color: var(--wp--preset--color--sa-cream, #EAF0F7);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
	.sa-testimonials__prev,
	.sa-testimonials__next {
		transition: border-color 0.2s ease, background 0.2s ease;
	}
}

.sa-testimonials__prev:hover,
.sa-testimonials__next:hover {
	border-color: var(--wp--preset--color--sa-cream, #EAF0F7);
	background: rgba(255,255,255,0.08);
}

.sa-testimonials__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sa-testimonials__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: var(--sa-pill, 999px);
	border: 1px solid var(--wp--preset--color--sa-muted-navy, #9FB4C0);
	background: transparent;
	cursor: pointer;
}

.sa-testimonials__dot.is-active {
	background: var(--wp--preset--color--sa-cream, #EAF0F7);
	border-color: var(--wp--preset--color--sa-cream, #EAF0F7);
}