/**
 * The authored blocks.
 *
 * These carry the pieces of the design that used to be pasted into pages as
 * raw HTML: the banner, the slideshow, the accordion. The older layout rules
 * in layout.css still style the shared pieces (bands, cards, steps), so this
 * file only adds what those blocks needed that did not exist yet.
 */

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.cong-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	overflow: clip;
}

.cong-hero--short { min-block-size: clamp(18rem, 32vh, 26rem); }
.cong-hero--tall  { min-block-size: clamp(26rem, 62vh, 44rem); }
.cong-hero--full  { min-block-size: min(88vh, 56rem); }

.cong-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/*
 * Two classes deep on purpose. A banner photograph has to fill its frame
 * exactly, and the generic content styles set `height: auto` on images at the
 * same specificity — whichever stylesheet loaded last won, and the front page
 * ended up with a photo six pixels short of its own scrim.
 */
.cong-hero__media .cong-hero__img,
.cong-slide__media .cong-slide__img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/*
 * The scrim is a gradient rather than a flat wash so the photograph still
 * reads at the top while the copy at the bottom keeps its contrast.
 *
 * Two layers. The gradient does the work where the copy sits — the body is
 * bottom-aligned, so its headline lands around 60-70% of the way up, and the
 * old curve had faded to about 0.2 by then. On a bright photograph (a green
 * and blue dress, stage lighting) white text on that is unreadable, which is
 * how the homepage looked the moment real photographs went in. The flat wash
 * underneath sets a floor, so no part of any picture we have not seen yet can
 * come through light enough to swallow the text.
 */
/*
 * A plain slide keeps its picture exactly as it was made: no scrim, no
 * gradient, nothing over it. It is somebody's finished artwork, not a
 * backdrop for type.
 */
.cong-slide--plain .cong-slide__media::after {
	display: none;
}

.cong-slide--plain .cong-slide__body {
	padding: 0;
}

/*
 * The whole picture, never a crop.
 *
 * A photograph behind a headline can be cropped freely — that is what
 * `cover` is for. A notice somebody designed cannot: the slide area is a
 * band across the top of the panel, not 16:9, so `cover` ate the bottom
 * third of a 1920 × 1080 poster and with it the time the event starts.
 * `contain` shows all of it, and a dark backing makes the letterboxing
 * read as a frame rather than as a mistake.
 */
.cong-slide--plain {
	background: var(--wp--preset--color--ink, #04436a);
}

.cong-slide--plain .cong-slide__media .cong-slide__img {
	object-fit: contain;
}

.cong-hero__media::after,
.cong-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			rgb(11 42 66 / 0.90) 0%,
			rgb(11 42 66 / 0.80) 45%,
			rgb(11 42 66 / 0.50) 78%,
			rgb(11 42 66 / 0.30) 100%
		),
		rgb(11 42 66 / 0.15);
}

/*
 * The words start where the logo does, as on the ministry pages: the box is
 * as wide as the header's own, and it is the words inside that are kept to a
 * readable measure. The box itself used to be the 46rem, centred, so each
 * page's heading started somewhere different from the logo above it.
 */
.cong-hero__body {
	position: relative;
	z-index: 1;
	inline-size: min(100% - 2 * clamp(1.25rem, 5vw, 3rem), var(--wp--style--global--wide-size, 76rem));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60, 4rem);
	color: #fff;
}

.cong-hero__body > * { max-inline-size: 46rem; }

.cong-hero__body > * + * { margin-block-start: var(--wp--preset--spacing--30, 1rem); }
.cong-hero__body h1 { color: inherit; text-wrap: balance; }

.cong-hero__lede,
.cong-slide__lede {
	font-size: var(--wp--preset--font-size--lg, 1.2rem);
	max-inline-size: 34em;
	text-wrap: pretty;
}

/*
 * Only the first slide's heading is an <h1>; the others are paragraphs, and
 * the content's paragraph rule (line-height 1.7) out-ranked the heading's
 * own. Invisible while every heading fit on one line — the first two-line one
 * opened a gap between its lines as tall as the words. Same for the lede.
 */
.cong-slide p.cong-slide__heading {
	line-height: 1.05;
}

.cong-slide p.cong-slide__lede {
	line-height: 1.45;
}

/* A hero with no picture still needs a background to sit the white copy on. */
.cong-hero:not(:has(.cong-hero__media)),
.cong-slide:not(:has(.cong-slide__media)) {
	background: linear-gradient(135deg, var(--wp--preset--color--ink, #0b2a42), var(--wp--preset--color--slate, #4c6b83));
}

/* ------------------------------------------------------------------ *
 * Slideshow
 * ------------------------------------------------------------------ */
.cong-slideshow {
	position: relative;
	isolation: isolate;
}

.cong-slideshow__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

/*
 * Every slide is stacked in the same grid cell, so the deck is as tall as its
 * tallest slide and never jumps height as it advances.
 */
.cong-slide {
	grid-area: 1 / 1;
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	overflow: clip;
}

.cong-slideshow--short .cong-slide { min-block-size: clamp(18rem, 32vh, 26rem); }
.cong-slideshow--tall  .cong-slide { min-block-size: clamp(26rem, 62vh, 44rem); }
.cong-slideshow--full  .cong-slide { min-block-size: min(88vh, 56rem); }

.cong-slide__media { position: absolute; inset: 0; z-index: -2; }

.cong-slide__body {
	position: relative;
	z-index: 1;
	/* Starts under the logo, like every page header (see .cong-hero__body). */
	inline-size: min(100% - 2 * clamp(1.25rem, 5vw, 3rem), var(--wp--style--global--wide-size, 76rem));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60, 4rem);
	padding-block-end: calc(var(--wp--preset--spacing--60, 4rem) + 2.5rem);
	color: #fff;
}

.cong-slide__body > * { max-inline-size: 46rem; }

.cong-slide__body > * + * { margin-block-start: var(--wp--preset--spacing--30, 1rem); }

/*
 * Headings inside a scrimmed body take the body's colour.
 *
 * theme.json's `elements.heading` prints a bare `h1, h2, h3, h4, h5, h6`
 * rule that sets the ink blue. A property set on the element itself always
 * beats one inherited from an ancestor, whatever the specificity, so the
 * `color: #fff` on .cong-slide__body never reached the headline — the front
 * page's <h1> was navy on a navy scrim, invisible until you knew it was
 * there. This puts it back to inheriting.
 */
.cong-slide__body :is(h1, h2, h3, h4, h5, h6),
.cong-hero__body :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}


