/*
 * Border-box everywhere.
 *
 * The theme never set this, so every component that combined a width or a
 * height with padding was quietly larger than the box it was given. On the
 * staff grid a card with height:100% and 20px of bottom padding came out
 * 22px taller than its cell and bled into the row gap, which read as the
 * rows having no space between them.
 *
 * :where() keeps the specificity at zero, so anything that genuinely wants
 * content-box can still say so without !important.
 */
:where(*, *::before, *::after) {
	box-sizing: border-box;
}

/*
 * The design layer: bands, section rhythm, hero, tiles.
 *
 * theme.json holds the tokens; this file is what turns them into a page that
 * reads as designed rather than as a stack of default blocks. The vocabulary
 * is deliberately small — a band, a section head, a card, a tile — so new
 * pages are assembled from parts that already agree with each other.
 */

/* ---------- Bands --------------------------------------------------------
 *
 * A band is one full-width horizontal section. Alternating their background
 * is what gives a long page its rhythm; without it every section runs into
 * the next and the page reads as one undifferentiated column.
 * ------------------------------------------------------------------------- */

.cong-band {
	position: relative;
}

/*
 * A band is a full-width strip whose contents sit in the page's measure.
 *
 * That constraint used to live on `.cong-ministry > section`, because a
 * ministry page was one block that wrote its own sections. Now the sections
 * are blocks an editor arranges, there is no wrapper to hang it on — and
 * without it a band's contents ran from bezel to bezel.
 *
 * Core's own constrained groups already do this and carry a class saying so,
 * so they are excluded: applying it twice would add a second gutter and
 * visibly narrow every band on the front page.
 */
.cong-band:not(.is-layout-constrained) {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.cong-band:not(.is-layout-constrained) > * {
	max-width: var(--wp--style--global--wide-size, 76rem);
	margin-inline: auto;
}

.cong-band--tint {
	background: var(--wp--preset--color--surface);
}

.cong-band--ink {
	background: linear-gradient(155deg, #04436a 0%, #0a5c8c 100%);
}

/*
 * Bands butt up against each other.
 *
 * theme.json sets a global block gap, and a template's <main> is a
 * constrained layout, so core was putting 28px between every top-level
 * section. Between two white bands that is invisible; under the hero it is a
 * white stripe across the page, and it also lifted the hairline below off the
 * edge it is meant to sit on. A band already carries its own padding, so the
 * gap between two of them is always wrong.
 *
 * :is() rather than :where() here — this has to out-specify the block-gap
 * rule, which core prints at `:root :where(.is-layout-constrained) > *`.
 */
:is(.cong-band, .cong-slideshow, .cong-hero, .cong-page-hero, .cong-kiosk, .cong-cta, .cong-event-head)
	+ :is(.cong-band, .cong-slideshow, .cong-hero, .cong-page-hero, .cong-kiosk, .cong-cta, .cong-event-head) {
	margin-block-start: 0;
}

/*
 * The header, the content and the footer are three top-level blocks, so the
 * global block gap lands between them. Every template's <main> opens and ends
 * with a band that brings its own padding, so that gap is a white stripe under
 * the navigation and another one above the footer, rather than breathing room.
 */
.wp-site-blocks > main,
.wp-site-blocks > main + * {
	margin-block-start: 0;
}

/* A hairline between two consecutive light bands, so they still separate. */
.cong-band + .cong-band:not(.cong-band--tint):not(.cong-band--ink)::before {
	content: "";
	position: absolute;
	inset-inline: max(1.25rem, calc(50% - 38rem));
	top: 0;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--sky-mid) 60%, transparent);
}

/*
 * The footer's rule.
 *
 * Core's default separator is a 100px dash centred in its container, which in
 * a footer reads as a stray mark rather than a division. The block carries
 * `is-style-wide` for that reason; this makes it a hairline rather than the
 * 2px bar the style would otherwise draw.
 */
