/**
 * worship: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
.cong-worship__item {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.cong-worship__time {
	flex: 0 0 auto;
	min-width: 4.75rem;
	color: var(--wp--preset--color--leaf);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.cong-worship__body {
	display: grid;
	gap: 0.1rem;
}

.cong-worship__where,
.cong-worship__note {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* A one-off change — a combined service, Christmas Eve — should not look
   like part of the normal pattern. */
.cong-worship__item.is-special .cong-worship__time {
	color: var(--wp--preset--color--coral);
}

.cong-worship__item.is-special .cong-worship__note {
	color: var(--wp--preset--color--coral);
	font-weight: 600;
}

/* ---------- A one-off change to worship ---------------------------------
 *
 * Deliberately loud. It only ever appears on a week when the normal pattern
 * does not hold, and somebody turning up at 9:30 to a locked Worship Center
 * is the failure it exists to prevent.
 * ------------------------------------------------------------------------ */

.cong-worship-notice {
	max-width: var(--wp--custom--measure--wide);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	border-inline-start: 4px solid var(--wp--preset--color--lime);
	background: var(--wp--preset--color--sky-soft);
	text-align: start;
}

.cong-worship-notice__when {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cong-worship-notice__list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-worship-notice__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
}

.cong-worship-notice__time {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
}

.cong-worship-notice__where,
.cong-worship-notice__note {
	color: var(--wp--preset--color--ink-muted);
}

.cong-worship-notice__where::before { content: "· "; }

/*
 * The note gets its own line.
 *
 * Only the room had a separator, so "Sanctuary" and "One service today" ran
 * into each other as one phrase. A note is a sentence rather than another
 * field, and it can be long, so it goes underneath instead of being given a
 * third middot.
 */
.cong-worship-notice__note {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
}

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

