/**
 * Trish Traveler's Hub — components
 *
 * theme.json owns the tokens (colour, type, spacing). This file owns the things it
 * can't express: the boarding-pass card, the flight-path hero, and the section
 * layouts built on top of them.
 *
 * Palette discipline, per the brief:
 *   red dominates (bands + primary actions), blue supports (links, tags),
 *   yellow marks a detail (stamps, badges). Cloud carries the page so the red
 *   reads confident rather than overwhelming. Blue and yellow never touch at full
 *   saturation — there is always Cloud or Ink between them.
 */

:root {
	--tth-ink: var(--wp--preset--color--ink, #241a16);
	--tth-red: var(--wp--preset--color--signal-red, #c42b25);
	--tth-red-dark: #a32320;
	--tth-cloud: var(--wp--preset--color--cloud, #f5f6f3);
	--tth-blue: var(--wp--preset--color--runway-blue, #1c3f73);
	--tth-yellow: var(--wp--preset--color--sunrise-yellow, #f2b705);
	--tth-line: var(--wp--preset--color--paper-line, #d8d4c8);
	--tth-muted: #6b5f58;

	/* Background the ticket notches are punched against. */
	--tth-notch-bg: var(--tth-cloud);
}

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

/*
 * Sections run to 1200px so grids and cards get room, but running prose must not.
 * These are the places where text is read in lines rather than scanned in a grid,
 * and they stay at a comfortable measure.
 */
.tth-section-head,
.tth-prose,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
	max-width: 46rem;
}

.tth-hero__inner > * {
	max-width: 42rem;
}

.tth-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tth-muted);
	line-height: 1.3;
	margin: 0;
}

.tth-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.tth-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tth-red);
	margin: 0 0 0.75rem;
}

.tth-eyebrow--on-red {
	color: var(--tth-yellow);
}

.tth-rule {
	border: 0;
	border-top: 1px solid var(--tth-line);
	margin: 0;
}

.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;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.tth-header {
	position: relative;
	z-index: 20;
}

.tth-header .wp-block-site-logo img {
	height: 56px;
	width: auto;
}

.tth-header .wp-block-navigation {
	font-weight: 500;
	font-size: 0.9375rem;
}

.tth-header .wp-block-navigation a {
	text-decoration: none;
	padding-block: 0.35em;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

.tth-header .wp-block-navigation a:hover,
.tth-header .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--tth-yellow);
}

/* The header sits on a red band, so its nav and logo need to invert. */
.tth-header--red {
	background: var(--tth-red);
	color: #fff;
}

.tth-header--red a,
.tth-header--red .wp-block-navigation a {
	color: #fff;
}

.tth-header--red .wp-block-site-logo img {
	background: #fff;
	border-radius: 50%;
	padding: 3px;
}

/* -------------------------------------------------------------------------
 * Hero + animated flight path
 * ---------------------------------------------------------------------- */

.tth-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tth-hero__inner {
	position: relative;
	z-index: 2;
}

/* The dotted arc tracing departure -> arrival across the hero image. */
.tth-flightpath {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.tth-flightpath__line {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 2 10;
	stroke-dashoffset: 0;
	/* Background texture, not a competing element — the headline sits over it. */
	opacity: 0.45;
	animation: tth-dash 24s linear infinite;
}

.tth-flightpath__pin {
	fill: var(--tth-yellow);
	stroke: var(--tth-ink);
	stroke-width: 1.5;
	opacity: 0.75;
}

.tth-flightpath__plane {
	fill: #fff;
	opacity: 0.6;
	offset-path: path("M 40 210 C 240 40, 620 40, 860 150");
	offset-rotate: auto;
	animation: tth-fly 24s linear infinite;
}

@keyframes tth-dash {
	to {
		stroke-dashoffset: -240;
	}
}

@keyframes tth-fly {
	from {
		offset-distance: 0%;
	}
	to {
		offset-distance: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tth-flightpath__line,
	.tth-flightpath__plane {
		animation: none;
	}
	.tth-flightpath__plane {
		offset-distance: 62%;
	}
}

/* Darken the photo just enough for white display type to pass contrast. */
.tth-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(36, 26, 22, 0.78) 0%,
		rgba(36, 26, 22, 0.55) 45%,
		rgba(36, 26, 22, 0.28) 100%
	);
	pointer-events: none;
}

