/*
 * TRW Foundation — shared front-end and editor styles.
 * Tokens come from theme.json (CSS custom properties); this file covers
 * components that theme.json cannot express: header/footer chrome,
 * navigation refinements, cards, notices, forms, region UI, state styles.
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

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

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

/* Visible, consistent keyboard focus across the three sites. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 1px;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.skip-link,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 0.75rem; left: 0.75rem;
	width: auto; height: auto;
	clip: auto;
	z-index: 1000;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	padding: 0.6rem 1rem;
}

/* ------------------------------------------------------------------ */
/* Header — compact bar (target ≤80px desktop, 56–64px mobile)         */
/* ------------------------------------------------------------------ */

.site-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}
/* Kill WordPress inter-block gaps inside the header so the measured
   chrome is exactly the bar + (optional) open search panel. */
.site-header .wp-block-group,
.site-header .wp-block-group > * {
	margin-block-start: 0;
}
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	min-height: 72px;
	padding-block: 0.5rem;
}
.site-header__lead {
	display: flex;
	align-items: center;
	gap: 0.75rem 2rem;
	min-width: 0;
}
.site-header__brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--m);
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}
.site-header__brand a { text-decoration: none; }
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
}
/* Under large text (200% resize) the header cells must shrink and wrap
   instead of overflowing the constrained bar. */
.site-header__lead,
.site-header__centre,
.site-header__actions { min-width: 0; }
.site-header__actions { flex-wrap: wrap; row-gap: 0; }
.site-header__nav .wp-block-navigation__container { flex-wrap: wrap; }
.trw-search-toggle__label,
.trc-locale__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* AC: central navigation — three-lane flex row inside the bar. (A
   1fr/auto/1fr grid let the nav's auto track consume its max-content and
   push the actions lane past the bar edge at large text.) */
.site-header--asia .site-header__bar {
	display: flex;
	align-items: center;
}
.site-header--asia .site-header__lead,
.site-header--asia .site-header__actions { flex: 1 1 0; min-width: 0; }
.site-header--asia .site-header__centre { flex: 0 1 auto; min-width: 0; }
.site-header--asia .site-header__actions { justify-content: flex-end; }
/* CA: centred identity — nav left, brand centre, actions right. */
.site-header--cga .site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}
.site-header--cga .site-header__centre { justify-self: center; text-align: center; }
.site-header--cga .site-header__actions { justify-self: end; }
.site-header--cga .site-header__brand {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
}

/* On-demand search panel (no permanent row). */
.site-header__search {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block: 0.6rem;
}
.site-header__search[hidden] { display: none; }
.site-header__search .wp-block-search__inside-wrapper {
	max-width: 720px;
	margin-inline: auto;
}

