/* ===========================================================================
   Grace Church Santa Maria — custom components
   Sermon cards (YouTube) and the Facebook "Church Life" band.
   Colours resolve from the theme's own custom properties so they follow the
   Crucifix customiser rather than hard-coding the palette twice.
   ========================================================================= */

:root {
	--grace-stone: var(--wdtPrimaryColor, #beb29a);
	--grace-ink: var(--wdtSecondaryColor, #2e2b26);
	--grace-sand: var(--wdtTertiaryColor, #f4f1ea);
	--grace-rule: #ded8cb;
	--grace-body: #4a4742;
	/* Darkened stone: the brand taupe fails contrast as small text on white. */
	--grace-stone-ink: #8a7856;
	--grace-radius: 4px;
	--grace-shadow: 0 1px 2px rgba(46, 43, 38, .06), 0 8px 24px -12px rgba(46, 43, 38, .18);
}

/* --------------------------------------------------------- shared section --- */

.grace-sermons__intro,
.grace-fb-feed__intro {
	max-width: 46rem;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.grace-sermons__heading,
.grace-fb-feed__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	color: var(--grace-ink);
}

.grace-sermons__subtitle,
.grace-fb-feed__subtitle {
	margin: 0;
	color: var(--grace-body);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------- sermon cards --- */

.grace-sermons__grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.grace-sermons[data-columns="2"] .grace-sermons__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.grace-sermons[data-columns="4"] .grace-sermons__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.grace-sermon {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--grace-rule);
	border-radius: var(--grace-radius);
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.grace-sermon:hover,
.grace-sermon:focus-within {
	border-color: var(--grace-stone);
	box-shadow: var(--grace-shadow);
	transform: translateY(-2px);
}

/* The thumbnail is a button so the YouTube iframe only loads when asked for. */
.grace-sermon__player {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: var(--grace-ink);
	cursor: pointer;
	overflow: hidden;
}

.grace-sermon__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.grace-sermon__player:hover .grace-sermon__thumb { transform: scale(1.04); opacity: .82; }

.grace-sermon__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.grace-sermon__play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	color: var(--grace-ink);
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: background .25s ease, scale .25s ease;
}

.grace-sermon__player:hover .grace-sermon__play { background: var(--grace-stone); scale: 1.08; }
.grace-sermon__player:focus-visible { outline: 3px solid var(--grace-stone); outline-offset: 3px; }
.grace-sermon__play svg { margin-left: 3px; }

.grace-sermon__body { padding: 1.25rem 1.35rem 1.45rem; }

.grace-sermon__series {
	margin: 0 0 .45rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--grace-stone-ink);
}

.grace-sermon__title {
	margin: 0 0 .55rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.grace-sermon__title a { color: var(--grace-ink); text-decoration: none; }
.grace-sermon__title a:hover { color: var(--grace-stone-ink); }

.grace-sermon__date { margin: 0; font-size: .88rem; color: var(--grace-body); opacity: .8; }

/* Featured sermon: image beside copy on wide screens. */
.grace-sermon--featured { margin-bottom: 1.75rem; }

@media (min-width: 62em) {
	.grace-sermon--featured { display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
	.grace-sermon--featured .grace-sermon__player { height: 100%; aspect-ratio: auto; min-height: 22rem; }
	.grace-sermon--featured .grace-sermon__body { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 2.75rem; }
	.grace-sermon--featured .grace-sermon__title { font-size: 1.9rem; }
}

/* ------------------------------------------------------------ shared CTAs --- */

.grace-sermons__cta,
.grace-fb-feed__cta { margin: 2.5rem 0 0; text-align: center; }

.grace-sermons__link,
.grace-fb-feed__link {
	display: inline-block;
	padding: .3rem 0;
	color: var(--grace-stone-ink);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid var(--grace-stone);
	transition: color .2s ease, border-color .2s ease;
}

.grace-sermons__link:hover,
.grace-fb-feed__link:hover { color: var(--grace-ink); border-color: var(--grace-ink); }

.grace-sermons__empty { text-align: center; color: var(--grace-body); }

/* ----------------------------------------------------------- Facebook band --- */

/*
 * Facebook's Page Plugin renders at a maximum of 500px wide, so match that
 * exactly — a wider frame leaves a white gutter down one side. No overflow
 * clipping here: the plugin sizes its own header, and cropping it cut the page
 * name in half.
 */
.grace-fb-feed__embed {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	border: 1px solid var(--grace-rule);
	border-radius: var(--grace-radius);
	box-shadow: var(--grace-shadow);
	/* Reserve height up front so the lazy SDK does not shift the page on load. */
	min-height: var(--grace-fb-height, 700px);
}

.grace-fb-feed__embed .fb-page,
.grace-fb-feed__embed .fb-page span,
.grace-fb-feed__embed iframe { width: 100% !important; }

/* Facebook's own placeholder blockquote, shown before the SDK resolves. */
.grace-fb-feed__embed blockquote {
	margin: 0;
	padding: 2rem 1rem;
	border: 0;
	text-align: center;
	font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
	.grace-sermon,
	.grace-sermon__thumb,
	.grace-sermon__play { transition: none; }
	.grace-sermon:hover { transform: none; }
	.grace-sermon__player:hover .grace-sermon__thumb { transform: none; }
}

/* ===========================================================================
   Theme overrides — Grace identity on top of Crucifix
   ========================================================================= */

/*
 * The parent theme reserves --wdtFontTypo_Ext for a handwriting accent
 * (Satisfy) used on eyebrow lines above headings. A script face is wrong for a
 * Reformed Baptist church, and that variable is hard-coded in the parent's
 * theme defaults rather than exposed in the customiser — so override it here.
 */
:root {
	--wdtFontTypo_Base: 'Alegreya Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--wdtFontTypo_Alt: 'Alegreya', Georgia, 'Times New Roman', serif;
	--wdtFontTypo_Ext: 'Alegreya Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/*
 * Eyebrow / sub-title lines: small caps rather than handwriting.
 * Elementor writes a per-element font-size for these (31.6px, sized for the
 * script face), so the size needs to win against that generated rule.
 */
.wdt-heading-holder .wdt-heading-subtitle,
.wdt-heading-holder .wdt-heading-subtitle * {
	font-family: var(--wdtFontTypo_Ext) !important;
	font-style: normal !important;
	font-weight: 600;
	font-size: .8rem !important;
	line-height: 1.5 !important;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* Headings: Alegreya needs a touch less tracking than the demo's condensed face. */
h1, h2, h3, h4, h5, h6,
.wdt-heading-holder .wdt-heading-title-wrapper h1,
.wdt-heading-holder .wdt-heading-title-wrapper h2,
.wdt-heading-holder .wdt-heading-title-wrapper h3 {
	letter-spacing: -0.005em;
	text-transform: none;
}

/* --------------------------------------------------------------- header --- */

/*
 * The lockup is a wide horizontal mark, so cap its height and let the nav have
 * the room it needs — at the demo's logo width the menu wrapped onto two rows.
 */
.site-header .wdt-logo img,
.site-header .site-branding img,
.wdt-header-logo img,
.wdt-site-logo img {
	max-height: 54px;
	width: auto;
}

@media (max-width: 1200px) {
	.site-header .wdt-logo img,
	.wdt-header-logo img,
	.wdt-site-logo img { max-height: 44px; }
}

/*
 * Nav: the theme renders `ul.wdt-primary-nav` with inline-block items. With
 * seven top-level pages the row overflowed by a few pixels and dropped
 * "Contact" onto a second line, so trim the per-item padding and let the menu
 * column take the slack left by the removed phone block.
 */
.wdt-primary-nav > li > a {
	padding-left: 14px;
	padding-right: 14px;
	font-size: .95rem;
	letter-spacing: .01em;
	white-space: nowrap;
}

.wdt-primary-nav { white-space: nowrap; }

.elementor-element-7a55166 { flex-grow: 1; }

@media (max-width: 1320px) {
	.wdt-primary-nav > li > a { padding-left: 10px; padding-right: 10px; font-size: .9rem; }
}

/* Buttons carry the accent font at label size. */
.wdt-button-holder .wdt-button,
a.wdt-button,
.elementor-button.wdt-elementor-button {
	font-family: var(--wdtFontTypo_Base);
	font-weight: 600;
	letter-spacing: .1em;
}

/* --------------------------------------------------------------- content --- */

/* Long-form pages (What We Believe, FAQs) read better with a measure limit. */
.page .entry-content > p,
.page .entry-content > ul,
.page .entry-content > ol,
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > figure,
.page .entry-content > .wp-block-columns,
.page .entry-content > .wp-block-separator {
	max-width: 46rem;
}

.page .entry-content > p.has-large-font-size {
	font-size: 1.3rem;
	line-height: 1.55;
	color: var(--grace-ink);
}

.page .entry-content table { width: 100%; }
.page .entry-content th {
	font-family: var(--grace-accent-font, var(--wdtFontTypo_Base));
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ hero --- */

/*
 * The slide layout pulls the heading block up 40px so a small script eyebrow
 * tucks under the mark. A caps eyebrow is taller and collided with the emblem,
 * so drop the negative offset and space the two properly.
 */
.wdt-cus-home1-slider-heading > .elementor-widget-container { margin-top: 0 !important; }

.wdt-cus-home1-slider-heading .wdt-heading-subtitle { margin-bottom: .9rem; }

/*
 * The emblem is now a 1310px master rather than the 312px original, so it must
 * be sized explicitly — Elementor otherwise renders images at natural width.
 */
.swiper-slide .elementor-widget-image { margin-bottom: 1.25rem; }

.swiper-slide .elementor-widget-image img {
	width: 250px;
	max-width: 42vw;
	height: auto;
	margin-inline: auto;
	display: block;
}

@media (max-width: 48em) {
	.swiper-slide .elementor-widget-image img { width: 190px; }
}

/*
 * The demo sizes this heading for its condensed poster face and pads it 20%
 * on the right; with Alegreya and an explicit <br>, both make the first line
 * fold early. Neutralise them so each written line stays a line.
 */
/* The class sits on the heading element itself, whatever tag it renders as. */
.wdt-cus-home1-slider-heading .wdt-heading-title-wrapper,
.wdt-cus-home1-slider-heading h1.wdt-heading-title-wrapper,
.wdt-cus-home1-slider-heading h2.wdt-heading-title-wrapper {
	padding: 0 !important;
	max-width: none;
	margin-inline: auto;
	font-size: clamp(2.1rem, 3.75vw, 3.35rem) !important;
	line-height: 1.18 !important;
	white-space: nowrap;
}

@media (max-width: 48em) {
	.wdt-cus-home1-slider-heading .wdt-heading-title-wrapper,
	.wdt-cus-home1-slider-heading h1.wdt-heading-title-wrapper,
	.wdt-cus-home1-slider-heading h2.wdt-heading-title-wrapper {
		white-space: normal;
	}
}

/* The hero is a single image now, so the carousel chrome has nothing to do. */
.elementor-element-d0aa634 .wdt-carousel-pagination-wrapper,
.elementor-element-d0aa634 .wdt-carousel-arrow-pagination {
	display: none !important;
}

/* On phones the <br> would force awkward breaks; let text wrap naturally. */
@media (max-width: 48em) {
	.wdt-cus-home1-slider-heading .wdt-heading-title-wrapper br { display: none; }
}

/* ---------------------------------------------------------------- footer --- */

/*
 * The footer CTA slot was drawn for a tall stock photograph; the emblem is a
 * wide, short mark and overflowed its column. Cap it and centre it instead.
 */
.elementor-element-a0abd0b {
	/* The demo photo was pulled up 40px so it bled above the band; a short
	   emblem just ends up floating outside it. */
	margin-top: 0 !important;
	align-self: center;
}

.elementor-element-a0abd0b img {
	max-width: 200px;
	max-height: 84px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-inline: auto;
	display: block;
	opacity: .9;
}

/* Two-word button labels were breaking mid-phrase in narrow columns. */
.wdt-button-holder .wdt-button,
a.wdt-button { white-space: nowrap; }

/* Footer link columns: give the service-times column room to sit on one line. */
.wdt-accordion-and-toggle .wdt-toggle-content p { margin-bottom: .55rem; }

/* ------------------------------------------------------- page title banner --- */

/*
 * The banner carries the church's own congregation photograph, which is bright
 * and busy. The tint itself comes from the theme (breadcrumb_background's
 * background-color, applied as an overlay) — this just keeps the title crisp.
 */
.main-title-section-wrapper .main-title-section,
.main-title-section-wrapper .breadcrumb { position: relative; z-index: 2; }

.main-title-section-wrapper .main-title-section h1 {
	text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

/*
 * The theme's own banner overlay is a bottom-weighted gradient at 50% opacity,
 * which leaves the centre — where the page title sits — almost untinted. The
 * congregation photograph is bright, so replace it with an even scrim.
 */
.main-title-section-wrapper > .main-title-section-bg::after,
.main-title-section-wrapper.overlay-wrapper > .main-title-section-bg::after,
.main-title-section-wrapper.dark-bg-breadcrumb > .main-title-section-bg::after {
	background-image: linear-gradient(
		180deg,
		rgba(46, 43, 38, .54) 0%,
		rgba(46, 43, 38, .48) 50%,
		rgba(46, 43, 38, .60) 100%
	) !important;
	/* The theme also paints an opaque #151515 behind this gradient, which hid
	   the photograph entirely. */
	background-color: transparent !important;
	opacity: 1 !important;
}

/* --------------------------------------------------- sermon player reset --- */

/*
 * The thumbnail is a <button> so that the YouTube iframe is only created on
 * click. Crucifix styles every button globally — taupe fill, padding, radius,
 * and ::before/::after hover sweeps — which framed each thumbnail in a taupe
 * border. Reset it back to a bare image container.
 */
.grace-sermon .grace-sermon__player,
.grace-sermon button.grace-sermon__player {
	appearance: none;
	-webkit-appearance: none;
	background: var(--grace-ink) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	min-width: 0;
	min-height: 0;
	line-height: 0;
	font-size: 0;
	letter-spacing: 0;
	text-transform: none;
	transform: none !important;
}

.grace-sermon .grace-sermon__player::before,
.grace-sermon .grace-sermon__player::after {
	content: none !important;
	display: none !important;
}

/* Keep the play badge above the reset. */
.grace-sermon .grace-sermon__play { font-size: 1rem; line-height: 1; }

/* ------------------------------------------------- mission photo gallery --- */

/*
 * Two square photographs side by side on the About page, showing the outreach
 * the copy describes. Squares because that is how the church shot them.
 */
.gc-mission-gallery {
	max-width: 46rem;
	margin-block: 2.25rem 2.75rem;
	gap: 1.25rem;
}

.gc-mission-gallery .wp-block-image { margin: 0; }

.gc-mission-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--grace-radius);
	display: block;
}

.gc-mission-gallery figcaption {
	margin-top: .6rem;
	font-size: .82rem;
	letter-spacing: .04em;
	color: var(--grace-body);
	opacity: .85;
	text-align: left;
}

@media (max-width: 40em) {
	.gc-mission-gallery { gap: 1.5rem; }
}


/* --------------------------------------------------- footer CTA band fit --- */

/*
 * The band row is image | heading | text | button. The button keeps its label
 * on one line, so the flexible width has to come out of the text column, not
 * leak past the band's edge.
 */
.elementor-element-5bbd7e5 { min-width: 0; flex-shrink: 2; }
.elementor-element-13d0ffe { min-width: 0; flex-shrink: 0; }

.elementor-element-54b47a3 .wdt-button {
	padding-left: 26px;
	padding-right: 26px;
	letter-spacing: .06em;
}

/* ------------------------------------------------ footer schedule column --- */

/*
 * "This Lord's Day": one gathering per line, no wrapping. The column was
 * 147px wide, which is too narrow for "Bring & Share Lunch 12:00 PM" at any
 * readable size, so it gets a floor and the flexible columns absorb the rest.
 */
.elementor-element-f8f4ba8 { min-width: 15.5rem; }

.elementor-element-843c985 p {
	white-space: nowrap;
	font-size: .875rem;
	margin-bottom: .55rem;
}

/* -------------------------------------------------- Facebook split band --- */

/*
 * "Church Life" as one viewport-height band: heading, supporting line and the
 * CTA on the left, the feed on the right, instead of a lone 500px column with
 * empty space either side.
 */
.grace-fb-feed--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
	gap: 2rem 5.5rem;
	align-items: center;
}

.grace-fb-feed__eyebrow {
	margin: 0 0 1rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--grace-stone-ink);
}

.grace-fb-feed--split .grace-fb-feed__intro {
	margin: 0;
	max-width: 34rem;
	text-align: left;
}

.grace-fb-feed--split .grace-fb-feed__title { font-size: clamp(2rem, 3.2vw, 2.9rem); }

.grace-fb-feed--split .grace-fb-feed__subtitle { font-size: 1.1rem; }

.grace-fb-feed--split .grace-fb-feed__cta {
	margin-top: 2.25rem;
	text-align: left;
}

.grace-fb-feed--split .grace-fb-feed__embed {
	margin: 0;
	width: 100%;
	justify-self: end;
}

@media (max-width: 62em) {
	.grace-fb-feed--split { grid-template-columns: 1fr; gap: 2.5rem; }
	.grace-fb-feed--split .grace-fb-feed__intro { max-width: 46rem; margin-inline: auto; text-align: center; }
	.grace-fb-feed--split .grace-fb-feed__cta { text-align: center; }
	.grace-fb-feed--split .grace-fb-feed__embed { justify-self: center; max-width: 500px; }
}

/* ---------------------------------------------------- hero video background --- */

/*
 * The teaser plays behind the hero heading via Elementor's video-background
 * mode, under the container's own 70% dark overlay. Elementor sizes hosted
 * background video by JS; this keeps it covering the container if that runs
 * late, and hides it when the visitor asks for reduced motion (the fallback
 * photograph shows through instead).
 */
.elementor-1394 .elementor-background-video-hosted,
video.elementor-background-video-hosted {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Welcome photograph: same treatment the film had in this slot. */
.elementor-element-53755f7 img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: var(--grace-shadow);
}