/*
Theme Name: NAPARC
Theme URI: https://naparc.org/
Author: Church Social
Author URI: https://churchsocial.com/
Description: A block theme for the North American Presbyterian and Reformed Council.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
Text Domain: naparc
*/

/*
 * Design tokens that have no natural home in theme.json — translucent values and
 * the shared photographic texture. Everything with a flat colour, size, or spacing
 * value belongs in theme.json instead, so it is editable in the Site Editor.
 */
:root {
	--naparc-scrim: rgba(62, 55, 46, 0.85);
	--naparc-panel-tint: rgba(206, 179, 114, 0.91);
	--naparc-frame: rgba(206, 179, 114, 0.5);
	--naparc-frame-offset: clamp(0.5rem, 0.65vw, 0.8125rem);
	--naparc-band-rule: #e6dcc7;
	--naparc-border: rgba(140, 105, 50, 0.22);
	--naparc-panel-border: #e6dcc7;
	--naparc-panel-rule: #f0eadd;
	--naparc-muted: rgba(64, 53, 39, 0.7);
	--naparc-rule-light: rgba(255, 255, 255, 0.75);
	--naparc-rule-dark: rgba(64, 53, 39, 0.75);
	--naparc-texture: url("assets/images/reformation-wall.webp");
	--naparc-header-pad-block: clamp(1.5rem, 2.3vw, 2.875rem);
	--naparc-toggle-size: 3rem;
}

/*
 * The masthead colour outside the page, white inside it. iOS Safari (26+) tints
 * its status bar from the body's background and ignores theme-color, so the
 * body matches the masthead photo's average tone and the mobile menu, and the
 * page itself (.wp-site-blocks) is white. The colour also fills overscroll
 * above the masthead and below the footer. Scoped to the theme's front-end body class: the editor loads this file
 * too and rewrites html/body to its canvas, which has to stay white. The class
 * also outweighs theme.json's white body background.
 */
html:has(> body.wp-theme-naparc),
body.wp-theme-naparc {
	background-color: var(--wp--preset--color--masthead);
}

html {
	scroll-behavior: smooth;
}

.wp-site-blocks {
	background-color: var(--wp--preset--color--white);
}

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

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

a {
	text-underline-offset: 0.18em;
}

/* theme.json sets a caption's size and spacing; its colour is translucent. */
.wp-element-caption {
	color: var(--naparc-muted);
}

/* -------------------------------------------------------------------------
 * Masthead — the dark stone band behind the header.
 *
 * The header template part is transparent; this wrapper supplies the texture.
 * On the front page it also contains the hero, so the same band simply runs
 * taller. That is why inner pages and the home page look continuous.
 * ---------------------------------------------------------------------- */

.naparc-masthead {
	background-color: #3e372e;
	background-image: linear-gradient(var(--naparc-scrim), var(--naparc-scrim)), var(--naparc-texture);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--wp--preset--color--white);
}

.naparc-header {
	padding-block: var(--naparc-header-pad-block);
}

/*
 * Never let the toggle wrap below the logo. The tagline is long enough to fill a
 * narrow row on its own, so the brand is the part allowed to shrink (and wrap onto
 * a second line); the nav/toggle keeps its intrinsic width on the right.
 */
.naparc-header__inner {
	flex-wrap: nowrap;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.naparc-header .wp-block-navigation {
	flex: 0 0 auto;
}

.naparc-brand {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.naparc-brand .wp-block-site-title,
.naparc-brand .wp-block-site-tagline {
	margin: 0;
}

.naparc-brand .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.naparc-brand .wp-block-site-tagline {
	color: var(--wp--preset--color--gold);
	text-wrap: pretty;
}

/*
 * The tagline is the one piece of the brand that has to wrap on a phone, where
 * it shares the row with the menu toggle. A step down to 12px keeps it to two
 * tidy lines without shrinking the wordmark above it.
 */
@media (max-width: 599px) {
	.naparc-brand .wp-block-site-tagline {
		font-size: 0.75rem;
	}
}

.naparc-header .wp-block-navigation {
	color: var(--wp--preset--color--white);
}

.naparc-header .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
}

.naparc-header .wp-block-navigation a:hover,
.naparc-header .wp-block-navigation a:focus-visible,
.naparc-header .wp-block-navigation .current-menu-ancestor > a,
.naparc-header .wp-block-navigation .current-menu-item > a,
.naparc-header .wp-block-navigation .current_page_item > a {
	color: var(--wp--preset--color--gold);
}

/* Mobile overlay menu.
 *
 * Every rule is scoped to `.naparc-header` purely for specificity: core ships its
 * own `.wp-block-navigation__responsive-container.is-menu-open …` rules for padding,
 * gap, and link padding, and the extra class is what lets these win without
 * `!important`. The desktop nav is right-justified and core carries that alignment
 * into the overlay, where it pushes the items off the right edge.
 * ---------------------------------------------------------------------- */

.naparc-header .wp-block-navigation__responsive-container.is-menu-open {
	/* Open at once, without core's fade-and-slide-up. */
	animation: none;
	/* Inline padding matches the page gutter so the items line up with the logo. */
	padding: 0 var(--wp--preset--spacing--30) clamp(1.25rem, 6vw, 2.5rem);
}

.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
	padding-top: calc(var(--naparc-header-pad-block) + var(--naparc-toggle-size) + 1.25rem);
	width: 100%;
}

.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	justify-content: flex-start;
	width: 100%;
}

.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-block-end: 1px solid rgba(255, 255, 255, 0.15);
	width: 100%;
}

.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
	border-block-start: 1px solid rgba(255, 255, 255, 0.15);
}

.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-size: clamp(1.25rem, 5vw, 1.625rem);
	padding-block: 0.8rem;
	padding-inline: 0;
	width: 100%;
}

/* Give both toggles a comfortable target instead of the bare 24px glyph. */
.naparc-header .wp-block-navigation__responsive-container-open,
.naparc-header .wp-block-navigation__responsive-container-close {
	padding: 0.625rem;
}

.naparc-header .wp-block-navigation__responsive-container-open {
	margin-inline-end: -0.625rem;
}

/*
 * Pin the close button to the open button's coordinates — same gutter, same
 * distance from the top — so the control stays put as the menu opens and closes.
 */
.naparc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	/* Fixed, not absolute: core's `__responsive-dialog` is a positioned ancestor
	 * inset from the viewport, so absolute offsets would resolve against that box
	 * instead of the coordinates the open button actually sits at. */
	margin: 0;
	position: fixed;
	right: calc(var(--wp--preset--spacing--30) - 0.625rem);
	top: var(--naparc-header-pad-block);
}

.naparc-header .wp-block-navigation__responsive-container-open svg,
.naparc-header .wp-block-navigation__responsive-container-close svg {
	height: 28px;
	width: 28px;
}

