/*
Theme Name: Town and Country
Theme URI: https://www.tclutheranchurch.org/
Author: Town and Country Lutheran Church
Author URI: https://www.tclutheranchurch.org/
Description: A warm, liturgically minded block theme built for Town and Country Lutheran Church, Sacramento. Full-site editing, responsive from phone to pulpit, and tuned for the things a congregation's site actually has to do: service times, sermons, and a front door that opens.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.10.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: town-and-country
Tags: block-theme, full-site-editing, church, one-column, custom-colors, custom-menu, block-patterns, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Base polish beyond what theme.json covers.
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Two accent tokens, not one.

   `--wp--preset--color--accent` is the readable accent, used for text on the
   cream and linen grounds. `--tc-accent-on-dark` is its lighter partner, used
   on the deep blue of the hero and footer, where the readable one would
   disappear. Both are reassigned per liturgical season by inc/liturgical-season.php;
   the values here are the Christmas-and-Easter gold, which is also what shows
   if the seasonal colors are switched off.

   `--tc-brass` is decorative only — hairlines and hover borders, never text —
   which is why it may sit below the 4.5:1 text threshold.
   ---------------------------------------------------------------------- */

:root {
	--tc-accent-on-dark: #D8BD5A;
	--tc-brass: #A8813C;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Keyboard focus that is actually visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip link. */
.tc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary-deep);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.tc-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

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

.tc-header {
	position: relative;
	z-index: 50;
}

.tc-utility-bar {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.03em;
}

/* The seal and the church name, side by side.

   The name is literal text in parts/header.html rather than the Site Title
   block. The block renders whatever sits in Settings > General, so a blank or
   unexpected value there leaves the header with no name at all — which is a
   silent failure a congregation should not have to debug. The name is a
   constant; it belongs in the theme, and it stays editable in the Site Editor
   like any other text. */
.tc-brand {
	gap: 0.9rem;
}

.tc-brand__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.tc-brand__name a,
.tc-brand__name a:visited {
	color: var(--wp--preset--color--primary-deep);
	text-decoration: none;
}

.tc-brand__name a:hover,
.tc-brand__name a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.tc-brand .wp-block-site-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.tc-brand .wp-block-site-logo img {
	display: block;
	width: 64px;
	height: auto;
}

/* Below the nav breakpoint the name wraps to two lines, so the seal shrinks
   to keep the header from growing taller than the content needs. */
@media (max-width: 600px) {
	.tc-brand {
		gap: 0.7rem;
	}

	.tc-brand .wp-block-site-logo img {
		width: 46px;
	}

	.tc-brand__name {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* On the narrowest phones still in circulation the name needs one more step
   down to stay on two lines beside the seal. */
@media (max-width: 400px) {
	.tc-brand__name {
		font-size: 1rem;
	}

	.tc-brand .wp-block-site-logo img {
		width: 40px;
	}
}

/* The seal is a bright heraldic mark and the only saturated thing in the
   header; everything beside it stays quiet so it reads as the focal point. */
.tc-footer-mark img {
	display: block;
	width: 56px;
	height: auto;
}

/* Links here sit on the deep blue bar, so they must not inherit the blue
   link color from theme.json. */
.tc-utility-bar a,
.tc-utility-bar a:visited {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.88;
}

.tc-utility-bar a:hover,
.tc-utility-bar a:focus {
	color: #ffffff;
	opacity: 1;
	text-decoration: underline;
}

/* Navigation: spacing and the understated underline on hover.
   Menu text is stated explicitly at every state rather than left to inherit,
   because the navigation block can otherwise pick up a color meant for the
   mobile overlay and carry it into the desktop dropdown. */
.tc-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid transparent;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.tc-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.tc-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.tc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-deep);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Submenus on the desktop bar: a white card with ink text.

   The whole block is shut inside a min-width query on purpose. A dropdown card
   only exists at desktop width; below 782px the same markup is the mobile
   overlay, where the ground is deep blue and the text is white. These rules
   were written with only the card in mind, they carry `!important`, and their
   selectors are long — long enough to beat the overlay's own colors and paint
   a link ink-on-navy. Rather than write still longer selectors to win an
   argument, the argument is not had: below the breakpoint these rules are not
   in the stylesheet at all, and the overlay is free to set its own colors. */
@media (min-width: 782px) {
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container {
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 6px;
		box-shadow: var(--wp--preset--shadow--lifted);
		padding-block: 0.4rem;
		min-width: 15rem;
		background-color: #ffffff;
		color: var(--wp--preset--color--contrast);
	}

	/* `!important` is deliberate: the navigation block applies its own submenu
	   colors with a selector this cannot outrank, and an unreadable menu is
	   worse than an inelegant rule. */
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:link,
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
		padding: 0.5rem 1.1rem;
		border-bottom: 0;
		width: 100%;
		color: var(--wp--preset--color--contrast) !important;
		background-color: transparent;
	}

	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
	.tc-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary-deep) !important;
	}
}