/* Action buttons: SVG icons, ~44px touch target, visible focus. */
.trw-search-toggle,
.trc-locale__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0.35rem 0.5rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 4px;
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	color: inherit;
	cursor: pointer;
}
.trw-search-toggle:hover,
.trc-locale__trigger:hover {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface-alt, transparent);
}
.trw-search-toggle:focus-visible,
.trc-locale__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
.trw-search-toggle__label,
.trc-locale__label {
	letter-spacing: 0.04em;
	font-weight: 500;
}
@media (max-width: 600px) {
	.trw-search-toggle__label { display: none; }
	.site-header__bar { min-height: 60px; padding-block: 0.3rem; }
	/* Mobile column budget: the desktop 1fr/auto/1fr grid forced the
	   actions lane (search + account + bag + locale ≈ 200px) over the
	   centre brand at 320px. Collapse to nav | brand | actions with
	   shrinkable columns, and retire the secondary account/locale
	   controls into the navigation overlay (rendered there by the
	   trw-nav-extras injection). The bag control stays in the bar so the
	   item count remains visible. */
	.site-header--cga .site-header__bar {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	.site-header--asia .site-header__lead,
	.site-header--asia .site-header__centre,
	.site-header--cga .site-header__lead,
	.site-header--cga .site-header__centre,
	.site-header--asia .site-header__actions,
	.site-header--cga .site-header__actions { min-width: 0; }
	/* Shop bars only: account/locale move into the nav overlay on small
	   screens. The informational site keeps its in-bar locale trigger —
	   it fits within the 320px budget. */
	.site-header--asia .site-header__actions .wp-block-woocommerce-customer-account,
	.site-header--asia .site-header__actions .trc-locale,
	.site-header--cga .site-header__actions .wp-block-woocommerce-customer-account,
	.site-header--cga .site-header__actions .trc-locale { display: none; }
	.site-header__nav { min-width: 0; }
}
/* Controls injected into the mobile navigation overlay. The responsive
   container's content stays in the layout on desktop (position:static),
   so the extras must be display:none above the mobile breakpoint —
   visibility:hidden would still leak bounding boxes. */
.trw-nav-extras {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: stretch;
	width: 100%;
	gap: 0.5rem 1rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
@media (min-width: 600px) {
	.trw-nav-extras { display: none; }
}

/* Intermediate band: desktop grid is active above WP's 600px nav
   breakpoint, but inline nav + brand + four action controls need ~710px
   and overflow near 640px CSS width (e.g. 200% browser zoom). Force the
   collapsed (hamburger) presentation up to 780px so the bar never
   overflows; all controls stay reachable in the overlay. */
@media (min-width: 600px) and (max-width: 780px) {
	.site-header--asia .wp-block-navigation__responsive-container-open,
	.site-header--cga .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}
	.site-header--asia .wp-block-navigation__responsive-container:not(.is-menu-open),
	.site-header--cga .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}
.trw-nav-extras__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--s);
}
.trw-nav-extras .trc-locale { position: static; }
.trw-nav-extras .trc-locale__panel { inset-inline-start: 0; inset-inline-end: auto; }
/* Locale trigger compacts to icon-only on narrow screens so the action
   group never overflows; the panel still shows the full language name. */
@media (max-width: 480px) {
	.trc-locale__label, .trc-locale__caret { display: none; }
	.trc-locale__trigger { padding-inline: 0.55rem; }
}

/* Locale chooser panel — one compact trigger, spacious overlay. */
.trc-locale { position: relative; display: inline-flex; align-items: center; }
.trc-locale__panel {
	position: absolute;
	top: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 60;
	width: min(20rem, calc(100vw - 2rem));
	max-height: min(70vh, 34rem);
	overflow: auto;
	padding: 0.9rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.16);
}
.trc-locale__panel[hidden] { display: none; }
.trc-locale__heading {
	margin: 0.4rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.trc-locale__langs,
.trc-locale__regions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}
.trc-locale__regions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.trc-locale__langs form { margin: 0; }
.trc-locale__panel .trc-region__choice {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 0.5rem 0.55rem;
	min-height: 38px;
	background: transparent;
	border: 0;
	border-radius: 4px;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
}
.trc-locale__panel .trc-region__choice:hover {
	background: var(--wp--preset--color--surface-alt);
}
.trc-locale__panel .trc-region__choice:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.trc-locale__panel .trc-region__choice[aria-current="true"] {
	font-weight: 650;
	background: var(--wp--preset--color--accent-quiet);
}
.trc-locale__regions .trc-region__choice {
	width: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	min-height: 34px;
}
.trc-locale__geoact { margin-block-start: 0.8rem; }
.trc-locale__usegeo,
.trc-locale__geoapply {
	min-height: 38px;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--surface-alt);
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.trc-locale__usegeo:hover,
.trc-locale__geoapply:hover { border-color: var(--wp--preset--color--accent); }
.trc-locale__usegeo:focus-visible,
.trc-locale__geoapply:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.trc-locale__geostatus {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}
.trc-locale__geostatus .trc-locale__geoapply { margin-inline-start: 0.5rem; }
.trc-locale__hint {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}
.trc-locale__reset { margin-block-start: 0.7rem; }
.trc-locale__reset button {
	background: none;
	border: 0;
	padding: 0.2rem 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	cursor: pointer;
}

/* Navigation block refinement. */
.wp-block-navigation__container {
	gap: clamp(1rem, 2.5vw, 2rem);
}
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.4rem;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
}
/* Keep the overlay menu legible and high-contrast. */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--l);
}

/* ------------------------------------------------------------------ */
/* Main rhythm                                                         */
/* ------------------------------------------------------------------ */

.site-main {
	padding-block: clamp(2rem, 5vw, 4rem);
}
.site-main > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

