/**
 * Save Pain Clinics Theme — custom.css
 *
 * CSS Architecture — 5 layers (the spc standard for every build):
 * L1 Design Tokens: theme.json (palette, spacing, font sizes, settings.custom).
 * L2 Base Styles:   element defaults + accessibility (below).
 * L3 Components:    class stubs shared by patterns + buttons (below).
 * L4 Templates:     home-page composite section styles, ported from mockup v2
 *                   (design/mockups/spc-home-v2/index.html) — values are the locked design.
 *                   Scoped per section: .spc-header / .spc-hero / .spc-strip / .spc-issue /
 *                   .spc-impact / .spc-action / .spc-story / .spc-footer / .spc-page.
 * L5 One-offs:      unique element overrides, used sparingly.
 *
 * Loaded on the front end AND in the editor (add_editor_style) for WYSIWYG parity.
 * Reveal styles are gated behind html.spc-js so editor content is never hidden —
 * see inc/enqueue.php for the gating contract and assets/js/custom.js for the class add.
 *
 * @package Save Pain Clinics
 * @since 0.1.0
 */

/* ==========================================================================
   :root alias block — contract with design/mockup-boilerplate.html
   Short names so mockup CSS ports over nearly verbatim. Do not rename these.
   ========================================================================== */
:root {
	--surface: var(--wp--preset--color--surface);
	--surface-alt: var(--wp--preset--color--surface-alt);
	--surface-inverse: var(--wp--preset--color--surface-inverse);
	--surface-inverse-alt: var(--wp--preset--color--surface-inverse-alt);
	--text: var(--wp--preset--color--text);
	--text-muted: var(--wp--preset--color--text-muted);
	--text-inverse: var(--wp--preset--color--text-inverse);
	--accent: var(--wp--preset--color--accent);
	--accent-alt: var(--wp--preset--color--accent-alt);
	--white: var(--wp--preset--color--white);
	--line: var(--wp--custom--line);
	--line-inverse: var(--wp--custom--line-inverse);
	--ease: var(--wp--custom--ease);
	--section-pad: var(--wp--custom--section-pad);
	--hero-pad-top: var(--wp--custom--hero-pad-top);
	--maxw: min(1120px, 92vw);
	/* context colours (settings.custom) — scoped spc-* classes only, never the editor palette */
	--hero-blue: var(--wp--custom--hero-blue);
	--sky: var(--wp--custom--sky);
	--red-soft: var(--wp--custom--red-soft);
	--radius: var(--wp--custom--radius);
}

/* ---------- Layer 2 - Base Styles ---------- */
html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.7rem 1rem;
	background: var(--accent);
	color: var(--white);
	text-decoration: none;
	font-weight: 700;
}
.skip-to-content:focus {
	left: 12px;
	top: 12px;
}

:focus-visible {
	outline: 2.5px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}
/* White ring where the background is blue or red. */
.spc-hero :focus-visible,
.spc-strip :focus-visible,
.spc-impact :focus-visible,
.spc-footer :focus-visible {
	outline-color: var(--white);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Layer 3 - Component Styles ---------- */
.spc-wrap {
	width: var(--maxw);
	margin-inline: auto;
}

.spc-section {
	padding-block: var(--section-pad);
}

/* Stack rhythm (mockup .stack) — beats core's zero-specificity :where() flow gap. */
.spc-stack > * + * {
	margin-block-start: 1.1rem;
}
.spc-stack > .wp-block-buttons {
	margin-block-start: 1.6rem;
}

.spc-lead {
	line-height: 1.5;
}
.spc-lead-bold {
	font-weight: 700;
}

.spc-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--white);
	background: rgba(255, 255, 255, 0.16);
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}