/* -------------------------------------------------------------------------
   The header row on small screens

   The row is a single non-wrapping flex line — seal and name on the left, menu
   and "Plan a Visit" on the right. On a phone there is not enough width for
   all three, and the button, being the most compressible of them, collapses to
   a sliver with its label broken a syllable per line. Below the nav breakpoint
   the button comes out altogether: the menu already holds every link, and the
   hero repeats the same invitation a few hundred pixels down the page.
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.tc-header .tc-header-cta {
		display: none;
	}
}

/* Between the overlay breakpoint and the desktop layout the full menu is wide
   enough to shove the church name off the line, so the overlay is kept in
   service up to the same 781px the rest of the theme treats as "small". The
   navigation block only toggles `is-menu-open`; which container is visible at a
   given width is CSS, so extending the range is a matter of undoing the three
   rules core applies from 600px up. */
@media (min-width: 600px) and (max-width: 781px) {
	.tc-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.tc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.tc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* -------------------------------------------------------------------------
   Mobile overlay menu

   The overlay is styled here rather than through the navigation block's
   overlay color settings. Those settings also repaint the desktop dropdown,
   which is how white-on-white happens.

   Almost everything below carries `!important`, which deserves an explanation.
   WordPress 7 paints the overlay white with

       .wp-block-navigation:not(.has-background)
         .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)

   — five classes, and it sizes and spaces the items from selectors of similar
   weight. A theme rule cannot out-specify that without becoming a riddle, and
   a menu that half-appears in white-on-white is a worse outcome than a blunt
   declaration. Each rule here is scoped to `.is-menu-open`, so none of it
   reaches the desktop bar or its dropdowns.
   ---------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 3rem;
	padding-bottom: 2.5rem;
	background-color: var(--wp--preset--color--primary-deep) !important;
	color: #ffffff !important;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Every submenu opens flat inside the overlay, so the menu runs to twenty-odd
   lines. At the spacing the desktop bar uses — 1.75rem between items, set on
   the block itself — that list stands more than half again as tall as a phone
   screen, which is how a menu ends up "spread out" with its lower half out of
   reach. The gaps close to nothing and the type steps down with them. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 0.35rem !important;
	line-height: 1.35 !important;
}

