/*
Theme Name: North Retro
Theme URI: https://northretro.org/
Author: North Retro
Author URI: https://northretro.org/
Description: A bespoke WordPress block theme for North Retro, a retro computing club in Anoka County, Minnesota. Built around the club's pine-and-amber palette, the full IBM Plex family, and the logo's eight-point star - used as bullet, nav marker, hover cue, and boot cursor. Layouts borrow from product-box labels and hardware spec sheets rather than the usual hero-photo-and-feature-icons template.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northretro
Tags: block-theme, full-site-editing, community, one-column, custom-colors, custom-menu, block-patterns, accessibility-ready
*/

/* ==========================================================================
   North Retro - theme stylesheet

   Design tokens live in theme.json and arrive here as --wp--preset--* and
   --wp--custom--* variables. Nothing below hardcodes a colour, size, or
   spacing step that theme.json already registers.

   Contents
     1.  Local aliases
     2.  Focus, motion, and skip link
     3.  The star  (bullets, nav marker, link hover, dividers)
     4.  Panels    (product-box hero, spec sheet cards, callouts)
     5.  Boot sequence
     6.  Header and navigation
     7.  Footer band
     8.  Long-form content
     9.  CiviCRM form styling
     10. Editor parity
   ========================================================================== */


/* 1. Local aliases ------------------------------------------------------- */

:root {
	--nr-pine: var(--wp--preset--color--pine);
	--nr-green: var(--wp--preset--color--green);
	--nr-amber: var(--wp--preset--color--amber);

	/* Text-weight variants. Amber at full brightness belongs on the dark
	   bands, where it hits 7.6:1 and reads as real CRT phosphor; on paper it
	   only manages 1.8:1, so amber-ink carries labels and marks on light.
	   Same story for the brand green. */
	--nr-amber-ink: var(--wp--preset--color--amber-ink);
	--nr-rust: var(--wp--preset--color--rust);
	--nr-rust-deep: var(--wp--preset--color--rust-deep);
	--nr-cream: var(--wp--preset--color--cream);
	--nr-paper: var(--wp--preset--color--paper);
	--nr-paper-dim: var(--wp--preset--color--paper-dim);
	--nr-rule: var(--wp--preset--color--rule);
	--nr-circuit: var(--wp--preset--color--circuit);

	--nr-star: var(--wp--custom--star--mask);
	--nr-star-outline: var(--wp--custom--star--outline);
	--nr-rule-panel: var(--wp--custom--rule--panel);
	--nr-rule-hairline: var(--wp--custom--rule--hairline);
	--nr-label: var(--wp--preset--font-family--mono);
	--nr-label-tracking: var(--wp--custom--letter-spacing--label);
}

/* Dark is the default. The original paper palette is retained as an explicit
   light mode so visitors can choose the reading environment they prefer. */
:root {
	color-scheme: dark;
	--wp--preset--color--pine: #f4f0df;
	--wp--preset--color--green: #75cf8b;
	--wp--preset--color--green-ink: #9de8ae;
	--wp--preset--color--amber: #f5bf61;
	--wp--preset--color--amber-ink: #ffd38b;
	--wp--preset--color--rust: #e47a4c;
	--wp--preset--color--rust-deep: #c95b36;
	--wp--preset--color--paper: #10131c;
	--wp--preset--color--paper-dim: #18202d;
	--wp--preset--color--cream: #202938;
	--wp--preset--color--rule: #49566c;
	--wp--preset--color--circuit: #080b11;
}