h1.wp-block-post-title,
.wp-block-post-title a,
.wp-block-query-title {
	text-wrap: balance;
}
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--bronze);
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Cards, lists, index grids                                           */
/* ------------------------------------------------------------------ */

.trw-card-list > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.trw-card {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}
.trw-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--l);
}
.trw-card .wp-block-post-excerpt__more-text,
.trw-card .wp-block-post-excerpt__excerpt {
	margin-block-end: 0;
}
.trw-card a.wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--s);
}

/* Tile grid used by service/category sections. */
.trw-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}
.trw-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--accent);
	text-decoration: none;
	color: inherit;
	min-height: 10rem;
}
.trw-tile:hover {
	border-top-color: var(--wp--preset--color--bronze);
}
.trw-tile__kicker {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.trw-tile__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.25;
	margin: 0;
}
.trw-tile__text {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--muted);
	margin: 0;
}
/* Tiles as native groups (editable image + heading + text). The group is
   a plain flow container, so inner spacing is owned by .trw-tile__body. */
.trw-tiles--img .trw-tile {
	padding: 0;
	gap: 0;
	overflow: hidden;
	min-height: 0;
	border-top-width: 1px;
}
.trw-tiles--img .trw-tile > * { margin-block-start: 0; }
.trw-tiles--img .trw-tile .wp-block-image { margin: 0; overflow: hidden; }
.trw-tiles--img .trw-tile .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.trw-tiles--img .trw-tile__body { display: block; }
.trw-tiles--img .trw-tile__body > * { margin: 0; }
.trw-tiles--img .trw-tile__body > * + * { margin-block-start: 0.35rem; }
.trw-tiles--img .trw-tile__kicker,
.trw-tiles--img .trw-tile__title,
.trw-tiles--img .trw-tile__text { margin: 0; }
.trw-tiles--img .trw-tile__title a {
	color: inherit;
	text-decoration: none;
}
.trw-tiles--img .trw-tile:hover .trw-tile__title a,
.trw-tiles--img .trw-tile__title a:hover {
	color: var(--wp--preset--color--accent-deep);
}
.trw-tiles--four { grid-template-columns: repeat(4, 1fr); }
.trw-tiles--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) {
	.trw-tiles, .trw-tiles--four, .trw-tiles--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.trw-tiles, .trw-tiles--four, .trw-tiles--three { grid-template-columns: 1fr; }
}

/* Text-only tool tiles (finder/compare/wishlist) — same tile language
   without an image stage. */
.trw-tile--tool { min-height: 0; }
.trw-tile--tool .trw-tile__title a {
	color: inherit;
	text-decoration: none;
}
.trw-tile--tool:hover .trw-tile__title a,
.trw-tile--tool .trw-tile__title a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* Category chip row — early catalogue navigation under a shop hero. */
.trw-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-block: clamp(1.25rem, 3vw, 2rem);
}
.trw-cats__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.05rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.trw-cats__chip:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-quiet);
	color: var(--wp--preset--color--ink);
}
.trw-cats__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Design-preview notice (site-wide, injected via wp_body_open)        */
/* ------------------------------------------------------------------ */

.trw-preview {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-align: center;
	padding-block: 0.15rem;
	padding-inline: 0.75rem;
}
@media (max-width: 480px) {
	.trw-preview { font-size: 11px; letter-spacing: 0.01em; }
}
.trw-preview p { margin: 0; }
.trw-preview strong { font-weight: 600; }

/* Language-specific text shaping. No uppercase/letter-spacing imposed on
   CJK/Thai scripts; kickers relax their tracking under these languages. */
body.trc-lang .trw-tile__kicker,
body.trc-lang .trw-hero__kicker,
body.trc-lang .site-header__brand,
body.trc-lang .trc-locale__heading,
body.trc-lang h4 { letter-spacing: 0.02em; }
body.trc-lang .trw-tile__kicker,
body.trc-lang .trw-hero__kicker,
body.trc-lang .trc-locale__heading,
body.trc-lang h4 { text-transform: none; }

