/*
Theme Name: Sold Price History
Theme URI: https://soldpricehistory.co.uk
Author: Sold Price History
Description: Editorial block theme for the UK sold-price archive — Fraunces display serif over IBM Plex Sans, paper-white ground, single green accent, faint survey grid.
Version: 1.0.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soldprice
Tags: light, block-theme, full-site-editing
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
}

html {
	scroll-behavior: smooth;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* One column for prose and data alike; the extra leading keeps the wider
   measure comfortable. */
.entry-content > p,
.entry-content > ul:not(.sph-index),
.entry-content > ol {
	line-height: 1.75;
}

:target {
	scroll-margin-top: 5rem;
}

/* Survey grid — the faint paper texture behind hero and section bands */
.sph-grid {
	background-image:
		linear-gradient(var(--wp--custom--grid--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--grid--line) 1px, transparent 1px);
	background-size: var(--wp--custom--grid--size) var(--wp--custom--grid--size);
	position: relative;
}

.sph-caps {
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 600;
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-transform: uppercase;
}

.sph-caps-muted {
	color: var(--wp--preset--color--sage);
}

.sph-tabular {
	font-variant-numeric: tabular-nums;
}

.sph-header {
	background-color: rgba(251, 251, 249, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	position: sticky;
	top: 0;
	z-index: 40;
}

.sph-footer {
	background-color: var(--wp--preset--color--paper-sunk);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.sph-wordmark {
	align-items: center;
	display: flex;
	gap: 0.625rem;
	text-decoration: none;
}

.sph-wordmark span {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sph-wordmark span em {
	color: var(--wp--preset--color--brand);
	font-style: normal;
}

/* Lead paragraph with inline emphasis, as on the source site */
.sph-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
}

.sph-lead strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.sph-lead .sph-real {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

/* Headline metric row */
.sph-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2rem;
}

.sph-metric-label {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	margin: 0 0 0.25rem;
}

.sph-metric-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--stat);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

.sph-metric-value.is-gain {
	color: var(--wp--preset--color--gain);
}

.sph-metric-value.is-loss {
	color: var(--wp--preset--color--loss);
}

/* Source badge */
.sph-source {
	align-items: center;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: 1.5rem;
	padding: 0.5rem 0.875rem;
}

.sph-source-tag {
	background-color: var(--wp--preset--color--paper-sunk);
	border-radius: 2px;
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 600;
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	padding: 2px 6px;
	text-transform: uppercase;
}

.sph-source span {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	font-variant-numeric: tabular-nums;
}

/* Four-up stat strip */
.sph-strip {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 2.5rem;
	overflow: hidden;
}

.sph-strip-cell {
	background-color: var(--wp--preset--color--white);
	border-left: 1px solid var(--wp--preset--color--hairline);
	padding: 1.125rem 1.25rem;
}

.sph-strip-cell:first-child {
	border-left: 0;
}

.sph-strip-label {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	margin: 0 0 0.375rem;
}

.sph-strip-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
}

@media (max-width: 781px) {
	.sph-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sph-strip-cell:nth-child(3) {
		border-left: 0;
	}

	.sph-strip-cell:nth-child(n+3) {
		border-top: 1px solid var(--wp--preset--color--hairline);
	}
}

/* Section heads with numbered kicker */
.sph-section-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
	margin-top: 4rem;
}

.sph-section-head h2 {
	margin: 0;
}

.sph-view-all {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--wp--custom--transition);
}

.sph-view-all:hover {
	color: var(--wp--preset--color--brand);
}

/* Tables */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	width: 100%;
}

.wp-block-table thead th {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 600;
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-align: left;
	text-transform: uppercase;
}

.wp-block-table td:not(:first-child),
.wp-block-table th:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

.wp-block-table tbody tr {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	transition: background-color var(--wp--custom--transition);
}

.wp-block-table tbody tr:hover {
	background-color: var(--wp--preset--color--paper-sunk);
}

.wp-block-table :is(th, td) {
	border: 0;
	padding: 0.5rem 0.625rem;
}

.wp-block-table :is(th, td):first-child {
	padding-left: 0;
}

.wp-block-table :is(th, td):last-child {
	padding-right: 0;
}

.wp-block-table figcaption {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
}