/* "Where to next?" destination picker. */
.tth-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
	background: #fff;
	padding: 0.5rem;
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--lifted);
	max-width: 33rem;
}

.tth-picker__field {
	flex: 1 1 14rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.35rem 0.85rem;
	min-width: 0;
}

.tth-picker__field .tth-label {
	margin-bottom: 0.15rem;
}

.tth-picker select,
.tth-picker input[type="search"] {
	appearance: none;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 550;
	color: var(--tth-ink);
	padding: 0;
	width: 100%;
	cursor: pointer;
}

.tth-picker select:focus-visible,
.tth-picker input:focus-visible {
	outline: 2px solid var(--tth-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

.tth-picker__submit {
	flex: 0 0 auto;
	border: 0;
	border-radius: 4px;
	background: var(--tth-red);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.9rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tth-picker__submit:hover,
.tth-picker__submit:focus-visible {
	background: var(--tth-red-dark);
}

/* -------------------------------------------------------------------------
 * Trust bar
 * ---------------------------------------------------------------------- */

.tth-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.5rem 2rem;
	align-items: center;
}

.tth-trust__stat {
	text-align: center;
}

.tth-trust__figure {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--tth-red);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.tth-trust__caption {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--tth-muted);
	line-height: 1.4;
}

.tth-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.75rem;
	align-items: center;
	justify-content: center;
}