/* A hairline between sections, so the eye can find the five headings without
   reading them. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 0.35rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
	border-top: 0;
}

/* The top-level items are section headings and take the display face; the
   pages under them sit quieter and indented, so the shape of the site reads
   at a glance. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small) !important;
	padding: 0.3rem 0 0.3rem 0 !important;
	line-height: 1.35 !important;
	opacity: 0.92;
}

/* Inside the overlay the ground is deep blue, so the colors invert.

   Every state is spelled out, `:visited` included. A link the visitor had
   already followed once turned black on the deep blue and vanished, because
   the dropdown rules above also match a submenu link inside the overlay — it
   is still a submenu link — and their `:visited` selector was the longer one.
   Those rules now end at the breakpoint, so nothing here has to be written
   long to win; but the states are still named, because a color left to
   inherit is a color someone else can set. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:link,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:link,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
	color: #ffffff !important;
	background-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--tc-accent-on-dark) !important;
	background-color: transparent;
}

/* The dropdown card becomes an indented column with a rule down its left
   edge. Core positions this list absolutely for the desktop bar and gives it
   a wide left padding in the overlay; both are undone here. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	width: 100% !important;
	min-width: 0;
	gap: 0 !important;
	padding: 0.2rem 0 0.5rem 1.4rem !important;
	margin-left: 0.35rem !important;
	box-shadow: none;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 0;
	background: transparent;
	color: #ffffff;
}

/* The close button and the hamburger. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #ffffff !important;
}

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

.tc-hero {
	position: relative;
	overflow: hidden;
}

/* The scrim in the pattern runs left-to-right, which suits a wide screen where
   the text occupies the left half. On a phone the text spans the full width, so
   the gradient has to run top-to-bottom instead or the last lines sit on the
   bright part of the photograph. */
@media (max-width: 781px) {
	.tc-hero .wp-block-cover__gradient-background {
		background: linear-gradient(
			180deg,
			rgba(13, 26, 47, 0.86) 0%,
			rgba(15, 30, 54, 0.92) 45%,
			rgba(13, 26, 47, 0.96) 100%
		) !important;
	}
}

.tc-hero .wp-block-cover__inner-container {
	max-width: 640px;
	margin-inline: 0;
}

@media (min-width: 782px) {
	.tc-hero .wp-block-cover__inner-container {
		max-width: 660px;
	}

	.tc-hero .tc-times {
		max-width: none;
		width: min(100%, 1060px);
	}
}

.tc-hero__eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* On the dark hero the readable-on-light accent would vanish. */
	color: var(--tc-accent-on-dark);
	margin-bottom: 0.75rem;
}

.tc-hero h1 {
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(8, 16, 30, 0.45);
}

/* The season's color as a filled button. The bright variant is the background
   here, so the label on top of it is the deep blue rather than white. */
.tc-btn-season .wp-block-button__link {
	background-color: var(--tc-accent-on-dark);
	color: var(--wp--preset--color--primary-deep);
}

.tc-btn-season .wp-block-button__link:hover,
.tc-btn-season .wp-block-button__link:focus {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary-deep);
}

.tc-btn-ghost .wp-block-button__link {
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background-color: rgba(255, 255, 255, 0.04);
}

.tc-btn-ghost .wp-block-button__link:hover,
.tc-btn-ghost .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.8);
	color: #ffffff;
}

/* Service time strip. */
.tc-times {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 1.75rem;
	margin-top: 2rem;
}

.tc-time-card__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.72;
	margin-bottom: 0.3rem;
}

.tc-time-card__time {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
	margin: 0;
}

.tc-time-card__note {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
	margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.tc-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: var(--wp--preset--color--white);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	height: 100%;
}

.tc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
	border-color: var(--wp--preset--color--accent);
}