/* Buttons — theme.json carries colour, type, padding, radius; this adds the border box,
   motion and the two variants (outline/ghost, large). Hover colours stay in theme.json. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid transparent;
	transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}
.spc-btn-lg .wp-block-button__link {
	font-size: 0.9rem;
	padding: 1.05rem 2rem;
}
/* Outline on white: red ring + red text (mockup .btn--outline). */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--accent);
	color: var(--accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--red-soft);
	color: var(--accent);
}
/* Ghost on blue (hero): white ring + white text (mockup .btn--ghost). */
.spc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--white);
	color: var(--white);
}
.spc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--white);
}
.spc-hero .wp-block-buttons,
.spc-issue .wp-block-buttons,
.spc-impact .wp-block-buttons,
.spc-page .wp-block-buttons {
	gap: 0.8rem;
}
/* Full-width buttons on phones (mockup ≤640) — page content only, never the header. */
@media (max-width: 640px) {
	main .wp-block-buttons .wp-block-button,
	main .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Reveal — front end only (html.spc-js is set by custom.js as its first
   statement). Not used by the campaign page (immediate feel); kept for the kit. */
html.spc-js .spc-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.spc-js .spc-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Layer 4 - Header (parts/header.html + patterns/header-nav.php) ---------- */
/* Sticky lives on the template-part wrapper (<header class="wp-block-template-part">);
   .spc-header (the inner group) carries the visuals so the editor previews correctly too. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.spc-header {
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.spc-nav {
	min-height: 72px;
	gap: 1.5rem;
}
.spc-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-decoration: none;
}
.spc-brand img {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
}
.spc-brand span {
	font-size: 0.95rem;
	text-transform: uppercase;
	color: var(--accent);
}
.spc-nav__right {
	gap: 1.6rem;
}
.spc-header .wp-block-navigation {
	gap: 1.6rem;
}
.spc-header .wp-block-navigation a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text);
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.spc-header .wp-block-navigation a:hover {
	border-bottom-color: var(--accent);
}
.spc-header .wp-block-button__link {
	padding: 0.72rem 1.25rem;
	white-space: nowrap;
}
@media (max-width: 960px) {
	.spc-header .wp-block-navigation {
		display: none;
	}
}
@media (max-width: 640px) {
	.spc-brand span {
		font-size: 0.8rem;
	}
}

/* ---------- Layer 4 - Hero ---------- */
.spc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--white);
	background: var(--surface-inverse-alt);
	padding-top: var(--hero-pad-top);
	padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