:root.nr-light-mode {
	color-scheme: light;
	--wp--preset--color--pine: #1f5c38;
	--wp--preset--color--green: #2e8b47;
	--wp--preset--color--green-ink: #236f39;
	--wp--preset--color--amber: #e8a33d;
	--wp--preset--color--amber-ink: #87560b;
	--wp--preset--color--rust: #c05a2b;
	--wp--preset--color--rust-deep: #a4471e;
	--wp--preset--color--paper: #ede8d6;
	--wp--preset--color--paper-dim: #e3dcc4;
	--wp--preset--color--cream: #f3f1de;
	--wp--preset--color--rule: #cdc2a4;
	--wp--preset--color--circuit: #14231a;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

:root:not(.nr-light-mode) .nr-hero__title {
	color: var(--nr-pine);
}


/* 2. Focus, motion, and skip link ---------------------------------------- */

/* Amber is the focus colour throughout - a nod to indicator LEDs.
   Amber alone only reaches 1.9:1 against cream, so the ring is sandwiched
   between two thin pine rings drawn with box-shadow. The amber stays true to
   the palette; the pine edges are what actually carry the 3:1 boundary
   contrast, on cream and on the circuit-dark band alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--nr-amber);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--nr-pine), 0 0 0 7px var(--nr-pine);
	border-radius: 0;
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--nr-amber);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--nr-pine), 0 0 0 8px var(--nr-pine);
}

/* On the dark band the outer ring reads against the near-black instead. */
.nr-band-dark :where(a, button, input, textarea, summary):focus-visible {
	box-shadow: 0 0 0 2px var(--nr-circuit), 0 0 0 7px var(--nr-circuit);
}

.skip-link,
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75em 1.25em;
	background: var(--nr-pine);
	color: var(--nr-cream);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	text-decoration: none;
}

.skip-link:focus,
.skip-link.screen-reader-text:focus {
	left: var(--wp--preset--spacing--30);
	top: var(--wp--preset--spacing--30);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* 3. The star ------------------------------------------------------------ */

/* One glyph, masked so it inherits colour from whatever it marks. */
.nr-star,
.nr-star-inline {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
	flex: none;
}

.nr-star-inline {
	width: var(--wp--custom--star--size);
	height: var(--wp--custom--star--size);
	vertical-align: 0.02em;
	margin-right: 0.15em;
}

/* Star bullets. Applied to the star-list block style, and to every list in
   long-form page content. */
.is-style-nr-star-list,
.nr-prose ul:not(.wp-block-navigation ul, .wp-block-page-list ul) {
	list-style: none;
	padding-left: 0;
}

.is-style-nr-star-list li,
.nr-prose ul:not(.wp-block-navigation ul, .wp-block-page-list ul) > li {
	position: relative;
	padding-left: 1.9em;
	margin-block: 0.55em;
}

.is-style-nr-star-list li::before,
.nr-prose ul:not(.wp-block-navigation ul, .wp-block-page-list ul) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.44em;
	width: 0.72em;
	height: 0.72em;
	background-color: var(--nr-amber-ink);
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
}

.nr-band-dark .is-style-nr-star-list li::before {
	background-color: var(--nr-amber);
}

/* Star as a section marker - used on the About page headings, where the
   sections are peers rather than an ordered sequence. */
.is-style-nr-star-heading {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
}

.is-style-nr-star-heading::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	flex: none;
	background-color: var(--nr-amber-ink);
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
	transform: translateY(-0.06em);
}

/* Where there is gutter to spare, the star hangs in the margin so the heading
   text still lines up with the paragraphs beneath it. Below that it tucks back
   inline rather than overflowing the gutter. */
@media (min-width: 48rem) {
	.is-style-nr-star-heading::before {
		margin-left: -1.35em;
	}
}

/* Link hover marker. Content links grow a small star to their left instead
   of changing weight or sliding. */
.nr-prose a:where(:not(.wp-element-button, .wp-block-button__link)),
.nr-linkmark a:where(:not(.wp-element-button, .wp-block-button__link)) {
	position: relative;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 120ms linear;
}