/* Accreditation seals are real marks — shown as-is, never recoloured or restyled. */
.tth-badges img {
	height: 58px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.tth-badges figure {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * The boarding-pass card — the signature element
 *
 * A main panel and a stub, split by a dashed perforation with a punched notch at
 * each end. Built from ordinary core blocks (group / featured image / post title /
 * paragraph) so the client can edit every part of it in the editor.
 * ---------------------------------------------------------------------- */

.tth-ticket {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--card);
	overflow: visible;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tth-ticket:hover,
.tth-ticket:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* --- main panel --- */

.tth-ticket__media {
	margin: 0;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	background: var(--tth-cloud);
}

.tth-ticket__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Destination cards crop to a consistent landscape window. */
.tth-ticket--destination .tth-ticket__media img {
	aspect-ratio: 4 / 3;
}

/*
 * Package cards show the flyer the team already designed. Flyers are portrait and
 * carry all the itinerary detail, so they're contained rather than cropped — losing
 * the top or bottom of a flyer would lose real information.
 */
.tth-ticket--package .tth-ticket__media img {
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--tth-cloud);
}

.tth-ticket__body {
	flex: 1 1 auto;
	padding: 1.25rem 1.35rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tth-ticket__body > * {
	margin: 0;
}

.tth-ticket__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1875rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.tth-ticket__title a {
	color: var(--tth-ink);
	text-decoration: none;
}

.tth-ticket__title a:hover {
	color: var(--tth-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Region tag — blue, and always separated from any yellow badge by white. */
.tth-ticket__tags {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tth-ticket__tags a {
	color: var(--tth-blue);
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 63, 115, 0.3);
}

.tth-ticket__tags a:hover {
	border-bottom-color: currentColor;
}

/* --- perforation + stub --- */

.tth-ticket__stub {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.95rem 1.35rem 1.1rem;
	margin-top: auto;
	border-top: 1px dashed var(--tth-line);
	border-radius: 0 0 8px 8px;
}

/* The two punched notches that make it read as a torn ticket. */
.tth-ticket__stub::before,
.tth-ticket__stub::after {
	content: "";
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tth-notch-bg);
	transform: translateY(-50%);
}

.tth-ticket__stub::before {
	left: 0;
	transform: translate(-50%, -50%);
}

.tth-ticket__stub::after {
	right: 0;
	transform: translate(50%, -50%);
}

.tth-ticket__field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.tth-ticket__field > * {
	margin: 0;
}

.tth-ticket__field--price {
	margin-left: auto;
	text-align: right;
	align-items: flex-end;
}

.tth-ticket__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--tth-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* Price is a key action colour — red, per the brief. */
.tth-ticket__field--price .tth-ticket__value {
	color: var(--tth-red);
	font-weight: 600;
	font-size: 1.0625rem;
}

/* An empty price falls back to "Inquire for rates", which shouldn't shout. */
.tth-ticket__field--price .tth-ticket__value:not(.tth-mono--price) {
	white-space: nowrap;
}

/* --- Special Offer starburst, echoing the flyers --- */

.tth-ticket.tth-is-featured > .tth-ticket__media::after,
.tth-ticket__media.has-offer::after {
	content: "";
}

.wp-block-post.tth-is-featured .tth-ticket::before {
	content: "Special Offer!!";
	position: absolute;
	top: -12px;
	right: -10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	padding: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	color: var(--tth-ink);
	background: var(--tth-yellow);
	/* 16-point starburst */
	clip-path: polygon(
		50% 0%, 58% 9%, 69% 4%, 72% 16%, 84% 15%, 82% 27%, 94% 30%,
		87% 40%, 97% 47%, 87% 54%, 94% 64%, 82% 67%, 84% 79%, 72% 78%,
		69% 90%, 58% 85%, 50% 96%, 42% 85%, 31% 90%, 28% 78%, 16% 79%,
		18% 67%, 6% 64%, 13% 54%, 3% 47%, 13% 40%, 6% 30%, 18% 27%,
		16% 15%, 28% 16%, 31% 4%, 42% 9%
	);
	transform: rotate(9deg);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Single package — the flyer at full size
 *
 * The flyer carries the itinerary, inclusions and price, so it renders as large as
 * the viewport allows and is never cropped.
 * ---------------------------------------------------------------------- */

.tth-flyer {
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 8px;
	padding: clamp(0.75rem, 2vw, 1.5rem);
	box-shadow: var(--wp--preset--shadow--card);
}

.tth-flyer img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	border-radius: 3px;
}

.tth-flyer__summary {
	margin-top: 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--tth-muted);
	max-width: 46rem;
}

.tth-flyer__summary:empty {
	display: none;
}

.tth-single-meta {
	gap: 0.5rem 1.5rem;
}

.tth-single-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--tth-red);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.tth-quote-cta {
	--tth-notch-bg: var(--tth-red);
}

.tth-quote-cta .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.65);
	color: #fff;
	background: transparent;
}

.tth-quote-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

/* Route / duration / price strip on a single destination. */
.tth-detail-strip {
	gap: 1.5rem 3rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--tth-line);
	border-bottom: 1px solid var(--tth-line);
}

/* -------------------------------------------------------------------------
 * Stops — the destinations a package visits, and the reverse on a destination
 *
 * Deliberately smaller and quieter than the boarding-pass card: these are a way
 * through to somewhere else on the site, not the main event on the page.
 * ---------------------------------------------------------------------- */

.tth-stops {
	margin-top: var(--wp--preset--spacing--60, 3rem);
}

.tth-stops__heading {
	font-size: 1.375rem;
	margin: 0 0 1.25rem;
}

.tth-stops__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tth-stops__item {
	margin: 0;
}

.tth-stops__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	height: 100%;
	padding: 0.6rem 0.9rem 0.6rem 0.6rem;
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tth-stops__link:hover,
.tth-stops__link:focus-visible {
	border-color: var(--tth-red);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
}

.tth-stops__media {
	flex: 0 0 4rem;
	width: 4rem;
	height: 4rem;
	border-radius: 5px;
	overflow: hidden;
	background: var(--tth-cloud);
}

.tth-stops__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Package flyers are portrait and busy — show the whole thing rather than a crop. */
.tth-stops--packages .tth-stops__media img {
	object-fit: contain;
}