/* Photo (grayscale, theme asset) under a blue gradient tint — design, not content. */
.spc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: url("../img/hero.jpg") center 30% / cover no-repeat;
	filter: grayscale(1) contrast(1.05);
}
.spc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(10, 111, 168, 0.92) 0%, rgba(0, 136, 206, 0.78) 45%, rgba(77, 165, 211, 0.55) 100%);
}
.wp-block-columns.spc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3rem;
	align-items: end;
	margin-bottom: 0;
}
.spc-hero h1 {
	color: var(--white);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.spc-hero h1 em {
	font-style: normal;
	color: #ffd4d8;
}
.spc-hero__copy > * + * {
	margin-block-start: 1.1rem;
}
.spc-hero__copy > .wp-block-buttons {
	margin-block-start: 1.6rem;
}
.spc-hero .spc-lead {
	max-width: 34ch;
	color: var(--text-inverse);
}
.spc-hero__note {
	margin-left: auto;
	max-width: 330px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid var(--line-inverse);
	backdrop-filter: blur(6px);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	font-size: 0.92rem;
	line-height: 1.5;
}
.spc-hero__note strong {
	display: block;
	font-weight: 700;
	color: #ffd4d8;
	margin-bottom: 0.25rem;
}
@media (max-width: 960px) {
	.wp-block-columns.spc-hero__grid {
		grid-template-columns: 1fr;
	}
	.spc-hero__note {
		margin-left: 0;
	}
}
@media (max-width: 640px) {
	.spc-hero::before {
		background-image: url("../img/hero-mobile.jpg");
		background-position: center 20%;
	}
}

/* ---------- Layer 4 - Why-statement strip ---------- */
.spc-strip {
	background: var(--accent);
	color: var(--white);
	text-align: center;
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1.5;
}
.spc-strip p {
	margin: 0;
}
.spc-strip a {
	display: block;
	padding: 0.8rem 1rem;
	color: var(--white);
	text-decoration: none;
	transition: background-color 0.25s;
}
.spc-strip a:hover {
	background: var(--accent-alt);
}
.spc-strip strong {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Layer 4 - The Issue ---------- */
.wp-block-columns.spc-issue__top {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 0;
}
.spc-issue__media {
	position: relative;
	margin: 0;
}
.spc-issue__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 24px 48px -24px rgba(10, 111, 168, 0.45);
}
.spc-issue__media::before {
	content: "";
	position: absolute;
	inset: 1.4rem -1.4rem -1.4rem 1.4rem;
	z-index: -1;
	background: var(--sky);
	border-radius: var(--radius);
}
.spc-facts {
	margin-block-start: 3.5rem;
	background: var(--surface-alt);
	border-radius: var(--radius);
	padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
	border-left: 6px solid var(--accent);
}
.spc-facts h3 {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent);
	margin: 0 0 1.1rem;
}
.spc-facts ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.spc-facts li {
	font-size: 0.95rem;
	min-width: 0;
	line-height: 1.5;
	padding-top: 0.8rem;
	border-top: 2px solid var(--line);
}
.spc-facts li strong {
	display: block;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 0.2rem;
}
@media (max-width: 960px) {
	.wp-block-columns.spc-issue__top {
		grid-template-columns: 1fr;
	}
	/* Stacked: the offset sky block would poke 1.4rem past a 1rem gutter (6px of
	   horizontal scroll at 768). Keep it inside the wrap. */
	.spc-issue__media::before {
		inset: 1.4rem 0 -1.4rem 1.4rem;
	}
	.spc-facts ul {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	.spc-facts ul {
		grid-template-columns: 1fr;
	}
	.spc-issue__media::before {
		display: none;
	}
}

/* ---------- Layer 4 - What's at Stake (blue band, six cards) ---------- */
.spc-impact {
	position: relative;
	overflow: hidden;
}
.spc-impact::after {
	content: "";
	position: absolute;
	right: -8vw;
	top: -8vw;
	width: 38vw;
	height: 38vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
	pointer-events: none;
}
.spc-impact > * {
	position: relative;
	z-index: 1;
}
.spc-impact h2 {
	color: var(--white);
}
/* Head block spans the full wide width (core's constrained layout centres wide children with
   !important margins, so a max-width on the block itself would float it to the middle);
   the 62ch reading measure goes on its children instead, flush with the cards' left edge. */
.spc-impact__head > * {
	max-width: 62ch;
}
.spc-impact__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	margin-block-start: 2.5rem;
}
/* Five cards since 2026-10-20: rows stay left-aligned (client asked for this over a centred last row). */
.spc-impact__grid > * {
	margin-block: 0;
}
.spc-card {
	background: var(--white);
	color: var(--text);
	border-radius: var(--radius);
	padding: 1.6rem 1.5rem 1.7rem;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}