.nr-prose a:where(:not(.wp-element-button, .wp-block-button__link))::before,
.nr-linkmark a:where(:not(.wp-element-button, .wp-block-button__link))::before {
	content: "";
	position: absolute;
	left: -0.95em;
	top: 0.42em;
	width: 0.6em;
	height: 0.6em;
	background-color: var(--nr-amber-ink);
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
	opacity: 0;
	transform: scale(0.4) rotate(-45deg);
	transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.nr-prose a:hover::before,
.nr-prose a:focus-visible::before,
.nr-linkmark a:hover::before,
.nr-linkmark a:focus-visible::before {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.nr-prose a::before,
	.nr-linkmark a::before {
		transition: none;
		transform: none;
	}
}

/* A star used as a rule between sections. */
.nr-star-rule {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	color: var(--nr-pine);
}

.nr-star-rule::before,
.nr-star-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}

.nr-star-rule .nr-star {
	color: var(--nr-amber-ink);
	width: 1.15em;
	height: 1.15em;
}

.nr-band-dark .nr-star-rule {
	color: var(--nr-cream);
}

.nr-band-dark .nr-star-rule .nr-star {
	color: var(--nr-amber);
}


/* 4. Panels and cards ---------------------------------------------------- */

/* Green is ink here, not paint. Cards and callouts sit on the paper field with
   a drawn border; nothing is filled with green. Where a block genuinely needs
   to separate from the page, it shifts half a step to dimmed paper rather than
   taking a colour. */

.nr-panel {
	border: var(--nr-rule-panel);
	border-radius: 0;
	position: relative;
}

.nr-panel--dim {
	background: var(--nr-paper-dim);
}

/* The dark terminal strip. This is the signature moment - the CRT reference
   doing real work, in the one place amber can run at full brightness. */
.nr-terminal {
	background: var(--nr-circuit);
	border-bottom: 2px solid var(--nr-amber);
	padding: 0.85em var(--wp--custom--gutter);
}

.nr-terminal .nr-boot {
	max-width: 64rem;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--pixel);
	font-size: clamp(0.8rem, 1.5vw, 1.05rem);
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--nr-amber);
	min-height: 1.5em;
}

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

.nr-hero__body {
	position: relative;
	overflow: hidden;
	max-width: min(64rem, 100% - (var(--wp--custom--gutter) * 2));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 7vw, 5rem);
	padding-inline: var(--wp--custom--gutter);
	background: var(--nr-paper-dim);
	border: var(--nr-rule-panel);
	text-align: center;
}

/* The eight-point star at watermark scale, so the hero has a focal graphic
   without a coloured panel behind it. Decorative only. */
.nr-hero__body::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -6vw;
	width: min(46vw, 34rem);
	aspect-ratio: 1;
	transform: translateY(-50%);
	/* Drawn as an outline rather than a solid: a schematic mark reads as a
	   technical drawing, where the filled shape read as a sunburst. */
	background-color: color-mix(in srgb, var(--nr-amber) 55%, var(--nr-pine));
	-webkit-mask: var(--nr-star-outline) center / contain no-repeat;
	mask: var(--nr-star-outline) center / contain no-repeat;
	opacity: 0.4;
	pointer-events: none;
	z-index: 0;
}

.nr-hero__body > * {
	position: relative;
	z-index: 1;
}

.nr-hero__title {
	line-height: 0.94;
	/* The display-size wordmark was the single largest green object on the
	   page. In near-black it reads as print; green stays in the logo, the
	   section headings, and the line work. */
	color: var(--nr-circuit);
}

.nr-hero__body > * {
	max-width: 42rem;
	margin-inline: auto;
}

.nr-site-masthead {
	/* A blog-style masthead: centered and substantial, without becoming a
	   full-bleed billboard on desktop. */
	width: min(100%, 64rem);
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--30);
	position: relative;
	border: 2px solid var(--nr-pine);
	background: var(--nr-cream);
	line-height: 0;
	box-shadow: 6px 6px 0 color-mix(in srgb, var(--nr-pine) 22%, transparent);
}

.nr-site-masthead img {
	display: block;
	width: 100%;
	height: auto;
}

.nr-banner-light {
	display: none !important;
}

:root.nr-light-mode .nr-banner-dark {
	display: none !important;
}

