/* ==========================================================================
   True Strays — core styles

   Design tokens live in theme.json (_project/docs/DESIGN.md is the reference).
   This file covers what theme.json cannot express: the reset, text wrapping,
   centred page frame, prose rhythm, the section system, buttons, forms, the
   header, footer, news cards and the mobile menu.

   Only tokens are used below. If a value isn't a token, it's a conversation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

/* WordPress applies no global box-sizing reset (DNH D-018). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01", "ss03";
}

/* Header, main and footer sit flush; each carries its own padding. */
.wp-site-blocks > * {
	margin-block: 0;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

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

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

/* --------------------------------------------------------------------------
   2. Type
   -------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

strong,
b {
	font-weight: 600;
}

/* The one small uppercase treatment: eyebrows, footer headings, form headings. */
.ts-label {
	display: block;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
}

/* --------------------------------------------------------------------------
   3. Page frame — centred (D-007)

   Pages are centred. Long running prose is left-aligned inside the centred
   column: on a page via the "Long text · left aligned" group style, and on
   every single post body.
   -------------------------------------------------------------------------- */

/* Every page's content starts the same distance below the menu: one token,
   --wp--custom--page-top (24px → 40px). On the front page the hero is the
   first thing, so it sits on that same line (D-034). */
.ts-main {
	padding-block: var(--wp--custom--page-top) var(--wp--custom--section);
}

/* Front page: same frame. The hero is its first block, so it sits on the
   page-top line; the last block ends one section gap above the footer. */
.ts-main--flush {
	padding-block: var(--wp--custom--page-top) var(--wp--custom--section);
}

.ts-page,
.ts-page-title,
.ts-archive-head {
	text-align: center;
}

/* Page title → content is one group gap (48→64px) on every template (D-038). */
.ts-page-title {
	margin-block-end: var(--wp--custom--group-gap);
}

/* Direct children only: lists inside section blocks (quotes, contacts, videos)
   are components with their own alignment, and a descendant selector here
   out-ranked their centring. */
.ts-page .entry-content > :where(ul, ol),
.is-style-ts-long,
.ts-single .entry-content {
	text-align: start;
}

/* One container rule for every full-width custom section, derived from
   WordPress's own variables so custom blocks and core blocks share an edge
   (DNH D-037). */
.ts-container {
	width: 100%;
	max-width: calc(var(--wp--style--global--content-size, 1140px) + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px) var(--wp--style--root--padding-right, 24px);
}

.ts-w-narrow .ts-container {
	max-width: calc(var(--wp--custom--narrow) + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px));
}

.ts-w-wide .ts-container {
	max-width: calc(var(--wp--style--global--wide-size, 1440px) + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px));
}

/* --------------------------------------------------------------------------
   4. Prose
   -------------------------------------------------------------------------- */

.entry-content > :where(p, ul, ol, blockquote) {
	max-width: var(--wp--custom--measure);
}

:where(.entry-content) :where(h2, h3, h4) {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

:where(.entry-content) > :where(h2, h3, h4):first-child {
	margin-block-start: 0;
}

/* Prose lists only. Component lists (videos, quotes, contacts, posts, social
   icons) carry a ts- or core component class and lay out with grid/flex gap.
   A bare `li + li` margin pushed every item after the first down 0.4em, so
   the second video sat 7px below the first in the opening row (DNH D-035). */
:where(.entry-content) :where(ul, ol):not([class*="ts-"]):not(.wp-block-social-links):not(.blocks-gallery-grid) {
	padding-inline-start: 1.4em;
}

:where(.entry-content) :where(ul, ol):not([class*="ts-"]):not(.wp-block-social-links):not(.blocks-gallery-grid) > li + li {
	margin-block-start: 0.4em;
}

:where(.entry-content) a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:where(.entry-content) a:hover {
	text-decoration-thickness: 2px;
}

/* Pasted URLs and long words must never push a phone sideways. */
:where(.entry-content) :where(p, li, td, th, h1, h2, h3, h4, dd) {
	overflow-wrap: break-word;
}

:where(.entry-content) a[href^="http"] {
	overflow-wrap: anywhere;
}

:where(.entry-content) .wp-block-image img,
:where(.entry-content) img {
	border-radius: 4px;
}

:where(.entry-content) iframe {
	max-width: 100%;
}

/* Legacy video iframes, wrapped with their own ratio by inc/content-filters.php. */
.ts-embed {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ts-ratio, 16 / 9);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--ink);
}

