/**
 * Site C (Light & Airy) personality overlay.
 *
 * Loaded ONLY when the "Site C - Cornerstone (Light & Airy)" style
 * variation is active -- see civictrust_active_style_variation() in
 * inc/enqueue.php. Color/radius/shadow tokens flow from
 * styles/site-c.json through the same sa-* slugs; this file carries the
 * pieces a theme.json variation can't express, per the Site C spec:
 * sentence-case Bricolage Grotesque display type, soft-shadow elevation,
 * lavender tint bands, and the spec's signature inset card images
 * ("10px padding inside the card with their own 14px radius").
 *
 * Loaded after site-a.css as a declared dependency; rules win by
 * cascade position.
 */

/* ---- Typography: friendly-modern, never uppercase ------------------- */
/* Spec: Bricolage Grotesque 600/700, sentence case, line-height
   1.0-1.15, letter-spacing -0.02em to -0.03em on large sizes. */
.sa-h1,
.sa-h2,
h1.wp-block-heading,
h2.wp-block-heading {
	font-weight: 700;
	text-transform: none;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

h3.wp-block-heading,
.sa-belief-card h3,
.sa-dept-card h3,
.sa-faq-item h3,
.sa-leader-card h3,
.sa-ministry-card h3,
.sa-rhythm-card h3,
.sa-step-card h3,
.sa-way-card h3,
.sa-sermon-card__body h3,
.sa-event-card h3 {
	font-weight: 600;
	text-transform: none;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ---- Eyebrows: clean text, no marker --------------------------------- */
/* Spec: Onest 700, 12.5px, letter-spacing .16em, uppercase, accent
   color -- "no square/marker, clean text only." Explicitly neutralize
   any marker in case Site B's overlay conventions ever leak into shared
   patterns. */
.sa-eyebrow {
	font-weight: 700;
	letter-spacing: 0.16em;
	display: inline-block;
}
.sa-eyebrow::before {
	content: none;
}

/* ---- Buttons: sentence case, rounded, soft --------------------------- */
/* Spec: Onest 700, 14-16px, sentence case -- no uppercase, no
   letter-spacing. Radius flows from the sa-input token (12px). */
.wp-block-button__link,
.sa-btn-maroon .wp-block-button__link,
.sa-btn-ghost .wp-block-button__link {
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

/* ---- Elevation: soft shadows on lift, hairline at rest --------------- */
/* Spec: resting cards rely on the 1px hairline border; hover lifts with
   a soft shadow. site-a.css already transitions box-shadow on hover for
   its card families -- retint those hover shadows to the violet-ink
   shadow color instead of Site A's warm brown. */
.sa-event-card:hover,
.sa-sermon-card:hover,
.sa-ministry-card:hover {
	box-shadow: 0 14px 36px rgba(34, 27, 46, 0.09);
}

/* ---- Signature detail: inset card images ----------------------------- */
/* Spec: "Card images are inset: 10px padding inside the card with their
   own 14px radius." The sa-media radius token already carries 14px in
   this variation; the inset padding is structural, so it lives here. */
.sa-event-card figure,
.sa-sermon-card figure,
.sa-ministry-card figure {
	padding: 10px 10px 0;
}
.sa-event-card figure img,
.sa-sermon-card figure img,
.sa-ministry-card figure img {
	border-radius: var(--wp--custom--radius--sa-media, 14px);
}

/* ---- One-off hero tints from site-a.css ------------------------------ */
/* site-a.css's documented warm-cream one-offs are tuned for Site A's
   photo scrims; Site C's scrim is violet-tinted, so remap to the white
   ramp the spec pairs with it. */
.sa-eyebrow--on-dark,
.sa-hero__masthead,
.sa-hero__sub,
.sa-hero__times {
	color: #FFFFFF;
}
.sa-h1 em {
	color: #FFFFFF;
	font-style: normal;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--sa-maroon-light, #7C3AED);
	text-decoration-thickness: 4px;
	text-underline-offset: 8px;
}
.sa-hero-sub--maroon .sa-hero-sub__desc,
.sa-featured-sermon__excerpt {
	color: var(--wp--preset--color--sa-muted-navy, #E4D9F7);
}

/* Contact info values: warm dark one-off in site-a.css; use the ink. */
.sa-info-grid__value {
	color: var(--wp--preset--color--sa-ink, #221B2E);
}

/* Footer social icon glyph one-off. */
.sa-footer__social span {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.22);
}

/* Hero fallback background: site-a.css's near-black #101018 flashes
   harshly against this variation's light pages; violet ink instead. */
.sa-hero {
	background: var(--wp--preset--color--sa-ink, #221B2E);
}

/* ---- 0.28.0: the director's cut ------------------------------------- */
/* Site C BREATHES: the slowest, softest pacing of the three churches.
   Contrast (computed): violet #6D28D9 on bone #FBFAFD = 6.83:1 and on
   white = 7.10:1; ink on white = 16.61:1; muted on white = 5.31:1;
   white on violet (recommended-tier flag) = 7.10:1. */

/* Atmosphere: lavender wash + grain on hero and light bands. */
.sa-hero-type,
.sa-band--surface {
	background:
		radial-gradient(110% 130% at 6% 0%, color-mix(in srgb, var(--wp--preset--color--sa-maroon, #6D28D9) 6%, transparent), transparent 58%),
		radial-gradient(80% 110% at 100% 10%, color-mix(in srgb, var(--wp--preset--color--sa-maroon, #6D28D9) 4%, transparent), transparent 55%),
		var(--wp--preset--color--sa-bone, #FBFAFD);
}
.sa-hero-type::after,
.sa-band--surface::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.25;
	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");
}

/* Signature: soft hand-drawn underline on emphasized hero words. */
.sa-h1 em {
	font-style: italic;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 30 2 60 5 T 118 4' fill='none' stroke='%236D28D9' stroke-width='2.5' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.28em;
	padding-bottom: 0.12em;
}

/* Giving tiers: soft cards; the most-chosen tier gently lifted. */
.sa-tiers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 20px 0 26px;
}
.sa-tier {
	background: var(--wp--preset--color--sa-surface, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sa-ink, #221B2E) 9%, transparent);
	border-radius: 16px;
	padding: 16px 18px;
	position: relative;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sa-tier:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wp--preset--color--sa-maroon, #6D28D9) 35%, transparent);
}
.sa-tier__amount {
	font-family: var(--wp--preset--font-family--sa-heading, serif);
	font-size: 30px;
	font-weight: 700;
	margin: 0;
	color: var(--wp--preset--color--sa-maroon, #6D28D9);
}
.sa-tier__what {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--sa-muted, #6F687D);
}
.sa-tier--recommended {
	border-color: color-mix(in srgb, var(--wp--preset--color--sa-maroon, #6D28D9) 55%, transparent);
	box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--wp--preset--color--sa-maroon, #6D28D9) 40%, transparent);
}
.sa-tier__flag {
	position: absolute;
	top: -10px;
	right: 14px;
	margin: 0;
	background: var(--wp--preset--color--sa-maroon, #6D28D9);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}

/* Pacing: C breathes — slower, softer, blur-in. Overrides baseline. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sc-breathe {
		from { opacity: 0; transform: translateY(10px); filter: blur(5px); }
		to { opacity: 1; transform: translateY(0); filter: blur(0); }
	}
	.sa-hero__masthead,
	.sa-hero__content > * {
		animation-name: sc-breathe;
		animation-duration: 0.9s;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	}
	.sa-hero__content > *:nth-child(2) { animation-delay: 0.14s; }
	.sa-hero__content > *:nth-child(3) { animation-delay: 0.28s; }
	.sa-hero__content > *:nth-child(4) { animation-delay: 0.42s; }
	.sa-hero__content > *:nth-child(5) { animation-delay: 0.56s; }
}
@media (prefers-reduced-motion: reduce) {
	.sa-tier { transition: none; }
	.sa-tier:hover { transform: none; }
}

/* ---- Accent-on-band collision (fixed 2026-07-12, gate check 37) --------
 * This variation sets sa-maroon, sa-tan AND sa-navy to the same violet
 * (#6D28D9) -- the accent IS the band. site-a.css colors .sa-stat__num
 * with sa-maroon and .sa-eyebrow--on-navy with sa-tan, and home-site-c
 * places both inside a sa-band--navy. Result in the shipped 0.47.3: the
 * homepage impact numerals (61,400 / 312 / 240 / 89c) and the eyebrow
 * above them rendered violet-on-violet at 1.00:1 -- invisible. The band
 * the template itself calls "the trust band donors scan for before
 * anything else" showed four captions and nothing else.
 *
 * No file was individually wrong; the bug lived in the JOIN of the shared
 * rule, the template, and this variation's tokens. Gate check 37 now
 * computes that join and fails the build if it ever recurs.
 *
 * Contrast (computed) against the violet band #6D28D9:
 *   sa-cream      #FFFFFF = 7.10:1  (numerals; large text, floor 3.0)
 *   sa-muted-navy #E4D9F7 = 5.27:1  (eyebrow; normal text, floor 4.5)
 */
.sa-stat__num {
	color: var(--wp--preset--color--sa-cream, #FFFFFF);
}

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

/* ---- Hero subhead on LIGHT bands (fixed 2026-07-12, gate check 38) -----
 * site-a.css paints .sa-hero__sub with a cream one-off ("cream tint for
 * the hero subhead paragraph on the photo scrim") and the block above
 * remaps it to #FFFFFF for this variation's violet scrim. Both assume the
 * subhead sits on a DARK hero. On five inner pages it does not --
 * programs, impact, donate, volunteer and financials open with a plain
 * <section class="sa-band">, i.e. the page background. Result in shipped
 * 0.47.3: white #FFFFFF on bone #FBFAFD = 1.04:1. The paragraph under the
 * H1 was invisible. The templates even mark the H1 `sa-h1--dark`, so the
 * page was known to be light; only the subhead was missed.
 *
 * Scoped to light bands, so heroes with a real dark scrim (.sa-hero,
 * .sa-hero-sub) keep their cream. Specificity (0,2,0) beats the (0,1,0)
 * one-offs above regardless of source order.
 *
 * Contrast (computed): sa-muted #6F687D on bone #FBFAFD = 5.11:1.
 *
 * Written as "light is the default, dark contexts opt back in", because
 * contact-site-c has no <section> wrapper at all -- its hero sits directly
 * in <main>, so any selector keyed on .sa-band misses it entirely.
 */
.sa-hero__sub {
	color: var(--wp--preset--color--sa-muted, #6F687D);
}

.sa-hero .sa-hero__sub,
.sa-hero-sub .sa-hero__sub,
.sa-band--navy .sa-hero__sub {
	color: #FFFFFF;
}

/* ---- Stat labels on the deep band (fixed 2026-07-12, gate check 37) ----
 * .sa-stat__label sets sa-muted EXPLICITLY, so it overrides the cream that
 * .sa-band--navy hands its subtree. In this variation sa-muted is #6F687D
 * against a violet band #6D28D9 = 1.34:1. Together with the numerals and
 * the eyebrow (both fixed above), the ENTIRE impact band on home-site-c
 * and financials-site-c was unreadable in shipped 0.47.3 -- every element
 * on it, not merely the numbers.
 *
 * Contrast (computed): sa-muted-navy #E4D9F7 on band #6D28D9 = 5.27:1.
 */
.sa-band--navy .sa-stat__label {
	color: var(--wp--preset--color--sa-muted-navy, #E4D9F7);
}