:root.nr-light-mode .nr-banner-light {
	display: block !important;
}

@media (max-width: 48rem) {
	/* At phone width the watermark would sit under the copy, so it goes. */
	.nr-hero__body::before {
		display: none;
	}
}

/* Role cards -------------------------------------------------------------- */

.nr-spec {
	border: var(--nr-rule-hairline);
	border-left: 3px solid var(--nr-pine);
	border-radius: 0;
	background: transparent;
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
}

.nr-spec__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.nr-spec__key {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-pine);
	opacity: 0.7;
}

.nr-spec__name {
	line-height: 1.05;
}

.nr-spec__desc {
	margin: 0;
	flex: 1;
}

.nr-spec__open {
	display: block;
	margin: 0;
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
}

.nr-spec__open a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* Status chip, drawn like a labelled indicator rather than a form field. */
.nr-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
	/* Full-strength amber only reaches 1.8:1 on paper, so the chip's outline
 - which is what marks it as a tag - uses the ink weight. The lamp
	   inside stays bright, ringed so it still has an edge. */
	border: 1px solid var(--nr-amber-ink);
	padding: 0.3em 0.65em;
	white-space: nowrap;
}

.nr-chip::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--nr-amber);
	box-shadow: 0 0 0 1px var(--nr-amber-ink);
	flex: none;
}

/* Callout - an index card set down on the page. */
.nr-callout {
	border: 1px solid var(--nr-pine);
	border-top: 4px solid var(--nr-rust);
	border-radius: 0;
	background: var(--nr-paper-dim);
	padding: var(--wp--preset--spacing--40);
}

.nr-callout__label {
	display: block;
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
	margin-bottom: 0.6em;
}

/* The recurring retro signature: a star, then a small amber monospace tag. */
.nr-eyebrow {
	display: block;
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
	margin-bottom: 0.4em;
}

.nr-band-dark .nr-eyebrow {
	color: var(--nr-amber);
}

/* 5. Boot sequence ------------------------------------------------------- */

/* The terminal strip is permanent; the typing is the enhancement. The full
   line ships in the HTML, so with JavaScript off or reduced motion set, the
   strip simply reads as already booted. Nothing is ever hidden waiting on a
   script. */

.nr-boot__caret {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.35em;
	vertical-align: -0.02em;
	background-color: var(--nr-amber);
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
	animation: nr-blink 900ms steps(1, end) infinite;
}

@keyframes nr-blink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nr-boot__caret {
		animation: none;
	}
}

/* 6. Header and navigation ----------------------------------------------- */

/* A dedicated top navigation bar keeps the wayfinding in one predictable
   place and leaves the hero free to introduce the club. */
.nr-header {
	border-bottom: 1px solid var(--nr-pine);
	background: var(--nr-paper);
}

.nr-header__inner {
	justify-content: center;
}

/* The logo is the identity of the club, not a favicon. Keep it twice its
   original header size on wider screens while preserving room for the menu
   on a phone. WordPress writes the size inline, hence the targeted override. */
.nr-header .wp-block-site-logo {
	width: min(336px, 72vw) !important;
	max-width: min(336px, 72vw);
	margin: 0;
}

.nr-header .wp-block-site-logo img {
	height: auto;
	width: 100%;
	display: block;
}

.nr-header__right {
	width: 100%;
	justify-content: center;
}

.nr-theme-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 1;
	border: 2px solid var(--nr-amber);
	background: var(--nr-amber);
	color: var(--nr-circuit);
	cursor: pointer;
	font-family: var(--nr-label);
	font-size: 1.65rem;
	font-weight: 600;
	line-height: 1;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--nr-circuit), 3px 3px 0 color-mix(in srgb, var(--nr-circuit) 70%, transparent);
}


.nr-theme-toggle:hover,
.nr-theme-toggle:focus-visible {
	background: transparent;
	color: var(--nr-amber);
}

/* The larger mark needs a deliberate breakpoint: below tablet width the
   navigation gets its own row instead of compressing the labels. */