/* Charts */
.sph-chart {
	margin: 1.5rem 0 0;
}

.sph-chart img {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	height: auto;
	max-width: 100%;
}

/* Index link lists */
.sph-index {
	display: grid;
	gap: 0.5rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.sph-index li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
	padding-bottom: 0.375rem;
}

.sph-index a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.sph-index a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sph-index-count {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	font-variant-numeric: tabular-nums;
}

/* Table of contents */
.sph-toc {
	border-left: 2px solid var(--wp--preset--color--hairline);
	margin: 2rem 0;
	padding-left: 1.25rem;
}

.sph-toc p {
	color: var(--wp--preset--color--sage);
	margin: 0 0 0.5rem;
}

.sph-toc ol {
	columns: 2;
	column-gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sph-toc li {
	break-inside: avoid;
	margin-bottom: 0.375rem;
}

.sph-toc a {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.sph-toc a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.sph-toc ol {
		columns: 1;
	}
}

.sph-note {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--small);
}

.sph-cite {
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 3rem;
	padding-top: 1rem;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: sph-out 130ms ease both;
	}

	::view-transition-new(root) {
		animation: sph-in 200ms ease both;
	}
}

@keyframes sph-out {
	to {
		opacity: 0;
	}
}

@keyframes sph-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

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

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

/* Dark mode ------------------------------------------------------------- */
/* The palette tokens are redefined rather than the rules, so every component
   built on preset colours follows without a second set of selectors. */
[data-sph-theme="dark"] {
	--wp--preset--color--paper: #0f1512;
	--wp--preset--color--paper-sunk: #141c18;
	--wp--preset--color--ink: #eef2ef;
	--wp--preset--color--ink-soft: #c3d0c8;
	--wp--preset--color--sage: #8c9b93;
	--wp--preset--color--brand: #4fbf9e;
	--wp--preset--color--brand-dark: #7ad4b8;
	--wp--preset--color--gain: #4fbf9e;
	--wp--preset--color--loss: #f0705a;
	--wp--preset--color--hairline: #26332c;
	--wp--preset--color--white: #141c18;
	--wp--custom--grid--line: rgba(238, 242, 239, 0.05);
	color-scheme: dark;
}

[data-sph-theme="dark"] .sph-header {
	background-color: rgba(15, 21, 18, 0.92);
}

[data-sph-theme="dark"] .sph-chart img,
[data-sph-theme="dark"] .sph-source-tag {
	filter: none;
}

/* The charts are drawn on a white plate, which would glare on the dark ground */
[data-sph-theme="dark"] .sph-chart img {
	background-color: #ffffff;
	border-radius: 6px;
	opacity: 0.92;
}

/* Search ---------------------------------------------------------------- */
.sph-search {
	margin-top: 1.75rem;
	max-width: 34rem;
	position: relative;
}

.sph-search-form {
	display: flex;
	gap: 0;
}

.sph-search input[type="search"] {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px 0 0 4px;
	border-right: 0;
	color: var(--wp--preset--color--ink);
	flex: 1;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	padding: 0.75rem 0.875rem;
}

.sph-search input[type="search"]:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
}

.sph-search button {
	background-color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 0 4px 4px 0;
	/* Paired with --ink so the contrast survives the dark palette swap. */
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0 1.25rem;
	transition: background-color var(--wp--custom--transition);
}

.sph-search button:hover {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
}

.sph-search-results {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 12px 28px rgba(16, 38, 30, 0.1);
	list-style: none;
	margin: 0;
	max-height: 22rem;
	overflow-y: auto;
	padding: 0;
	position: absolute;
	top: calc(100% + 2px);
	width: 100%;
	z-index: 30;
}

.sph-search-results li {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	margin: 0;
}

.sph-search-results li:last-child {
	border-bottom: 0;
}

.sph-search-results a {
	align-items: baseline;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	padding: 0.625rem 0.875rem;
	text-decoration: none;
}

.sph-search-results li[aria-selected="true"] a,
.sph-search-results a:hover {
	background-color: var(--wp--preset--color--paper-sunk);
}

.sph-search-kind {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-transform: uppercase;
}

.sph-search-meta {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	font-variant-numeric: tabular-nums;
	margin-left: auto;
}