.cong-slide__heading {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--xxxl, clamp(2.5rem, 5vw, 4rem));
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
	text-wrap: balance;
	margin: 0;
}

/*
 * Before the script runs, only the first slide shows. Doing this in CSS
 * rather than JavaScript means the deck never flashes all of its slides at
 * once on a slow connection.
 */
.cong-slideshow:not([data-cong-ready]) .cong-slide:not(:first-child) {
	visibility: hidden;
}

.cong-slideshow[data-cong-ready] .cong-slide {
	visibility: hidden;
	opacity: 0;
	/*
	 * A real crossfade. `visibility` is not an interpolatable property, so
	 * leaving it out of the transition made it flip the instant the class
	 * changed: the outgoing slide disappeared, and the incoming one faded up
	 * from the page background rather than from the picture underneath it.
	 * Delaying the visibility change by the length of the fade keeps the old
	 * slide on screen for exactly as long as the new one takes to arrive.
	 */
	transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 800ms;
}

.cong-slideshow[data-cong-ready] .cong-slide.is-current {
	visibility: visible;
	opacity: 1;
	transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/*
 * A slow push on the current slide's photograph. Small enough that nobody
 * consciously notices it moving; enough that a still image does not read as
 * a stalled page. Switched off wholesale under reduced motion below.
 *
 * An animation rather than a transition, because of the first slide. The
 * script sets `data-cong-ready` and marks slide one current in the same
 * frame, so that image never gets painted at its starting scale — there is
 * no previous value for a transition to run from, and slide one alone sat
 * perfectly still while every other slide drifted. An animation declares both
 * ends itself, so it plays the first time as well as every time after, and it
 * restarts when the deck comes round again because `is-current` is removed
 * and re-added.
 */
@keyframes cong-slide-drift {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

.cong-slideshow[data-cong-ready] .cong-slide__img {
	transform: scale(1.06);
}

.cong-slideshow[data-cong-ready] .cong-slide.is-current .cong-slide__img {
	animation: cong-slide-drift 12s linear forwards;
}

/* Controls ---------------------------------------------------------- */
.cong-slideshow__controls {
	position: absolute;
	z-index: 2;
	inset-block-end: var(--wp--preset--spacing--30, 1.25rem);
	inline-size: min(100% - 2 * var(--wp--custom--gutter, 1.25rem), var(--wp--style--global--wide-size, 76rem));
	inset-inline: 0;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cong-slideshow__dots {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The button is a 24px target (WCAG 2.2) with the small dot drawn inside it,
   so the dots look as they did but are easy to hit with a thumb. */
.cong-slideshow__dot {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.cong-slideshow__dot::before {
	content: "";
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.45);
	transition: background 200ms ease, transform 200ms ease;
}

.cong-slideshow__dot:hover::before { background: rgb(255 255 255 / 0.75); }

.cong-slideshow__dot[aria-current="true"]::before {
	background: #fff;
	transform: scale(1.35);
}

.cong-slideshow__dot:focus-visible,
.cong-slideshow__pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.cong-slideshow__pause {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	font-family: inherit;
	color: #fff;
	background: rgb(255 255 255 / 0.14);
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 999px;
	cursor: pointer;
	transition: background 200ms ease;
}

.cong-slideshow__pause:hover { background: rgb(255 255 255 / 0.26); }

/*
 * Off the screen, not off the page. Staff did not want a Pause button over
 * the home page, but slides that move by themselves need a way to stop them
 * for people using a keyboard or a screen reader (WCAG 2.2.2). So it is
 * there for them, and appears where it always was the moment it is tabbed to.
 */
.cong-slideshow__pause:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Accordion
 * ------------------------------------------------------------------ */
.cong-accordion {
	border-block-start: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.12));
}

.cong-accordion__item {
	border-block-end: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.12));
}

.cong-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #0b2a42);
	cursor: pointer;
	list-style: none;
}

.cong-accordion__summary::-webkit-details-marker { display: none; }

/*
 * The chevron is drawn here rather than shipped as an icon, which is why the
 * imported Elementor markup had two stray SVGs per panel to start with.
 */
.cong-accordion__summary::after {
	content: "";
	flex: none;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 200ms ease;
	margin-block-start: -0.25rem;
}

.cong-accordion__item[open] > .cong-accordion__summary::after {
	transform: rotate(-135deg);
	margin-block-start: 0.2rem;
}