@media (max-width: 64rem) {
	.nr-header__inner {
		align-items: center;
	}

	.nr-header__right {
		justify-content: center;
	}
}

/* Nav items: the active one carries the star. */
.nr-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
}

.nr-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--nr-amber-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 140ms ease-out;
}

.nr-nav .wp-block-navigation-item__content:hover::after,
.nr-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.nr-nav .current-menu-item > .wp-block-navigation-item__content,
.nr-nav .current_page_item > .wp-block-navigation-item__content,
.nr-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--nr-amber-ink);
	font-weight: 600;
}

.nr-nav .current-menu-item > .wp-block-navigation-item__content::before,
.nr-nav .current_page_item > .wp-block-navigation-item__content::before,
.nr-nav .current-menu-ancestor > .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-right: 0.42em;
	vertical-align: 0.02em;
	background-color: var(--nr-amber-ink);
	-webkit-mask: var(--nr-star) center / contain no-repeat;
	mask: var(--nr-star) center / contain no-repeat;
}

/* Overlay menu on narrow viewports. */
.nr-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--nr-paper);
	padding-top: var(--wp--preset--spacing--60);
}

.nr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

@media (prefers-reduced-motion: reduce) {
	.nr-nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}


/* 7. Footer band --------------------------------------------------------- */

/* The only place --nr-circuit is used as a background. */
.nr-band-dark {
	background: var(--nr-circuit);
	color: var(--nr-cream);
	border-top: 2px solid var(--nr-amber);
}

/* On the dark site, the footer needs to be a separate slate band rather than
   disappearing into the page background. */
:root:not(.nr-light-mode) .nr-band-dark {
	background: var(--nr-paper-dim);
	color: var(--nr-pine);
	border-top-color: var(--nr-amber);
}

:root:not(.nr-light-mode) .nr-band-dark :where(h1, h2, h3, h4, h5, h6),
:root:not(.nr-light-mode) .nr-band-dark a:where(:not(.wp-element-button, .wp-block-button__link)) {
	color: var(--nr-pine);
}

:root:not(.nr-light-mode) .nr-band-dark a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	color: var(--nr-amber);
}

/* The core button hover uses the dark "circuit" swatch by default.  In dark
   mode that also becomes its text colour, so keep primary actions high-contrast. */
:root:not(.nr-light-mode) :where(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible, :active) {
	background-color: var(--nr-amber);
	border-color: var(--nr-amber);
	color: var(--nr-circuit);
}

.nr-band-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--nr-cream);
}

.nr-band-dark a:where(:not(.wp-element-button, .wp-block-button__link)) {
	color: var(--nr-cream);
	text-decoration-color: color-mix(in srgb, var(--nr-cream) 45%, transparent);
	text-underline-offset: 0.18em;
}

.nr-band-dark a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	color: var(--nr-amber);
	text-decoration-color: currentColor;
}

/* Footer actions form a clean, equal-width stack. */
.nr-footer__actions .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12rem;
	text-align: center;
}

.nr-band-dark .wp-block-page-list,
.nr-band-dark .wp-block-navigation {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--nav);
}

.nr-band-dark .wp-block-navigation .wp-block-navigation-item__content,
.nr-band-dark .wp-block-page-list a {
	text-decoration: none;
}

.nr-band-dark .wp-block-page-list a:hover,
.nr-band-dark .wp-block-page-list a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

/* Ghost button for the dark band - outlined, not filled. */
.nr-band-dark .is-style-nr-ghost .wp-block-button__link {
	background: transparent;
	color: var(--nr-amber);
	border-color: var(--nr-amber);
}

.nr-band-dark .is-style-nr-ghost .wp-block-button__link:hover,
.nr-band-dark .is-style-nr-ghost .wp-block-button__link:focus-visible {
	background: var(--nr-amber);
	color: var(--nr-circuit);
}

