/*
Theme Name:   St. Mary Campaign
Description:  End-of-year fundraising campaign site for St. Mary Coptic Orthodox Church, Cooksville, MD. Works with the St. Mary Campaign Tracker plugin for the live thermometer and matching gifts.
Version:      1.3.0
Requires at least: 6.2
Requires PHP: 7.4
Author:       St. Mary Coptic Orthodox Church
License:      GPL-2.0-or-later
Text Domain:  stmary
*/

/* ---------- Tokens (from the church logo) ---------- */
:root {
	--brown: #1f2d5c;   /* navy from the campaign banner: headings and dark text */
	--brown-2: #34488a;
	--red: #d7263d;
	--red-2: #f04a5c;
	--gold: #f2b632;
	--gold-2: #f8ca5c;
	--halo: #fff1a8;
	--sky: #2fa3e0;
	--sky-soft: #e6f5fd;
	--taupe: #e6d6b4;
	--cream: #fff9ec;
	--paper: #ffffff;
	--ink: #1d2433;
	--muted: #556079;
	--line: #f0e4c8;
	--radius: 16px;
	--shadow: 0 18px 50px rgba(31, 45, 92, .12);
	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wrap: 1180px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--brown); }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--brown); line-height: 1.12; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.screen-reader-text, .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; vertical-align: -.15em; }