.ts-embed--portrait {
	max-width: 360px;
}

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

/* Core embed blocks with a saved aspect class (wp-embed-aspect-16-9 etc.).
   Core's ratio CSS wasn't reaching them (post 1077 stayed 327×281 at 375px),
   so the theme sizes them from the class the block already carries. */
:where(.entry-content) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

:where(.entry-content) .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper { aspect-ratio: 21 / 9; }
:where(.entry-content) .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper { aspect-ratio: 18 / 9; }
:where(.entry-content) .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper  { aspect-ratio: 4 / 3; }
:where(.entry-content) .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper  { aspect-ratio: 1 / 1; }
:where(.entry-content) .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
:where(.entry-content) .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper  { aspect-ratio: 1 / 2; max-width: 360px; margin-inline: auto; }

:where(.entry-content) .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	content: none; /* core's padding-top ratio hack, if it does load */
}

:where(.entry-content) .wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.ts-btn,
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.8em 1.6em;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(23, 22, 23, 0.08);
	cursor: pointer;
	transition: background-color 0.2s var(--wp--custom--ease), color 0.2s var(--wp--custom--ease), box-shadow 0.2s var(--wp--custom--ease);
}

.ts-btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--paper);
}

/* Secondary: paper with a semi-transparent ring, not a border. */
.ts-btn--secondary,
.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px rgba(23, 22, 23, 0.06), inset 0 0 0 1px var(--wp--custom--line);
}

.ts-btn--secondary:hover,
.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 3px rgba(23, 22, 23, 0.1), inset 0 0 0 1px rgba(23, 22, 23, 0.3);
}

/* On dark grounds: a white ring that fills on hover. */
.ts-btn--on-dark {
	background: transparent;
	color: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--paper);
}

.ts-btn--on-dark:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   6. Section system

   Every ACF block renders through ts_sec_attrs(), which emits these classes.

   Two gaps, and only two, between things on a page (D-036):
     24px        related things: title → content, text → text, intro → player
     group gap   one group → the next (48px phone → 64px desktop)

   Sections space themselves with MARGINS, not padding, so the gap to any
   neighbour (a paragraph, an image, another section) is one value and
   adjacent gaps collapse instead of adding up. The first and last blocks sit
   on the page frame: page-top above, one section gap to the footer below.

   Space above/below controls:  none = 24px · small = 32px · default = group
   gap · large = section. When two neighbours ask for different gaps, the
   larger one wins (margin collapse).
   -------------------------------------------------------------------------- */

.ts-sec {
	padding-block: 0;
}

/* Specificity is held at one class (:where) so the first/last-child rules
   below always win, whatever spacing options a section carries. */
.entry-content > :where(.ts-sec) {
	margin-block: var(--wp--custom--group-gap);
}

.entry-content > :where(.ts-sec.ts-pt-none)  { margin-block-start: var(--wp--style--block-gap, 1.5rem); }
.entry-content > :where(.ts-sec.ts-pt-small) { margin-block-start: var(--wp--preset--spacing--50); }
.entry-content > :where(.ts-sec.ts-pt-large) { margin-block-start: var(--wp--custom--section); }

.entry-content > :where(.ts-sec.ts-pb-none)  { margin-block-end: var(--wp--style--block-gap, 1.5rem); }
.entry-content > :where(.ts-sec.ts-pb-small) { margin-block-end: var(--wp--preset--spacing--50); }
.entry-content > :where(.ts-sec.ts-pb-large) { margin-block-end: var(--wp--custom--section); }