.cong-accordion__summary:hover { color: var(--wp--preset--color--leaf, #6d8b1f); }

.cong-accordion__panel {
	padding-block-end: 1.25rem;
	max-inline-size: 60ch;
}

.cong-accordion__panel > :first-child { margin-block-start: 0; }
.cong-accordion__panel > :last-child  { margin-block-end: 0; }

.cong-accordion__item.is-editing { padding-block: 0.5rem; }

/* ------------------------------------------------------------------ *
 * Feature row, reversed
 * ------------------------------------------------------------------ */
.cong-service--reversed .cong-service__media { order: 2; }

/* ------------------------------------------------------------------ *
 * Editor affordances
 * ------------------------------------------------------------------ */
.cong-editor-media img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 0.375rem;
	cursor: pointer;
	display: block;
}

.cong-editor-media__pick { inline-size: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.cong-slideshow[data-cong-ready] .cong-slide { transition-duration: 1ms; }
	.cong-slideshow[data-cong-ready] .cong-slide__img,
	.cong-slideshow[data-cong-ready] .cong-slide.is-current .cong-slide__img {
		transform: none;
		transition: none;
		animation: none;
	}
	.cong-accordion__summary::after { transition-duration: 1ms; }
}

/*
 * Until the media library is imported most slides have no photograph. Vary
 * the fallback gradient by position so the deck still reads as three
 * different banners; the moment a picture is set, the gradient is covered.
 */
.cong-slide:not(:has(.cong-slide__media)):nth-child(2) {
	background: linear-gradient(135deg, var(--wp--preset--color--slate, #4c6b83), var(--wp--preset--color--ink, #0b2a42));
}

.cong-slide:not(:has(.cong-slide__media)):nth-child(3) {
	background: linear-gradient(115deg, var(--wp--preset--color--ink, #0b2a42) 35%, var(--wp--preset--color--leaf, #6d8b1f));
}

/* ------------------------------------------------------------------ *
 * Program filters
 * ------------------------------------------------------------------ */
.cong-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;

	/*
	 * A filter row is not part of the heading above it. It had no top margin,
	 * so on a ministry page the checkboxes sat flat against "What's happening
	 * in Music, Arts, and Theatre" and read as part of the title.
	 */
	margin: var(--wp--preset--spacing--40, 2rem) 0;
	padding: 0;
	border: 0;
}

/* Centred, because the section heading above it is. */
.cong-section-head + .cong-filters {
	justify-content: center;
}

.cong-filters__option {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--xs, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-filters__option input {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	accent-color: var(--wp--preset--color--leaf, #6d8b1f);
	cursor: pointer;
	margin: 0;
}

.cong-filters__option:hover { color: var(--wp--preset--color--leaf, #6d8b1f); }

.cong-filters__clear {
	/*
	 * No `margin-inline-start: auto`.
	 *
	 * An auto margin overrides the row's centring, so the instant somebody
	 * ticked a box the options jumped from the middle of the page to the left
	 * and the button shot out to the right. It now sits with the options and
	 * the row stays where it was.
	 */
	padding: 0.3rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--xs, 0.82rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	background: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
}

.cong-filters__clear:hover { color: var(--wp--preset--color--ink, #0b2a42); }

.cong-filters__count {
	margin: -1rem 0 var(--wp--preset--spacing--30, 1.25rem);
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	text-align: center;
}

/*
 * Both of these appear only once something is filtered, and the script hides
 * them with the `hidden` attribute — which removes them from the page and
 * shunts everything below up and down as you tick boxes. They keep their
 * space instead and simply become invisible, so the only thing that moves
 * when you filter is the tiles.
 */
.cong-filters__clear[hidden],
.cong-filters__count[hidden] {
	visibility: hidden;
	pointer-events: none;
}

.cong-filters__clear[hidden] {
	display: inline-block;
}

.cong-filters__count[hidden] {
	display: block;
}

/* A tile hidden by a filter must not leave a gap in the grid. */
.cong-grid > li[hidden] { display: none; }

/* ------------------------------------------------------------------ *
 * Counselor focus
 * ------------------------------------------------------------------ */
.cong-staff-focus__heading {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	margin-block-end: 0.75rem;
}

.cong-staff-focus__count {
	flex: none;
	margin-inline-start: auto;
	margin-inline-end: 0.75rem;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--xs, 0.78rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

/*
 * The terms are tags, not prose: a wrapped row of pills reads faster than a
 * bulleted column twenty items long.
 */
.cong-staff-focus__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-inline-size: none;
}

.cong-staff-focus__terms li {
	padding: 0.28rem 0.7rem;
	font-size: var(--wp--preset--font-size--sm, 0.88rem);
	line-height: 1.35;
	color: var(--wp--preset--color--ink, #0b2a42);
	background: var(--wp--preset--color--surface, #f2f6f8);
	border-radius: 999px;
}

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

.cong-staff-focus__terms a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Embedded pages
 * ------------------------------------------------------------------ */
.cong-frame {
	inline-size: 100%;
	block-size: var(--cong-frame-height, clamp(26rem, 74vh, 56rem));
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f2f6f8);
}

.cong-frame--rounded { border-radius: 1.5rem; }

.cong-frame__frame {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* Full-bleed embeds lose the rounding; a corner radius against the window
   edge reads as a mistake rather than a style. */
.cong-frame.alignfull.cong-frame--rounded { border-radius: 0; }

/* ------------------------------------------------------------------ *
 * Event calendar
 * ------------------------------------------------------------------ */
.cong-calendar__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-block-end: var(--wp--preset--spacing--30, 1.25rem);
}

.cong-calendar__month {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 1.6rem);
	min-inline-size: 11ch;
	text-align: center;
}

.cong-calendar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: var(--wp--preset--color--ink, #0b2a42);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.18));
	border-radius: 50%;
	transition: background 150ms ease, border-color 150ms ease;
}

.cong-calendar__nav:hover {
	background: var(--wp--preset--color--surface, #f2f6f8);
	border-color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-calendar__grid {
	inline-size: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.cong-calendar__grid th {
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	border-block-end: 2px solid var(--wp--preset--color--ink, #0b2a42);
}

.cong-calendar__day {
	vertical-align: top;
	block-size: 7.5rem;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.12));
}

.cong-calendar__day.is-outside { background: rgb(11 42 66 / 0.025); }
.cong-calendar__day.is-outside .cong-calendar__n { opacity: 0.4; }
.cong-calendar__day.is-today { background: rgb(109 139 31 / 0.08); }

.cong-calendar__n {
	display: inline-block;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #0b2a42);
	margin-block-end: 0.25rem;
}

.cong-calendar__day.is-today .cong-calendar__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	color: #fff;
	background: var(--wp--preset--color--leaf, #6d8b1f);
	border-radius: 50%;
}

.cong-calendar__events {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cong-calendar__events a {
	display: block;
	padding: 0.2rem 0.35rem;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	line-height: 1.25;
	color: var(--wp--preset--color--ink, #0b2a42);
	text-decoration: none;
	background: var(--wp--preset--color--surface, #f2f6f8);
	border-inline-start: 3px solid var(--wp--preset--color--leaf, #6d8b1f);
	border-radius: 0.2rem;
}

.cong-calendar__events a:hover {
	background: var(--wp--preset--color--ink, #0b2a42);
	color: #fff;
}

.cong-calendar__time { display: block; font-weight: 700; opacity: 0.75; }
.cong-calendar__what { display: block; }

/*
 * Seven columns of day cells are unreadable on a phone. Below that, the grid
 * becomes a list of the days that actually have something on them — the empty
 * ones carry no information worth a row.
 */
@media (max-width: 47.9rem) {
	.cong-calendar__grid,
	.cong-calendar__grid tbody,
	.cong-calendar__grid tr { display: block; }

	.cong-calendar__grid thead { display: none; }

	.cong-calendar__day { display: none; }

	.cong-calendar__day.has-events {
		display: grid;
		grid-template-columns: 3.5rem 1fr;
		gap: 0.75rem;
		block-size: auto;
		border-inline: 0;
		border-block-start: 0;
	}

	.cong-calendar__day.has-events .cong-calendar__n { margin: 0; }
	.cong-calendar__events a { font-size: var(--wp--preset--font-size--sm, 0.9rem); }
	.cong-calendar__time { display: inline; margin-inline-end: 0.4rem; }
	.cong-calendar__what { display: inline; }
}

/* ------------------------------------------------------------------ *
 * Program tiles
 * ------------------------------------------------------------------ *
 * A program listing is a wall of names with a picture each — there is
 * rarely an excerpt, and the plain card shape left the title stranded at
 * the bottom of a 56px void. Here the picture is the whole card and the
 * name sits on it, which is both denser and what the live site does.
 */
/*
 * A program with no photograph.
 *
 * The tile below is a photograph with a name on it, and it is the right shape
 * when there is a photograph. When there is not, the same markup is a grey
 * placeholder the size of a picture with the one useful sentence about the
 * program deliberately hidden — which is what the Child Development Center's
 * page was: three empty boxes under "What's happening".
 *
 * So the card keeps its words instead. It sits in the same grid as the tiles,
 * because a ministry usually has some of each and two rows of different shapes
 * reads as a mistake; `height: 100%` is what keeps a short card level with a
 * tall one beside it.
 */
.cong-card--worded {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	block-size: 100%;
	padding: var(--wp--preset--spacing--30, 1.25rem);
	border: 1px solid var(--wp--preset--color--sky-soft, #dbe6ed);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: #fff;
}

.cong-card--worded .cong-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.2rem);
	line-height: 1.2;
	text-wrap: balance;
}

.cong-card--worded .cong-card__summary {
	margin: 0;
	color: var(--wp--preset--color--slate, #4a6a7e);
	text-wrap: pretty;
}

.cong-card--tile {
	position: relative;
	display: block;
	padding: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 0;
	background: var(--wp--preset--color--ink, #0b2a42);
}

.cong-card--tile .cong-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
	aspect-ratio: auto;
	border-radius: inherit;
}

.cong-card--tile .cong-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cong-card--tile:hover .cong-card__media img,
.cong-card--tile:focus-within .cong-card__media img {
	transform: scale(1.04);
}

/*
 * The scrim is a gradient rather than a flat tint so the top of the
 * photograph keeps its color while the name stays legible over whatever
 * happens to be at the bottom of the frame.
 */
.cong-card--tile .cong-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(11 42 66 / 0.88) 0%,
		rgb(11 42 66 / 0.55) 34%,
		rgb(11 42 66 / 0.12) 68%,
		rgb(11 42 66 / 0) 100%
	);
	transition: opacity 400ms ease;
}

.cong-card--tile:hover .cong-card__media::after { opacity: 0.94; }

/*
 * The picture sits behind everything on a negative layer rather than the
 * text being raised above it. That matters for more than paint order: the
 * card's whole surface is a stretched link on .cong-card__title a::after,
 * and inset:0 resolves against the nearest *positioned* ancestor. Giving the
 * title position:relative would silently shrink that hit area to the title,
 * leaving the picture unclickable.
 *
 * A negative z-index child still paints above its stacking context's own
 * background, so the navy fallback stays behind the photograph.
 */
.cong-card--tile {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.3rem;
	isolation: isolate;
	cursor: pointer;
}

.cong-card--tile .cong-card__media { z-index: -1; }

.cong-card--tile > :not(.cong-card__media):first-of-type {
	margin-block-start: auto;
}

.cong-card--tile .cong-card__title,
.cong-card--tile .cong-card__meta,
.cong-card--tile .cong-card__excerpt {
	padding-inline: var(--wp--preset--spacing--30, 1.25rem);
	color: #fff;
}

.cong-card--tile .cong-card__title {
	font-size: var(--wp--preset--font-size--lg, 1.2rem);
	line-height: 1.15;
	text-wrap: balance;
}

.cong-card--tile .cong-card__title a { color: #fff; }

.cong-card--tile .cong-card__meta,
.cong-card--tile .cong-card__excerpt {
	color: rgb(255 255 255 / 0.82);
}

/*
 * An excerpt is supporting detail here, not the point: two lines at most.
 *
 * The padding that positions it had to move to a wrapper-free approach —
 * -webkit-box quietly refuses to clamp when the element also carries block
 * padding, so the clamp was declared, computed, and doing nothing. Margins
 * do the same job and leave the box alone.
 */
.cong-card--tile .cong-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0;
	margin-inline: var(--wp--preset--spacing--30, 1.25rem);
	margin-block: 0.15rem 0;
}

/* The last element still needs to clear the bottom edge. */
.cong-card--tile > :last-child {
	margin-block-end: var(--wp--preset--spacing--30, 1.25rem);
	padding-block-end: 0;
}

.cong-card--tile > :last-child {
	padding-block-end: var(--wp--preset--spacing--30, 1.25rem);
}

.cong-card--tile .cong-card__actions {
	margin-block-start: 0.4rem;
	padding-block-start: 0;
}

/* The lift on hover belongs to the plain card; a tile grows its picture. */
.cong-card--tile:hover,
.cong-card--tile:focus-within {
	transform: none;
	box-shadow: var(--wp--preset--shadow--lift);
}

@media (prefers-reduced-motion: reduce) {
	.cong-card--tile .cong-card__media img { transition: none; }
	.cong-card--tile:hover .cong-card__media img,
	.cong-card--tile:focus-within .cong-card__media img { transform: none; }
}

/*
 * A tile with no photograph yet would be a flat navy rectangle. The
 * placeholder keeps its initials visible and the name still reads.
 */
.cong-card--tile .cong-media-placeholder {
	position: absolute;
	inset: 0;
	block-size: 100%;
}

/* ------------------------------------------------------------------ *
 * Single program and event pages
 * ------------------------------------------------------------------ *
 * The old layout put the photograph inside the text column at 16:9 and
 * left the facts box adrift at the top of a 38% column, so the page read
 * as a small picture, a cramped sidebar and a wall of prose. The picture
 * is the banner now, and the facts travel with the reader.
 */
.cong-page-hero__body > * + * {
	margin-block-start: var(--wp--preset--spacing--20, 0.75rem);
}

/*
 * The hero's gutter matches the page's.
 *
 * The cover block brings its own padding — about seventeen pixels — while the
 * logo above it and the body copy below both sit on the site's own gutter.
 * The page title was therefore a couple of centimetres to the left of
 * everything else on the page, which is the sort of thing you cannot unsee.
 */
.cong-page-hero.wp-block-cover {
	padding-inline: var(--wp--style--root--padding-right, var(--wp--preset--spacing--30, 1.5rem));
}

.cong-page-hero__body h1 {
	color: #fff;
	text-wrap: balance;
	margin: 0;
}

.cong-page-hero__body .cong-eyebrow {
	margin: 0;
}

/* Cover falls back to the overlay color when a program has no picture,
   which on this site is most of them until the media library lands. */
.cong-page-hero:not(:has(img)) .wp-block-cover__background {
	background: linear-gradient(135deg, var(--wp--preset--color--ink, #0b2a42), var(--wp--preset--color--slate, #4c6b83));
	opacity: 1;
}

/* Prose at a readable measure rather than the full column width. */
.cong-prose-column > .wp-block-post-content > :where(p, ul, ol, h2, h3, h4, blockquote) {
	max-inline-size: 68ch;
}

/*
 * The facts box stays in view while the page scrolls — only when it is the
 * rail's one thing. Staff add things under it (a gift shop's hours), and
 * every child sticking at the same spot stacked them on top of one another.
 */
.cong-rail > :only-child {
	position: sticky;
	top: 6rem;
}

@media (max-width: 47.9rem) {
	/*
	 * Stacked on a phone the rail is just another block, and a sticky one
	 * would sit over the text it belongs to.
	 */
	.cong-rail > :only-child {
		position: static;
	}

	.wp-block-columns:has(> .cong-rail) {
		flex-direction: column-reverse;
	}
}

/* ------------------------------------------------------------------ *
 * Media placeholders
 * ------------------------------------------------------------------ *
 * The placeholder carries its own 3:2 ratio so it has a shape when it
 * stands alone. Dropped into a frame that already has one — a 4:5 staff
 * photo, a 4:3 tile — that ratio wins and leaves a band of the frame's
 * own background showing beneath it. Inside a frame it should simply
 * fill the frame.
 */
.cong-staff__photo .cong-media-placeholder,
.cong-card__media .cong-media-placeholder,
.cong-card--tile .cong-media-placeholder,
.cong-service__media .cong-media-placeholder {
	aspect-ratio: auto;
	inline-size: 100%;
	block-size: 100%;
	border-radius: inherit;
}

/*
 * Initials had no styling at all, so they came out as body text floating
 * in a large panel. They are standing in for a face: they should read as
 * a deliberate monogram.
 */
.cong-media-placeholder__initials {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.75rem, 22cqi, 3.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: color-mix(in srgb, var(--wp--preset--color--sky, #4c6b83) 78%, transparent);
	user-select: none;
}

/* cqi above needs a container to measure; without one it falls back. */
.cong-staff__photo,
.cong-card__media,
.cong-service__media {
	container-type: inline-size;
}

.cong-card--tile .cong-media-placeholder__initials {
	color: rgb(255 255 255 / 0.82);
}

/* ------------------------------------------------------------------ *
 * Ordered term picker (editor)
 * ------------------------------------------------------------------ */
.cong-termorder {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.cong-termorder__item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding-block: 0.15rem;
}

.cong-termorder__n {
	flex: none;
	inline-size: 1.4rem;
	font-size: 0.75rem;
	color: #64748b;
	font-variant-numeric: tabular-nums;
}

.cong-termorder__name {
	flex: 1;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cong-termorder__none {
	margin: 0 0 0.5rem;
	color: #64748b;
	font-style: italic;
}

.cong-termorder__add {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

/* ------------------------------------------------------------------ *
 * Event facts
 * ------------------------------------------------------------------ */
.cong-facts__when {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-facts__span,
.cong-facts__next {
	margin: 0.15rem 0 0;
	font-size: var(--wp--preset--font-size--sm, 0.88rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-facts__dates-toggle {
	margin-block-start: 0.5rem;
}

.cong-facts__dates-toggle summary {
	font-size: var(--wp--preset--font-size--sm, 0.88rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	cursor: pointer;
}

.cong-facts__dates-toggle summary:hover {
	color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-facts__dates {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm, 0.88rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-facts__dates li { padding-block: 0.1rem; }

/* ------------------------------------------------------------------ *
 * Event pages
 * ------------------------------------------------------------------ *
 * Event artwork is nearly always a flyer with the date, the room and the
 * title already set into it. Cropping that to a banner and laying the
 * page title over it puts two lots of type on top of each other and
 * ruins both, so events get a plain title band and the flyer is shown
 * whole, at whatever shape it was made.
 */
.cong-event-head > * {
	margin-block: 0;
}

.cong-event-head .cong-eyebrow {
	margin-block-end: 0.4rem;
}

.cong-event-head h1 {
	color: #fff;
	text-wrap: balance;
	max-inline-size: 22ch;
	/*
	 * Core's constrained layout centers any child narrower than the
	 * container with `margin-left: auto !important`, which pulled the
	 * title away from the eyebrow sitting above it. Matching !important
	 * is the only way past a core rule that already uses it.
	 */
	margin-inline: 0 !important;
}

.cong-event-art img {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* No artwork at all should not leave a gap above the copy. */
.cong-event-art:not(:has(img)) {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Folded grids
 * ------------------------------------------------------------------ */
/*
 * The server sends every tile visible and the button hidden. The script
 * folds the grid and reveals the button, so without JavaScript the page
 * is simply long rather than truncated behind a control that does
 * nothing.
 */
/*
 * A fold has to look like one.
 *
 * Hiding the overflow left a complete final row and a button underneath, and
 * a complete row reads as the end of the list — which is the whole reason a
 * fold is off by default now. Where a ministry does set one, the last row
 * fades out so the cut is unmistakable before anyone reads the button.
 */
.cong-grid[data-folded] { position: relative; }

.cong-grid[data-folded] > [data-beyond-fold] { display: none; }

.cong-grid[data-folded]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 7rem;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgb(255 255 255 / 0) 0%,
		rgb(255 255 255 / 0.75) 65%,
		rgb(255 255 255 / 0.95) 100%
	);
}

.cong-band--tint .cong-grid[data-folded]::after {
	background: linear-gradient(
		to bottom,
		rgb(238 246 251 / 0) 0%,
		rgb(238 246 251 / 0.75) 65%,
		rgb(238 246 251 / 0.95) 100%
	);
}

/* A filtered grid is already showing everything that matches, so the fade
   would be claiming there is more when there is not. */
.cong-grid[data-folded][data-filtered]::after { display: none; }

/* ------------------------------------------------------------------ *
 * Ministry pages
 * ------------------------------------------------------------------ *
 * Six stacked bands at 101px of padding top and bottom spent about a
 * fifth of the page on empty space. The hero and the mission keep their
 * air; the bands that are mostly grid do not need it twice over.
 */
.cong-ministry__programs,
.cong-ministry__events,
.cong-ministry__team,
.cong-ministry__downloads {
	padding-block: var(--wp--preset--spacing--60, 4rem);
}

/*
 * The mission band held every paragraph at one size, centered: the
 * statement, the after-hours instruction, and the emergency number. The
 * statement is the thing to read first and the phone number the thing to
 * act on, so they should not look identical.
 *
 * The prose sits inside .cong-prose--large, so these have to reach past
 * that wrapper rather than matching direct children of the body.
 */
.cong-ministry__mission-body .cong-prose > p:first-child {
	font-family: var(--wp--preset--font-family--display, inherit);
	line-height: 1.3;
	color: var(--wp--preset--color--ink, #0b2a42);
	text-wrap: balance;
	/* Wide enough that the statement reads as sentences rather than a
	   narrow column of three-word lines. */
	max-inline-size: 40ch;
	margin-inline: auto;
}

/* Everything after the statement reads as supporting detail. */
.cong-ministry__mission-body .cong-prose > p:not(:first-child) {
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	line-height: 1.6;
	max-inline-size: 56ch;
	margin-inline: auto;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-ministry__mission-body .cong-prose > p:first-child + p {
	margin-block-start: var(--wp--preset--spacing--40, 2rem);
}

/*
 * A line the church chose to emphasise is one it wants read — on a care
 * page that is the out-of-hours number. Honour that signal rather than
 * guessing at which line matters.
 */
.cong-ministry__mission-body .cong-prose > p:not(:first-child):has(em),
.cong-ministry__mission-body .cong-prose > p:not(:first-child):has(strong) {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	color: var(--wp--preset--color--ink, #0b2a42);
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.14));
	border-radius: 0.6rem;
}

.cong-ministry__mission-body .cong-prose > p:not(:first-child) :is(em, strong) {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #0b2a42);
}
/* ------------------------------------------------------------------ *
 * Pinned sub-programs
 * ------------------------------------------------------------------ *
 * The one thing on the page that is true this month, sitting above a
 * description that is true every year.
 */
.cong-pinned {
	margin-block-end: var(--wp--preset--spacing--50, 3rem);
}

.cong-pinned__item {
	padding: var(--wp--preset--spacing--40, 1.75rem);
	background: var(--wp--preset--color--surface, #f2f6f8);
	border-inline-start: 4px solid var(--wp--preset--color--leaf, #6d8b1f);
	border-radius: 0 0.75rem 0.75rem 0;
}

.cong-pinned__item + .cong-pinned__item {
	margin-block-start: var(--wp--preset--spacing--30, 1.25rem);
}

.cong-pinned .cong-eyebrow {
	margin-block: 0 0.4rem;
}

.cong-pinned__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 1.6rem);
	line-height: 1.15;
	text-wrap: balance;
}

.cong-pinned__title a {
	color: var(--wp--preset--color--ink, #0b2a42);
	text-decoration: none;
}

.cong-pinned__title a:hover { text-decoration: underline; }

.cong-pinned__text {
	margin: 0.5rem 0 0;
	max-inline-size: 60ch;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-pinned__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: var(--wp--preset--spacing--30, 1.15rem) 0 0;
}

.cong-pinned__secondary {
	color: var(--wp--preset--color--leaf, #6d8b1f);
	font-weight: 600;
}

.cong-pinned__until {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

/* ------------------------------------------------------------------ *
 * What's on today
 * ------------------------------------------------------------------ *
 * Used by the lobby screen and by /today, so it lives here rather than
 * in the kiosk stylesheet that only that one page loads.
 */
.cong-day {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	padding: clamp(1rem, 2vmin, 2rem);
	background: var(--wp--preset--color--surface, #f2f6f8);
	border-radius: 1rem;
}

.cong-day__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-block-end: clamp(0.5rem, 1vmin, 1rem);
	border-block-end: 2px solid var(--wp--preset--color--ink, #0b2a42);
}

.cong-day__title {
	margin: 0;
	font-size: clamp(1.4rem, 2.8vmin, 2.4rem);
	line-height: 1.1;
}

.cong-day__date {
	margin: 0.15rem 0 0;
	font-size: clamp(0.85rem, 1.5vmin, 1.15rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-day__nav {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}

.cong-day__nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: 0.6rem;
	color: var(--wp--preset--color--ink, #0b2a42);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.2));
	border-radius: 999px;
}

.cong-day__nav a:hover { background: #fff; }

/* The list is the part that scrolls; the heading and stamp stay put. */
.cong-day__list {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-day__item {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) 1fr;
	gap: 0 1rem;
	padding-block: clamp(0.5rem, 1.1vmin, 1rem);
	border-block-end: 1px solid var(--wp--preset--color--rule, rgb(11 42 66 / 0.12));
}

.cong-day__time {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: clamp(0.95rem, 1.7vmin, 1.3rem);
	color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-day__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1rem, 1.9vmin, 1.45rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink, #0b2a42);
}

.cong-day__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	margin: 0.2rem 0 0;
	font-size: clamp(0.8rem, 1.4vmin, 1.05rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

.cong-day__tag {
	padding: 0.1rem 0.55rem;
	font-size: 0.85em;
	background: #fff;
	border-radius: 999px;
}

/* Finished, but still listed — so a latecomer knows they missed it. */
.cong-day__item.is-over { opacity: 0.45; }
.cong-day__item.is-over .cong-day__name { text-decoration: line-through; }

.cong-day__item.is-now {
	background: rgb(109 139 31 / 0.1);
	border-radius: 0.5rem;
	padding-inline: 0.6rem;
}

.cong-day__now {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.05rem 0.5rem;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--leaf, #6d8b1f);
	border-radius: 999px;
	vertical-align: middle;
}

.cong-day__stamp {
	flex: none;
	margin: clamp(0.4rem, 1vmin, 0.9rem) 0 0;
	font-size: clamp(0.7rem, 1.2vmin, 0.9rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	text-align: end;
}

/*
 * Where a cropped banner is looking.
 *
 * The block writes two custom properties; the picture uses the wide one, and
 * the narrow one takes over once the window is portrait enough that the crop
 * has become a different photograph. A slide that has never had a narrow
 * focus set falls through to its wide one, so nothing changes until somebody
 * asks for it to.
 */
.cong-slide__img,
.cong-hero__img {
	object-position: var( --cong-focal, 50% 50% );
}

@media (max-width: 52rem) {
	.cong-slide__img,
	.cong-hero__img {
		object-position: var( --cong-focal-narrow, var( --cong-focal, 50% 50% ) );
	}
}

/*
 * The date above an overridden week's services.
 *
 * Loud enough that somebody skimming under a "Sundays" heading cannot read
 * a one-off ten o'clock as the normal pattern and turn up at the wrong time.
 */
.cong-worship__when {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--lime);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* On a light band the lime is too pale to read. */
.cong-band:not(.cong-band--ink) .cong-worship__when,
.cong-worship--special:not([class*="ink"]) + .cong-worship__when {
	color: var(--wp--preset--color--leaf);
}

/* ------------------------------------------------------------------ *
 * Quick links
 *
 * The row of five under the homepage carousel: New? About Us, Worship,
 * Get Involved, Events, Give. It is the most-used navigation on the old
 * site, and the church asked for it back by name.
 *
 * Built from core buttons rather than a block of its own so the office can
 * rename one or repoint it in the editor without anybody touching a file.
 * ------------------------------------------------------------------ */
.cong-quicklinks {
	padding-block: var(--wp--preset--spacing--40);
}

.cong-quicklinks .wp-block-buttons {
	display: grid;
	/*
	 * Five across on a wide screen, then two, then one — never four and a
	 * lonely fifth, which is what auto-fit gives you at the width a laptop
	 * actually is.
	 */
	grid-template-columns: repeat(5, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.cong-quicklinks .wp-block-button {
	display: block;
}

.cong-quicklinks .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 3.25rem;
	padding-inline: var(--wp--preset--spacing--20);
	text-align: center;
	font-weight: 600;
	line-height: 1.2;
}

@media (max-width: 880px) {
	.cong-quicklinks .wp-block-buttons {
		grid-template-columns: repeat(2, 1fr);
	}

	/* An odd one out spans the row rather than sitting half-width beside a gap. */
	.cong-quicklinks .wp-block-button:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 420px) {
	.cong-quicklinks .wp-block-buttons {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * The core-values wheel
 *
 * The graphic the congregation knows the five values by. Capped rather than
 * full width: at 1526px square it would otherwise dominate the section it is
 * meant to introduce, and the five cards under it carry the words.
 * ------------------------------------------------------------------ */
.cong-values-wheel {
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--50) 0;
	max-width: min(26rem, 100%);
}

.cong-values-wheel img {
	width: 100%;
	height: auto;
}

/*
 * Condensed: the wheel beside the five values as a short list, rather than
 * the wheel above five cards — the section was nearly a screen and a half.
 */
.cong-values-band .cong-values-wheel {
	margin-block: 0;
	max-width: min(21rem, 100%);
}

.cong-values-band .wp-block-heading {
	margin-block: 0.2em 0;
}

.cong-values-band__list {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.cong-values-band__list li {
	position: relative;
	margin: 0;
	padding: 0.35em 0 0.35em 1.6em;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.45;
}

/*
 * On a phone the two columns stack, which put the wheel under everything.
 * It reads better straight after the heading, before the five values it
 * pictures: the words column steps aside (display: contents) so its pieces
 * and the wheel can be ordered as one list.
 */
@media (max-width: 781px) {
	.cong-values-band .wp-block-columns {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.cong-values-band .wp-block-column:first-child {
		display: contents;
	}

	.cong-values-band .wp-block-column:first-child > .cong-eyebrow { order: 1; }
	.cong-values-band .wp-block-column:first-child > .wp-block-heading { order: 2; }

	.cong-values-band .wp-block-column:last-child {
		order: 3;
		margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	}

	.cong-values-band .wp-block-column:first-child > .cong-values-band__list { order: 4; }
	.cong-values-band .wp-block-column:first-child > .wp-block-buttons { order: 5; }
}

/* A small spark in the church's green in place of a bullet. */
.cong-values-band__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: 0.9em;
	block-size: 0.9em;
	background: var(--wp--preset--color--lime);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.6 5.4 11.2 12 12-6.6.8-11.2 5.4-12 12-.8-6.6-5.4-11.2-12-12C6.6 11.2 11.2 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.6 5.4 11.2 12 12-6.6.8-11.2 5.4-12 12-.8-6.6-5.4-11.2-12-12C6.6 11.2 11.2 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Each value's spark in its colour on the wheel beside it. */
.cong-values-band__list li:nth-child(1)::before { background: #e34f51; } /* Acceptance */
.cong-values-band__list li:nth-child(2)::before { background: #f5a21c; } /* Hospitality */
.cong-values-band__list li:nth-child(3)::before { background: #00afab; } /* Community */
.cong-values-band__list li:nth-child(4)::before { background: #a9b936; } /* Discipleship */
.cong-values-band__list li:nth-child(5)::before { background: #3b87b6; } /* Service */

.cong-values-band__list strong {
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ *
 * Event views
 *
 * The row of buttons across the top of the events page. They are links, not
 * buttons, because each one goes to a real address — so they are styled to
 * look pressable and given a pressed state rather than borrowing the button
 * element's.
 * ------------------------------------------------------------------ */
.cong-views__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

/*
 * Written as `a.cong-views__tab`, not `.cong-views__tab`.
 *
 * The tabs are anchors, and the theme's own link colour is set on a selector
 * specific enough to win a tie — which it did, painting the selected tab's
 * label the same navy as its background and making the word vanish.
 */
a.cong-views__tab {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--ink, #04436a);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

a.cong-views__tab:hover,
a.cong-views__tab:focus-visible {
	border-color: var(--wp--preset--color--ink, #04436a);
}

a.cong-views__tab.is-on {
	background: var(--wp--preset--color--ink, #04436a);
	border-color: var(--wp--preset--color--ink, #04436a);
	color: var(--wp--preset--color--base, #fff);
}

/*
 * The editor stacks the panels and labels each one, rather than reproducing
 * the tabs: whatever somebody wants to edit is always in the panel that is
 * not open.
 */
.cong-views.is-editing > .cong-views__editing-panel + .cong-views__editing-panel {
	margin-top: var(--wp--preset--spacing--50);
}

.cong-views__editing-label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted, #5b6b78);
}

.cong-views.is-editing .cong-views__editing-panel {
	border: 1px dashed var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * Eyebrows on a photograph
 *
 * The eyebrow is leaf green, which is right on white and fails on a dark
 * photographic hero — the category label over the counseling centre banner
 * was green text on blue-grey, under a contrast ratio nobody should have to
 * squint through. On anything dark it goes pale instead.
 *
 * Written against the hero containers rather than against a "--light" class
 * somebody has to remember to add, because the person writing the page is
 * choosing a photograph, not a text colour.
 * ------------------------------------------------------------------ */
.cong-page-hero__body .cong-eyebrow,
.cong-page-hero__body .cong-eyebrow a,
.cong-hero .cong-eyebrow,
.cong-hero .cong-eyebrow a,
.cong-ministry-hero .cong-eyebrow,
.cong-ministry-hero .cong-eyebrow a,
.cong-eyebrow--light,
.cong-eyebrow--light a {
	/* Pale lime rather than white: still reads as the accent, at a ratio
	   that holds up over a mid-tone photograph. */
	color: var(--wp--preset--color--lime, #cfe05a);
}

.cong-page-hero__body .cong-eyebrow a,
.cong-hero .cong-eyebrow a,
.cong-ministry-hero .cong-eyebrow a,
.cong-eyebrow--light a {
	/*
	 * The underline stays — it is a link, and colour alone should never be
	 * the only thing saying so.
	 */
	text-decoration-color: currentColor;
}

.cong-page-hero__body .cong-eyebrow a:hover,
.cong-hero .cong-eyebrow a:hover,
.cong-ministry-hero .cong-eyebrow a:hover,
.cong-eyebrow--light a:hover {
	color: #fff;
}

/*
 * Deleting your own spiritual-gifts answers.
 *
 * Quiet, and at the bottom. It is somebody's right to use it and nobody's
 * first intention, so it does not get a red button competing with "Find a
 * way to serve" directly above it.
 */
.cong-mine__delete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-block-start: var(--wp--preset--spacing--40, 2rem);
	padding-block-start: var(--wp--preset--spacing--30, 1.25rem);
	border-block-start: 1px solid var(--wp--preset--color--sky-mid, #aed4e3);
}

.cong-mine__delete-button {
	padding: 0.45rem 1.1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--ink-muted, #4c6b83);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	cursor: pointer;
}

.cong-mine__delete-button:hover,
.cong-mine__delete-button:focus-visible {
	border-color: var(--wp--preset--color--coral, #ef3d42);
	color: var(--wp--preset--color--coral, #ef3d42);
}

.cong-mine__delete-note {
	flex: 1 1 18rem;
	font-size: var(--wp--preset--font-size--sm, 0.9rem);
	color: var(--wp--preset--color--ink-muted, #4c6b83);
}

/* ------------------------------------------------------------------ *
 * Operating budget (Giving & Stewardship)
 *
 * One figure, shown large, with what it means beneath it. Ordinary
 * paragraphs, so the office updates the number and the date in place.
 * ------------------------------------------------------------------ */
/* Centred like a section head's. */
.cong-budget .cong-eyebrow {
	display: flex;
	justify-content: center;
}


.cong-budget .cong-budget__label {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.cong-budget p.cong-budget__figure {
	margin-block: 0.1em 0.2em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--leaf);
}

.cong-budget {
	text-align: center;
}

.cong-budget > p {
	margin-inline: auto;
}

.cong-budget .cong-budget__text {
	max-inline-size: 36rem;
	margin-block: var(--wp--preset--spacing--30) 0;
	color: var(--wp--preset--color--ink-muted);
}

.cong-budget.is-short p.cong-budget__figure {
	color: var(--wp--preset--color--coral, #b8433a);
}

/* Receipts against expenses: two bars, the amounts beside them. */
.cong-budget__chart {
	display: grid;
	gap: 10px;
	max-inline-size: 40rem;
	margin: var(--wp--preset--spacing--40) auto 0;
	text-align: start;
}

.cong-budget__row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	align-items: center;
	gap: 12px;
}

.cong-budget__row dt {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.cong-budget__row dd {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.cong-budget__bar {
	flex: 0 0 auto;
	inline-size: calc(var(--w) * 0.7);
	block-size: 26px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
}

.cong-budget__row.is-receipts .cong-budget__bar {
	background: var(--wp--preset--color--lime);
}

@media (max-width: 600px) {
	.cong-budget__row { grid-template-columns: 1fr; gap: 4px; }
	.cong-budget__bar { inline-size: calc(var(--w) * 0.55); }
}

.cong-budget .cong-budget__updated {
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/*
 * The same line for the page headers built from a Cover block (About, Plan
 * Your Visit…). Core gives the cover, its inner container and the group
 * inside each their own side padding and centres the group at the narrow
 * content width — three nudges that put the heading anywhere but under the
 * logo. Here the group is the header's width again, starting at its edge.
 */
.wp-block-cover.cong-hero,
.cong-page-hero.wp-block-cover.cong-page-hero {
	padding-inline: 0;
	/* One column the whole width: the grid above otherwise sizes it to the words. */
	grid-template-columns: minmax(0, 1fr);
}

/* Core shrinks a positioned cover's inner box to its content; this one is full width. */
.wp-block-cover.cong-hero .wp-block-cover__inner-container,
.wp-block-cover.cong-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
.wp-block-cover.cong-page-hero .wp-block-cover__inner-container,
.wp-block-cover.cong-page-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	padding-inline: 0;
	width: 100%;
}

.wp-block-cover.cong-hero .wp-block-cover__inner-container > .cong-hero__body,
.wp-block-cover.cong-page-hero .wp-block-cover__inner-container > .cong-page-hero__body {
	inline-size: min(100% - 2 * clamp(1.25rem, 5vw, 3rem), var(--wp--style--global--wide-size, 76rem));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}