.spc-card > * + * {
	margin-block-start: 0.7rem;
}
.spc-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--red-soft);
	margin: 0;
}
.spc-card__icon img {
	width: 22px;
	height: 22px;
}
.spc-card h3 {
	color: var(--text);
}
.spc-card p {
	font-size: 0.97rem;
	color: var(--text-muted);
}
.spc-impact__cta {
	margin-block-start: 2.5rem;
}
@media (max-width: 960px) {
	.spc-impact__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	.spc-impact__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Layer 4 - Take Action (Campaignr module panel) ---------- */
/* Live Campaignr iframe (2026-10-20): block-level so no inline-baseline gap under it. */
.spc-embed .activistcloud-embed {
	display: block;
	width: 100%;
}
.wp-block-columns.spc-action__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 0;
}
.spc-module {
	background: var(--white);
	border-radius: var(--radius);
	padding: 1.8rem;
	box-shadow: 0 24px 50px -28px rgba(10, 111, 168, 0.5);
	border-top: 6px solid var(--surface-inverse);
}
.spc-module h3 {
	font-size: 1.35rem;
	line-height: 1.2;
	font-weight: 800;
	color: var(--surface-inverse-alt);
	margin: 0;
}
.spc-module p {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin: 0.4rem 0 0;
}
.spc-module__badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--surface-inverse-alt);
	background: var(--sky);
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.6rem;
}
.spc-field {
	margin-top: 1rem;
}
.spc-field label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 0.3rem;
}
.spc-field input,
.spc-field select,
.spc-field textarea {
	width: 100%;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.7rem 0.85rem;
	border: 1.5px solid var(--line);
	border-radius: 4px;
	background: var(--white);
	color: var(--text);
}
.spc-field textarea {
	min-height: 120px;
	resize: vertical;
}
.spc-module__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.25rem;
	gap: 1rem;
}
.spc-module__foot small {
	color: var(--accent);
	font-size: 0.78rem;
}
.spc-module__foot small a {
	color: inherit;
	text-decoration: underline;
}
.spc-module__btn {
	border: 2px solid transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s var(--ease), background-color 0.25s;
}
.spc-module__btn:hover {
	transform: translateY(-1px);
}
.spc-progress {
	margin-top: 1.25rem;
}
.spc-progress span {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 0.35rem;
}
.spc-progress i {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: var(--sky);
	overflow: hidden;
}
.spc-progress i::before {
	content: "";
	display: block;
	width: 20%;
	height: 100%;
	background: var(--accent);
}
@media (max-width: 960px) {
	.wp-block-columns.spc-action__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Layer 4 - Share Your Story (WS Form Pro) ---------- */
.wp-block-columns.spc-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3.5rem;
	align-items: start;
	margin-bottom: 0;
}
.spc-form {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.8rem;
}
/* WS Form themes itself with custom properties declared on the <form>; set ours on
   .wsf-form so they win (EMW precedent: emw/theme custom.css, "Contact form"). */
.spc-form .wsf-form {
	--wsf-form-color-primary: var(--accent);
	--wsf-form-color-primary-dark-20: var(--accent-alt);
	--wsf-form-color-primary-dark-40: #8a2f39;
	--wsf-form-color-default: var(--text);
	--wsf-form-font-family: inherit;
	--wsf-field-font-family: inherit;
	--wsf-field-font-size: 0.95rem;
	--wsf-field-border-radius: 4px;
	--wsf-field-border-width: 1.5px;
	--wsf-field-border-color: var(--line);
	--wsf-field-border-color-hover: rgba(31, 42, 51, 0.35);
	--wsf-field-color-placeholder: rgba(31, 42, 51, 0.5);
	--wsf-field-label-font-size: 0.78rem;
	--wsf-field-label-font-weight: 600;
	--wsf-field-label-color: var(--text-muted);
	--wsf-field-button-width: auto;
	--wsf-field-button-border-radius: 4px;
	--wsf-field-button-padding: 0.9rem 1.65rem;
	--wsf-field-button-padding-vertical: 0.9rem;
	--wsf-field-button-padding-horizontal: 1.65rem;
	--wsf-field-button-font-size: 0.82rem;
	--wsf-field-button-font-weight: 700;
	--wsf-field-button-text-transform: uppercase;
	--wsf-field-button-letter-spacing: 0.08em;
	--wsf-field-button-primary-background-color: var(--accent);
	--wsf-field-button-primary-background-color-hover: var(--accent-alt);
	--wsf-field-button-primary-background-color-focus: var(--accent-alt);
	--wsf-field-button-primary-border-color: var(--accent);
	--wsf-field-button-primary-border-color-hover: var(--accent-alt);
	--wsf-field-button-primary-color: var(--white);
	--wsf-field-button-primary-color-hover: var(--white);
	--wsf-field-button-primary-color-focus: var(--white);
}
/* WS Form's field box ships 8.5px/10px padding and a 1px hairline; match the mockup's
   .spc-field inputs (vars for these do not take, so direct selectors). */
.spc-form .wsf-form input.wsf-field:not([type="checkbox"]):not([type="radio"]),
.spc-form .wsf-form select.wsf-field,
.spc-form .wsf-form textarea.wsf-field {
	padding: 0.7rem 0.85rem;
	border-width: 1.5px;
	font-size: 0.95rem;
}
.spc-form .wsf-form textarea.wsf-field {
	min-height: 120px;
}
.spc-form .wsf-form label.wsf-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}
.spc-form .wsf-form .wsf-label-wrapper {
	margin-bottom: 0.3rem;
}
.spc-form .wsf-form .wsf-field-wrapper {
	margin-bottom: 1rem;
}
/* Only the submit (last field of the last section) drops its bottom margin; every
   section's .wsf-fields list has its own last child, so do not zero those. */