.cong-footer .wp-block-separator {
	height: 1px;
	border: 0;
	/* A white tint rather than a named blue: it reads the same on any dark
	   background, which matters for a theme other churches will recolour. */
	background: rgb(255 255 255 / 0.16);
	opacity: 1;
}

/* ---------- Section headings --------------------------------------------- */

.cong-section-head {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.cong-section-head > * {
	margin-block: 0;
}

.cong-section-head .cong-eyebrow {
	justify-content: center;
}

.cong-section-head p:last-child:not(.cong-eyebrow) {
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * The eyebrow used over a photograph or a dark band.
 *
 * Two classes deep on purpose. `.cong-eyebrow` sets the olive in blocks.css,
 * which loads after this file, so a single-class modifier lost the tie and
 * every "light" eyebrow on the site was rendering in the dark olive — over
 * the hero photograph, over the ministry headers, over the call to action.
 * Unreadable, and invisible as a bug because the class was plainly there in
 * the markup.
 *
 * Lime rather than the pale blue it used to name, so that an eyebrow on a
 * dark surface is one colour everywhere: this is the same value the ink bands
 * already use.
 */
.cong-eyebrow.cong-eyebrow--light {
	color: var(--wp--preset--color--lime);
}

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

.cong-hero {
	/* Sits under the sticky header, which is translucent. */
	margin-top: calc(var(--wp--preset--spacing--30) * -1);
}

/*
 * The scrim is drawn by the cover itself, not by core's overlay span.
 *
 * That span (.wp-block-cover__background) computes to display:none on these
 * covers, so every rule aimed at it was silently doing nothing and the
 * headline sat on a bare photograph. An ::after on the cover is ours, always
 * renders, and needs no !important to win.
 */
.cong-hero::after,
.cong-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(4, 67, 106, 0.85) 0%,
			rgba(4, 67, 106, 0.58) 45%,
			rgba(4, 67, 106, 0.14) 100%
		),
		rgba(4, 67, 106, 0.18);
}

.cong-hero,
.cong-page-hero {
	position: relative;
	isolation: isolate;
}

/* The copy has to sit above the scrim we just painted over the picture. */
.cong-hero .wp-block-cover__inner-container,
.cong-page-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/*
 * A soft shadow on the type as well. It is invisible against the dark parts
 * of a photograph and does the work against the bright ones — white choir
 * robes, an orange welcome booth.
 */
.cong-hero__body :is(h1, h2, p),
.cong-page-hero__body :is(h1, h2, p) {
	text-shadow: 0 1px 12px rgba(4, 30, 48, 0.5);
}

.cong-hero__body .wp-element-button,
.cong-page-hero__body .wp-element-button {
	text-shadow: none;
}

.cong-hero__body > * {
	margin-block: 0;
}

.cong-hero h1 {
	text-wrap: balance;
}

/* Narrow screens crop to the middle of the picture, so the scrim has to
   come from the bottom rather than the side. */
@media (max-width: 48rem) {
	.cong-hero .wp-block-cover__background,
	.cong-page-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(4, 67, 106, 0.45) 0%,
			rgba(4, 67, 106, 0.92) 100%
		) !important;
	}
}

.cong-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: cong-step;
}

.cong-steps__list > li {
	counter-increment: cong-step;
}

/*
 * Four steps are read as a set of four (Learn, live, love, lead), so they
 * break 4 → 2×2 → 1, never 3 + 1 with one left hanging on its own row.
 */
