/*
Theme Name: Eastgate (FSE)
Theme URI: https://www.eastgate.church
Description: Block theme for Eastgate Church
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Author: Eastgate Church
Text Domain: eastgate
*/

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* Remove gap between header and first full-bleed block */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.site-header {
	margin-bottom: 0 !important;
}

/* Zero out the margin WordPress injects between the header template part and main */
.wp-block-template-part + .wp-block-group,
.wp-block-template-part + main {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.wp-block-cover.alignfull {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Match body background to header/hero on dark-header pages */
.home,
.home body {
	background-color: #1e3a5f;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

/* Logo is already white/green — no filter needed on dark header */

/* Constrain header logo to a sensible size */
.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo a,
.site-header .wp-block-site-logo img {
	width: 240px !important;
	height: auto !important;
	max-width: 240px !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

/* Green separator at the top of the footer (matches the header band divider) */
.site-footer {
	border-top: 3px solid #00875a;
}

/* Bottom-bar divider (color lives here, not in block attrs — keeps the
   template-part markup valid in the editor) */
.site-footer .wp-block-separator {
	border: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.1);
}

/* Wider footer content on mobile (less horizontal padding) */
@media (max-width: 600px) {
	.footer-columns,
	.site-footer > .wp-block-group {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* 5-column footer grid */
.footer-columns {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 2.5rem !important;
	align-items: start !important;
	width: 100% !important;
}

.footer-columns > .footer-col {
	width: 100% !important;
	min-width: 0 !important;
}

@media (max-width: 768px) {
	.footer-columns {
		grid-template-columns: 1fr 1fr !important;
		gap: 2rem !important;
	}
	/* Brand col spans full width on tablet/mobile */
	.footer-columns > .footer-col:first-child {
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 480px) {
	.footer-columns {
		grid-template-columns: 1fr !important;
		gap: 1.75rem !important;
	}
	.footer-columns > .footer-col:first-child {
		grid-column: 1 !important;
	}
}

/* Footer logo — constrained to column width */
.site-footer .wp-block-site-logo,
.site-footer .wp-block-site-logo a,
.site-footer .wp-block-site-logo img {
	width: 100% !important;
	max-width: 180px !important;
	height: auto !important;
}

/* Top-align every footer column with the logo (kill any leading margin) */
.footer-columns > .footer-col,
.footer-columns > .footer-col > :first-child,
.site-footer .wp-block-site-logo {
	margin-top: 0 !important;
}

/* Remove list bullets/indent from footer nav */
.footer-nav-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.footer-nav-list li {
	margin-bottom: 0.5rem;
}

.footer-nav-list a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease;
}

.footer-nav-list a:hover {
	color: #ffffff;
}

/* ── Cover rotator photo pool ────────────────────────────────────────────── */
/* Editor-only presentation (this sheet loads in the canvas via
   add_editor_style; on the front end effects.css hides the pool entirely).
   Shows the rotation pool as a labeled thumbnail strip inside the cover. */
.eg-cover-rotator {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-end;
	padding: 0.75rem;
	border: 1px dashed rgba(255, 255, 255, 0.5);
	border-radius: 8px;
}
.eg-cover-rotator::before {
	content: "Background rotation photos (hidden on the live site)";
	flex-basis: 100%;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}
.eg-cover-rotator .wp-block-image,
.eg-cover-rotator figure {
	margin: 0;
}
.eg-cover-rotator img {
	height: 56px;
	width: auto;
	border-radius: 4px;
	display: block;
}

/* ── KidzFest / event band ───────────────────────────────────────────────── */

.eg-kidzfest {
	position: relative;
	overflow: hidden;
}
/* Bubbles drifting up from the deep (decorative; lives in CSS, not markup) */
.eg-kidzfest::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(114, 201, 241, 0.16), transparent) 6% 115%/190px 190px no-repeat,
		radial-gradient(closest-side, rgba(114, 201, 241, 0.10), transparent) 15% 140%/320px 320px no-repeat,
		radial-gradient(closest-side, rgba(114, 201, 241, 0.13), transparent) 90% -25%/280px 280px no-repeat,
		radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent) 72% 125%/230px 230px no-repeat;
}
.eg-kidzfest > * { position: relative; }

/* The theme's default button hover would go navy-on-navy here.
   !important beats the inline background-color/color on the <a>. */
.eg-kidzfest .wp-element-button:hover {
	background-color: #9bd9f6 !important;
	color: #0f2340 !important;
}

/* Stacked (mobile) columns: center everything under the artwork */
@media (max-width: 781px) {
	.eg-kidzfest .wp-block-column { text-align: center; }
	.eg-kidzfest .wp-block-buttons { justify-content: center; }
}

/* ── KidzFest landing page (/kidzfest) ───────────────────────────────────── */

/* Full-bleed bands butt against each other: kill the post-content blockGap that
   would otherwise open a page-background (white) strip between sections. */
.wp-block-post-content > .eg-kf-deep,
.wp-block-post-content > .eg-kf-light {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Deep-sea bands: navy→teal gradient + drifting bubbles (decorative, CSS-only) */
.eg-kf-deep {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, #0f2340 0%, #123a4d 55%, #155264 100%);
	padding: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.eg-kf-deep::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(114, 201, 241, 0.16), transparent) 6% 115%/190px 190px no-repeat,
		radial-gradient(closest-side, rgba(114, 201, 241, 0.10), transparent) 16% 138%/320px 320px no-repeat,
		radial-gradient(closest-side, rgba(114, 201, 241, 0.13), transparent) 90% -25%/280px 280px no-repeat,
		radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent) 72% 122%/230px 230px no-repeat,
		radial-gradient(closest-side, rgba(255, 255, 255, 0.04), transparent) 40% -20%/150px 150px no-repeat;
}
.eg-kf-deep > * { position: relative; z-index: 1; }

/* Aqua button on deep bands (beats theme navy hover + inline bg) */
.eg-kf-deep .wp-element-button:hover {
	background-color: #9bd9f6 !important;
	color: #0f2340 !important;
}

/* Light bands */
.eg-kf-light { padding: clamp(3rem, 6vw, 5rem) 2rem; }
.eg-kf-tint { background-color: #eef6fb; }

/* Centered band content */
.eg-kf-center { text-align: center; }
.eg-kf-center .wp-block-buttons { justify-content: center; }

/* Card grids (quick facts + nightly features) */
.eg-kf-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Quick-fact tiles (light band) */
.eg-kf-fact {
	background: #ffffff;
	border: 1px solid #dbe7f1;
	border-top: 4px solid #72c9f1;
	border-radius: 0.9rem;
	padding: 1.6rem 1.25rem;
	text-align: center;
	box-shadow: var(--eg-shadow-sm, 0 1px 2px rgba(15, 35, 64, 0.06), 0 6px 16px -6px rgba(15, 35, 64, 0.12));
}

/* Nightly-feature cards (deep band) */
.eg-kf-feature {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(114, 201, 241, 0.25);
	border-radius: 0.9rem;
	padding: 1.6rem 1.25rem;
	text-align: center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}
.eg-kf-feature:hover {
	transform: translateY(-4px);
	background: rgba(114, 201, 241, 0.12);
}

/* Photo gallery: uniform tiles regardless of source aspect ratio */
.eg-kf-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.eg-kf-shot { margin: 0; }
.eg-kf-shot img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 0.9rem;
	display: block;
	box-shadow: var(--eg-shadow-sm, 0 1px 2px rgba(15, 35, 64, 0.06), 0 6px 16px -6px rgba(15, 35, 64, 0.12));
}

/* Side-by-side photo (worship moment) */
.eg-kf-media { margin: 0; }
.eg-kf-media img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
	display: block;
}