/* Galleries are their own group, like a section. */
.entry-content > :where(.wp-block-gallery) {
	margin-block: var(--wp--custom--group-gap);
}

/* Coloured sections carry the gap inside their colour as well. */
.ts-sec.ts-bg-band,
.ts-sec.ts-bg-dark {
	padding-block: var(--wp--custom--group-gap);
}

/* First and last blocks sit on the page frame. Declared after the rules above
   so they win at equal specificity. */
.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

.ts-bg-band {
	background: var(--wp--preset--color--band);
}

.ts-bg-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.ts-bg-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--paper);
}

/* Red on ink is ~3:1, too low for text (DESIGN.md). Links go white, underlined. */
.ts-bg-dark a:not(.ts-btn) {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.ts-block-placeholder {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: inset 0 0 0 1px var(--wp--custom--line);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* --------------------------------------------------------------------------
   7. Core block styles (inc/block-styles.php)
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-ts-band {
	background: var(--wp--preset--color--band);
	padding: var(--wp--preset--spacing--60) var(--wp--custom--gutter);
}

.wp-block-group.is-style-ts-panel {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 1px 2px rgba(23, 22, 23, 0.06), inset 0 0 0 1px var(--wp--custom--line);
}

.is-style-ts-panel > :first-child { margin-block-start: 0; }
.is-style-ts-panel > :last-child  { margin-block-end: 0; }

/* Gallery · 3:2 crop grid, 1 → 2 → 4 columns. */
.wp-block-gallery.is-style-ts-grid.has-nested-images {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 40em) {
	.wp-block-gallery.is-style-ts-grid.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.wp-block-gallery.is-style-ts-grid.has-nested-images { grid-template-columns: repeat(4, 1fr); }
}

.wp-block-gallery.is-style-ts-grid.has-nested-images figure.wp-block-image {
	width: auto !important; /* core sets a calc() width per column count */
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

/* Core styles gallery captions as if they sat on top of the photo: a blurred
   strip across the bottom of the image (a ::before with backdrop-filter) and a
   black text-shadow on the caption. Our captions sit below the photo, so both
   are just smear: the strip blurs the bottom of every photo, and the shadow
   makes the caption look fuzzy and heavier than the same size text elsewhere.
   Off for both gallery styles. */
.wp-block-gallery.has-nested-images.is-style-ts-grid figure.wp-block-image::before,
.wp-block-gallery.has-nested-images.is-style-ts-grid-credits figure.wp-block-image::before {
	content: none;
}

.wp-block-gallery.has-nested-images.is-style-ts-grid figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images.is-style-ts-grid-credits figure.wp-block-image figcaption {
	text-shadow: none;
}

/* No hover zoom, shadow or filter on gallery photos: they stay still and sharp. */
.wp-block-gallery.is-style-ts-grid.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Grid · 3:2 with credits — the Gallery page. Same crop, but the caption sits
   under the photo instead of overlaying it, and subgrid keeps the photos level
   when a credit wraps to two lines. */
.wp-block-gallery.is-style-ts-grid-credits.has-nested-images {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (min-width: 40em) {
	.wp-block-gallery.is-style-ts-grid-credits.has-nested-images { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.wp-block-gallery.is-style-ts-grid-credits.has-nested-images { grid-template-columns: repeat(3, 1fr); }
}

.wp-block-gallery.is-style-ts-grid-credits.has-nested-images figure.wp-block-image {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: var(--wp--preset--spacing--20);
	align-content: start;
	width: auto !important; /* core sets a calc() width per column count */
	margin: 0;
}

.wp-block-gallery.is-style-ts-grid-credits.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-gallery.is-style-ts-grid-credits.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	/* Same treatment as a blog excerpt: body size and colour (D-046). */
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	text-align: center;
	overflow: visible;
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */

.ts-input {
	width: 100%;
	min-width: 0;
	padding: 0.8em 1.25em;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1rem; /* 16px: stops iOS zooming the page on focus */
	line-height: 1.2;
	box-shadow: inset 0 0 0 1px #767676; /* 4.5:1 on paper */
}

.ts-input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.ts-signup {
	width: 100%;
	max-width: 26rem;
	margin-inline: auto;
	text-align: center;
}

.ts-signup__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ts-signup__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.ts-signup__row .ts-btn {
	width: 100%;
}

.ts-signup__msg {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.ts-signup__msg:empty {
	display: none;
}

.ts-signup__msg[data-state="success"] {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.ts-signup__msg[data-state="error"] {
	font-weight: 500;
	color: var(--wp--preset--color--accent-deep);
}

.ts-on-dark .ts-signup__msg[data-state] {
	color: var(--wp--preset--color--paper);
}

.ts-signup[aria-busy="true"] .ts-btn {
	opacity: 0.7;
	cursor: progress;
}

/* --------------------------------------------------------------------------
   8a. Gallery lightbox (assets/js/gallery.js)

   Replaces core's single-image lightbox so a visitor can move through the whole
   set: arrows, ← →, or a swipe (D-044).
   -------------------------------------------------------------------------- */

.ts-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100svh;
	max-height: 100svh;
	padding: 0;
	border: 0;
	background: rgba(23, 22, 23, 0.97);
	color: var(--wp--preset--color--paper);
	overflow: hidden;
}

.ts-lightbox::backdrop {
	background: rgba(23, 22, 23, 0.97);
}

/* Photo, caption and counter as one centred group, so the caption always sits
   directly under the photo rather than at the bottom of the screen. */
.ts-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	height: 100%;
	padding: clamp(16px, 4vw, 40px) clamp(56px, 8vw, 104px);
}

.ts-lightbox__img {
	flex: 0 1 auto;
	min-height: 0;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--card);
}

.ts-lightbox__caption {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.82);
	text-align: center;
}

.ts-lightbox__close,
.ts-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	transition: background-color 0.2s var(--wp--custom--ease);
}

.ts-lightbox__close:hover,
.ts-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.26);
}