.cong-steps__list:has(> li:nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1100px) {
	.cong-steps__list:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.cong-steps__list:has(> li:nth-child(4):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * An order of service counts its items; steps are not numbered (see the
 * steps block for why).
 */
.cong-order__n:empty::before {
	content: counter(cong-step, decimal-leading-zero);
}

.cong-order { counter-reset: cong-step; }
.cong-order > li { counter-increment: cong-step; }

/*
 * The list's own children, not only the ones carrying the class.
 *
 * Each title is a stretched link — `inset: 0` on a pseudo-element — so the
 * whole card is one target. That overlay is only the size of the card while
 * the card is its containing block. An `li` saved without `cong-step` (the
 * homepage pattern was, once) drops `position: relative`, the overlay climbs
 * to whatever is positioned above it, and all three end up covering the
 * section with the last one on top. Every hover in the band then reported the
 * third card's address. Matching the list's children directly means the class
 * is a convenience rather than the thing holding the layout together.
 */
.cong-steps__list > li,
.cong-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--wp--preset--color--lime);
}

/* A number typed into a step by hand, in content saved before they went. */
.cong-step__num {
	display: none;
}

.cong-step__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

.cong-step__title a {
	color: inherit;
	text-decoration: none;
}

.cong-step__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cong-step__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * The arrow line is a label for the link, not a second link.
 *
 * The whole step is clickable through a stretched `::after` on the title's
 * anchor. This element is aria-hidden and sat on top of that overlay, so the
 * one piece of the card that reads as "click me" was the one piece that did
 * nothing — no pointer cursor, no hover, no click. Letting the pointer pass
 * straight through hands it back to the link underneath.
 */
.cong-step__cta {
	pointer-events: none;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	transition: transform var(--wp--custom--transition--base);
}

.cong-step:hover .cong-step__cta,
.cong-step:focus-within .cong-step__cta {
	transform: translateX(4px);
}

/* ---------- Service cards ------------------------------------------------- */

.cong-service {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	background: var(--wp--preset--color--base);
	height: 100%;
}

.cong-service__media {
	margin: 0;
}

.cong-service__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* WordPress prints width/height attributes on every image. Those are
	   presentational hints, so a definite height beats the aspect-ratio
	   above it and the crop silently stops working — height:auto hands
	   the sizing back to the ratio. */
	height: auto;
}

.cong-service__time {
	margin: 0;
	color: var(--wp--preset--color--leaf);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.cong-service__body h3 {
	margin: 0;
}

.cong-service__body p:last-child {
	margin-bottom: 0;
}

/* ---------- Ministry tiles ------------------------------------------------ */

.cong-tiles {
	display: grid;
	/* auto-fit, so a ministry with four tiles fills the row rather than
	   leaving an empty track on the end. */
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) auto 0;
	padding: 0;
	list-style: none;
}

.cong-tile__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.cong-tile__media,
.cong-tile__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cong-tile__media img {
	transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);
}

.cong-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(4, 67, 106, 0) 35%,
		rgba(4, 67, 106, 0.82) 100%
	);
}

.cong-tile__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

.cong-tile__link:hover .cong-tile__media img,
.cong-tile__link:focus-visible .cong-tile__media img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.cong-tile__media img,
	.cong-step__cta {
		transition: none;
	}
	.cong-tile__link:hover .cong-tile__media img {
		transform: none;
	}
}

/* ---------- News --------------------------------------------------------- */

.cong-news__list > li {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cong-news .wp-block-post-title {
	line-height: 1.25;
	text-wrap: balance;
}

.cong-news .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cong-news .wp-block-post-title a:hover,
.cong-news .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cong-news .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	/* WordPress prints width/height attributes on every image. Those are
	   presentational hints, so a definite height beats the aspect-ratio
	   above it and the crop silently stops working — height:auto hands
	   the sizing back to the ratio. */
	height: auto;
}

.cong-news .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--ink-muted);
}

.cong-news .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.cong-news .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/*
 * News as a list: the picture on the left at its own shape, the words on the
 * right. The church's news pictures are whatever was made for the email — a
 * square collage one week, a wide banner the next — so cropping them into
 * matching cards cut words off the banners and left the squares floating.
 */
.cong-news--list .cong-news__list {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 1000px;
	margin-inline: auto;
}

.cong-news--list .cong-news__list > li {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	grid-auto-rows: min-content;
	column-gap: var(--wp--preset--spacing--40);
	align-items: start;
}