/* The season's name, wherever the [liturgical_season] shortcode is placed. */
.tc-season {
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.tc-footer .tc-season,
.tc-hero .tc-season {
	color: var(--tc-accent-on-dark);
}

.tc-card h3,
.tc-card h4 {
	margin-top: 0;
}

.tc-card p:last-child {
	margin-bottom: 0;
}

/* Cards inside a Columns block should stretch to equal height. */
.tc-card-grid .wp-block-column {
	display: flex;
}

.tc-card-grid .wp-block-column > .tc-card {
	flex: 1;
}

/* -------------------------------------------------------------------------
   Page headers
   ---------------------------------------------------------------------- */

.tc-page-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.tc-page-header .wp-block-post-title {
	text-wrap: balance;
}

.tc-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

/* -------------------------------------------------------------------------
   Long-form reading
   ---------------------------------------------------------------------- */

.tc-prose p,
.tc-prose li {
	max-width: 68ch;
}

.tc-prose h2 {
	margin-top: 2.75rem;
}

.tc-prose h3 {
	margin-top: 2rem;
}

.tc-prose blockquote {
	margin-block: 2rem;
}

/* Scripture set in the body copy. */
.tc-scripture {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	color: var(--wp--preset--color--primary-deep);
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

/* Same reasoning as the utility bar: the footer sits on deep blue, so links
   take their color from the surrounding text rather than the blue preset. */
.tc-footer a,
.tc-footer a:visited {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.tc-footer a:hover,
.tc-footer a:focus {
	color: var(--tc-accent-on-dark);
	border-bottom-color: var(--tc-accent-on-dark);
}

/* The social icons are links too, but they should not get the underline. */
.tc-footer .wp-block-social-links a {
	border-bottom: 0;
}

.tc-footer .wp-block-heading {
	color: var(--tc-accent-on-dark);
}

.tc-footer .wp-block-social-links .wp-social-link {
	background-color: rgba(255, 255, 255, 0.1);
}

.tc-footer .wp-block-social-links .wp-social-link:hover {
	background-color: var(--tc-accent-on-dark);
}

.tc-colophon {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--x-small);
}

/* -------------------------------------------------------------------------
   Embeds: keep YouTube, maps and third-party forms responsive.
   ---------------------------------------------------------------------- */

.tc-embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.tc-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tc-embed--tall {
	padding-top: 0;
	height: 760px;
}

.tc-embed--tall iframe {
	position: static;
	height: 100%;
}

.tc-embed--map {
	padding-top: 42%;
	min-height: 260px;
}

@media (max-width: 781px) {
	.tc-embed--tall {
		height: 620px;
	}

	.tc-embed--map {
		padding-top: 70%;
	}
}

/* -------------------------------------------------------------------------
   Small utilities
   ---------------------------------------------------------------------- */

.tc-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.tc-rule-top {
	border-top: 1px solid var(--wp--preset--color--border);
}

.tc-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
}

.tc-list-plain {
	list-style: none;
	padding-left: 0;
}

.tc-list-plain li {
	padding-block: 0.4rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.tc-list-plain li:last-child {
	border-bottom: 0;
}

/* Print: give bulletins and devotion pages a clean sheet. */
@media print {
	.tc-header,
	.tc-footer,
	.wp-block-navigation {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}
}

/* -------------------------------------------------------------------------
   The quotation under a page's opening paragraph

   The quotations live in the pages themselves, as ordinary quote blocks
   carrying this class, and are edited in WordPress like any other block. The
   quote block already has its style from theme.json — display face, italic, an
   accent rule down the left — so all that is needed here is room. Sitting
   between the opening paragraph and the body of the page, it wants air on both
   sides and no borders of its own: the accent rule is mark enough, and a
   hairline above and below would box in something meant to be read in
   passing.
   ---------------------------------------------------------------------- */

.tc-page-quote {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.tc-page-quote blockquote {
	margin: 0;
}

.tc-page-quote p {
	margin-top: 0;
}

.tc-page-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	opacity: 0.72;
}

@media print {
	.tc-page-quote {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Search — the magnifying glass in the header and the panel it opens
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal;
}

.tc-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.tc-search__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-left: 0.25rem;
	border-radius: 999px;
	color: var(--wp--preset--color--primary-deep);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.tc-search__toggle:hover,
.tc-search__toggle:focus-visible {
	background-color: rgba(20, 46, 82, 0.08);
	color: var(--wp--preset--color--primary-deep);
}

.tc-search__glass {
	display: block;
}

.tc-search__panel {
	position: absolute;
	top: calc(100% + 0.7rem);
	right: 0;
	z-index: 120;
	padding: 0.75rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba(11, 26, 48, 0.16);
}

.tc-search__form {
	display: flex;
	gap: 0.4rem;
}

.tc-search__field {
	width: 15rem;
	max-width: 60vw;
	padding: 0.5rem 0.7rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.tc-search__submit {
	padding: 0.5rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: #ffffff;
	background: var(--wp--preset--color--primary-deep);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.tc-search__submit:hover,
.tc-search__submit:focus-visible {
	background: var(--wp--preset--color--primary);
}

/* On a phone the header is tight, so the panel spans the screen instead of
   hanging off the right edge of a 40-pixel button. */
@media (max-width: 781px) {
	.tc-search__toggle {
		width: 2.25rem;
		height: 2.25rem;
		margin-left: 0;
	}

	/* Fixed, so a clipped or transformed header cannot cut it off. The top
	   is set in script from the position of the glass itself, because the
	   height of the header is not knowable here. */
	.tc-search__panel {
		position: fixed;
		top: 4.5rem;
		left: 0.75rem;
		right: 0.75rem;
	}

	.tc-search__field {
		width: 100%;
		max-width: none;
	}
}

/* ==========================================================================
   Cookie notice
   ========================================================================== */

.tc-consent {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--primary-deep);
	color: #eef2f8;
	border-top: 3px solid var(--wp--preset--color--accent, #c8a951);
	box-shadow: 0 -8px 24px rgba(11, 26, 48, 0.25);
}

.tc-consent[hidden] {
	display: none;
}

.tc-consent__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	max-width: 1180px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.tc-consent__text {
	margin: 0;
	flex: 1 1 24rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.tc-consent__text a {
	color: #ffffff;
	text-decoration: underline;
}

.tc-consent__buttons {
	display: flex;
	gap: 0.6rem;
	flex: 0 0 auto;
}

.tc-consent__button {
	padding: 0.55rem 1.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

.tc-consent__button--yes {
	color: var(--wp--preset--color--primary-deep);
	background: var(--wp--preset--color--accent, #c8a951);
}

.tc-consent__button--no {
	color: #eef2f8;
	background: transparent;
	border-color: rgba(238, 242, 248, 0.5);
}

.tc-consent__button:hover,
.tc-consent__button:focus-visible {
	filter: brightness(1.08);
}

.tc-consent__button--no:hover,
.tc-consent__button--no:focus-visible {
	background: rgba(238, 242, 248, 0.12);
}

@media (max-width: 600px) {
	.tc-consent__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* In a column the text's flex-basis would become a height, which left a
	   tall empty band under three lines of type. */
	.tc-consent__text {
		flex: 0 1 auto;
	}

	.tc-consent__buttons {
		width: 100%;
	}

	.tc-consent__button {
		flex: 1 1 auto;
	}
}

@media print {
	.tc-consent,
	.tc-search {
		display: none;
	}
}

/* ==========================================================================
   The weekly bulletin
   ========================================================================== */

.tc-bulletin {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 1.5rem 0;
}

.tc-bulletin__item {
	flex: 1 1 18rem;
	min-width: 0;
}

.tc-bulletin__heading {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
	opacity: 0.7;
}

.tc-bulletin__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.95rem 1.15rem;
	text-decoration: none;
	border-radius: 5px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tc-bulletin__link:hover,
.tc-bulletin__link:focus-visible {
	border-color: var(--wp--preset--color--primary-deep);
	box-shadow: 0 4px 14px rgba(11, 26, 48, 0.1);
}

.tc-bulletin__date {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--primary-deep);
}

.tc-bulletin__meta {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
}

/* This week's is the one people came for, so it carries the church's colour
   rather than sitting level with last week's. */
.tc-bulletin__item--lead .tc-bulletin__link {
	color: #ffffff;
	background: var(--wp--preset--color--primary-deep);
	border-color: var(--wp--preset--color--primary-deep);
}

.tc-bulletin__item--lead .tc-bulletin__date,
.tc-bulletin__item--lead .tc-bulletin__meta {
	color: #ffffff;
}

.tc-bulletin__item--lead .tc-bulletin__meta {
	opacity: 0.75;
}

.tc-bulletin__empty {
	padding: 0.9rem 1.15rem;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 5px;
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 600px) {
	.tc-bulletin__item {
		flex: 1 1 100%;
	}
}