.is-style-nr-ghost .wp-block-button__link {
	background: var(--nr-paper);
	color: var(--nr-pine);
	border-color: var(--nr-pine);
}

.is-style-nr-ghost .wp-block-button__link:hover,
.is-style-nr-ghost .wp-block-button__link:focus-visible {
	background: var(--nr-pine);
	color: var(--nr-paper);
}

.nr-colophon {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--nr-cream) 72%, transparent);
}


/* 8. Long-form content --------------------------------------------------- */

.nr-prose :where(h2) {
	margin-top: var(--wp--preset--spacing--50);
}

.nr-prose :where(h3) {
	margin-top: var(--wp--preset--spacing--40);
}

/* Pages authored with simple WordPress HTML still receive a comfortable,
   readable rhythm. This also keeps embedded forms and hand-edited pages
   consistent with the block patterns. */
.wp-block-post-content > :where(p, ul, ol) {
	max-width: 42rem;
}

.wp-block-post-content > :where(p, ul, ol) + :where(h2, h3) {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-post-content > :where(h2, h3) + :where(p, ul, ol) {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-post-content > :where(ul, ol) {
	padding-left: 1.4em;
}

.wp-block-post-content > :where(ul, ol) > li + li {
	margin-top: 0.45em;
}

.nr-prose strong {
	font-weight: 600;
	color: var(--nr-pine);
}

/* Page lede - the first paragraph of long-form pages. */
.nr-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--snug);
	color: color-mix(in srgb, var(--nr-pine) 92%, transparent);
}

/* Page title block, ruled like a document header. */
.nr-doc-head {
	border-bottom: var(--nr-rule-panel);
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Narrow, form-focused pages. */
.nr-narrow > :where(*) {
	max-width: var(--wp--custom--measure--narrow);
	margin-inline: auto;
}


/* 9. CiviCRM form styling ------------------------------------------------ */

/* CiviCRM ships its own stylesheet; this pulls its markup back onto the
   spec-sheet grid - monospace field labels, flat inputs, amber focus. */

.nr-civi {
	border: var(--nr-rule-panel);
	background: var(--nr-paper-dim);
	padding: var(--wp--preset--spacing--40);
}

.nr-civi .crm-container,
.nr-civi #crm-container {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--nr-pine);
}

/* CiviCRM defaults to a full-viewport panel with large page padding. Inside
   the site's application card, that creates the unnecessary empty space. */
.nr-civi #crm-container {
	min-height: 0;
	padding: 0;
	background: transparent;
}

.nr-civi .crm-title,
.nr-civi .crm-title .title,
.nr-civi #crm-main-content-wrapper,
.nr-civi .crm-container.crm-public #crm-profile-block {
	margin: 0;
}

.nr-civi .crm-title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.nr-civi .crm-container.crm-public #crm-profile-block {
	padding: 0;
	box-shadow: none;
}

/* Riverlea supplies its own light UI variables after the theme stylesheet.
   Override those variables at the public-form container so every CiviCRM
   surface (including the profile card and fields) follows the site mode. */
:root:not(.nr-light-mode) .nr-civi .crm-container.crm-public {
	--crm-text-light-color: #fff;
	--crm-text-dark-color: #fff;
	--crm-text-color: #fff;
	--crm-link-color: var(--nr-amber-ink);
	--crm-link-hover-color: var(--nr-amber);
	--crm-focus-color: var(--nr-amber);
	--crm-paper: var(--nr-paper);
	--crm-page-bg-color: var(--nr-paper-dim);
	--crm-container-bg-color: var(--nr-paper-dim);
	--crm-layer1-bg-color: var(--nr-cream);
	--crm-layer2-bg-color: color-mix(in srgb, var(--nr-cream) 85%, var(--nr-circuit));
	--crm-border-color: var(--nr-rule);
	--crm-f-fieldset-bg-color: var(--nr-paper-dim);
	--crm-input-bg-color: var(--nr-cream);
	--crm-input-color: var(--nr-pine);
	--crm-input-border-color: var(--nr-rule);
	--crm-input-label-color: var(--nr-amber-ink);
}