.cong-news--list .cong-news__list > li > * {
	grid-column: 2;
	margin-block: 0;
}

.cong-news--list .cong-news__list > li > .wp-block-post-featured-image {
	grid-column: 1;
	grid-row: 1 / span 4;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--10);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #f4f7f9);
	overflow: hidden;
}

.cong-news--list .wp-block-post-featured-image img {
	aspect-ratio: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 190px;
	object-fit: contain;
	border-radius: 6px;
}

.cong-news--list .wp-block-post-title {
	margin-block-start: var(--wp--preset--spacing--10);
}

.cong-news--list .wp-block-post-excerpt {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* The title and the picture are the links; the excerpt is just the gist. */
.cong-news--list .wp-block-post-excerpt__more-text {
	display: none;
}

/* No picture: the words take the whole row. */
.cong-news--list .cong-news__list > li:not(:has(.wp-block-post-featured-image)) > * {
	grid-column: 1 / -1;
}

@media (max-width: 640px) {
	.cong-news--list .cong-news__list > li {
		grid-template-columns: minmax(0, 1fr);
	}

	.cong-news--list .cong-news__list > li > *,
	.cong-news--list .cong-news__list > li > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: auto;
	}

	.cong-news--list .cong-news__list > li > .wp-block-post-featured-image {
		margin-block-end: var(--wp--preset--spacing--20);
	}
}

/* ---------- Page openers -------------------------------------------------- */

/*
 * The band a page opens with.
 *
 * Symmetrical. It used to be spacing-70 above and spacing-50 below, which put
 * a hand's width of empty tint between the header and the first word and made
 * every archive look like it started halfway down.
 */
.cong-page-head {
	padding-block: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--sky-soft);
}

.cong-page-head h1 {
	text-wrap: balance;
}

/* A series' graphic under its name on the series page. */
.cong-archive-head__media {
	max-width: 720px;
	margin: var(--wp--preset--spacing--40) auto 0;
}

.cong-archive-head__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg, 20px);
	box-shadow: 0 8px 30px rgb(4 67 106 / 0.12);
}

/* ---------- Buttons: the outline variants -------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-outline-light > .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.72);
	color: #fff;
}

.wp-block-button.is-style-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light > .wp-block-button__link:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--ink);
}

/* ---------- Dark-band corrections ----------------------------------------- */

.cong-band--ink .cong-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
	color: #fff;
}

.cong-band--ink .cong-story__quote,
.cong-band--ink .cong-story__who strong {
	color: #fff;
}

.cong-band--ink .cong-story__who {
	color: var(--wp--preset--color--sky-mid);
}

.cong-band--ink .cong-empty {
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--sky-mid);
}

/* The group band styles, when chosen from the editor rather than a pattern. */
.wp-block-group.is-style-band-tint {
	background: var(--wp--preset--color--surface);
	padding-block: var(--wp--preset--spacing--70);
}

.wp-block-group.is-style-band-ink {
	background: linear-gradient(155deg, #04436a 0%, #0a5c8c 100%);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--70);
}

.wp-block-group.is-style-band-ink :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

/* ---------- Portrait crops ------------------------------------------------
 *
 * Most staff headshots are landscape originals. Center-cropping them to a
 * portrait card cuts faces in half, so the crop is biased toward the upper
 * third, where a head actually is.
 * ------------------------------------------------------------------------- */

.cong-staff__photo img,
.cong-tile__media img {
	object-position: center 28%;
}

/* ---------- Missing featured images ---------------------------------------
 *
 * A grid of cards where some have an image and some do not reads as broken.
 * inc/media-fallback.php substitutes this placeholder so every card in a row
 * has the same shape.
 * ------------------------------------------------------------------------- */

.cong-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	border-radius: var(--wp--custom--radius--md);
	background:
		radial-gradient(120% 120% at 20% 0%, rgba(174, 212, 227, 0.55), transparent 60%),
		var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--sky);
	overflow: hidden;
}