.spc-form .wsf-form .wsf-section:last-child .wsf-fields > .wsf-field-wrapper:last-child {
	margin-bottom: 0;
}
.spc-form .wsf-form .wsf-checkbox-wrapper label,
.spc-form .wsf-form .wsf-checkbox label {
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text);
}
.spc-form .wsf-form input[type="checkbox"] {
	accent-color: var(--accent);
}
.spc-form .wsf-form .wsf-group-tab,
.spc-form .wsf-form .wsf-group-tabs {
	display: none;
}
/* Consent legends (mockup .spc-consent > span). */
.spc-form .wsf-form legend.wsf-legend,
.spc-form .wsf-form .wsf-fieldset legend {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}
.spc-form .wsf-form fieldset.wsf-fieldset {
	margin-top: 1.1rem;
	padding-top: 1rem;
	border: 0;
	border-top: 1px solid var(--line);
}
.spc-form .wsf-form .wsf-button {
	margin-top: 0.3rem;
	border: 2px solid var(--accent);
	transition: transform 0.25s var(--ease), background-color 0.25s;
}
.spc-form .wsf-form .wsf-button:hover {
	transform: translateY(-1px);
}
/* Featured story slot (not on the page until a story arrives). */
.spc-story__quote {
	margin-top: 2rem;
	padding: 1.4rem 1.5rem;
	border-left: 5px solid var(--accent);
	background: var(--surface-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 1.02rem;
	line-height: 1.55;
}
.spc-story__quote small {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 600;
}
@media (max-width: 960px) {
	.wp-block-columns.spc-story__grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 640px) {
	.spc-form {
		padding: 1.25rem;
	}
	.spc-form .wsf-form {
		--wsf-field-button-width: 100%;
	}
}

/* ---------- Layer 4 - Footer (parts/footer.html + patterns/footer-site.php) ---------- */
.spc-footer {
	background: var(--surface-inverse);
	color: var(--text-inverse);
	padding-block: 3.5rem 2rem;
}
.spc-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 3rem;
	align-items: start;
}
.spc-footer__grid > * {
	margin-block: 0;
}
.spc-footer h2 {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--white);
	margin: 0 0 0.6rem;
}
.spc-footer p {
	font-size: 0.95rem;
	max-width: 56ch;
	margin: 0;
}
.spc-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.2rem;
	color: var(--white);
	text-decoration: none;
}
.spc-footer__brand img {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
}
.spc-footer__brand strong {
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 0.02em;
	font-weight: 800;
}
.spc-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	justify-content: flex-end;
}
.spc-footer__nav a {
	color: var(--text-inverse);
	text-decoration: none;
}
.spc-footer__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.spc-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line-inverse);
	font-size: 0.8rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}
.spc-footer__bottom p {
	font-size: 0.8rem;
	margin: 0;
}
@media (max-width: 960px) {
	.spc-footer__grid {
		grid-template-columns: 1fr;
	}
	.spc-footer__nav {
		justify-content: flex-start;
	}
}

/* ---------- Layer 4 - Interior pages (page.html: Privacy Policy; 404.html) ---------- */
.spc-page h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--accent);
	letter-spacing: 0.02em;
}
.spc-page .spc-prose p + p {
	margin-block-start: 1.1rem;
}
.spc-404 {
	text-align: center;
}
.spc-404 .spc-lead {
	max-width: 48ch;
}
.spc-404 .wp-block-buttons {
	justify-content: center;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html.spc-js .spc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wp-block-button__link,
	.spc-module__btn,
	.spc-strip a {
		transition: none;
	}
	.wp-block-button__link:hover,
	.spc-module__btn:hover {
		transform: none;
	}
}

/* ---------- Layer 5 - One-off Overrides (none yet) ---------- */