body.trc-lang-zh_hant,
body.trc-lang-zh_hant input, body.trc-lang-zh_hant button,
body.trc-lang-zh_hant textarea, body.trc-lang-zh_hant select {
	font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",var(--wp--preset--font-family--body);
}
body.trc-lang-zh_hans,
body.trc-lang-zh_hans input, body.trc-lang-zh_hans button,
body.trc-lang-zh_hans textarea, body.trc-lang-zh_hans select {
	font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",var(--wp--preset--font-family--body);
}
body.trc-lang-ja,
body.trc-lang-ja input, body.trc-lang-ja button,
body.trc-lang-ja textarea, body.trc-lang-ja select {
	font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,var(--wp--preset--font-family--body);
}
body.trc-lang-ja h1, body.trc-lang-ja h2, body.trc-lang-ja h3,
body.trc-lang-ja .wp-block-heading { font-weight: 600; letter-spacing: 0; }
body.trc-lang-ko,
body.trc-lang-ko input, body.trc-lang-ko button,
body.trc-lang-ko textarea, body.trc-lang-ko select {
	font-family: "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",var(--wp--preset--font-family--body);
}
body.trc-lang-th,
body.trc-lang-th input, body.trc-lang-th button,
body.trc-lang-th textarea, body.trc-lang-th select {
	font-family: "Noto Sans Thai",Tahoma,var(--wp--preset--font-family--body);
	line-height: 1.8;
}
body.trc-lang-th h1, body.trc-lang-th h2 { line-height: 1.4; }

/* i18n variant + fallback notice blocks */
.trc-i18n-gap p { font-weight: 600; }
.trc-i18n-status { margin-block-end: 1rem; }
.trc-i18n-source { opacity: 0.92; }

/* ------------------------------------------------------------------ */
/* Imagery                                                             */
/* ------------------------------------------------------------------ */

figure { margin: 0; }

.wp-block-image figcaption,
figcaption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	padding-block-start: 0.5rem;
	line-height: 1.45;
}

/* Cover heroes: let the overlay carry text without cramped contrast. */
.wp-block-cover .wp-block-cover__inner-container {
	width: 100%;
}
.trw-cover-title {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	max-width: 34rem;
}
.trw-cover-title .trw-hero__kicker,
.trw-cover-title .trw-hero__lede,
.trw-cover-title .trw-hero__title { margin: 0; }
.trw-cover-title .trw-hero__title { margin-block: 0.35rem 0.75rem; }
.trw-cover-title .trw-hero__lede { font-size: var(--wp--preset--font-size--m); }

/* Cards with imagery (query loops and route tiles share the shell). */
.trw-card--img {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.trw-card--img .wp-block-post-featured-image {
	margin: 0;
}
.trw-card--img .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}
.trw-card__body {
	padding: 1.1rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}
.trw-card__body .wp-block-post-title {
	font-size: var(--wp--preset--font-size--l);
	margin: 0;
}
.trw-card__body .wp-block-post-excerpt,
.trw-card__body .wp-block-post-excerpt p,
.trw-card__body .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--muted);
}

/* Media/text splits — slightly airier than the block default. */
.wp-block-media-text .wp-block-media-text__content { padding: clamp(1.25rem, 4vw, 3rem); }
.wp-block-media-text .wp-block-media-text__media img { height: 100%; object-fit: cover; }

/* Quiet full-bleed image band between sections. */
.trw-band {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-block: clamp(2rem, 6vw, 4.5rem);
}
.trw-band img {
	width: 100%;
	max-height: 62vh;
	object-fit: cover;
	display: block;
}
.trw-band figcaption { max-width: var(--wp--style--global--content-size); margin-inline: auto; }