.tth-stops__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.tth-stops__name {
	font-weight: 650;
	font-size: 0.9375rem;
	line-height: 1.25;
	color: var(--tth-ink);
}

.tth-stops__link:hover .tth-stops__name {
	color: var(--tth-red);
}

.tth-stops__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--tth-muted);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Card grids
 * ---------------------------------------------------------------------- */

.tth-grid .wp-block-post-template,
.tth-grid.wp-block-post-template {
	gap: 1.75rem;
}

.tth-grid .wp-block-post {
	position: relative;
	display: flex;
}

.tth-grid .wp-block-post > .wp-block-group {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Featured package spot
 * ---------------------------------------------------------------------- */

.tth-featured-spot {
	--tth-notch-bg: #fff;
}

.tth-featured-spot .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Services checklist
 * ---------------------------------------------------------------------- */

.tth-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2.5rem 3rem;
}

.tth-services__heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tth-red);
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--tth-line);
}

.tth-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.tth-services__item {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.45;
}

/* Ticked checklist marker, drawn rather than an icon font. */
.tth-services__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--tth-blue);
	border-bottom: 2px solid var(--tth-blue);
	transform: rotate(-45deg);
}

.tth-services__name {
	display: block;
	font-weight: 500;
}

.tth-services__blurb {
	display: block;
	font-size: 0.875rem;
	color: var(--tth-muted);
	margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------
 * Region filter
 * ---------------------------------------------------------------------- */

.tth-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.tth-filter__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tth-blue);
	padding: 0.55rem 1rem;
	border: 1px solid var(--tth-line);
	border-radius: 999px;
	background: #fff;
	transition: all 0.15s ease;
}

.tth-filter__link:hover {
	border-color: var(--tth-blue);
	color: var(--tth-blue);
}

.tth-filter__link.is-current {
	background: var(--tth-blue);
	border-color: var(--tth-blue);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * How booking works — 3 steps
 * ---------------------------------------------------------------------- */

.tth-steps {
	counter-reset: tth-step;
}

.tth-steps .tth-step {
	position: relative;
	counter-increment: tth-step;
	padding-top: 3.25rem;
}

.tth-steps .tth-step::before {
	content: counter(tth-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--tth-red);
	line-height: 1;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--tth-yellow);
}

/* -------------------------------------------------------------------------
 * Mission & vision
 * ---------------------------------------------------------------------- */

.tth-statement {
	border-left: 3px solid var(--tth-yellow);
	padding-left: 1.75rem;
}

.tth-statement p {
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * Testimonials — postcard styling
 * ---------------------------------------------------------------------- */

.tth-postcard {
	position: relative;
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 4px;
	padding: 1.75rem 1.75rem 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Postmark ring in the corner — the one place yellow gets to be decorative. */
.tth-postcard::after {
	content: "";
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	border: 2px dashed var(--tth-yellow);
	border-radius: 50%;
	opacity: 0.55;
	pointer-events: none;
}

.tth-postcard blockquote,
.tth-postcard__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	line-height: 1.55;
	border: 0;
	padding: 0;
}

.tth-postcard__author {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px dashed var(--tth-line);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tth-muted);
}

/* -------------------------------------------------------------------------
 * Team grid
 * ---------------------------------------------------------------------- */

.tth-team .wp-block-post-template {
	gap: 1.75rem 1.5rem;
}

.tth-person {
	text-align: center;
}

.tth-person__photo {
	margin: 0 0 1rem;
}

.tth-person__photo img {
	width: 100%;
	max-width: 190px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--tth-line);
}

.tth-person__name {
	font-size: 1.0625rem;
	font-weight: 650;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}

.tth-person__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--tth-muted);
	margin: 0;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Awards & accreditations
 * ---------------------------------------------------------------------- */

.tth-awards .wp-block-post-template {
	gap: 2rem 1.75rem;
}

.tth-award {
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 6px;
	padding: 1rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.tth-award__image {
	margin: 0;
	background: var(--tth-cloud);
	border-radius: 3px;
	overflow: hidden;
}

.tth-award__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--tth-cloud);
}