:root:not(.nr-light-mode) .nr-civi .crm-container,
:root:not(.nr-light-mode) .nr-civi #crm-container,
:root:not(.nr-light-mode) .nr-civi .crm-container .edit-value label,
:root:not(.nr-light-mode) .nr-civi .crm-container .crm-option-label-pair label,
:root:not(.nr-light-mode) .nr-civi .crm-container input + label,
:root:not(.nr-light-mode) .nr-civi .crm-container input[type="text"],
:root:not(.nr-light-mode) .nr-civi .crm-container input[type="email"],
:root:not(.nr-light-mode) .nr-civi .crm-container textarea,
:root:not(.nr-light-mode) .nr-civi .crm-container select {
	color: #fff;
}

:root:not(.nr-light-mode) .nr-civi .crm-container .messages.help,
:root:not(.nr-light-mode) .nr-civi .crm-container .messages.help :is(p, a) {
	color: #fff;
}

.nr-civi .crm-container .messages.help {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

/* Field labels only. Option labels sitting next to a checkbox or radio are
   sentence-length, and uppercase monospace would make them a chore to read. */
.nr-civi .crm-container .label,
.nr-civi .crm-container .label label,
.nr-civi .crm-container > form > label {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
}

.nr-civi .crm-container .crm-section {
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px dotted var(--nr-rule);
}

.nr-civi .crm-container input[type="text"],
.nr-civi .crm-container input[type="email"],
.nr-civi .crm-container input[type="tel"],
.nr-civi .crm-container input[type="number"],
.nr-civi .crm-container input[type="password"],
.nr-civi .crm-container textarea,
.nr-civi .crm-container select,
.nr-civi input[type="text"],
.nr-civi input[type="email"],
.nr-civi textarea,
.nr-civi select {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--small);
	color: var(--nr-pine);
	background: var(--nr-cream);
	border: 1px solid var(--nr-rule);
	border-radius: 0;
	box-shadow: none;
	padding: 0.7em 0.8em;
	width: 100%;
	max-width: 26rem;
}

.nr-civi .crm-container input:focus-visible,
.nr-civi .crm-container textarea:focus-visible,
.nr-civi .crm-container select:focus-visible,
.nr-civi input:focus-visible,
.nr-civi textarea:focus-visible,
.nr-civi select:focus-visible {
	outline: 3px solid var(--nr-amber);
	outline-offset: 1px;
	background: var(--nr-paper);
}

.nr-civi .crm-container input[type="checkbox"],
.nr-civi .crm-container input[type="radio"] {
	width: auto;
	accent-color: var(--nr-pine);
	margin-right: 0.5em;
}

.nr-civi .crm-container .edit-value label,
.nr-civi .crm-container .crm-option-label-pair label,
.nr-civi .crm-container input + label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--nr-pine);
}

/* Amount buttons on the contribution page read as spec-sheet options. */
.nr-civi .crm-container .crm-amount-other-option,
.nr-civi .crm-container #priceset .price-set-row label {
	font-family: var(--nr-label);
}

.nr-civi .crm-container input[type="submit"],
.nr-civi .crm-container .crm-button,
.nr-civi .crm-container button.crm-button {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--nav);
	color: var(--nr-paper);
	background: var(--nr-rust-deep);
	border: 2px solid var(--nr-rust-deep);
	border-radius: 0;
	box-shadow: none;
	padding: 1em 1.6em;
	cursor: pointer;
	background-image: none;
}

.nr-civi .crm-container input[type="submit"]:hover,
.nr-civi .crm-container .crm-button:hover,
.nr-civi .crm-container button.crm-button:hover {
	background: var(--nr-pine);
	color: var(--nr-cream);
}

/* Keep CiviCRM's application controls muted in dark mode while retaining
   enough contrast for their labels. */