/* Front-page flow: sections at wide size, prose at reading measure. */
.trw-flow {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.trw-flow > * + * { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }
.trw-prose { max-width: 46rem; }

/* Post-template card grids and section headings (shared by front pages and indexes). */
.trw-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.trw-section-head {
	font-size: var(--wp--preset--font-size--xl);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block-start: 1.25rem;
	margin-block-end: var(--wp--preset--spacing--40);
}
.trw-more a { font-size: var(--wp--preset--font-size--s); }
@media (max-width: 880px) {
	.trw-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.trw-cards { grid-template-columns: 1fr; }
}
/* Front page in default layout: no global padding, hero reaches the edges. */
.site-main--front {
	padding-block: 0;
	padding-inline: 0;
}
.site-main--front .wp-block-post-content > * + * { margin-block-start: 0; }

/* Editorial hero (text-only variant, kept for fallback use) */

.trw-hero {
	padding-block: clamp(2.5rem, 7vw, 6rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.trw-hero__kicker {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}
.trw-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.08;
	font-weight: 400;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}
.trw-hero__lede {
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	max-width: 46rem;
	margin: 0;
}

/* Bronze rule used sparingly as decoration (never as text colour). */
.trw-rule {
	border: 0;
	border-top: 2px solid var(--wp--preset--color--bronze);
	width: 3.5rem;
	margin: 1.75rem 0;
}

/* ------------------------------------------------------------------ */
/* Notices and state surfaces                                          */
/* ------------------------------------------------------------------ */

.trw-notice {
	display: flex;
	gap: 0.75rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--s);
}
.trw-notice--warn { border-left-color: var(--wp--preset--color--bronze); }
.trw-notice--error { border-left-color: var(--wp--preset--color--error); }
.trw-notice--success { border-left-color: var(--wp--preset--color--success); }
.trw-notice p { margin: 0; }

.trw-empty {
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px dashed var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.trw-form {
	display: grid;
	gap: 1.1rem;
	max-width: 38rem;
}
.trw-field { display: grid; gap: 0.4rem; }
.trw-field label {
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
}
.trw-field .trw-req { color: var(--wp--preset--color--error); }
.trw-field input[type="text"],
.trw-field input[type="email"],
.trw-field select,
.trw-field textarea,
.wp-block-search__input {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.7rem 0.85rem;
	border-radius: 0;
}
.trw-field textarea { min-height: 9rem; resize: vertical; }
.trw-field :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.trw-field .trw-error-text {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--error);
}
.trw-field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
}
.trw-form__actions { margin-block-start: 0.25rem; }
.trw-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Search block */
.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-search__button {
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ */
/* Region & language UI (rendered by trc-regional-content)             */
/* ------------------------------------------------------------------ */

.trc-region {
	font-size: var(--wp--preset--font-size--s);
}
.trc-region__current {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--muted);
}
.trc-region__current strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.trc-region__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}
.trc-region__list form { margin: 0; }
.trc-region__choice {
	font: inherit;
	font-size: var(--wp--preset--font-size--s);
	text-align: left;
	background: none;
	border: 0;
	padding: 0.15rem 0;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.trc-region__choice:hover { color: var(--wp--preset--color--ink); }
.trc-region__choice[aria-current="true"] {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}
.trc-region__reset {
	margin-block-start: 0.9rem;
}
.trc-region__reset .trc-region__choice {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

/* Compact header variant: native details works without JS. */
.trc-region--compact details { position: relative; }
.trc-region--compact summary {
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--ink);
	padding: 0.3rem 0.4rem;
	border: 1px solid transparent;
}
.trc-region--compact summary::-webkit-details-marker { display: none; }
.trc-region--compact summary::after {
	content: "▾";
	margin-inline-start: 0.35em;
	font-size: 0.75em;
	color: var(--wp--preset--color--muted);
}
.trc-region--compact details[open] summary {
	border-color: var(--wp--preset--color--line);
	border-bottom: 0;
}
.trc-region--compact .trc-region__panel {
	position: absolute;
	right: 0;
	z-index: 60;
	min-width: 16rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.9rem 1.1rem;
}

/* Region suggestion banner — non-blocking, dismissible. */
.trc-suggest {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--s);
}
.trc-suggest__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding-block: 0.7rem;
}
.trc-suggest p { margin: 0; }
.trc-suggest form { display: inline; }
.trc-suggest .trc-suggest__btn {
	font: inherit;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0.35rem 0.9rem;
	cursor: pointer;
}
.trc-suggest .trc-suggest__stay {
	color: var(--wp--preset--color--base);
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--s);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
	padding: 0.35rem 0.25rem;
}
.trc-suggest .trc-suggest__btn:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
.trc-suggest .trc-suggest__stay:hover { color: var(--wp--preset--color--base); opacity: 0.8; }

/* Profile notice strip (per-region public notice text). */
.trc-profile-notice {
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--accent-quiet);
	font-size: var(--wp--preset--font-size--s);
}
.trc-profile-notice p { margin: 0; padding-block: 0.55rem; }