/*
 * Core swaps the overlay for the inline nav at 600px, but the logo, tagline and
 * five menu items need roughly 965px before they fit on one row — between those
 * two widths the nav wrapped under the logo. Hold the overlay until there is room.
 */
@media (max-width: 999px) {
	/* Centre the toggle on the logo, not on the logo-plus-tagline block. */
	.naparc-header .naparc-header__inner {
		align-items: flex-start;
	}

	.naparc-header .wp-block-navigation {
		align-self: flex-start;
	}
}

@media (min-width: 600px) and (max-width: 999px) {
	.naparc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.naparc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

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

.naparc-hero {
	/*
	 * Top is 7vw — ~100px at a 1440 viewport — capped at 8.75rem (140px) so it
	 * stops growing once past the 2000px design canvas, and floored at 3rem for
	 * phones. Bottom keeps the Figma proportion, since the tiles overlap into it.
	 */
	padding-block: clamp(3rem, 7vw, 8.75rem) clamp(4.5rem, 14.5vw, 18.1rem);
}

/*
 * Photo credit for the masthead texture, tucked in the hero's bottom right just
 * above the quick-link tiles, which overlap the hero by max(50px, 2.5vw). Only
 * on wide screens, where there is room beside the hero button.
 */
.naparc-hero__credit {
	display: none;
}

@media (min-width: 1024px) {
	.naparc-hero {
		position: relative;
	}

	.naparc-hero__credit {
		bottom: calc(max(50px, 2.5vw) + 1.5rem);
		display: block;
		font-size: var(--wp--preset--font-size--x-small);
		margin: 0;
		position: absolute;
		right: 0;
	}
}

.naparc-hero__credit a {
	color: rgba(251, 242, 218, 0.5);
	text-decoration: none;
}

.naparc-hero__credit a:hover,
.naparc-hero__credit a:focus {
	color: var(--wp--preset--color--gold);
}

.naparc-hero__heading {
	color: var(--wp--preset--color--white);
	/*
	 * Capped at 3.5rem (56px) instead of Figma's 60px, which read too large on
	 * wide screens. A plain 3vw shrank too fast and hit the floor by ~1130px;
	 * this slope still tops out at ~1880px but holds off the floor until ~900px.
	 */
	font-size: clamp(2.125rem, 0.85rem + 2.25vw, 3.5rem);
	letter-spacing: -0.025em;
	margin: 0;
	/*
	 * In em, so the measure scales with the vw font size and the heading
	 * breaks into the same four lines at every desktop width. Anything from
	 * ~19.5em to ~22.7em gives those breaks; 21em sits in the middle.
	 */
	max-width: 21em;
	text-wrap: pretty;
}

.naparc-hero__actions {
	margin-top: clamp(1.75rem, 4.5vw, 5.625rem);
}

/*
 * Phones: a smaller heading, opened up to 1.3 because the default line height
 * reads cramped at this size. The top padding looks small because the header
 * padding and block gap sit above it. The bottom padding was sized to leave
 * ~63px of stone above tiles overlapping the hero; below 480px the tiles sit
 * under the hero instead, so the stone there runs a little taller.
 */
@media (max-width: 599px) {
	.naparc-hero {
		padding-block: 0.75rem 4.5rem;
	}

	.naparc-hero__heading {
		font-size: 1.625rem;
		line-height: 1.3;
	}
}

.naparc-hero .wp-block-button__link {
	border-color: var(--naparc-rule-light);
	color: var(--wp--preset--color--white);
	min-width: 200px;
	text-align: center;
}

.naparc-hero .wp-block-button__link:hover,
.naparc-hero .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brown);
}

/* -------------------------------------------------------------------------
 * Quick links — four flush tiles straddling the bottom edge of the hero, or,
 * on phones, sitting just below it in two columns.
 *
 * Icons are decorative, so they are background images rather than <img> tags:
 * they carry no meaning the label does not already give, and this keeps them
 * out of the accessibility tree. Adding a fifth tile means adding a modifier
 * class here with its own icon.
 * ---------------------------------------------------------------------- */

/*
 * The doubled class outweighs the layout rule WordPress generates for the
 * parent container (`.wp-container-… > *`), which would otherwise zero this out.
 */
.naparc-quicklinks.naparc-quicklinks {
	gap: 0;
	/* Also cancel the root block gap, which collapses into this margin. */
	margin-block-start: calc(max(-50px, -2.5vw) - var(--wp--style--block-gap, 1.5rem));
	position: relative;
	z-index: 1;
}

.naparc-tile {
	color: var(--wp--preset--color--white);
	container-type: inline-size;
	gap: 0.75rem;
	min-height: 100px;
	padding: 1rem 1.25rem;
	position: relative;
	transition: filter 150ms ease;
}

.naparc-tile::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	flex: 0 0 auto;
	height: 40px;
	width: 40px;
}

.naparc-tile--next-meeting::before {
	background-image: url("assets/icons/next-meeting.svg");
}

.naparc-tile--find-a-church::before {
	background-image: url("assets/icons/find-a-church.svg");
}

.naparc-tile--about::before {
	background-image: url("assets/icons/about-naparc.svg");
}

.naparc-tile--key-documents::before {
	background-image: url("assets/icons/key-documents.svg");
}

/*
 * Shrinks to stay on one line when the tile is narrow, just past each column
 * breakpoint (~480–515px and ~900–1010px). The space left for the label is the tile's content width less the
 * 40px icon and the 0.75rem gap. 7.5em is the longest label, "Key Documents"
 * (~7.3em), plus a little headroom, so all four tiles shrink together.
 * A longer label means raising 7.5.
 */
.naparc-tile__label {
	font-size: min(var(--wp--preset--font-size--large), (100cqi - 40px - 0.75rem) / 7.5);
	font-weight: 300;
	margin: 0;
}

.naparc-tile__label a {
	color: inherit;
	text-decoration: none;
}

/* Stretch the label link across the whole tile so the tile is the hit target. */
.naparc-tile__label a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.naparc-tile:hover {
	filter: brightness(1.07);
}

/*
 * Brightening scales each channel, so the dark brown tile moves far less than
 * the others at 1.07. 1.15 gives it about the same contrast step (~1.13:1).
 */
.naparc-tile--find-a-church:hover {
	filter: brightness(1.15);
}

.naparc-tile:focus-within {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -5px;
}