:root:not(.nr-light-mode) .nr-civi .crm-container input[type="submit"],
:root:not(.nr-light-mode) .nr-civi .crm-container .crm-button,
:root:not(.nr-light-mode) .nr-civi .crm-container button.crm-button {
	background: color-mix(in srgb, var(--nr-rust-deep) 70%, var(--nr-circuit));
	border-color: color-mix(in srgb, var(--nr-rust-deep) 70%, var(--nr-circuit));
	color: var(--nr-pine);
}

:root:not(.nr-light-mode) .nr-civi .crm-container input[type="submit"]:is(:hover, :focus-visible),
:root:not(.nr-light-mode) .nr-civi .crm-container .crm-button:is(:hover, :focus-visible),
:root:not(.nr-light-mode) .nr-civi .crm-container button.crm-button:is(:hover, :focus-visible) {
	background: var(--nr-rust-deep);
	border-color: var(--nr-rust-deep);
	color: var(--nr-pine);
}

.nr-civi .crm-container .crm-marker,
.nr-civi .crm-container .marker {
	color: var(--nr-amber-ink);
}

.nr-civi .crm-container .description,
.nr-civi .crm-container .help {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--nr-pine) 78%, transparent);
	background: none;
	border: 0;
}

.nr-civi .crm-container fieldset {
	border: var(--nr-rule-hairline);
	border-radius: 0;
	padding: var(--wp--preset--spacing--30);
}

.nr-civi .crm-container legend {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-green);
	padding-inline: 0.5em;
}



/* The lower strip of the hero box - the fine print along the bottom edge of a
   product carton. Lighter than the top strip so the panel reads top-heavy,
   the way a printed label does. */
.nr-panel__strip--foot {
	background: var(--nr-paper);
	color: var(--nr-pine);
	border-bottom: 0;
	border-top: var(--nr-rule-panel);
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.nr-panel__strip--foot p + p::before {
	content: "\2022";
	margin-right: var(--wp--preset--spacing--30);
	color: var(--nr-green);
}

/* Collapse the boot slot entirely when it is not running, so it leaves no gap
   above the heading for the no-JS and reduced-motion cases. */
.nr-hero:not(.is-booting) .nr-boot-slot {
	display: none;
}

/* Header CTA keeps its own scale on narrow screens rather than shrinking with
   the nav. */
.nr-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--x-small);
}

/* Search block - same flat, monospace treatment as the CiviCRM fields. */
.wp-block-search__input {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--small);
	color: var(--nr-pine);
	background: var(--nr-paper);
	border: var(--nr-rule-panel);
	border-radius: 0;
	padding: 0.7em 0.8em;
}

.wp-block-search__button {
	border-radius: 0;
	border: 2px solid var(--nr-pine);
	background: var(--nr-rust-deep);
	color: var(--nr-paper);
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--nav);
	padding: 0.75em 1.2em;
}

.wp-block-search__button:hover {
	background: var(--nr-pine);
}

.wp-block-search__label {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--nr-label-tracking);
	color: var(--nr-amber-ink);
}

/* Post lists. */
.wp-block-post-excerpt__more-link {
	font-family: var(--nr-label);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--nav);
}

/* Narrow viewports ------------------------------------------------------- */

@media (max-width: 48rem) {
	.nr-panel--offset::after {
		inset: 6px -6px -6px 6px;
	}

	.nr-panel__strip,
	.nr-panel__strip--foot {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}

	.nr-header__inner {
		row-gap: var(--wp--preset--spacing--20);
	}

	.nr-spec__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 30rem) {
	/* At the narrowest width the bottom strip stacks rather than truncating,
	   and the bullet separators would read as orphans. */
	.nr-panel__strip--foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25em;
	}

	.nr-panel__strip--foot p + p::before {
		content: none;
	}
}

/* 10. Editor parity ------------------------------------------------------ */

.editor-styles-wrapper .nr-panel--offset::after {
	display: none;
}

.editor-styles-wrapper .nr-boot {
	display: block;
	opacity: 0.55;
}