.eyebrow { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 .6rem; }
mark.todo { background: var(--halo); color: var(--brown); padding: 0 .25em; border-radius: 4px; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--sans); font-weight: 700; font-size: 1rem;
	padding: .8rem 1.4rem;
	border-radius: 999px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
	line-height: 1.2;
}
.btn:hover, .wp-block-button__link:hover { transform: translateY(-1px); }
.btn--lg { font-size: 1.1rem; padding: 1rem 1.8rem; }
.btn--gold { background: var(--gold); color: var(--brown); box-shadow: 0 6px 18px rgba(242, 182, 50, .4); }
.btn--gold:hover { background: var(--gold-2); color: var(--brown); }
.btn--primary, .wp-block-button__link { background: var(--red); color: #fff; }
.btn--primary:hover, .wp-block-button__link:hover { background: var(--brown); color: #fff; }
.btn--ghost { border-color: var(--brown); color: var(--brown); background: #fff; }
.btn--ghost:hover { background: var(--brown); color: #fff; }

/* ---------- Live match alert (site-wide) ---------- */
.site-alert .smct-banner { border-radius: 0; border-width: 0; justify-content: center; padding: .7rem 24px; font-size: .98rem; }
.smct-banner { background: linear-gradient(90deg, var(--red), var(--red-2)); border-color: var(--gold); }
.smct-banner__text strong { color: var(--halo); }
.smct-banner__pulse { background: var(--halo); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--brown); }
.brand__logo { width: 58px; height: 58px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; }
.brand__place { font-size: .82rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }
.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav__list { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.nav__list a { display: block; white-space: nowrap; padding: .5rem .8rem; border-radius: 999px; color: var(--brown); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav__list a:hover { background: var(--cream); }
.nav__list .current-menu-item > a, .nav__list .current_page_item > a { color: var(--red); background: var(--cream); }
.nav__give { padding: .65rem 1.2rem; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--brown); margin: 5px 0; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
	.nav-toggle { display: block; }
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 1rem 24px 1.5rem; box-shadow: var(--shadow); }
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; }
	.nav__list a { padding: .8rem 1rem; font-size: 1.1rem; }
	.nav__give { justify-content: center; }
}
@media (max-width: 480px) {
	.brand__name { font-size: 1.1rem; }
	.brand__logo { width: 46px; height: 46px; }
	.site-header__inner { min-height: 70px; }
}

/* ---------- Progress strip on inner pages ---------- */
.progress-strip { background: var(--cream); border-bottom: 1px solid var(--line); padding: .7rem 0; }
.progress-strip__inner { display: flex; align-items: center; gap: 1.5rem; }
.progress-strip__label { font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.progress-strip__bar { flex: 1; }
.progress-strip .smct-progress__labels { font-size: .9rem; margin-bottom: .3rem; }
.progress-strip .smct-progress__labels strong { font-size: 1rem; }
.progress-strip .smct-bar--lg { height: 10px; }
@media (max-width: 640px) { .progress-strip__label { display: none; } }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	color: var(--ink);
	background:
		radial-gradient(900px 500px at 90% 10%, rgba(47, 163, 224, .22), transparent 60%),
		radial-gradient(700px 420px at 0% 100%, rgba(242, 182, 50, .25), transparent 60%),
		linear-gradient(160deg, #eaf7fe, #fffaf0 60%, #fff4dc);
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(7rem, 12vw, 9rem);
}
.hero__pattern {
	position: absolute; inset: 0; opacity: .35;
	background-image:
		linear-gradient(45deg, rgba(242, 182, 50, .35) 1px, transparent 1px),
		linear-gradient(-45deg, rgba(242, 182, 50, .35) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: linear-gradient(90deg, transparent, #000 60%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
.hero__kicker { display: inline-block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: #fff; background: var(--red); padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1.2rem; }
.hero__title { color: var(--brown); font-size: clamp(2.8rem, 6.5vw, 5rem); margin-bottom: .35em; text-wrap: balance; }
.hero__text { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 36em; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.hero__countdown .smct { color: var(--brown); }
.hero__countdown .smct-countdown__label { color: var(--red); font-weight: 700; opacity: 1; }
.hero__countdown .smct-countdown__units span { background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(31, 45, 92, .08); }
.hero__countdown .smct-countdown__units b { font-family: var(--serif); font-size: 2.3rem; }
.hero__art { position: relative; display: grid; place-items: center; }
.hero__art img { position: relative; width: 100%; max-width: 620px; border-radius: 22px; border: 6px solid #fff; box-shadow: 0 30px 60px rgba(31, 45, 92, .25); animation: float 7s ease-in-out infinite; }
.hero__halo { position: absolute; width: 115%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 168, .9), rgba(242, 182, 50, .2) 45%, transparent 68%); }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
	.hero__inner { grid-template-columns: 1fr; text-align: center; }
	.hero__art { order: -1; }
	.hero__art img { max-width: 520px; }
	.hero__actions, .hero__countdown .smct-countdown__units { justify-content: center; }
	.hero__text { margin-left: auto; margin-right: auto; }
}
@media (max-width: 420px) {
	.smct-countdown__units span { min-width: 3.6rem; }
	.hero__countdown .smct-countdown__units b { font-size: 1.8rem; }
}

/* ---------- Tracker card ---------- */
.tracker { position: relative; margin-top: clamp(-6rem, -9vw, -4.5rem); z-index: 2; }
.tracker__card { background: #fff; border-radius: 24px; box-shadow: var(--shadow); padding: clamp(1.75rem, 4vw, 3.25rem); border-top: 6px solid var(--gold); }
.tracker__head { text-align: center; margin-bottom: 2rem; }
.tracker__title { margin: 0; }
.tracker .smct-thermo { max-width: 860px; margin: 0 auto; }
.tracker .smct-thermo__total { font-family: var(--serif); }
.smct { --smct-accent: var(--red); --smct-accent-2: var(--red-2); --smct-gold: var(--gold); --smct-ink: var(--ink); --smct-muted: var(--muted); --smct-track: #f1e8d6; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--cream { background: var(--cream); }
.section__head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.section__lede { color: var(--muted); font-size: 1.12rem; }
.section__more { text-align: center; margin-top: 2.5rem; }
.section--matches .smct-match__sponsor { font-family: var(--serif); font-size: 1.5rem; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); color: var(--ink); }
.card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--halo); color: var(--red); margin-bottom: 1.2rem; font-size: 1.6rem; transform: rotate(45deg); }
.card__icon .icon { transform: rotate(-45deg); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); flex: 1; }
.card__more { font-weight: 700; color: var(--red); display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

.verse { background: linear-gradient(135deg, var(--sky), #3f97c2); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; }
.verse blockquote { margin: 0 auto; max-width: 820px; }
.verse p { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.3; font-style: italic; margin-bottom: .8rem; }
.verse cite { font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--brown); background: var(--halo); padding: .3rem .8rem; border-radius: 999px; }

.cta { background: var(--red); color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta__title { color: #fff; margin-bottom: .2em; }
.cta p { margin: 0; font-size: 1.15rem; opacity: .92; }

/* ---------- Inner pages ---------- */
.page-hero { background: radial-gradient(700px 360px at 95% 0%, rgba(242, 182, 50, .25), transparent 60%), linear-gradient(160deg, #e6f5fd, #fffaf0); color: var(--ink); border-bottom: 1px solid var(--line); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -60px; top: 50%; width: 260px; height: 260px; border: 2px solid rgba(242, 182, 50, .45); transform: translateY(-50%) rotate(45deg); }
.page-hero__title { color: var(--brown); margin: 0; }
.page-hero__lede { font-size: 1.25rem; color: var(--muted); max-width: 40em; margin: .8rem 0 0; }
.entry { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.entry__image { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; }
.entry__content > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.entry__content > .alignwide, .entry__content > .feature-grid, .entry__content > .give-grid, .entry__content > .schedule, .entry__content > .contact-grid, .entry__content > .smct-banner, .entry__content > .smct-matches { max-width: var(--wrap); }
.entry__content > .alignfull { max-width: none; }
.entry__content h2 { margin-top: 2.2rem; }
.entry__content .lead { font-size: 1.3rem; color: var(--muted); }
.entry__content .small { font-size: .92rem; color: var(--muted); }
.entry__content .wp-block-quote { border-left: 4px solid var(--gold); background: var(--cream); padding: 1.5rem 2rem; border-radius: 0 var(--radius) var(--radius) 0; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.entry__content .wp-block-quote p { font-family: var(--serif); font-size: 1.7rem; font-style: italic; line-height: 1.3; color: var(--brown); margin-bottom: .4rem; }
.entry__content .wp-block-quote cite { font-weight: 700; font-style: normal; color: var(--red); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.entry__content .smct-progress { margin: 1.5rem auto; }

/* Grids: classic themes wrap group contents in an inner container, so the grid applies to whichever exists. */
.feature-grid:has(> .wp-block-group__inner-container), .schedule:has(> .wp-block-group__inner-container), .give-grid:has(> .wp-block-group__inner-container), .contact-grid:has(> .wp-block-group__inner-container) { display: block; }
.wp-block-group__inner-container > .wp-block-group__inner-container { margin: 0; }

/* Feature grids (sanctuary & services) */
.feature-grid, .feature-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 2rem auto; }
.feature { background: var(--cream); border-radius: var(--radius); padding: 1.6rem 1.6rem 1rem; border-top: 4px solid var(--gold); }
.feature h3 { font-size: 1.45rem; }
.feature p { color: var(--muted); }
.milestones { list-style: none; padding: 0; border-left: 3px solid var(--line); }
.milestones li { position: relative; padding: .4rem 0 .9rem 1.6rem; }
.milestones li::before { content: ""; position: absolute; left: -9px; top: .85rem; width: 14px; height: 14px; background: var(--gold); transform: rotate(45deg); }

.schedule, .schedule > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem auto 2.5rem; }
.schedule__item { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: 12px; padding: 1.2rem 1.4rem .4rem; }
.schedule__item h3 { font-size: 1.35rem; margin-bottom: .2rem; }

.cta-box { background: linear-gradient(135deg, var(--sky), #1f87c7); color: #fff; border-radius: 20px; padding: 2rem 2.2rem; margin-top: 3rem !important; text-align: center; }
.cta-box h3 { color: #fff; font-size: 1.9rem; }
.cta-box .wp-block-buttons { justify-content: center; display: flex; }
.cta-box .wp-block-button__link { background: var(--gold); color: var(--brown); }
.cta-box .wp-block-button__link:hover { background: var(--gold-2); color: var(--brown); }

/* Ways to give */
.give-grid, .give-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 1.5rem auto 3rem; }
.give-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem 2rem 1.2rem; box-shadow: 0 4px 20px rgba(61, 36, 24, .05); }
.give-card h3 { font-size: 1.75rem; display: flex; align-items: center; gap: .6rem; }
.give-card h3::before { content: ""; width: 12px; height: 12px; background: var(--gold); transform: rotate(45deg); flex: none; }
.give-card--featured { background: linear-gradient(145deg, var(--sky), #1f87c7); color: #fff; border: 0; grid-row: span 3; display: flex; flex-direction: column; justify-content: center; }
.give-card--featured > .wp-block-group__inner-container { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.give-card--featured h3 { color: #fff; font-size: 2.3rem; }
.give-card--featured p { color: rgba(255, 255, 255, .95); font-size: 1.12rem; }
.give-card--featured .wp-block-button__link { background: var(--gold); color: var(--brown); font-size: 1.15rem; padding: 1rem 1.8rem; }
.give-card--featured .wp-block-button__link:hover { background: var(--gold-2); }
.give-card .copyable { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.give-card code { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; background: var(--cream); color: var(--brown); padding: .4rem .7rem; border-radius: 8px; border: 1px dashed var(--taupe); word-break: break-all; }
.give-card .address { font-weight: 700; font-size: 1.1rem; color: var(--brown); background: var(--cream); padding: .7rem 1rem; border-radius: 10px; }
.copy-btn { font: inherit; font-size: .85rem; font-weight: 700; border: 0; background: var(--red); color: #fff; padding: .4rem .9rem; border-radius: 999px; cursor: pointer; }
.copy-btn:hover { background: var(--brown); }
@media (max-width: 760px) { .give-grid, .give-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } .give-card--featured { grid-row: auto; } }

/* Contact */
.contact-grid, .contact-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.contact-grid__form h2 { margin-top: 0; }
.contact-grid__info { background: var(--cream); border-radius: 20px; padding: 1.8rem 2rem; position: sticky; top: 110px; }
.contact-grid__info h3 { font-size: 1.3rem; margin: 1rem 0 .2rem; }
.contact-grid__info h3:first-child { margin-top: 0; }
@media (max-width: 860px) { .contact-grid, .contact-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; } .contact-grid__info { position: static; } }

.cform { display: grid; gap: 1rem; margin-top: 1.5rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .cform__row { grid-template-columns: 1fr; } }
.cform__field { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; color: var(--brown); }
.cform__field b { color: var(--red); }
.cform__field em { font-weight: 400; color: var(--muted); font-style: normal; }
.cform input, .cform select, .cform textarea { font: inherit; font-weight: 400; color: var(--ink); width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(196, 163, 46, .2); }
.cform button { justify-self: start; border: 0; font-size: 1.05rem; padding: .95rem 1.7rem; }
.cform__hp { position: absolute; left: -9999px; }
.cform__notice { padding: 1rem 1.25rem; border-radius: 12px; }
.cform__notice--ok { background: #e8f5ec; border: 1px solid #9fd3ae; color: #1d5a31; font-size: 1.1rem; }
.cform__notice--err { background: #fdecec; border: 1px solid #f0b4b4; color: #8a1212; }

/* Posts fallback */
.post-list { display: grid; gap: 1.5rem; max-width: 820px; margin: 0 auto; }
.post-card h2 a { color: var(--brown); text-decoration: none; }
.post-card__date { color: var(--muted); font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sky-soft); color: var(--muted); border-top: 4px solid var(--gold); padding: 4rem 0 1.5rem; font-size: .98rem; }
.site-footer a { color: var(--brown); }
.site-footer a:hover { color: var(--red); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: 2.5rem; }
.site-footer__brand img { margin-bottom: .8rem; }
.site-footer__brand strong { color: var(--brown); font-family: var(--serif); font-size: 1.3rem; }
.site-footer__verse { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--brown); margin-top: 1rem; }
.site-footer__verse span { font-family: var(--sans); font-style: normal; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.site-footer__h { font-family: var(--sans); color: var(--red); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer__list, .site-footer__menu, .site-footer .nav__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer .nav__list { flex-direction: column; }
.site-footer .nav__list a { padding: 0; color: var(--brown); background: none; font-weight: 400; }
.site-footer__list li { display: flex; gap: .6rem; align-items: flex-start; }
.site-footer__list .icon { color: var(--red); margin-top: .3rem; }
.site-footer__menu a { text-decoration: none; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid rgba(31, 45, 92, .12); margin-top: 3rem; padding-top: 1.5rem; font-size: .85rem; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }


/* ---------- Customizer-driven design (values come from Home page design) ---------- */
:root { --hero-1: #eaf7fe; --hero-2: #fff4dc; --footer-bg: #e6f5fd; --cta-bg: #d7263d; --base-size: 18px; --h-scale: 1; --hero-shade: .55; }
body { background: var(--paper); font-size: var(--base-size); }
h1 { font-size: calc(clamp(2.6rem, 6vw, 4.4rem) * var(--h-scale)); }
h2 { font-size: calc(clamp(2rem, 4vw, 2.9rem) * var(--h-scale)); }
h3 { font-size: calc(1.6rem * var(--h-scale)); }
.hero__title { font-size: calc(clamp(2.8rem, 6.5vw, 5rem) * var(--h-scale)); }
.page-hero { background: radial-gradient(700px 360px at 95% 0%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%), linear-gradient(160deg, var(--hero-1), var(--hero-2)); }
.site-footer { background: var(--footer-bg); }
.cta { background: var(--cta-bg); }
.verse { background: linear-gradient(135deg, var(--sky), color-mix(in srgb, var(--sky) 75%, #000)); }
.verse--image { background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), var(--verse-img) center / cover no-repeat; }
.cta-box, .give-card--featured { background: linear-gradient(135deg, var(--sky), color-mix(in srgb, var(--sky) 75%, #000)); }

/* Top banner layouts */
.hero { background:
	radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 60%),
	radial-gradient(700px 420px at 0% 100%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%),
	linear-gradient(160deg, var(--hero-1), var(--hero-2)); }
.hero--compact { padding-top: 2.5rem; padding-bottom: 6.5rem; }
.hero--tall { min-height: calc(100vh - 80px); display: flex; align-items: center; }
.hero--tall > .wrap { width: 100%; }
.hero--image-left .hero__art { order: -1; }
.hero--image-top .hero__inner, .hero--text-only .hero__inner { grid-template-columns: 1fr; text-align: center; max-width: 900px; }
.hero--image-top .hero__art { order: -1; }
.hero--image-top .hero__art img { max-width: 720px; }
.hero--image-top .hero__text, .hero--text-only .hero__text { margin-left: auto; margin-right: auto; }
.hero--image-top .hero__actions, .hero--text-only .hero__actions,
.hero--image-top .smct-countdown__units, .hero--text-only .smct-countdown__units { justify-content: center; }
.hero--background { background: linear-gradient(rgba(0, 0, 0, var(--hero-shade)), rgba(0, 0, 0, var(--hero-shade))), var(--hero-img) center / cover no-repeat; color: #fff; }
.hero--background .hero__inner { grid-template-columns: 1fr; text-align: center; max-width: 900px; }
.hero--background .hero__title { color: #fff; }
.hero--background .hero__text { color: rgba(255, 255, 255, .92); margin-left: auto; margin-right: auto; }
.hero--background .hero__actions, .hero--background .smct-countdown__units { justify-content: center; }
.hero--background .btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.hero--background .hero__countdown .smct { color: #fff; }
.hero--background .hero__countdown .smct-countdown__label { color: var(--gold); }
.hero--background .hero__countdown .smct-countdown__units span { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.hero--background .hero__pattern { display: none; }

/* When the thermometer is not right after the banner, don't overlap. */
.hero--no-overlap { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.tracker--flat { margin-top: 0; padding: clamp(3rem, 7vw, 5rem) 0; }

/* Photo cards */
.cards--photo .card { padding: 0; overflow: hidden; }
.card__photo { aspect-ratio: 16 / 10; background: var(--cream); }
.card__photo { display: grid; place-items: center; }
.card__photo .card__icon { margin: 0; width: 72px; height: 72px; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cards--photo .card__body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; flex: 1; }

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

/* ---------- Coming soon page ---------- */
.cs { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 3rem 20px; text-align: center;
	background: radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--sky) 22%, transparent), transparent 60%),
		radial-gradient(700px 420px at 0% 100%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 60%),
		linear-gradient(160deg, var(--hero-1), var(--hero-2)); }
.cs__inner { position: relative; max-width: 760px; }
.cs__banner { width: 100%; max-width: 640px; border-radius: 22px; border: 6px solid #fff; box-shadow: 0 30px 60px rgba(31, 45, 92, .25); margin-bottom: 2rem; }
.cs__title { font-size: calc(clamp(2.4rem, 6vw, 4rem) * var(--h-scale)); margin-bottom: .4em; }
.cs__text { font-size: 1.2rem; color: var(--muted); margin: 0 auto 2rem; max-width: 36em; }
.cs__countdown { display: flex; justify-content: center; gap: .7rem; margin-bottom: 2rem; }
.cs__countdown span { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; padding: .7rem .5rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 16px rgba(31, 45, 92, .08); }
.cs__countdown b { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--brown); }
.cs__countdown small { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: .3rem; }
.cs__contact { font-size: .95rem; color: var(--muted); margin-top: 2rem; }

/* Review link badge (shown to reviewers before launch) */
.review-badge { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 100; background: var(--brown); color: #fff; font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: calc(100% - 32px); text-align: center; }