.tth-award__title {
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.3;
	margin: 0;
}

.tth-award__issuer {
	font-size: 0.875rem;
	color: var(--tth-muted);
	margin: 0;
	line-height: 1.45;
}

.tth-award__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.03em;
	color: var(--tth-muted);
	margin: auto 0 0;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--tth-line);
	line-height: 1.5;
}

.tth-award__year {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--tth-ink);
	background: var(--tth-yellow);
	padding: 0.2rem 0.5rem;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Organizations we've served
 * ---------------------------------------------------------------------- */

.tth-orgs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.5rem 2rem;
	align-items: center;
}

.tth-orgs__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	border: 1px dashed var(--tth-line);
	border-radius: 4px;
	background: #fff;
	color: var(--tth-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.5rem;
}

.tth-clienttypes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.tth-clienttypes li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--tth-blue);
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
}

/* -------------------------------------------------------------------------
 * Contact / Visit us
 * ---------------------------------------------------------------------- */

.tth-contact-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.tth-contact-details li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.tth-contact-details a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	color: var(--tth-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--tth-line);
	align-self: flex-start;
}

.tth-contact-details a:hover {
	color: var(--tth-red);
	border-bottom-color: currentColor;
}

.tth-map {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--tth-line);
	background: var(--tth-cloud);
}

.tth-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Inquiry form
 * ---------------------------------------------------------------------- */

.tth-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--tth-line);
	border-radius: 8px;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.tth-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

/*
 * The item the visitor clicked "Inquire" on. It sits at the top of the form as a
 * receipt: this is what we think you're asking about, and here's how to change it.
 */
.tth-form__about {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1rem;
	background: var(--tth-cloud);
	border: 1px solid var(--tth-line);
	border-left: 4px solid var(--tth-red);
	border-radius: 6px;
}

.tth-form__about-media {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.tth-form__about-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tth-form__about-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 12rem;
}

.tth-form__about-title {
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--tth-ink);
	text-decoration: none;
}

.tth-form__about-title:hover {
	color: var(--tth-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tth-form__about-detail {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	color: var(--tth-red);
	font-variant-numeric: tabular-nums;
}

.tth-form__about-clear {
	font-size: 0.8125rem;
	color: var(--tth-muted);
	margin-left: auto;
}

/* The open-ended fields get the full width. */
.tth-form__field--destination,
.tth-form__field--message,
.tth-form__actions {
	grid-column: 1 / -1;
}

.tth-form label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tth-muted);
}

.tth-form__required {
	color: var(--tth-red);
}

.tth-form input,
.tth-form textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--tth-ink);
	background: var(--tth-cloud);
	border: 1px solid var(--tth-line);
	border-radius: 4px;
	padding: 0.75rem 0.9rem;
	width: 100%;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tth-form input::placeholder,
.tth-form textarea::placeholder {
	color: #9a8f88;
}

.tth-form input:focus,
.tth-form textarea:focus {
	background: #fff;
	border-color: var(--tth-blue);
	outline: 2px solid var(--tth-blue);
	outline-offset: 1px;
}

.tth-form textarea {
	resize: vertical;
	min-height: 7rem;
}

.tth-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--tth-line);
}