@media (max-width: 900px) {
	.naparc-quicklinks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Phones. The hero is too short here for the tiles to cut into it, so they sit
 * a gutter's width below it. Two columns leave too little room for the icon
 * beside the label, so a smaller icon sits above it and the label gets the
 * tile's full width.
 */
@media (max-width: 480px) {
	.naparc-quicklinks.naparc-quicklinks {
		margin-block-start: var(--wp--preset--spacing--30);
	}

	.naparc-tile {
		flex-direction: column;
		gap: 0.25rem;
		padding-block: 1.25rem;
	}

	.naparc-tile::before {
		height: 30px;
		width: 30px;
	}

	/* 8.5 rather than 7.5, so the label runs a little smaller than it fits. */
	.naparc-tile__label {
		font-size: min(var(--wp--preset--font-size--large), 100cqi / 8.5);
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Not found — the 404 page. Just the intro, padded the same above and below.
 * The footer's own top margin is dropped, or it stacks on the padding. The
 * page is short, so on a tall screen the footer grows down to the bottom of
 * the window rather than leaving white below it.
 * ---------------------------------------------------------------------- */

/* Less the admin bar, which pushes the page down when logged in. */
.error404 .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.error404 .wp-site-blocks > footer {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.error404 .naparc-footer {
	flex-grow: 1;
}

.naparc-not-found .naparc-intro {
	padding-bottom: clamp(3rem, 6.6vw, 8.25rem);
}

.error404 .naparc-footer.naparc-footer {
	margin-top: 0;
}

.naparc-not-found .naparc-intro__lede {
	text-wrap: pretty;
}

.naparc-not-found__actions.naparc-not-found__actions {
	margin-top: clamp(1.5rem, 2vw, 2.5rem);
}

/* -------------------------------------------------------------------------
 * Intro — the page title and content of the front page, centred.
 * ---------------------------------------------------------------------- */

.naparc-intro {
	padding-top: clamp(3.5rem, 8.7vw, 10.875rem);
	text-align: center;
}

.naparc-intro .wp-block-post-title,
.naparc-intro h1.wp-block-heading {
	margin: 0 0 clamp(1.5rem, 2vw, 2.5rem);
}

.naparc-intro .wp-block-post-content p,
/* `pretty` keeps a short lede from ending on one orphaned word. */
.naparc-intro__lede {
	line-height: 2;
	text-wrap: pretty;
}

/* Inner pages start under the compact masthead, so need less headroom. */
.naparc-intro--meeting {
	padding-top: clamp(3rem, 6.6vw, 8.25rem);
}

.naparc-intro__lede.naparc-intro__lede {
	margin-top: 0;
}

/* A meeting with no dates, place, or host has no summary to show. */
.naparc-intro__lede:empty {
	display: none;
}

/*
 * Small gold label above a page title. On the meeting page it doubles as the
 * way back to the list of meetings.
 */
.naparc-eyebrow.naparc-eyebrow {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.naparc-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.naparc-eyebrow a:hover,
.naparc-eyebrow a:focus-visible {
	text-decoration: underline;
}

.naparc-eyebrow + .wp-block-post-title.wp-block-post-title,
.naparc-eyebrow + h1.wp-block-heading.wp-block-heading {
	margin-top: 0;
}

.naparc-rule {
	background: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 8px;
	height: 4px;
	margin: clamp(2.5rem, 3vw, 3.8rem) auto 0;
	opacity: 1;
	width: 180px;
}

/* -------------------------------------------------------------------------
 * Framed — the gold outline offset down and to the right of a panel or photo.
 *
 * The frame sits behind the content: both are positioned with `z-index: auto`,
 * so they paint in DOM order and the content's own background hides the
 * overlap. Set `--naparc-frame-offset` on the element to change the offset, and
 * `--naparc-frame-inset` to start the outline further in from the top and left.
 * ---------------------------------------------------------------------- */

.naparc-framed {
	position: relative;
}

.naparc-framed::before {
	border: 3px solid var(--naparc-frame);
	bottom: calc(var(--naparc-frame-offset) * -1);
	content: "";
	left: var(--naparc-frame-inset, var(--naparc-frame-offset));
	pointer-events: none;
	position: absolute;
	right: calc(var(--naparc-frame-offset) * -1);
	top: var(--naparc-frame-inset, var(--naparc-frame-offset));
}

.naparc-framed > * {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Featured meeting — gold panel on the front page.
 * ---------------------------------------------------------------------- */

.naparc-featured {
	margin-top: clamp(3.5rem, 5.5vw, 6.9rem);
}

.naparc-meeting-panel {
	background-image: linear-gradient(var(--naparc-panel-tint), var(--naparc-panel-tint)), var(--naparc-texture);
	background-position: center;
	background-size: cover;
	display: grid;
	gap: clamp(2rem, 2.85vw, 3.5625rem);
	grid-template-columns: minmax(0, 491fr) minmax(0, 558fr);
	padding: clamp(2rem, 2.5vw, 3.125rem) clamp(1.5rem, 1.95vw, 2.4375rem) clamp(2rem, 2.2vw, 2.75rem) clamp(1.5rem, 2.75vw, 3.4375rem);
	position: relative;
}

.naparc-meeting-panel--no-media {
	grid-template-columns: minmax(0, 1fr);
}

/* Column layout lets the button sit on the photo's bottom edge, as in the design. */
.naparc-meeting-panel__body {
	display: flex;
	flex-direction: column;
}

.naparc-meeting-panel__title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.naparc-meeting-panel__title a {
	color: inherit;
	text-decoration: none;
}

.naparc-meeting-panel__title a:hover,
.naparc-meeting-panel__title a:focus-visible {
	text-decoration: underline;
}

.naparc-meeting-panel__summary {
	color: var(--wp--preset--color--brown);
	margin: 1.25rem 0 0;
}

.naparc-meeting-panel__summary p {
	margin: 0;
}

.naparc-meeting-panel__summary p + p {
	margin-top: 0.75rem;
}

.naparc-meeting-panel__actions {
	margin: auto 0 0;
	padding-top: clamp(1.75rem, 2.15vw, 2.6875rem);
}

.naparc-meeting-panel__actions .wp-element-button {
	border-color: var(--naparc-rule-dark);
	box-sizing: border-box;
	display: inline-block;
	min-width: 200px;
	text-align: center;
	text-decoration: none;
}

.naparc-meeting-panel__media {
	margin: 0;
}

.naparc-meeting-panel__media img {
	aspect-ratio: 558 / 292;
	border: 3px solid rgba(251, 242, 218, 0.5);
	box-sizing: border-box;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 782px) {
	.naparc-meeting-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.naparc-meeting-panel__media {
		grid-row: 1;
	}
}

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

/* The same flat colour as the page canvas, so overscroll below it is seamless. */
.naparc-footer {
	background-color: var(--wp--preset--color--masthead);
	/* A muted stone, a quiet step down from white; ~5.3:1 on the brown. */
	color: #b8aa98;
	margin-top: clamp(4rem, 13vw, 16.4rem);
	padding-block: clamp(2.5rem, 3.4vw, 4.25rem);
}

/*
 * The site map: a column of links for each part of the site, then a light rule
 * over the copyright line. Headings are white; the links take the footer's
 * muted stone, and white on hover.
 */
.naparc-sitemap {
	display: grid;
	gap: 2rem clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-bottom: clamp(2rem, 3vw, 3.5rem);
}

/* The group's flow layout spaces its children with a top margin; the grid gap does that here. */
.naparc-sitemap.naparc-sitemap > * {
	margin-top: 0;
}

.naparc-sitemap__heading {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

/*
 * Each column is a navigation block, so its menu is edited in the Site Editor.
 * Core copies the block's classes onto the inner list too, so the margin names
 * the <nav>. The list's `wp-block-navigation` class also gives it the header
 * menu's size from theme.json, and core colours the links with a doubled class,
 * so the link rules double theirs to win.
 */
nav.naparc-sitemap__links.naparc-sitemap__links {
	margin-top: 1.25rem;
}

.naparc-sitemap__links .wp-block-navigation__container {
	gap: 0.625rem;
}

.naparc-sitemap .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color 150ms ease;
}

.naparc-sitemap .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.naparc-sitemap .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Any link set to open in a new tab gets the arrow, as the map and PDFs are. */
.naparc-sitemap__links a[target="_blank"]::after {
	content: "\00a0\2197" / "";
}

.naparc-footer__legal.naparc-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 0;
	padding-top: clamp(1.5rem, 2vw, 2rem);
}

@media (max-width: 782px) {
	.naparc-sitemap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.naparc-footer__copyright {
	font-weight: 500;
	margin: 0;
}

/*
 * The Church Social mark is decorative — the link text already names it — so it
 * is a CSS mask rather than an <img>, keeping it out of the accessibility tree.
 * Masking (rather than a background image) lets the mark take the text colour,
 * so it tracks the palette instead of baking a colour into the asset.
 */
/*
 * Deliberately not a flex container: flex would turn the mark and the text into
 * separate flex items and collapse the word spacing. Normal inline flow keeps
 * the phrase reading as one line of text, which is also what lets the whole
 * thing sit inside a single link.
 */
.naparc-footer__credit {
	font-weight: 500;
	margin: 0;
}

/* theme.json gives links the green-dark body colour; the footer is dark. */
.naparc-footer__credit a {
	color: inherit;
	text-decoration: none;
}

/*
 * The Church Social mark is decorative — the link text already names it — so it
 * is a CSS mask rather than an <img>, keeping it out of the accessibility tree.
 * Masking (rather than a background image) lets it take the link colour, so it
 * picks up the hover state for free.
 */
.naparc-footer__credit a::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1.125rem;
	margin-inline-end: 0.4375rem;
	-webkit-mask: url("assets/icons/church-social.svg") no-repeat center / contain;
	mask: url("assets/icons/church-social.svg") no-repeat center / contain;
	/*
	 * Not `middle`, which centres on half the x-height and leaves the mark
	 * sitting ~1px low against the caps. Inter's cap height is 0.727em, so
	 * half of that minus half the mark's height aligns the two centres.
	 */
	vertical-align: -0.33em;
	width: 1.125rem;
}

.naparc-footer__credit a:hover,
.naparc-footer__credit a:focus-visible {
	color: var(--wp--preset--color--gold);
}

/* -------------------------------------------------------------------------
 * Inner pages
 * ---------------------------------------------------------------------- */

.naparc-page {
	padding-block: var(--wp--preset--spacing--60) 0;
}

/* -------------------------------------------------------------------------
 * Full-width sections — the meeting record, the meetings index, and churches.
 *
 * These blocks are `alignfull` so a sand band can bleed edge to edge, which
 * means each section restores the page gutter itself. (`has-global-padding`
 * would not work: core zeroes it when nested inside another padded container.)
 * ---------------------------------------------------------------------- */

.naparc-churches > section,
.naparc-meeting-record > section,
.naparc-meeting-index > section {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

.naparc-wide {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}

.naparc-band {
	background: var(--wp--preset--color--sand);
	padding-block: clamp(3rem, 5vw, 6.25rem) var(--wp--preset--spacing--60);
}

/*
 * When a sand band ends the page, it runs down to the footer. The band is either
 * the last section of a block (the meeting record, churches) or the last section
 * of the template itself (consultations). The template-part wrapper also carries
 * the root block gap.
 */
.wp-site-blocks:has(main > .naparc-band:last-child) > footer,
.wp-site-blocks:has(main > .naparc-band:last-child) .naparc-footer,
.wp-site-blocks:has(main > :last-child > .naparc-band:last-child) > footer,
.wp-site-blocks:has(main > :last-child > .naparc-band:last-child) .naparc-footer {
	margin-top: 0;
}

.naparc-section-heading {
	font-size: clamp(1.75rem, 2.3vw, 2.875rem);
	margin: 0;
}

.naparc-empty-state {
	color: var(--naparc-muted);
}

/* -------------------------------------------------------------------------
 * Annual meeting page
 * ---------------------------------------------------------------------- */

.naparc-meeting-photo.naparc-meeting-photo {
	--naparc-frame-offset: clamp(0.75rem, 1.15vw, 1.4375rem);
	margin-top: clamp(2rem, 2.75vw, 3.4375rem);
}

.naparc-meeting-photo img {
	aspect-ratio: 1200 / 626;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* The press release on a sand band, then the documents on white. */
.naparc-meeting-record.naparc-meeting-record {
	margin-top: clamp(4rem, 9.5vw, 11.8rem);
}

/*
 * The meeting photo's frame hangs below it; without a photo, the record follows
 * the gold rule and can sit closer.
 */
.naparc-intro + .naparc-meeting-record.naparc-meeting-record {
	margin-top: clamp(3rem, 5vw, 6.25rem);
}

/*
 * The body text stops short of the wide column; the minutes panel floats to the
 * column's right edge and the opening paragraphs wrap around it.
 */
.naparc-press-release {
	/* Contain the float, so a short release cannot let it spill out of the band. */
	display: flow-root;
}

.naparc-press-release__date {
	color: var(--wp--preset--color--green-light);
	font-size: 1.125rem;
	margin: clamp(1rem, 1.25vw, 1.5625rem) 0 0;
}

.naparc-press-release__body {
	max-width: 1036px;
}

.naparc-press-release__body > * {
	margin-block: 2em 0;
}

.naparc-press-release__body li,
.naparc-press-release__body p {
	line-height: 2;
}

.naparc-press-release__body a {
	color: inherit;
}

.naparc-minutes {
	float: right;
	margin: clamp(1rem, 1.5vw, 1.8rem) 0 clamp(2rem, 3vw, 3.5rem) clamp(2rem, 5vw, 6.25rem);
	width: min(43%, 516px);
}

.naparc-minutes .naparc-meeting-panel__title {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
}

/*
 * Stacked, the panel would split the heading from the date. The minutes are
 * always in the documents list below, so drop the shortcut instead.
 */
@media (max-width: 782px) {
	.naparc-minutes {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Documents — every file attached to the meeting, as a ruled list on white.
 * ---------------------------------------------------------------------- */

.naparc-press-release + .naparc-documents {
	padding-top: var(--wp--preset--spacing--60);
}

.naparc-documents__list {
	border-top: 1px solid var(--naparc-border);
	list-style: none;
	margin: clamp(1.5rem, 2vw, 2.5rem) 0 0;
	max-width: 1036px;
	padding: 0;
}

.naparc-document {
	border-bottom: 1px solid var(--naparc-border);
}

/*
 * The whole row is the link. The file glyph is a mask on `::before`, like the
 * footer credit, so it stays out of the accessibility tree. Its shape says what
 * kind of file the row is: a PDF, a Word document, an image, or anything else.
 */
.naparc-document__link {
	align-items: center;
	color: var(--wp--preset--color--brown);
	column-gap: 1.25rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: 1.25rem 0.75rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.naparc-document__link::before {
	background-color: var(--wp--preset--color--gold);
	content: "";
	grid-row: span 2;
	height: 2.375rem;
	-webkit-mask: var(--naparc-document-icon) no-repeat center / contain;
	mask: var(--naparc-document-icon) no-repeat center / contain;
	width: 1.9375rem;
}

.naparc-document__link--file {
	--naparc-document-icon: url("assets/icons/file.svg");
}

.naparc-document__link--pdf {
	--naparc-document-icon: url("assets/icons/file-pdf.svg");
}

.naparc-document__link--word {
	--naparc-document-icon: url("assets/icons/file-word.svg");
}

.naparc-document__link--image {
	--naparc-document-icon: url("assets/icons/file-image.svg");
}

.naparc-document__name {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
}

.naparc-document__meta {
	color: var(--naparc-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	grid-column: 2;
	letter-spacing: 0.04em;
}

.naparc-document__action {
	border: 2px solid var(--naparc-rule-dark);
	font-weight: 500;
	grid-column: 3;
	grid-row: 1 / span 2;
	padding: 0.625rem 1.25rem;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	white-space: nowrap;
}

.naparc-document__link:hover,
.naparc-document__link:focus-visible {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--brown);
}

.naparc-document__link:hover .naparc-document__action,
.naparc-document__link:focus-visible .naparc-document__action {
	background-color: var(--wp--preset--color--brown);
	border-color: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
}

.naparc-document__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brown);
	outline-offset: -2px;
}

/* On a phone the row itself is the target; the button would crowd the name. */
@media (max-width: 599px) {
	.naparc-document__link {
		column-gap: 1rem;
		padding-inline: 0.25rem;
	}

	.naparc-document__action {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * About page — the council's function on a sand band, beside a gold panel on
 * the nature of its authority.
 * ---------------------------------------------------------------------- */

.naparc-about-band.naparc-about-band {
	margin-top: clamp(3.5rem, 7.25vw, 9.0625rem);
	/* The same space under the history card as above it. */
	padding-bottom: clamp(3rem, 5vw, 6.25rem);
}

/* The panel's share of the column matches the minutes panel's. */
.naparc-about-band__grid {
	align-items: start;
	column-gap: clamp(2rem, 6.35vw, 7.9375rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 43%);
}

/* The flow layout's block gap would push the panel down off the heading line. */
.naparc-about-band__grid.naparc-about-band__grid > * {
	margin: 0;
}

.naparc-function__heading.naparc-function__heading {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
	margin: 0;
}

/* The functions, from the About page's rich text box. */
.naparc-function__body.naparc-function__body {
	margin-top: clamp(1.5rem, 1.75vw, 2.1875rem);
}

.naparc-function__body > * {
	margin: 0;
}

.naparc-function__body :is(ol, ul) {
	padding-left: 1.5rem;
}

/* A blank line between functions, as in the design, and around any paragraph. */
.naparc-function__body > * + *,
.naparc-function__body li + li {
	margin-top: 1.7em;
}

.naparc-authority {
	--naparc-frame-inset: clamp(1.5rem, 2.5vw, 3.125rem);
	--naparc-frame-offset: clamp(0.5rem, 0.75vw, 0.9375rem);
}

.naparc-authority .naparc-meeting-panel {
	padding: clamp(2rem, 3.6vw, 4.5rem) clamp(1.5rem, 2.65vw, 3.3125rem) clamp(2rem, 3.2vw, 4rem) clamp(1.5rem, 2.7vw, 3.375rem);
}

.naparc-authority .naparc-meeting-panel__title {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
}

/* Doubled classes: the flow layout's block gap would otherwise set these. */
.naparc-authority .naparc-meeting-panel__summary.naparc-meeting-panel__summary {
	margin-top: 1.5rem;
}

.naparc-authority .naparc-meeting-panel__summary p + p {
	margin-top: 1.7em;
}

.naparc-authority .naparc-meeting-panel__actions.naparc-meeting-panel__actions {
	margin: 0;
}

/*
 * The history: a white card under the band's two columns, like the church and
 * meeting cards, with the button beside the text.
 */
.naparc-history.naparc-history {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--naparc-panel-border);
	column-gap: clamp(1.5rem, 4vw, 5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: clamp(3rem, 5vw, 6.25rem);
	padding: clamp(1.5rem, 3vw, 3.75rem);
}

/* A second card under the history card sits close to it, not a section away. */
.naparc-history.naparc-history + .naparc-history {
	margin-top: clamp(1rem, 1.5vw, 1.875rem);
}

.naparc-history__body > * {
	margin: 0;
}

.naparc-history__title.naparc-history__title {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
}

.naparc-history__summary.naparc-history__summary {
	color: var(--wp--preset--color--brown);
	margin-top: 1rem;
	max-width: 44rem;
}

.naparc-history__actions.naparc-history__actions {
	margin: 0;
}

@media (max-width: 782px) {
	.naparc-about-band__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
	}

	/* Leave room in the gutter for the frame. */
	.naparc-about-band__grid.naparc-about-band__grid > .naparc-authority {
		margin-right: var(--naparc-frame-offset);
	}

	.naparc-history.naparc-history {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
	}
}


/* -------------------------------------------------------------------------
 * Documents page — every council document as one ruled list on white.
 * ---------------------------------------------------------------------- */

/* Full width here: there is no press release beside it to line up with. */
.naparc-documents--page .naparc-documents__list {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Contact page — the Secretary's gold panel beside the officers on a sand
 * band, then the website contact and its committee on white.
 *
 * The About page's layout, mirrored: the panel comes first, so it lands right
 * under the intro once the columns stack on a phone.
 * ---------------------------------------------------------------------- */

.naparc-contact-band.naparc-contact-band {
	margin-top: clamp(3.5rem, 7.25vw, 9.0625rem);
	padding-bottom: clamp(3rem, 5vw, 6.25rem);
}

/* The website section shares the grid, so its columns line up with the band's. */
.naparc-contact__grid {
	align-items: start;
	column-gap: clamp(2rem, 6.35vw, 7.9375rem);
	display: grid;
	grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
}

/* The flow layout's block gap would push the columns down off the heading line. */
.naparc-contact__grid.naparc-contact__grid > * {
	margin: 0;
}

.naparc-contact__heading.naparc-contact__heading {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
	margin: 0;
}

.naparc-secretary {
	--naparc-frame-inset: clamp(1.5rem, 2.5vw, 3.125rem);
	--naparc-frame-offset: clamp(0.5rem, 0.75vw, 0.9375rem);
}

.naparc-secretary .naparc-meeting-panel {
	padding: clamp(2rem, 3.6vw, 4.5rem) clamp(1.5rem, 2.65vw, 3.3125rem) clamp(2rem, 3.2vw, 4rem) clamp(1.5rem, 2.7vw, 3.375rem);
}

.naparc-secretary .naparc-meeting-panel__title {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
}

/*
 * The Secretary's name, from the officers list. Doubled class: the flow
 * layout's block gap would otherwise set this.
 */
.naparc-secretary .naparc-meeting-panel__meta.naparc-meeting-panel__meta {
	margin-top: 1rem;
}

/* The church code after the name, quieter than the name itself. */
.naparc-officer__code {
	color: var(--naparc-muted);
	font-weight: 400;
}

/*
 * A ruled list of people: the role (if any) in a fixed column, then the name
 * and a church code linking to that church on the churches page. The list is
 * core list blocks, so the name has no wrapper of its own; a hanging indent
 * keeps a wrapped name, and its code, inside the name column.
 */
.naparc-roster.naparc-roster {
	--naparc-roster-role: 9rem;
	border-bottom: 1px solid var(--naparc-border);
	list-style: none;
	margin: clamp(1.5rem, 1.75vw, 2.1875rem) 0 0;
	padding: 0;
}

.naparc-roster li {
	border-top: 1px solid var(--naparc-border);
	padding-block: 0.875rem;
}

.naparc-roster li:has(> strong) {
	padding-inline-start: var(--naparc-roster-role);
	text-indent: calc(var(--naparc-roster-role) * -1);
}

.naparc-roster strong {
	display: inline-block;
	font-weight: 600;
	text-indent: 0;
	width: var(--naparc-roster-role);
}

.naparc-roster .naparc-church-code {
	text-decoration: none;
}

.naparc-roster .naparc-church-code:hover,
.naparc-roster .naparc-church-code:focus-visible {
	text-decoration: underline;
}

/* A role after the name, like the committee's chairman, sits at the far end. */
.naparc-roster em {
	color: var(--naparc-muted);
	float: right;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	padding-inline-start: 1rem;
}

.naparc-website.naparc-website {
	margin-top: var(--wp--preset--spacing--60);
}

.naparc-website__contact p {
	margin: clamp(1rem, 1.25vw, 1.5rem) 0 0;
}

.naparc-website__contact .wp-block-buttons {
	margin-top: clamp(1.5rem, 2vw, 2.5rem);
}

.naparc-committee__heading.naparc-committee__heading {
	color: var(--wp--preset--color--green-dark);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: inherit;
	margin: 0;
	text-transform: uppercase;
}

/* Only the label sits above this list, so it can follow it closely. */
.naparc-committee .naparc-roster.naparc-roster {
	margin-top: 0.5rem;
}

@media (max-width: 782px) {
	.naparc-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
	}

	/* Leave room in the gutter for the frame. */
	.naparc-contact__grid.naparc-contact__grid > .naparc-secretary {
		margin-right: var(--naparc-frame-offset);
	}
}

/* On a phone the role sits above the name instead. */
@media (max-width: 599px) {
	.naparc-roster li:has(> strong) {
		padding-inline-start: 0;
		text-indent: 0;
	}

	.naparc-roster strong {
		display: block;
		width: auto;
	}
}

/* -------------------------------------------------------------------------
 * Annual meetings index — the next meeting as a gold panel, then every past
 * meeting on a sand band, grouped by decade.
 * ---------------------------------------------------------------------- */

.naparc-meeting-index.naparc-meeting-index {
	margin-top: clamp(3rem, 5vw, 6.25rem);
}

.naparc-next-meeting {
	/* The panel's frame hangs below it, so leave room before the band. */
	padding-bottom: calc(var(--wp--preset--spacing--60) + var(--naparc-frame-offset));
}

.naparc-next-meeting__panel {
	margin-top: clamp(1.5rem, 2vw, 2.5rem);
}

.naparc-meeting-panel__meta {
	color: var(--wp--preset--color--brown);
	font-weight: 500;
	margin: 0.75rem 0 0;
}

.naparc-meeting-panel__meta + .naparc-meeting-panel__summary {
	margin-top: 0.75rem;
}

.naparc-past-meetings__header {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	justify-content: space-between;
}

.naparc-decade-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.naparc-decade-nav a {
	border: 1px solid var(--naparc-rule-dark);
	color: var(--wp--preset--color--brown);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.375rem 0.875rem;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.naparc-decade-nav a:hover,
.naparc-decade-nav a:focus-visible {
	background-color: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
}

/*
 * Each decade is a two-column row: the decade label on the left stays pinned
 * while its meetings scroll past on the right.
 */
.naparc-decade {
	border-top: 1px solid var(--naparc-band-rule);
	display: grid;
	gap: 1.5rem clamp(1.5rem, 4vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr);
	margin-top: clamp(2.5rem, 4vw, 5rem);
	padding-top: clamp(2.5rem, 4vw, 5rem);
	scroll-margin-top: 1.5rem;
}

.naparc-past-meetings__header + .naparc-decade {
	margin-top: clamp(2rem, 3vw, 3.75rem);
}

.naparc-decade__header {
	align-self: start;
	position: sticky;
	top: 2rem;
}

.naparc-decade__heading {
	font-size: clamp(2rem, 3vw, 3.75rem);
	line-height: 1;
	margin: 0;
}

/* A short gold rule under the decade, echoing the rule under page titles. */
.naparc-decade__heading::after {
	background: var(--wp--preset--color--gold);
	border-radius: 4px;
	content: "";
	display: block;
	height: 4px;
	margin-top: 1rem;
	width: 3rem;
}

.naparc-decade__count {
	color: var(--naparc-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	margin: 0.75rem 0 0;
}

.naparc-meeting-list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The whole card is the link. */
.naparc-meeting-row {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--naparc-panel-border);
	color: var(--wp--preset--color--brown);
	column-gap: clamp(1rem, 2vw, 2rem);
	display: grid;
	grid-template-columns: clamp(7.5rem, 11vw, 12rem) minmax(0, 1fr) auto;
	padding: 0.75rem clamp(1rem, 2vw, 1.75rem) 0.75rem 0.75rem;
	text-decoration: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* A flat inset ring doubles the border to 2px without shifting the row's contents. */
.naparc-meeting-row:hover,
.naparc-meeting-row:focus-visible {
	border-color: var(--wp--preset--color--gold);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brown);
}

.naparc-meeting-row:focus-visible {
	outline: 2px solid var(--wp--preset--color--brown);
	outline-offset: 2px;
}

.naparc-meeting-row__media {
	aspect-ratio: 16 / 9;
	display: grid;
	overflow: hidden;
	place-items: center;
}

.naparc-meeting-row__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Without a photo, the year sits on the same gold-washed stone as the panels. */
.naparc-meeting-row__media--year {
	background-image: linear-gradient(var(--naparc-panel-tint), var(--naparc-panel-tint)), var(--naparc-texture);
	background-position: var(--naparc-tile-position, center);
	background-size: 450%;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.125rem, 1.6vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.naparc-meeting-row__body {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.naparc-meeting-row__eyebrow {
	color: var(--wp--preset--color--green-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.naparc-meeting-row__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 1.5vw, 1.625rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.naparc-meeting-row__meta {
	color: var(--naparc-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.naparc-meeting-row__badge {
	background: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	grid-column: 3;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.625rem;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Below tablet width the decade label moves above its meetings. */
@media (max-width: 782px) {
	.naparc-decade {
		grid-template-columns: minmax(0, 1fr);
	}

	.naparc-decade__header {
		align-items: baseline;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		position: static;
	}

	.naparc-decade__heading::after {
		display: none;
	}

	.naparc-decade__count {
		margin: 0;
	}
}

@media (max-width: 599px) {
	.naparc-meeting-row {
		grid-template-columns: 6rem minmax(0, 1fr);
	}

	.naparc-meeting-row__badge {
		grid-column: 2;
		justify-self: start;
		margin-top: 0.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Churches — a quick list of member churches and their directories, the
 * locator map callout, then each church's contacts on a sand band.
 * ---------------------------------------------------------------------- */

.naparc-churches.naparc-churches {
	margin-top: clamp(3rem, 5vw, 6.25rem);
}

.naparc-church-list {
	border-top: 1px solid var(--naparc-border);
	list-style: none;
	margin: 0;
	padding: 0;
}

.naparc-church-list__item {
	align-items: center;
	border-bottom: 1px solid var(--naparc-border);
	column-gap: clamp(1rem, 2.5vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13rem auto;
	padding: 1rem 0.75rem;
}

.naparc-church-list__name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.125rem, 1.3vw, 1.375rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/*
 * The space before the code is the name's end margin, not the code's start
 * margin: when the code wraps, the margin stays behind at the end of the name's
 * line, so the code starts flush instead of indented. The markup has a <wbr>
 * between them rather than a space, which would add to the gap.
 */
.naparc-church-list__name a {
	color: var(--wp--preset--color--brown);
	margin-inline-end: 0.5rem;
	text-decoration: none;
}

.naparc-church-list__name .naparc-church-code {
	margin-inline-start: 0;
}

.naparc-church-list__name a:hover,
.naparc-church-list__name a:focus-visible {
	text-decoration: underline;
}

/* The short code beside a church's name: "OPC". */
.naparc-church-code {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-inline-start: 0.5rem;
	white-space: nowrap;
}

.naparc-church-list__website {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	overflow-wrap: break-word;
}

.naparc-church-list__directory {
	border: 2px solid var(--naparc-rule-dark);
	color: var(--wp--preset--color--brown);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	white-space: nowrap;
}

.naparc-church-list__directory:hover,
.naparc-church-list__directory:focus-visible {
	background-color: var(--wp--preset--color--brown);
	border-color: var(--wp--preset--color--brown);
	color: var(--wp--preset--color--white);
}

/*
 * Just the names on narrow screens: each church's section below repeats its
 * website and directory links, and here they crowded every row.
 */
@media (max-width: 782px) {
	.naparc-church-list__item {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0.25rem;
	}

	.naparc-church-list__website,
	.naparc-church-list__directory {
		display: none;
	}
}

/* The locator map: a gold panel with the button beside the text. */
.naparc-church-map {
	padding-block: clamp(3rem, 5vw, 6.25rem) calc(var(--wp--preset--spacing--60) + var(--naparc-frame-offset));
}

.naparc-church-map .naparc-meeting-panel {
	align-items: end;
	grid-template-columns: minmax(0, 1fr) auto;
}

.naparc-church-map .naparc-meeting-panel__summary {
	max-width: 44rem;
}

@media (max-width: 782px) {
	.naparc-church-map .naparc-meeting-panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.naparc-church-map .naparc-meeting-panel__actions {
		padding-top: 0;
	}
}

/*
 * Each church is a two-column row, like the meetings index: its name and links
 * stay pinned on the left while its contacts scroll past on the right.
 */
.naparc-church {
	border-top: 1px solid var(--naparc-band-rule);
	display: grid;
	gap: 1.5rem clamp(1.5rem, 4vw, 5rem);
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	margin-top: clamp(2.5rem, 4vw, 5rem);
	padding-top: clamp(2.5rem, 4vw, 5rem);
	scroll-margin-top: 1.5rem;
}

.naparc-church:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.naparc-church__header {
	align-self: start;
	position: sticky;
	top: 2rem;
}

.naparc-church__code {
	color: #bfa568;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.naparc-church__name {
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	margin: 0;
	text-wrap: balance;
}

.naparc-church__name::after {
	background: var(--wp--preset--color--gold);
	border-radius: 4px;
	content: "";
	display: block;
	height: 4px;
	margin-top: 1rem;
	width: 3rem;
}

.naparc-church__links {
	display: grid;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.375rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.naparc-church__body {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--naparc-panel-border);
	display: grid;
	gap: clamp(1.5rem, 2.5vw, 2.5rem);
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.naparc-church__group-heading {
	color: var(--naparc-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: 0;
}

.naparc-church__list {
	margin: 0.5rem 0 0;
}

.naparc-church__row {
	border-top: 1px solid var(--naparc-panel-rule);
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: 11rem minmax(0, 1fr);
	padding-block: 0.75rem;
}

.naparc-church__row dt {
	font-weight: 600;
}

.naparc-church__row dd {
	display: grid;
	margin: 0;
	min-width: 0;
}

.naparc-church__email {
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

@media (max-width: 782px) {
	.naparc-church {
		grid-template-columns: minmax(0, 1fr);
	}

	.naparc-church__header {
		position: static;
	}

	.naparc-church__links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem 1.25rem;
	}
}

@media (max-width: 599px) {
	.naparc-church__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Consultations — each consultation on a sand band, like a church but in even
 * columns: its name and description on the left, its details in a white panel
 * on the right. Past consultations follow under their own heading.
 * ---------------------------------------------------------------------- */

/* The same gap under the intro as the About and Contact bands. */
.naparc-consultations-band.naparc-consultations-band {
	margin-top: clamp(3.5rem, 7.25vw, 9.0625rem);
}

.naparc-consultation {
	border-top: 1px solid var(--naparc-band-rule);
	display: grid;
	gap: 1.5rem clamp(1.5rem, 4vw, 5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: clamp(2.5rem, 4vw, 5rem);
	padding-top: clamp(2.5rem, 4vw, 5rem);
	scroll-margin-top: 1.5rem;
}

.naparc-consultation:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.naparc-consultation__name {
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	margin: 0;
	text-wrap: balance;
}

.naparc-consultation__name::after {
	background: var(--wp--preset--color--gold);
	border-radius: 4px;
	content: "";
	display: block;
	height: 4px;
	margin-top: 1rem;
	width: 3rem;
}

.naparc-consultation__description {
	margin-top: 1.25rem;
}

.naparc-consultation__description > * {
	margin-block: 0;
}

.naparc-consultation__description > * + * {
	margin-top: 1rem;
}

.naparc-consultation__details {
	align-self: start;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--naparc-panel-border);
	margin: 0;
	padding: 0.5rem clamp(1.25rem, 2.5vw, 2.5rem);
}

.naparc-consultation__row {
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: 11rem minmax(0, 1fr);
	padding-block: 0.75rem;
}

.naparc-consultation__row + .naparc-consultation__row {
	border-top: 1px solid var(--naparc-panel-rule);
}

.naparc-consultation__row dt {
	font-weight: 600;
}

.naparc-consultation__row dd {
	margin: 0;
	min-width: 0;
}

.naparc-past-consultations {
	margin-top: clamp(3.5rem, 6vw, 7.5rem);
	scroll-margin-top: 1.5rem;
}

.naparc-consultations > .naparc-past-consultations:first-child {
	margin-top: 0;
}

/*
 * A small label on a rule that runs out to both edges. It stands in for the
 * rule between consultation rows, and heads each major assemblies table.
 */
.naparc-past-consultations__heading,
.naparc-assemblies__heading {
	align-items: center;
	color: var(--naparc-muted);
	display: flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	gap: 1.5rem;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.naparc-past-consultations__heading::before,
.naparc-past-consultations__heading::after,
.naparc-assemblies__heading::before,
.naparc-assemblies__heading::after {
	border-top: 1px solid var(--naparc-band-rule);
	content: "";
	flex: 1;
}

.naparc-past-consultations__heading + .naparc-consultation {
	border-top: 0;
	margin-top: clamp(2.5rem, 4vw, 5rem);
	padding-top: 0;
}

@media (max-width: 782px) {
	.naparc-consultation {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	.naparc-consultation__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Major assemblies — every member church's assembly in one white table on a
 * sand band, soonest first, then the ones that have passed. On a phone each
 * row becomes a card, with the column name above each cell.
 * ---------------------------------------------------------------------- */

.naparc-assemblies-band.naparc-assemblies-band {
	margin-top: clamp(3.5rem, 7.25vw, 9.0625rem);
}

.naparc-assemblies__section + .naparc-assemblies__section {
	margin-top: clamp(3.5rem, 6vw, 7.5rem);
}

.naparc-assemblies__table {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--naparc-panel-border);
	border-collapse: collapse;
	margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
	width: 100%;
}

.naparc-assemblies__table th,
.naparc-assemblies__table td {
	padding: 1rem clamp(0.75rem, 1.25vw, 1.25rem);
	text-align: start;
	vertical-align: top;
}

.naparc-assemblies__table th:first-child,
.naparc-assemblies__table td:first-child {
	padding-inline-start: clamp(1.25rem, 2.5vw, 2.5rem);
}

.naparc-assemblies__table th:last-child,
.naparc-assemblies__table td:last-child {
	padding-inline-end: clamp(1.25rem, 2.5vw, 2.5rem);
}

.naparc-assemblies__table thead th {
	color: var(--naparc-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
}

.naparc-assemblies__table tbody tr {
	border-top: 1px solid var(--naparc-panel-rule);
}

.naparc-assemblies__table tbody th {
	font-weight: inherit;
	width: 30%;
}

.naparc-assemblies__table tbody td {
	width: 23%;
}

.naparc-assemblies__table tbody td:empty::after {
	color: var(--naparc-muted);
	content: "—";
}

/* The body text of the rest of the table, since it is a table to look things up in. */
.naparc-assemblies__name {
	color: var(--wp--preset--color--brown);
	text-decoration: none;
}

.naparc-assemblies__name:hover,
.naparc-assemblies__name:focus-visible {
	text-decoration: underline;
}

.naparc-assemblies__dates,
.naparc-assemblies__location,
.naparc-assemblies__pending,
.naparc-assemblies__person,
.naparc-assemblies__email {
	display: block;
}

.naparc-assemblies__dates {
	font-weight: 600;
}

.naparc-assemblies__pending {
	color: var(--naparc-muted);
	font-style: italic;
}

.naparc-assemblies__email {
	font-size: var(--wp--preset--font-size--small);
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	.naparc-assemblies__table,
	.naparc-assemblies__table tbody,
	.naparc-assemblies__table tr,
	.naparc-assemblies__table th,
	.naparc-assemblies__table td {
		display: block;
		width: auto;
	}

	.naparc-assemblies__table thead {
		display: none;
	}

	.naparc-assemblies__table tbody tr {
		display: grid;
		gap: 1rem 1.5rem;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		padding: 1.25rem clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.naparc-assemblies__table tbody tr:first-child {
		border-top: 0;
	}

	.naparc-assemblies__table tbody th,
	.naparc-assemblies__table tbody td,
	.naparc-assemblies__table tbody th:first-child,
	.naparc-assemblies__table tbody td:last-child {
		padding: 0;
	}

	.naparc-assemblies__table tbody th {
		grid-column: 1 / -1;
		width: auto;
	}

	.naparc-assemblies__table tbody td {
		width: auto;
	}

	.naparc-assemblies__table tbody td::before {
		color: var(--naparc-muted);
		content: attr(data-label);
		display: block;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	.naparc-assemblies__table tbody td:empty::after {
		display: block;
	}
}