/* Theme toggle ---------------------------------------------------------- */
.sph-theme-toggle {
	align-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--caps);
	gap: 0.375rem;
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	padding: 0.375rem 0.625rem;
	text-transform: uppercase;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.sph-theme-toggle:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.sph-theme-toggle svg {
	height: 14px;
	width: 14px;
}

/* Calculators and comparison ------------------------------------------- */
.sph-calc,
.sph-compare {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	margin-top: 1.75rem;
	padding: 1.25rem;
}

.sph-calc-fields,
.sph-compare-picks {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sph-calc label,
.sph-compare label {
	color: var(--wp--preset--color--sage);
	display: flex;
	flex-direction: column;
	font-size: var(--wp--preset--font-size--caps);
	gap: 0.375rem;
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-transform: uppercase;
}

.sph-calc input,
.sph-compare select {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: normal;
	padding: 0.5rem 0.625rem;
	text-transform: none;
}

.sph-calc-out {
	border-top: 1px solid var(--wp--preset--color--hairline);
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.sph-result-label {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	margin: 0 0 0.25rem;
	text-transform: uppercase;
}

.sph-result-value {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

.sph-result-note {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--small);
	margin: 0.25rem 0 0;
}

/* Contact form ---------------------------------------------------------- */
.sph-contact {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	margin-top: 1.75rem;
	max-width: 36rem;
	padding: 1.25rem;
}

.sph-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 0 1rem;
}

.sph-field label {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-transform: uppercase;
}

.sph-field input,
.sph-field select,
.sph-field textarea {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	padding: 0.625rem 0.75rem;
	width: 100%;
}

.sph-field input:focus,
.sph-field select:focus,
.sph-field textarea:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
}

.sph-field-hp {
	display: none;
}

.sph-field-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 0;
}

.sph-field-actions button {
	background-color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 4px;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	transition: background-color var(--wp--custom--transition);
}

.sph-field-actions button:hover {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
}

.sph-caps-mono {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	text-transform: uppercase;
}

.sph-form-notice {
	border-left: 2px solid var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--paper-sunk);
	margin-bottom: 1.25rem;
	padding: 0.875rem 1rem;
}

.sph-form-notice.is-error {
	border-left-color: var(--wp--preset--color--loss);
}

/* Consent banner -------------------------------------------------------- */
.sph-consent {
	background-color: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--hairline);
	bottom: 0;
	box-shadow: 0 -8px 24px rgba(16, 38, 30, 0.08);
	left: 0;
	position: fixed;
	right: 0;
	z-index: 60;
}

.sph-consent-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 76rem;
	padding: 1rem 1.5rem;
}

.sph-consent-text {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	max-width: 46rem;
}

.sph-consent-actions {
	display: flex;
	gap: 0.625rem;
}

.sph-consent button {
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.5rem 1.125rem;
}

.sph-consent-decline {
	background: none;
	border: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--ink-soft);
}