.ts-lightbox__close {
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	width: 44px;
	height: 44px;
}

.ts-lightbox__nav {
	top: 50%;
	width: 52px;
	height: 52px;
	transform: translateY(-50%);
}

.ts-lightbox__nav--prev { left: var(--wp--preset--spacing--30); }
.ts-lightbox__nav--next { right: var(--wp--preset--spacing--30); }

/* In the stage grid, under the caption: the two never overlap. */
.ts-lightbox__count {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

.ts-lightbox :where(button):focus-visible {
	outline: 3px solid var(--wp--preset--color--paper);
	outline-offset: 2px;
}

@media (max-width: 47.99em) {
	.ts-lightbox__stage {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30) var(--wp--preset--spacing--70);
	}

	.ts-lightbox__nav {
		width: 44px;
		height: 44px;
	}
}

/* --------------------------------------------------------------------------
   8b. Popup (inc/popup.php)
   -------------------------------------------------------------------------- */

.ts-popup {
	width: min(92vw, 30rem);
	max-height: 90svh;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--text);
	box-shadow: 0 24px 64px rgba(23, 22, 23, 0.35);
	overflow: auto;
}

.ts-popup::backdrop {
	background: rgba(23, 22, 23, 0.6);
}

.ts-popup[open] {
	animation: ts-popup-in 0.25s var(--wp--custom--ease);
}

@keyframes ts-popup-in {
	from { opacity: 0; transform: translateY(12px); }
}

.ts-popup__inner {
	position: relative;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-align: center;
}

.ts-popup__close {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.ts-popup__close:hover {
	background: var(--wp--preset--color--band);
}

.ts-popup__img {
	display: block;
	width: min(100%, 260px);
	height: auto;
	margin: 0 auto var(--wp--preset--spacing--40);
}

.ts-popup__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--heading-l);
}