/* Stacked (mobile) hero columns: center under the artwork */
@media (max-width: 781px) {
	.eg-kf-deep .wp-block-column { text-align: center; }
	.eg-kf-deep .wp-block-column .wp-block-buttons { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.eg-kf-feature { transition: none; }
	.eg-kf-feature:hover { transform: none; }
}

/* ── Content gutters ─────────────────────────────────────────────────────── */
/* The page templates keep the content area flush so alignfull bands can touch
   the header/footer, and WP's constrained layout adds no side padding of its
   own — so plain editor content would hit the viewport edges once the screen
   approaches the content width. Cap non-full children with a 1.5rem gutter
   per side instead. (Doubled class beats the :root :where() layout rules
   regardless of stylesheet order.) Scoped to body.page: CPT singles render
   post-content inline inside their own column layouts (leader bio, testimony
   description) where the gutter just reads as a random indent. */
.page .entry-content.entry-content > :where(:not(.alignfull):not(.alignwide)) {
	max-width: min(var(--wp--style--global--content-size, 760px), calc(100% - 3rem));
}
.page .entry-content.entry-content > :where(.alignwide) {
	max-width: min(var(--wp--style--global--wide-size, 1200px), calc(100% - 3rem));
}

/* ── Rounded, softly shadowed content images (journey rows etc.) ─────────── */
.eg-rounded img {
	display: block;
	width: 100%;
	border-radius: 14px;
	box-shadow: 0 18px 38px -18px rgba(15, 35, 64, 0.35);
}

/* ── Partner link lists on dark bands ────────────────────────────────────── */
.eg-partner-links p {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.eg-partner-links a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.15s ease;
}
.eg-partner-links a:hover {
	color: #46bf94;
}

/* ── It's Time generosity initiative (campaign brand: #002339 + #ff8e00) ── */

/* Homepage band + page resource band */
.eg-itstime {
	position: relative;
	overflow: hidden;
}
/* Warm orange glows in the band corners (decorative; CSS, not markup) */
.eg-itstime::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(255, 142, 0, 0.14), transparent) 92% -30%/420px 420px no-repeat,
		radial-gradient(closest-side, rgba(255, 142, 0, 0.08), transparent) 4% 130%/360px 360px no-repeat;
}
.eg-itstime > * { position: relative; }