/* A quiet one sits inside a section that already has its own frame. */
.cong-worship-notice--quiet {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * This week's order of worship.
 *
 * The name only appears on a week when the service running is not the one the
 * card describes — a combined service, say — so it reads as a correction to
 * the heading above it rather than as part of the button's own label.
 */
.cong-worship-plan {
	margin-block: var( --wp--preset--spacing--30 ) 0;
}

/*
 * Directly under the one-off notice, when there is one.
 *
 * The button used to sit at the foot of the two service cards, which is a
 * long way from the banner saying this Sunday is a combined service at ten —
 * and it is that service's order the button leads to. Sitting it on the
 * notice's own left edge, at the notice's width, makes the two read as one
 * statement about this week rather than as unrelated furniture. The centred
 * section head would otherwise pull it into the middle of the page.
 */
.cong-worship-notice + .cong-worship-plan {
	max-width: var( --wp--custom--measure--wide );
	margin-inline: auto;
	text-align: start;
}

.cong-worship-plan__for {
	display: block;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 400;
	opacity: 0.85;
}

/* The order-of-worship button needs room under it for the line that says
   which service the order is actually for. */
.cong-worship-plan__for {
	margin-block-start: 0.5em;
}

/* The one-off service's buttons: their own line, under the service. */
.cong-worship-notice__list > li > .cong-worship-actions {
	flex-basis: 100%;
	margin-block-start: 0.5rem;
}

/*
 * A service's Order of Worship: one full-width button on its card.
 */
.cong-worship-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.cong-worship-actions__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.4em;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.cong-worship-actions__link:hover,
.cong-worship-actions__link:focus-visible {
	background: var(--wp--preset--color--sky-soft);
}

.cong-worship-actions__link.is-order {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cong-worship-actions__link.is-order::after {
	content: " →";
	white-space: pre;
}

.cong-service-card .cong-worship-actions {
	margin-block-start: 16px !important;
}

.cong-service-card .cong-worship-actions__link.is-order {
	flex: 1 1 100%;
}

.cong-worship-notice .cong-worship-actions {
	justify-content: flex-start;
}

/*
 * "Here on Sunday?" Connection Card, Give, Prayer — once, under the cards.
 */
.cong-worship-shared {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 16px;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.cong-worship-shared__label {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---------- The worship guide (/worshipguide) --------------------------- */

/*
 * Opened from a QR code on the screens, on a phone, in a pew: everything in
 * the first screen or two, every tap target large.
 */
.cong-worship-guide {
	max-width: 34rem;
	margin-inline: auto !important;
}

.cong-worship-guide__date {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.cong-worship-guide__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
}

.cong-worship-guide__services,
.cong-worship-guide__links {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-worship-guide__service {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 14px;
	align-items: center;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

div.cong-worship-guide__service {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--ink);
}

.cong-worship-guide__when {
	grid-row: span 2;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.cong-worship-guide__what {
	display: grid;
	line-height: 1.25;
}

.cong-worship-guide__name {
	font-weight: 700;
}

.cong-worship-guide__where {
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.85;
}

.cong-worship-guide__go {
	color: var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
}

div.cong-worship-guide__service .cong-worship-guide__go {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 400;
}

.cong-worship-guide__links {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cong-worship-guide__link {
	display: grid;
	gap: 2px;
	padding: 14px 18px;
	border: 1.5px solid var(--cong-line, #dde5ea);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cong-worship-guide__link:hover,
.cong-worship-guide__link:focus-visible {
	border-color: var(--wp--preset--color--ink);
}

.cong-worship-guide__link.is-card {
	border-color: var(--wp--preset--color--lime);
	background: rgb(174 188 33 / 0.12);
}

.cong-worship-guide__label {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.cong-worship-guide__label::after {
	content: " →";
}

.cong-worship-guide__about {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-worship-guide__away {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	text-align: center;
}

/* Opened at one service from its card: that service stands out. */
.cong-worship-guide__services > li:target .cong-worship-guide__service {
	outline: 3px solid var(--wp--preset--color--lime);
	outline-offset: 3px;
}

.cong-worship-guide__services > li {
	scroll-margin-top: 120px;
}

/*
 * Hover and focus: the site's link hover turned the text the card's own
 * dark blue, so a service vanished under the pointer. Keep the words, lift
 * the card.
 */
a.cong-worship-guide__service,
a.cong-worship-guide__service:hover,
a.cong-worship-guide__service:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

a.cong-worship-guide__service:hover,
a.cong-worship-guide__service:focus-visible {
	background: #22507a;
}

a.cong-worship-guide__service:hover .cong-worship-guide__go,
a.cong-worship-guide__service:focus-visible .cong-worship-guide__go {
	color: var(--wp--preset--color--lime);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

a.cong-worship-guide__link,
a.cong-worship-guide__link:hover,
a.cong-worship-guide__link:focus-visible {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

a.cong-worship-guide__link:hover,
a.cong-worship-guide__link:focus-visible {
	background: var(--wp--preset--color--sky-soft);
}

a.cong-worship-guide__link.is-card:hover,
a.cong-worship-guide__link.is-card:focus-visible {
	background: rgb(174 188 33 / 0.22);
}

/*
 * The guide on a computer — somebody watching the livestream: wider, the
 * services side by side, the links as tiles.
 */
@media (min-width: 900px) {
	.cong-worship-guide {
		max-width: 64rem;
	}

	.cong-worship-guide__heading {
		text-align: center;
	}

	.cong-worship-guide__services {
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		gap: 16px;
	}

	.cong-worship-guide__service {
		padding: 24px 26px;
	}

	.cong-worship-guide__when {
		font-size: 2rem;
	}

	/* Every tile the height of the tallest, in both rows: a one-line
	   description no longer makes a shorter box than its neighbour. */
	.cong-worship-guide__links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: 16px;
		margin-block-start: var(--wp--preset--spacing--50);
	}

	.cong-worship-guide__links > li {
		display: flex;
	}

	.cong-worship-guide__links > li > .cong-worship-guide__link {
		flex: 1;
	}

	.cong-worship-guide__link {
		align-content: start;
		min-height: 7.5rem;
		padding: 20px 22px;
	}
}

.cong-worship-guide__link.is-live .cong-worship-guide__label::before {
	content: "● ";
	color: #d63638;
}