.ts-popup__text {
	max-width: 34ch;
	margin: 0 auto var(--wp--preset--spacing--40);
}

.ts-popup .ts-signup {
	max-width: none;
}

/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.ts-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ts-on-dark .ts-input {
	background: transparent;
	color: var(--wp--preset--color--paper);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

.ts-on-dark .ts-input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

:root { --ts-admin-bar: 0px; }
body.admin-bar { --ts-admin-bar: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar { --ts-admin-bar: 46px; }
}

.ts-header {
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--paper);
	padding-block: var(--wp--preset--spacing--40);
}

.ts-header__bar {
	gap: var(--wp--preset--spacing--40);
}

/* Logo is a 4538×1509 PNG wordmark; its display width is set here, and core's
   srcset serves a sensible file. Above the overlay so it stays visible when the
   mobile menu is open (core puts the overlay at z-index 100000). */
.ts-header .wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

.ts-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

/* 224px = the original 140px + 60% (requested 2026-09-15). */
.ts-header .wp-block-site-logo img {
	width: 224px;
	height: auto;
}

.ts-nav {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

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

.ts-nav a:hover,
.ts-nav .current-menu-item > a,
.ts-nav a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* --------------------------------------------------------------------------
   10. Mobile menu (ported from DNH D-039/D-040)

   The header logo is 224px, so eight menu items only fit on one row from 64em
   (1024px). Core's "mobile" overlay switches at a fixed 600px, which wrapped
   the menu onto two rows at tablet widths. The block is set to "always" and
   this file decides the breakpoint instead: hamburger below 64em, inline menu
   from 64em. The hamburger is the only visible control; its three bars fold
   into a cross (assets/js/nav.js).
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
	.ts-nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.ts-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: relative;
		inset: auto;
		z-index: auto;
		width: 100%;
		background: transparent;
	}

	.ts-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

@media (max-width: 63.99em) {
	.ts-nav .wp-block-navigation__responsive-container {
		display: flex;
		flex-direction: column;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	}

	.ts-nav .wp-block-navigation__responsive-container.is-menu-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		padding-top: calc(var(--ts-admin-bar) + 7rem);
		background: var(--wp--preset--color--paper);
		transition: opacity 0.28s ease, visibility 0s linear 0s;
	}

	.ts-nav .wp-block-navigation__responsive-container-close { display: none; }
	.ts-nav .wp-block-navigation__responsive-container-open svg { display: none; }

	.ts-nav .wp-block-navigation__responsive-container-open {
		position: relative;
		z-index: 100002;
		width: 44px;
		height: 44px;
		margin-right: -9px;
		padding: 0;
		color: var(--wp--preset--color--ink);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.ts-nav .wp-block-navigation__responsive-container-open::before,
	.ts-nav .wp-block-navigation__responsive-container-open::after,
	.ts-nav .ts-burger__bar {
		content: "";
		position: absolute;
		left: 9px;
		right: 9px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.3s cubic-bezier(0.68, -0.4, 0.27, 1.4), opacity 0.16s ease;
	}

	.ts-nav .wp-block-navigation__responsive-container-open::before { top: 13px; }
	.ts-nav .wp-block-navigation__responsive-container-open::after  { bottom: 13px; }

	.ts-nav .ts-burger__bar {
		top: 50%;
		margin-top: -1px;
	}

	.ts-nav .wp-block-navigation__responsive-container-open.is-active::before { transform: translateY(8px) rotate(45deg); }
	.ts-nav .wp-block-navigation__responsive-container-open.is-active::after  { transform: translateY(-8px) rotate(-45deg); }
	.ts-nav .wp-block-navigation__responsive-container-open.is-active .ts-burger__bar { opacity: 0; transform: scaleX(0); }

	.ts-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}

	.ts-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--heading-m);
		font-weight: 600;
	}

	.ts-nav .wp-block-navigation__responsive-dialog,
	.ts-nav .wp-block-navigation__responsive-container-content {
		align-items: center !important;
	}
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.ts-footer {
	padding-block: var(--wp--custom--section);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-align: center;
}