/* Breadcrumbs */
.trc-breadcrumbs {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--40);
}
.trc-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: 0;
}
.trc-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: 0.4rem;
	color: var(--wp--preset--color--line);
}
.trc-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.trc-breadcrumbs a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.trc-breadcrumbs [aria-current] { color: var(--wp--preset--color--ink); }

/* Contact summary block */
.trc-contact-summary {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--muted);
	display: grid;
	gap: 0.3rem;
	margin-block-start: 1rem;
}
.trc-contact-summary strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.trc-contact-summary a { color: var(--wp--preset--color--muted); }
.trc-contact-summary a:hover { color: var(--wp--preset--color--accent); }

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

.site-footer {
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
}
.site-footer__columns {
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
}
.site-footer__legal {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-block-start: 1.25rem;
	gap: 0.75rem 2rem;
}
.site-footer__legal p { margin: 0; }
.site-footer__links a { color: var(--wp--preset--color--muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* Footer preference form — labelled native selects + explicit Apply.
   Arrow-key browsing never navigates; the POST handles it server-side. */
.trc-prefs {
	display: grid;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--s);
}
.trc-prefs__field { display: grid; gap: 0.3rem; }
.trc-prefs__field label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.trc-prefs__field select {
	font: inherit;
	font-size: var(--wp--preset--font-size--s);
	min-height: 44px;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	max-width: 100%;
}
.trc-prefs__field select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.trc-prefs__field select option[disabled] { color: var(--wp--preset--color--muted); }
.trc-prefs__apply {
	justify-self: start;
	min-height: 44px;
	padding: 0.5rem 1.4rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.trc-prefs__apply:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.trc-prefs__apply:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 2px;
}
/* A language that the chosen region doesn't offer stays selectable in
   markup (server still validates) but is marked unavailable visually. */
.trc-prefs__field select option.trc-prefs__off { color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ */
/* Misc                                                                */
/* ------------------------------------------------------------------ */

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--s);
	gap: 1rem;
}
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination a:hover { text-decoration: underline; }
.wp-block-query-pagination .page-numbers.current { font-weight: 700; }

.wp-block-post-terms { font-size: var(--wp--preset--font-size--xs); letter-spacing: 0.1em; text-transform: uppercase; }
.wp-block-post-terms a { color: var(--wp--preset--color--muted); text-decoration: none; }

@media (max-width: 600px) {
	.site-footer__columns { flex-direction: column; }
	.trc-region--compact .trc-region__panel { position: static; min-width: 0; margin-block-start: 0.5rem; }
}

/* ------------------------------------------------------------------ */
/* Interaction system — links, buttons, surfaces, motion               */
/* ------------------------------------------------------------------ */

/* Links: underlined, accent, readable offset; hover deepens. */
a {
	color: var(--wp--preset--color--accent);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease, background-color 0.15s ease;
}
a:hover { color: var(--wp--preset--color--accent-deep); }

/* Buttons: quiet transition + pressed state; outline variant via body class. */
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wp-element-button:hover {
	background: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--on-dark);
}
.wp-element-button:active { transform: translateY(1px); }
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 2px;
}
body.trw-btn-outline .wp-block-button:not(.is-style-fill) .wp-block-button__link,
body.trw-btn-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
}
body.trw-btn-outline .wp-element-button:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-dark);
}

/* Text links inside navigation/utility areas stay quiet. */
.site-header a { text-decoration: none; }
.site-header a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); }

/* Focus visibility — one consistent ring everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-deep);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Image cards & tiles: subtle motion only when enabled. */
.trw-card--img .wp-block-post-featured-image img,
.trw-tiles--img .wp-block-image img,
.trw-tiles--img .trw-tile img {
	transition: transform 0.35s ease, filter 0.35s ease;
}
body.trw-img-hover .trw-card--img:hover .wp-block-post-featured-image img,
body.trw-img-hover .trw-tiles--img .trw-tile:hover .wp-block-image img,
body.trw-img-hover .trw-tiles--img .trw-tile:hover img {
	transform: scale(1.03);
}
.trw-card--img:hover, .trw-tiles--img .trw-tile:hover {
	border-color: var(--wp--preset--color--accent);
}
.trw-card, .trw-tile { transition: border-color 0.18s ease, background-color 0.18s ease; }