/* Solid orange button: lighten on hover. !important beats the inline
   background-color on the <a>. */
.eg-itstime .wp-block-button:not(.is-style-outline) .wp-element-button:hover {
	background-color: #ffa733 !important;
	color: #002339 !important;
}
/* Outline white buttons: fill white on hover. !important beats the
   has-white-color preset class (WP emits preset colors with !important). */
.eg-itstime .wp-block-button.is-style-outline .wp-element-button:hover {
	background-color: #ffffff;
	color: #002339 !important;
}
@media (max-width: 781px) {
	.eg-itstime .wp-block-column { text-align: center; }
	.eg-itstime .wp-block-buttons { justify-content: center; }
}

/* Campaign page: hero quote — strip the core quote chrome, set it white */
.itstime-quote {
	border: none;
	margin: 0 auto;
	max-width: 640px;
	padding: 0;
	text-align: center;
	color: #ffffff;
}
.itstime-quote p {
	font-size: 1.125rem;
	line-height: 1.75;
}
.itstime-quote em {
	display: block;
	margin-top: 0.875rem;
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ff8e00;
}

/* Campaign page: framed Vimeo embed */
.itstime-video .wp-block-embed__wrapper iframe {
	border-radius: 14px;
	box-shadow: var(--eg-shadow-lg, 0 20px 44px -16px rgba(15, 35, 64, 0.3));
}

/* Campaign page: FAQ accordions (core details blocks) */
.itstime-faq .wp-block-details,
.eg-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--surface-border, #dde4ec);
	padding: 1.125rem 0;
	margin: 0;
}
.itstime-faq .wp-block-details:first-child,
.eg-faq .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--surface-border, #dde4ec);
}
.itstime-faq summary,
.eg-faq summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #1e3a5f);
	line-height: 1.45;
}
.itstime-faq summary::-webkit-details-marker,
.eg-faq summary::-webkit-details-marker { display: none; }
.itstime-faq summary::after,
.eg-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: #ff8e00;
	transition: transform 0.2s ease;
}
.itstime-faq details[open] summary::after,
.eg-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}
.itstime-faq details > p,
.eg-faq details > p {
	margin: 0.875rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--warm-text, #2c2416);
}

/* ── Photo mosaic ────────────────────────────────────────────────────────── */

.photo-mosaic .wp-block-columns {
	gap: 0.375rem !important;
}

.mosaic-photo {
	margin: 0 !important;
	display: block;
	line-height: 0;
}

.mosaic-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ── Life stage cards ────────────────────────────────────────────────────── */

/* Shadows, hover lift, and image zoom for these cards live in effects.css */
.life-stage-card {
	height: 100%;
}

.life-stage-card .wp-block-cover {
	overflow: hidden;
}

/* ── Story cards ─────────────────────────────────────────────────────────── */

.story-card {
	height: 100%;
}

/* ── People cards (Find Your People) ─────────────────────────────────────── */

/* Full-bleed photo cards: the cover IS the card; copy sits over a bottom
   gradient. Shadow + hover lift/zoom live in effects.css. */
.people-card {
	overflow: hidden;
	align-items: flex-end; /* anchor the copy to the bottom edge */
	text-align: left;
}
/* Legibility gradient under the copy (above the photo + dim, below content) */
.people-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 35, 64, 0) 32%, rgba(15, 35, 64, 0.55) 62%, rgba(15, 35, 64, 0.92) 100%);
	pointer-events: none;
	z-index: 1;
}
.people-card .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Staggered grid rhythm on desktop; columns stack normally on mobile */
@media (min-width: 782px) {
	.people-grid > .wp-block-column:nth-child(even) {
		margin-top: 2.75rem;
	}
}
@media (max-width: 781px) {
	.people-card {
		min-height: 320px !important; /* inline min-height is taller than mobile needs */
	}
}

/* ── Social-proof quote cards ────────────────────────────────────────────── */

/* Shadows + hover lift live in effects.css (same system as life-stage cards) */
.eg-quote {
	position: relative;
	height: 100%;
}