.ts-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	align-items: start;
	justify-items: center;
}

@media (min-width: 48em) {
	.ts-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
	.ts-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

.ts-footer__grid > * {
	margin: 0 !important; /* flow layout adds block-gap margins; the grid owns spacing */
	width: 100%;
}

.ts-footer .wp-block-site-logo img {
	width: 224px;
	height: auto;
}

.ts-footer .wp-block-site-logo a {
	display: inline-block;
	line-height: 0;
}

.ts-footer :where(h2, h3, h4) {
	color: var(--wp--preset--color--paper);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ts-footer a:not(.ts-btn) {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 0.2em;
}

.ts-footer a:not(.ts-btn):hover {
	text-decoration-color: currentColor;
}

.ts-footer :where(a, button, input, [tabindex]):focus-visible,
.ts-bg-dark :where(a, button, input, [tabindex]):focus-visible,
.ts-on-dark :where(a, button, input, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* Contacts */
.ts-contacts {
	font-size: var(--wp--preset--font-size--small);
}

.ts-contacts__group + .ts-contacts__group {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ts-contacts__role {
	margin: 0;
	font-weight: 500;
}

.ts-contacts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-contacts__list a {
	overflow-wrap: anywhere;
}

/* Social: logos only, in the current text colour rather than brand colours. */
.ts-social.wp-block-social-links {
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	justify-content: center;
}

.ts-social.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentColor;
	background: none;
}

.ts-social.wp-block-social-links .wp-social-link svg {
	width: 22px;
	height: 22px;
}

.ts-social.wp-block-social-links .wp-block-social-link-anchor {
	padding: 4px;
}

/* --------------------------------------------------------------------------
   12. News cards (templates/home.html, archive.html, search.html)
   -------------------------------------------------------------------------- */

.ts-cards .wp-block-post-template {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	text-align: center;
}

@media (max-width: 47.99em) {
	.ts-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 48em) and (max-width: 63.99em) {
	.ts-cards .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Each card borrows the row's tracks (subgrid), so image, title, date and
   excerpt line up across a row even when one title wraps to two lines.
   Without it, dates in the same row sat up to 25px apart. */
.ts-cards .wp-block-post-template.is-layout-grid > li {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
}

.ts-card__media {
	margin: 0 0 var(--wp--preset--spacing--30);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--band);
	box-shadow: inset 0 0 0 1px var(--wp--custom--line);
}

.ts-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--wp--custom--ease);
}

.ts-card__media a:hover img {
	transform: scale(1.03);
}

.ts-cards .wp-block-post-title {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.ts-cards .wp-block-post-title a,
.wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ts-cards .wp-block-post-title a:hover,
.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.ts-meta,
.ts-cards .wp-block-post-date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ts-cards .wp-block-post-excerpt {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ts-cards .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-post-excerpt__more-text {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-post-excerpt__more-link {
	font-weight: 500;
	text-decoration: none;
}

.wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

.ts-pagination.wp-block-query-pagination {
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--70);
	font-weight: 500;
}

.ts-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.ts-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.ts-pagination a {
	text-decoration: none;
}

.ts-pagination a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. Single post
   -------------------------------------------------------------------------- */

/* Title → content is one group gap on every page, posts included (D-038). */
.ts-single__head {
	text-align: center;
	margin-block-end: var(--wp--custom--group-gap);
}

.ts-backlink {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.ts-backlink a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ts-backlink a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.ts-single__head .wp-block-post-title {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ts-postnav {
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--custom--group-gap);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--line);
	font-size: var(--wp--preset--font-size--small);
}

.ts-postnav > * {
	max-width: 24rem;
}

.ts-postnav a {
	font-weight: 500;
	text-decoration: none;
}

.ts-postnav a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100010;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: 4px;
}

@media print {
	.ts-header, .ts-footer { display: none; }
	body { font-size: 11pt; }
}