/* ------------------------------------------------------------------ */
/* Header surfaces, sticky header, utility ordering                    */
/* ------------------------------------------------------------------ */

body.trw-hdr-paper .site-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
body.trw-hdr-tint .site-header {
	background: var(--wp--preset--color--accent-quiet);
}
body.trw-hdr-dark .site-header {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}
body.trw-hdr-dark .site-header a,
body.trw-hdr-dark .site-header .wp-block-site-title a,
body.trw-hdr-dark .site-header .wp-block-site-tagline,
body.trw-hdr-dark .site-header .trc-region summary,
body.trw-hdr-dark .site-header .trw-search-toggle,
body.trw-hdr-dark .site-header .trc-locale__trigger,
body.trw-hdr-dark .site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--on-dark);
}
body.trw-hdr-dark .site-header a:hover { color: var(--wp--preset--color--accent-quiet); }
/* The chooser panel stays a light card even on a dark header. */
.trc-locale__panel {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

/* Sticky header — normal flow is preserved (no layout jump); anchor
   targets get a scroll margin so headings are not covered. */
body.trw-sticky .site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
body.trw-sticky.trw-hdr-paper .site-header { background: var(--wp--preset--color--surface); }
body.trw-sticky.trw-hdr-tint .site-header { background: var(--wp--preset--color--accent-quiet); }
body.trw-sticky.trw-hdr-dark .site-header { background: var(--wp--preset--color--ink); }
body.trw-sticky :where(section, [id]) { scroll-margin-top: 6.5rem; }
@media (max-width: 720px) {
	body.trw-sticky .site-header__inner { padding-block: 0.5rem; }
}

/* Show/hide optional header controls (footer routes remain). */
body.trw-hide-search .site-header .trw-search-toggle,
body.trw-hide-search .site-header .site-header__search { display: none; }
body.trw-hide-utility .site-header .trw-u-note,
body.trw-hide-utility .site-header .wp-block-site-tagline { display: none; }

/* Utility items carry .trw-u-* on a real box so emitted flex `order`
   values can reorder them within their header row. */

/* Compact inline search for header utility rows. */
.site-header .wp-block-search {
	display: flex;
	align-items: center;
}
.site-header .wp-block-search .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--line);
}
.site-header .wp-block-search__input { min-width: 0; }

/* ------------------------------------------------------------------ */
/* Motion — reveal effect and the global off-switch                    */
/* ------------------------------------------------------------------ */

.trw-reveal-armed .trw-reveal {
	opacity: 0;
	transform: translateY(14px);
}
.trw-reveal-armed .trw-reveal.trw-is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

body.trw-motion-minimal *,
body.trw-motion-minimal *::before,
body.trw-motion-minimal *::after {
	transition-duration: 0.01ms !important;
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
}
body.trw-motion-minimal .trw-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.trw-reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Appearance control — type pairing + density (approved local stacks) */
/* ------------------------------------------------------------------ */

body.trw-font-sans {
	--wp--preset--font-family--display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.trw-font-sans .wp-block-heading,
body.trw-font-sans h1, body.trw-font-sans h2, body.trw-font-sans h3,
body.trw-font-sans h4, body.trw-font-sans h5, body.trw-font-sans h6 {
	letter-spacing: -0.01em;
}
body.trw-font-reader {
	--wp--preset--font-family--body: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
}
body.trw-density-relaxed {
	line-height: 1.75;
}
body.trw-density-relaxed p { line-height: 1.75; }

/* Variant pages: lede + retained editorial figure + translated body. */
.trc-i18n-variant .trw-hero__lede { margin-block-end: 1.25rem; }
.trc-i18n-fig { margin: 0 0 1.5rem; }
.trc-i18n-fig img {
	width: 100%; max-height: 52vh; object-fit: cover;
	border-radius: 3px; border: 1px solid var(--wp--preset--color--line);
}
/* Only unclassed paragraphs get the prose cap — component paragraphs
   (kickers, ledes, card labels) carry their own widths; forcing 68ch on
   them shifts translated layouts away from the English original. */
.trc-i18n-variant p:not([class]) { max-width: 68ch; }

/* Category chip strip tucks directly beneath the front-page hero. */
.trw-flow--chips > * + * { margin-block-start: clamp(1rem, 3vw, 1.75rem); }