/* Oversized quotation mark hanging over the card's top edge */
.eg-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.4rem;
	left: 1.5rem;
	font-family: Georgia, serif;
	font-size: 4.5rem;
	line-height: 1;
	color: #00875a;
	opacity: 0.35;
	pointer-events: none;
}

/* Initials avatar: a single-letter paragraph rendered as a navy circle */
.eg-quote__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(150deg, #1e3a5f, #0f2340);
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
}

/* ── Sermon card ─────────────────────────────────────────────────────────── */

.sermon-card {
	overflow: hidden;
}

.sermon-card .wp-block-post-terms a,
.sermon-card .wp-block-post-title a {
	text-decoration: none;
}

.sermon-card .wp-block-post-title a:hover {
	color: #00875a;
}

/* ── Give page ───────────────────────────────────────────────────────────── */

/* White info cards (ways to give, fee comparison). Border/shadow/hover live
   here so the page block markup stays minimal. */
.eg-give-card {
	border: 1px solid var(--wp--preset--color--surface-border);
	box-shadow: 0 1px 2px rgba(15, 35, 64, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eg-give-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(15, 35, 64, 0.12);
}

/* ── Who We Are page ─────────────────────────────────────────────────────── */

/* Essential-beliefs accordions share the It's Time FAQ system (selectors
   extended above); only the marker accent differs. */
.eg-faq summary::after {
	color: var(--wp--preset--color--green, #00875a);
}

/* ── Church Center / App page ────────────────────────────────────────────── */

/* Full-width bands stack flush — each band owns its vertical rhythm via its own
   padding, so no page-background strip shows between adjacent bands. !important
   beats the post-content blockGap rule regardless of stylesheet order. */
.eg-app-hero,
.eg-app-section,
.eg-app-cta {
	margin-block: 0 !important;
	/* Side gutter so band content never runs to the screen edge (esp. on mobile).
	   The inner content is still capped + centered by the constrained layout, so
	   this only bites once the viewport approaches the content/wide width. */
	padding-inline: clamp(1.25rem, 4vw, 2rem);
}

/* Hero: text + phone mockup. Columns stack at WP's 781px breakpoint. */
.eg-app-hero__cols {
	gap: clamp(1.5rem, 4vw, 3rem);
}
.eg-app-hero__media {
	text-align: center;
}
.eg-app-phone {
	margin: 0;
}
.eg-app-phone img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: inline-block;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

/* Feature cards + setup steps: responsive auto-fit grids. The margin reset
   neutralizes WP's per-child layout margins so the grid gap owns the spacing. */
.eg-app-grid,
.eg-app-steps {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.eg-app-grid > *,
.eg-app-steps > * {
	margin-block: 0 !important;
}
.eg-app-card,
.eg-app-step {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--surface-border, #dde4ec);
	border-radius: 0.9rem;
	padding: 1.6rem 1.4rem;
	box-shadow: 0 1px 2px rgba(15, 35, 64, 0.06), 0 6px 16px -6px rgba(15, 35, 64, 0.12);
}
/* Green top accent + lift on the feature cards only. */
.eg-app-card {
	border-top: 4px solid var(--wp--preset--color--green, #00875a);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.eg-app-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(15, 35, 64, 0.08), 0 16px 30px -10px rgba(15, 35, 64, 0.22);
}

@media (max-width: 781px) {
	.eg-app-hero__cols .wp-block-column {
		text-align: center;
	}
	.eg-app-hero__cols .wp-block-buttons {
		justify-content: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.eg-app-card {
		transition: none;
	}
	.eg-app-card:hover {
		transform: none;
	}
}

/* ── Deep hero gradient ──────────────────────────────────────────────────────
   Upgrades a flat navy-deep band into a custom gradient in shades of the brand
   blue, with soft glows for depth (decorative, CSS-only — same technique as the
   KidzFest deep band). Add the `eg-hero-deep` class alongside a navy-deep band.
   background-image paints over the navy-deep fill, so it stays a safe fallback. */
.eg-hero-deep {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(150deg, #0a1a33 0%, #0f2340 50%, #1d3e66 100%);
}
.eg-hero-deep::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(56, 116, 180, 0.30), transparent) 85% -15%/560px 560px no-repeat,
		radial-gradient(closest-side, rgba(40, 92, 150, 0.26), transparent) 4% 118%/640px 640px no-repeat,
		radial-gradient(closest-side, rgba(70, 191, 148, 0.08), transparent) 70% 112%/380px 380px no-repeat,
		radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent) 55% -12%/300px 300px no-repeat;
}
.eg-hero-deep > * {
	position: relative;
	z-index: 1;
}