.sph-consent-accept {
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Breadcrumb ------------------------------------------------------------ */
.rank-math-breadcrumb {
	color: var(--wp--preset--color--sage);
	font-size: var(--wp--preset--font-size--caps);
	letter-spacing: var(--wp--custom--caps-letter-spacing);
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.rank-math-breadcrumb p {
	margin: 0;
}

.rank-math-breadcrumb a {
	color: var(--wp--preset--color--sage);
	text-decoration: none;
}

.rank-math-breadcrumb a:hover {
	color: var(--wp--preset--color--brand);
}

.sph-home-hero {
	margin: 0 calc(-1 * var(--wp--style--root--padding-right, 0px)) 2.5rem;
	padding: 3.5rem 0 3rem;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Short pages must not leave the footer floating mid-screen */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1;
}

.sph-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sph-footer li {
	margin-bottom: 0.375rem;
}

.sph-footer a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.sph-footer a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Measure and break-out ------------------------------------------------- */
/* Prose keeps a readable measure at the content width; tables, charts, index
   lists and the hero carry `alignwide` so the block layout widens them itself —
   no negative-margin hack, and the editor shows the same thing the front does. */
.sph-home-hero h1 {
	max-width: 52rem;
}

.sph-home-hero {
	padding-inline: 0;
}

.sph-home-hero .sph-search {
	max-width: 34rem;
}

.sph-chart img {
	display: block;
	height: auto;
	width: 100%;
}

/* Tables on a phone -------------------------------------------------------- */
/* A five-column ledger cannot shrink honestly, so below the tablet break each
   row becomes a small card and every cell states its own column. Nothing is
   dropped and nothing scrolls off the side. */
@media (max-width: 700px) {
	.wp-block-table table,
	.wp-block-table tbody,
	.wp-block-table tr,
	.wp-block-table td {
		display: block;
		width: 100%;
	}

	.wp-block-table thead {
		display: none;
	}

	.wp-block-table tbody tr {
		border: 1px solid var(--wp--preset--color--hairline);
		border-radius: 6px;
		margin-bottom: 0.75rem;
		padding: 0.625rem 0.75rem;
	}

	.wp-block-table tbody tr:hover {
		background-color: transparent;
	}

	.wp-block-table td {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		padding: 0.3125rem 0;
		text-align: right;
		white-space: normal;
	}

	.wp-block-table td::before {
		color: var(--wp--preset--color--sage);
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: var(--wp--preset--font-size--caps);
		letter-spacing: var(--wp--custom--caps-letter-spacing);
		text-align: left;
		text-transform: uppercase;
	}

	.wp-block-table td:first-child {
		border-bottom: 1px solid var(--wp--preset--color--hairline);
		color: var(--wp--preset--color--ink);
		display: block;
		font-weight: 600;
		margin-bottom: 0.375rem;
		padding-bottom: 0.5rem;
		text-align: left;
	}

	.wp-block-table td:first-child::before {
		display: block;
		margin-bottom: 0.125rem;
	}

	.wp-block-table td:not(:first-child),
	.wp-block-table th:not(:first-child) {
		white-space: normal;
	}

	.sph-metrics {
		gap: 1.25rem 2rem;
	}

	.sph-toc ol {
		columns: 1;
	}
}

/* Map legend ------------------------------------------------------------- */
.sph-map img {
	background-color: #ffffff;
}

.sph-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.sph-legend li {
	align-items: center;
	color: var(--wp--preset--color--sage);
	display: flex;
	font-size: var(--wp--preset--font-size--caps);
	font-variant-numeric: tabular-nums;
	gap: 0.375rem;
	margin: 0;
}

.sph-legend-swatch {
	border-radius: 2px;
	display: inline-block;
	height: 12px;
	width: 12px;
}

/* Mobile header --------------------------------------------------------- */
/* The wordmark wrapped to two lines and pushed the header to 101px; the
   hamburger sat unlabelled against it. */
/* Between the hamburger breakpoint and roughly 830px the inline nav, the
   wordmark and the toggle no longer fit on one line, so the wordmark wrapped
   and the header grew to 101px. */
@media (max-width: 830px) {
	.sph-wordmark span {
		font-size: 1.0625rem;
		white-space: nowrap;
	}

	.sph-wordmark svg {
		height: 22px;
		width: 22px;
	}

	.sph-theme-toggle {
		gap: 0.25rem;
		padding: 0.3125rem 0.5rem;
	}

	.sph-theme-toggle span {
		display: none;
	}

	.sph-header .wp-block-navigation {
		font-size: var(--wp--preset--font-size--caps);
	}

	.sph-header .wp-block-navigation__container {
		gap: 0.875rem;
	}

	/* Core switches to the overlay at 600px, but seven links plus the wordmark
	   and the toggle stop fitting well before that. */
	.sph-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

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

/* WordPress paints the overlay from its own palette attributes; those are not
   applied when the theme supplies no matching preset, so the panel is pinned
   and coloured here instead. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper);
	/* `inset` alone does nothing on a statically positioned element, which is
	   why the panel collapsed to a strip showing only the first link. */
	position: fixed;
	inset: 0;
	/* Core leaves the height to the header row, so the panel collapsed to 61px
	   and clipped every link after the first. */
	height: 100dvh;
	max-height: 100dvh;
	width: 100vw;
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Core zeroes the container padding on open, so the measure is restored here. */
	padding: 2.5rem 1.5rem 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	right: 1.25rem;
	top: 1.25rem;
	z-index: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	padding: 0.75rem 0;
	width: 100%;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}