.cong-media-placeholder svg {
	width: 28%;
	max-width: 5rem;
	height: auto;
	opacity: 0.55;
}

.cong-band--ink .cong-media-placeholder {
	background: rgba(255, 255, 255, 0.07);
	color: var(--wp--preset--color--sky-mid);
}

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

.cong-logo img {
	display: block;
	width: clamp(8.5rem, 12vw, 11rem);
	height: auto;
}

/* The nav sits closer to the logo than core's default spacing allows, and the
   items need room to breathe between them. */
.cong-header .wp-block-navigation {
	--wp--style--block-gap: var(--wp--preset--spacing--30);
	font-weight: 500;
}

.cong-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.cong-header .wp-block-navigation-item__content:hover,
.cong-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

.cong-utility a {
	color: var(--wp--preset--color--sky-mid);
	text-decoration: none;
}

.cong-utility a:hover {
	color: #fff;
	text-decoration: underline;
}

.cong-utility .wp-block-navigation {
	--wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* The utility bar is useful on a desktop and a waste of a phone's first
   screen. */
@media (max-width: 48rem) {
	/*
	 * Two centred rows, not four.
	 *
	 * Spelled out in full the bar was 122px — a third of the phone screen
	 * gone before the page started. What survives is what a phone visitor is
	 * most often holding the phone to find: where the church is, and the way
	 * in to Realm. The phone number goes, because the address links to Maps
	 * and both are in the footer; Give goes, because it is already a button
	 * an inch below, beside the menu.
	 *
	 * Give and the address are matched on their href rather than their
	 * position, so an admin reordering the header menu cannot silently
	 * unhide the wrong link.
	 */
	/* Two lines of extra-small type do not need a block's worth of padding
	   above and below them; the bar is a signpost, not a section.
	 *
	 * !important because the group block writes its padding inline, and the
	 * part exists as a database row as well as a theme file — overriding it
	 * from the stylesheet keeps this in one place rather than two that can
	 * disagree. */
	.cong-utility {
		padding-block: 0.3rem !important;
		line-height: 1.35;
	}

	.cong-utility > .wp-block-group {
		justify-content: center;
		row-gap: 0;
	}

	.cong-utility .wp-block-group > .wp-block-group:first-child {
		justify-content: center;
	}

	.cong-utility .cong-field:has( a[href^="tel:"] ) {
		display: none;
	}

	.cong-utility .wp-block-navigation-item:has( > a[href$="/give"] ) {
		display: none;
	}

	.cong-utility .wp-block-navigation {
		--wp--style--block-gap: var(--wp--preset--spacing--20);
		flex-wrap: nowrap;
		justify-content: center;
	}
}

/* ---------- Headings -------------------------------------------------------
 *
 * One typeface for the whole site, so headings earn their presence from
 * weight, size and tracking instead of a contrasting face. Lato's black is
 * doing the work that a display serif used to.
 * ------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, .cong-hero h1, .cong-ministry__hero h1) {
	font-synthesis-weight: none;
}

/* Small caps need a touch more weight to hold up at 13px. The eyebrow's own
   copy of this lives in blocks.css, which loads after this file and would
   otherwise win the tie. */
h6 {
	font-weight: 700;
}

/* ---------- Named values ---------------------------------------------------
 *
 * A list of commitments, each a name and a sentence. Deliberately not the
 * numbered step treatment: these are simultaneous, not sequential.
 * ------------------------------------------------------------------------- */

.cong-values {
	display: grid;
	/* Explicit counts rather than auto-fit: five values in a four-track grid
	   leaves one stranded on its own row. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.cong-values--cols-1 { grid-template-columns: minmax(0, 1fr); }
.cong-values--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cong-values--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cong-values--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cong-values--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cong-value {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--wp--preset--color--lime);
}

.cong-value__name {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--lg);
}

/*
 * The five values in their colours on the wheel: the colour as a thick rule
 * across the top and a light wash behind, the name in a darker shade of it
 * that still reads (4.5:1 on the wash).
 */
.cong-value[data-value] {
	padding: var(--wp--preset--spacing--30);
	border-top-width: 6px;
	border-radius: 0 0 var(--wp--custom--radius--md, 12px) var(--wp--custom--radius--md, 12px);
}

.cong-value[data-value] .cong-value__name { font-weight: 700; }

.cong-value[data-value="acceptance"]   { border-top-color: #e34f51; background: #fceded; }
.cong-value[data-value="hospitality"]  { border-top-color: #f5a21c; background: #fef5e8; }
.cong-value[data-value="community"]    { border-top-color: #00afab; background: #e5f7f6; }
.cong-value[data-value="discipleship"] { border-top-color: #a9b936; background: #f6f8ea; }
.cong-value[data-value="service"]      { border-top-color: #3b87b6; background: #ebf3f7; }

.cong-value[data-value="acceptance"]   .cong-value__name { color: #ba4042; }
.cong-value[data-value="hospitality"]  .cong-value__name { color: #976411; }
.cong-value[data-value="community"]    .cong-value__name { color: #007a77; }
.cong-value[data-value="discipleship"] .cong-value__name { color: #687221; }
.cong-value[data-value="service"]      .cong-value__name { color: #317198; }

.cong-value__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 64rem) {
	.cong-values,
	.cong-values[class*='--cols-'] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 44rem) {
	.cong-values,
	.cong-values[class*='--cols-'] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 30rem) {
	.cong-values,
	.cong-values[class*='--cols-'] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* A card whose point is the link out of it. */
.cong-way__cta {
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.cong-way__cta:hover {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* ---------- Order of worship ----------------------------------------------
 *
 * Two services side by side, each with the shape of its liturgy. The numbers
 * matter: a newcomer wants to know how far through they are.
 * ------------------------------------------------------------------------- */

.cong-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.cong-service--order {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky-mid) 55%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
}

.cong-service--order .cong-service__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	/* WordPress prints width/height attributes on every image. Those are
	   presentational hints, so a definite height beats the aspect-ratio
	   above it and the crop silently stops working — height:auto hands
	   the sizing back to the ratio. */
	height: auto;
}

/*
 * Every service card gets its padding, not just the ones in a list.
 *
 * The padding lived on the `--order` variant, so the same block used on the
 * worship page — a photograph, a time, a room and an order of service — put
 * all of it hard against the edge of the card. It looked like a bug because
 * it was one.
 */
.cong-service__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--40);
}

/* The order of service wants air above it, not beside it. */
.cong-service__body > .cong-order,
.cong-service__body > .cong-eyebrow {
	margin-block-start: var(--wp--preset--spacing--20);
}

.cong-service--order h3 {
	margin: 0.1rem 0 0;
	font-size: var(--wp--preset--font-size--xl);
}

.cong-service__where {
	margin: 0.2rem 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-service__blurb {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
}

.cong-order {
	display: grid;
	gap: 0.3rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
	list-style: none;
}

.cong-order li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.cong-order__n {
	flex: 0 0 auto;
	width: 1.6rem;
	color: var(--wp--preset--color--sky);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cong-order__item {
	color: var(--wp--preset--color--ink);
}

/* ---------- The gap before the footer ------------------------------------ */

/*
 * Every page ends somewhere.
 *
 * Templates each grew their own trailing spacer, and the ones that never did
 * — jobs, spaces, volunteer, signups, the ministry pages — ran their last row
 * of cards straight into the navy footer with nothing between them. One rule
 * for all of them, and a full-width band at the end supplies its own padding
 * so it keeps butting up to the footer on purpose.
 */
.wp-site-blocks > main > :last-child:not(.alignfull):not(.cong-band):not(.wp-block-post-content),
.wp-site-blocks > main > .wp-block-post-content > :last-child:not(.alignfull):not(.cong-band) {
	margin-block-end: var(--wp--preset--spacing--70);
}

/* ---------- The footer menu ---------------------------------------------- */

/*
 * One grid, not two bands.
 *
 * The church's details and the menu used to be stacked, which left a strip of
 * empty navy between them and a lopsided top row — logo adrift on the left,
 * Sundays adrift on the right, nothing in the middle. Side by side they fill
 * the width and read as one footer.
 */
.cong-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 60rem) {
	/*
	 * The church's details down the left beside the menu, and the social
	 * links in a row across the whole footer underneath. Down the narrow
	 * column, seven accounts made the left side twice the menu's height.
	 */
	.cong-footer__grid {
		grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.6fr);
		grid-template-areas:
			"id nav"
			"hours nav"
			"sundays nav"
			"social social";
		grid-template-rows: auto auto 1fr auto;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
		align-items: start;
	}

	.cong-footer__grid > .cong-footer__brand { display: contents; }
	.cong-footer__grid .cong-footer__id { grid-area: id; }
	.cong-footer__grid .cong-footer__hours { grid-area: hours; }
	.cong-footer__grid .cong-footer__sundays { grid-area: sundays; }
	.cong-footer__grid .cong-footer__nav { grid-area: nav; }

	.cong-footer__grid .cong-footer__social {
		grid-area: social;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem var(--wp--preset--spacing--40);
		margin-block-start: var(--wp--preset--spacing--30);
		padding-block-start: var(--wp--preset--spacing--40);
		border-block-start: 1px solid rgb(255 255 255 / 0.12);
	}

	.cong-footer__grid .cong-footer__social .cong-social__heading {
		margin: 0;
	}

	.cong-footer__grid .cong-footer__social .cong-social__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem var(--wp--preset--spacing--40);
	}

	.cong-footer__grid .cong-footer__social.is-list li + li {
		margin-block-start: 0;
	}
}

.cong-footer__brand .wp-block-site-logo {
	margin-block-end: var(--wp--preset--spacing--30);
}

/*
 * The church's details: who and where, office hours, Sundays, and where
 * else to find it — four small groups, one under another on a phone and in
 * the narrow left column on a wide screen.
 */
.cong-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.cong-footer__brand > *,
.cong-footer__brand .cong-footer__heading {
	margin-block-start: 0;
}

/* Office hours in the same voice as the Sunday times beside them: the days
   in white, the hours in the softer blue. */
.cong-footer .cong-hours {
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.cong-footer .cong-hours li {
	display: flex;
	flex-direction: column;
}

.cong-footer .cong-hours__days {
	color: #fff;
	font-weight: 600;
}

.cong-footer .cong-hours__time,
.cong-footer .cong-hours__note {
	color: var(--wp--preset--color--sky-mid);
}

.cong-footer .cong-hours__note {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
}

/*
 * A tablet: wide enough for the details side by side, not yet for the menu
 * beside them. Stacked in one column they left the right half of the footer
 * as empty navy; across three columns — who and where, office hours,
 * Sundays — with the social links in a row beneath, they fill the width
 * and the menu follows.
 */
@media (min-width: 48rem) and (max-width: 59.99rem) {
	.cong-footer__brand {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr);
		grid-template-areas:
			"id hours sundays"
			"social social social";
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.cong-footer__id { grid-area: id; }
	.cong-footer__hours { grid-area: hours; }
	.cong-footer__sundays { grid-area: sundays; }
	.cong-footer__social { grid-area: social; }

	.cong-footer__social .cong-social__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem var(--wp--preset--spacing--40);
	}

	.cong-footer__social.is-list li + li {
		margin-block-start: 0;
	}

	/* And the menu under them in three columns, separated from the details
	   by a rule so the two halves read as two. */
	.cong-footer__nav {
		columns: 3 10rem;
		padding-block-start: var(--wp--preset--spacing--40);
		border-block-start: 1px solid rgb(255 255 255 / 0.12);
	}
}

/*
 * Columns that pack, rather than a grid that leaves holes.
 *
 * The groups are wildly uneven — nine links under "Get Involved", one under
 * "Worship" — and in a grid each one takes a whole cell, so a row is as tall
 * as its longest column and the short ones sit over a void. Multi-column flow
 * fills instead: a short group is followed immediately by the next heading,
 * and the whole thing ends up roughly level.
 */
.cong-footer__nav {
	columns: 3 10rem;
	column-gap: var(--wp--preset--spacing--40);
}

@media (max-width: 48rem) {
	.cong-footer__nav {
		columns: 2 8rem;
	}
}

.cong-footer__group {
	/* A heading must never be orphaned from its own links. */
	break-inside: avoid;
	margin-block-end: var(--wp--preset--spacing--40);
}

.cong-footer__heading {
	margin-block: 0 0.5em;
	color: #aed4e3;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cong-footer__heading a {
	color: inherit;
	text-decoration: none;
}

.cong-footer__heading a:hover,
.cong-footer__heading a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.cong-footer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.cong-footer__nav li + li {
	margin-block-start: 0.35em;
}

/*
 * No underline until it is wanted.
 *
 * Thirty links each carrying a permanent rule is a page of ruled lines with
 * words on them; the colour already says they are links, and the underline
 * comes back on hover where it means something.
 */
.cong-footer__nav a {
	text-decoration: none;
}

.cong-footer__nav a:hover,
.cong-footer__nav a:focus-visible {
	text-decoration: underline;
}

/*
 * The logo, in white, on the navy footer.
 *
 * A filter rather than a second file: the mark is flat colour, so knocking it
 * to pure white loses nothing, and a church changing its logo changes one
 * image rather than remembering there is a footer copy too. If a proper white
 * asset ever exists, drop this rule and point the block at it.
 */
.cong-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
	/* The block's own width attribute is overridden somewhere upstream, so
	   the size is set here where it actually holds. */
	inline-size: 150px;
	block-size: auto;
	max-inline-size: 100%;
}

/* ------------------------------------------------------------------ *
 * Where two bands meet
 *
 * Every band carries ~100px of padding top and bottom. That is right for one
 * section; where two sit next to each other it doubles to over 200px of empty
 * page, and the homepage has ten of them — close to a fifth of its height was
 * gap. The join should read as one space, not two.
 *
 * `!important` because the padding is an inline style written by the editor,
 * and inline styles cannot be beaten any other way. It is scoped as tightly as
 * possible: only the two edges that actually touch, and never a band that has
 * already been set deliberately tight.
 * ------------------------------------------------------------------ */
.cong-band:not(.cong-band--tight):has(+ .cong-band) {
	padding-block-end: var(--wp--preset--spacing--50) !important;
}

.cong-band + .cong-band:not(.cong-band--tight) {
	padding-block-start: var(--wp--preset--spacing--50) !important;
}

/*
 * Where the church already is.
 *
 * Icon and word on one line, because an icon alone is a guess — the Apple
 * Podcasts mark in particular is three arcs that could be anything, and the
 * footer has room for five words. The icons are there to make the column
 * scannable at a glance, not to carry the meaning on their own.
 */
.cong-social__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-social.is-list li + li {
	margin-block-start: 0.5em;
}

.cong-social__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.cong-social__link:hover,
.cong-social__link:focus-visible {
	text-decoration: underline;
}

/*
 * The mark sits on the text baseline rather than the line box, which is what
 * `align-items: center` gives on a single line of text and is close enough.
 * Fixed at 20px: the icons are drawn on a 24-unit grid and anything that is
 * not a whole fraction of it blurs the thinner strokes.
 */
.cong-social__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* A horizontal strip, for a page header or a bulletin rather than a footer. */
.cong-social.is-row .cong-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.cong-social.is-icons-only .cong-social__link {
	gap: 0;
}