.tth-form__smallprint {
	font-size: 0.875rem;
	color: var(--tth-muted);
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.tth-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tth-form__notice {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	border-radius: 6px;
	border-left: 4px solid;
	line-height: 1.55;
}

.tth-form__notice--ok {
	background: #eef5ee;
	border-left-color: #2e7d32;
	color: #1f4d22;
}

.tth-form__notice--error {
	background: #fdeeee;
	border-left-color: var(--tth-red);
	color: #7a1c19;
}

.tth-form__notice-list {
	margin: 0;
	padding-left: 1.1rem;
}

/* Per-field fault, so the notice at the top has something to point at. */
.tth-form__field--error input,
.tth-form__field--error textarea {
	border-color: var(--tth-red);
}

.tth-form__error {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #7a1c19;
}

@media (max-width: 640px) {
	.tth-form {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Footer — departures board
 * ---------------------------------------------------------------------- */

/*
 * Ink, not red. The red contact band ends most pages, and a red footer directly under
 * it merged the two into one unbroken slab — the call to action stopped reading as a
 * call to action. Ink lets the red band keep its job and gives the page a base to end
 * on. Red still dominates: the header band, the CTA, and every primary button.
 */
.tth-footer {
	background: var(--tth-ink);
	color: #fff;
}

.tth-footer a {
	color: #fff;
	text-decoration: none;
}

.tth-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--tth-yellow);
	text-decoration-thickness: 2px;
}

.tth-footer .tth-label {
	color: rgba(255, 255, 255, 0.72);
}

.tth-footer .wp-block-site-logo img {
	background: #fff;
	border-radius: 50%;
	padding: 4px;
	height: 68px;
	width: auto;
}

/* The board rule — a dashed line like a flight strip. */
.tth-footer__rule {
	border: 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.32);
	margin: 0;
}

.tth-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.9375rem;
}

/*
 * These rows are reused inside the red contact band, where the .tth-footer link rules
 * don't reach — the numbers were rendering in the default blue on red. Inheriting the
 * band's own text colour keeps them legible on red and on ink alike.
 */
.tth-footer__row a {
	color: inherit;
	text-decoration: none;
}

.tth-footer__row a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--tth-yellow);
	text-decoration-thickness: 2px;
}

.tth-footer__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.75rem;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
}

/* Dotted leader between label and value, like a departures board. */
.tth-footer__row::after {
	content: "";
	border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
	align-self: end;
	margin-bottom: 0.3em;
}

.tth-footer__badges img {
	height: 44px;
	width: auto;
	background: #fff;
	border-radius: 3px;
	padding: 4px;
	/*
	 * The seals blend into a light page elsewhere (multiply drops their white JPG
	 * ground). Against the dark footer that same blend turns them almost black, so
	 * here they sit on their own white plate and render exactly as issued.
	 */
	mix-blend-mode: normal;
}

.tth-footer__legal {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------------------------
 * Accessibility — visible focus everywhere, on both light and red grounds
 * ---------------------------------------------------------------------- */

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

.tth-footer :where(a, button):focus-visible,
.tth-header--red :where(a, button):focus-visible,
.tth-hero :where(a, button):focus-visible {
	outline: 2px solid var(--tth-yellow);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.85rem 1.25rem;
	background: #fff;
	color: var(--tth-ink);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--lifted);
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* -------------------------------------------------------------------------
 * Narrow widths
 *
 * The ticket card is the piece most likely to break, so the stub is allowed to
 * stack and the notches shrink rather than swallowing the card's corners.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.tth-ticket__stub {
		padding: 0.85rem 1.1rem 1rem;
		gap: 0.6rem 1rem;
	}

	.tth-ticket__stub::before,
	.tth-ticket__stub::after {
		width: 12px;
		height: 12px;
	}

	.tth-ticket__body {
		padding: 1.1rem 1.1rem 0.95rem;
	}

	.tth-ticket__field--price {
		margin-left: 0;
		text-align: left;
		align-items: flex-start;
		width: 100%;
		padding-top: 0.55rem;
		border-top: 1px dashed var(--tth-line);
	}

	.wp-block-post.tth-is-featured .tth-ticket::before {
		width: 4.5rem;
		height: 4.5rem;
		font-size: 0.625rem;
		top: -8px;
		right: -6px;
	}

	.tth-picker {
		max-width: none;
	}

	.tth-picker__submit {
		width: 100%;
	}

	.tth-footer__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.tth-footer__row::after {
		display: none;
	}

	.tth-postcard::after {
		display: none;
	}
}

/* Very narrow — the stub becomes a simple stack. */
@media (max-width: 380px) {
	.tth-ticket__stub {
		flex-direction: column;
		align-items: stretch;
	}

	.tth-ticket__field--price {
		border-top: 1px dashed var(--tth-line);
	}
}