/**
 * Travhawk global design system — tokens + foundations.
 * Colours match the live brand palette from https://travhawk.com/
 * (Denim #176EBA, Turquoise #57D6E2, Seagull #6EC1E4, Shark/Woodsmoke darks, etc.).
 *
 * Usage: use var(--th-*) only in new work; legacy --ahp-* in header CSS aliases here where noted.
 */

/* -------------------------------------------------------------------------- */
/* Typography — Google Fonts enqueued in functions.php (Plus Jakarta + DM Sans) */
/* -------------------------------------------------------------------------- */

:root {
	/* ——— Official palette (named swatches — single source of truth) ——— */
	--th-palette-white: #ffffff;
	--th-palette-denim: #176eba;
	--th-palette-turquoise: #57d6e2;
	--th-palette-seagull: #6ec1e4;
	--th-palette-abbey: #54595f;
	--th-palette-silver: #cccccc;
	--th-palette-shark: #27292b;
	--th-palette-woodsmoke: #16181a;
	--th-palette-black: #000000;
	--th-palette-mine-shaft: #333333;
	--th-palette-emperor: #514444;

	/* RGB tuples for rgba(var(--th-rgb-*), alpha) */
	--th-rgb-denim: 23, 110, 186;
	--th-rgb-turquoise: 87, 214, 226;
	--th-rgb-seagull: 110, 193, 228;
	--th-rgb-shark: 39, 41, 43;
	--th-rgb-woodsmoke: 22, 24, 26;
	--th-rgb-silver: 204, 204, 204;
	--th-rgb-abbey: 84, 89, 95;

	/* ——— Semantic brand (matches site “Accent” hierarchy: Primary Denim, Secondary Turquoise, Tertiary Seagull) ——— */
	--th-color-accent: var(--th-palette-denim);
	--th-color-accent-hover: #125a9a;
	--th-color-accent-secondary: var(--th-palette-turquoise);
	--th-color-accent-tertiary: var(--th-palette-seagull);
	--th-color-accent-soft: rgba(var(--th-rgb-denim), 0.14);
	--th-color-accent-muted: rgba(var(--th-rgb-denim), 0.35);

	/* Primary actions: Turquoise default → Denim hover (header search, icons, footer CTAs) */
	--th-interactive-fill: var(--th-palette-turquoise);
	--th-interactive-fill-hover: var(--th-palette-denim);
	--th-interactive-ring: rgba(var(--th-rgb-turquoise), 0.45);
	--th-interactive-ring-hover: rgba(var(--th-rgb-denim), 0.5);

	/* ——— Text ——— */
	--th-color-ink: var(--th-palette-black);
	--th-color-ink-soft: var(--th-palette-mine-shaft);
	--th-color-ink-muted: var(--th-palette-abbey);
	--th-color-inverse: var(--th-palette-white);
	/* Muted light text on dark chrome (secondary bar, mega menus) */
	--th-color-on-dark-muted: rgba(var(--th-rgb-silver), 0.82);
	--th-color-on-dark-soft: rgba(255, 255, 255, 0.92);
	/* Deep UI edge / ink shadow (replaces ad-hoc slate-900 rgba) */
	--th-color-edge-dark: rgba(var(--th-rgb-woodsmoke), 0.88);

	/* ——— Surfaces ——— */
	--th-color-bg-page: var(--th-palette-white);
	--th-color-bg-subtle: #f7f9fb;
	--th-color-bg-muted: #f0f4f8;
	--th-color-bg-warm: #faf8f8;
	--th-color-bg-cream: #fdfcfa;
	--th-color-bg-dark: var(--th-palette-woodsmoke);
	--th-color-bg-dark-soft: var(--th-palette-shark);
	--th-gradient-header-dark: linear-gradient(180deg, var(--th-palette-shark) 0%, var(--th-palette-woodsmoke) 100%);
	/* Mailing band — rich denim / blue spectrum only (no black or heavy charcoal end) */
	--th-gradient-mailing-band:
		radial-gradient(ellipse 95% 70% at 20% 40%, rgba(var(--th-rgb-turquoise), 0.35) 0%, transparent 58%),
		radial-gradient(ellipse 80% 90% at 85% 75%, rgba(var(--th-rgb-seagull), 0.28) 0%, transparent 52%),
		linear-gradient(
			125deg,
			#2b8fd9 0%,
			var(--th-palette-denim) 38%,
			#155a9e 72%,
			#1e6aad 100%
		);
	--th-gradient-hero-soft: linear-gradient(180deg, rgba(var(--th-rgb-turquoise), 0.14) 0%, rgba(var(--th-rgb-seagull), 0.06) 100%);

	/* ——— Borders & dividers ——— */
	--th-color-border: rgba(84, 89, 95, 0.14);
	--th-color-border-strong: rgba(84, 89, 95, 0.28);
	--th-color-divider-light: rgba(204, 204, 204, 0.85);
	--th-color-divider-on-dark: rgba(255, 255, 255, 0.08);

	/* ——— Semantic ——— */
	--th-color-success: #00b67a;
	--th-color-warning: #f59e0b;
	--th-color-danger: #ef4444;

	/* ——— Effects ——— */
	--th-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--th-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.07);
	--th-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.1);
	--th-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.28);
	--th-shadow-accent-glow: 0 0 0 3px rgba(var(--th-rgb-denim), 0.22);

	--th-blur-glass: 18px;
	--th-surface-glass: rgba(22, 24, 26, 0.82);

	/* ——— Radius ——— */
	--th-radius-sm: 6px;
	--th-radius-md: 10px;
	--th-radius-lg: 14px;
	--th-radius-xl: 20px;
	--th-radius-pill: 999px;

	/* ——— Motion ——— */
	--th-duration-fast: 0.15s;
	--th-duration: 0.25s;
	--th-duration-slow: 0.35s;
	--th-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--th-transition: var(--th-duration) var(--th-ease-out);

	/* ——— Spacing scale (4px base) ——— */
	--th-space-0: 0;
	--th-space-1: 0.25rem;
	--th-space-2: 0.5rem;
	--th-space-3: 0.75rem;
	--th-space-4: 1rem;
	--th-space-5: 1.25rem;
	--th-space-6: 1.5rem;
	--th-space-8: 2rem;
	--th-space-10: 2.5rem;
	--th-space-12: 3rem;
	--th-space-16: 4rem;
	--th-space-20: 5rem;
	--th-space-section-y: clamp(2.5rem, 6vw, 5rem);
	--th-space-gutter: clamp(1rem, 4vw, 1.5rem);

	/* ——— Container widths — inner content cap (full-bleed backgrounds use wrappers) ——— */
	--th-container-sm: 540px;
	--th-container-md: 720px;
	--th-container-lg: 960px;
	--th-container-xl: 1140px;
	--th-container-xxl: 1340px;
	--th-container-max: min(100%, var(--th-container-xxl));

	/* ——— Typography tokens ——— */
	--th-font-sans: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--th-font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
	/* Legacy bundled face — opt-in per section: font-family: var(--th-font-legacy); */
	--th-font-legacy: GingerSoft, var(--th-font-sans);

	--th-text-xs: clamp(0.75rem, 0.65rem + 0.35vw, 0.8125rem);
	--th-text-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);
	--th-text-base: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
	--th-text-lg: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
	--th-text-xl: clamp(1.25rem, 1rem + 0.75vw, 1.5rem);
	--th-text-2xl: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	--th-text-3xl: clamp(1.875rem, 1.35rem + 1.8vw, 2.5rem);
	--th-text-4xl: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);

	--th-leading-tight: 1.15;
	--th-leading-snug: 1.35;
	--th-leading-normal: 1.5;
	--th-leading-relaxed: 1.65;

	--th-tracking-tight: -0.02em;
	--th-tracking-wide: 0.02em;
	--th-tracking-nav: 0.06em;

	/* ——— Header / nav pills — Shark–Woodsmoke chrome + Turquoise/Seagull rings (live Travhawk) ——— */
	--th-header-nav-pill-bg: linear-gradient(180deg, #32373c 0%, var(--th-palette-shark) 52%, #1e2023 100%);
	--th-header-nav-pill-border: rgba(255, 255, 255, 0.12);
	--th-header-nav-pill-text: rgba(255, 255, 255, 0.94);
	--th-header-nav-pill-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
	--th-header-nav-pill-hover-bg: linear-gradient(180deg, #3d4349 0%, #32373c 52%, #27292b 100%);
	--th-header-nav-pill-hover-border: rgba(var(--th-rgb-turquoise), 0.5);
	--th-header-nav-pill-current-bg: linear-gradient(180deg, #2a4d6e 0%, #1f3f58 52%, var(--th-palette-woodsmoke) 100%);
	--th-header-nav-pill-current-border: rgba(var(--th-rgb-seagull), 0.55);

	/* Glow / focus rings built from brand hues */
	--th-glow-turquoise-12: rgba(var(--th-rgb-turquoise), 0.12);
	--th-glow-turquoise-14: rgba(var(--th-rgb-turquoise), 0.14);
	--th-glow-turquoise-22: rgba(var(--th-rgb-turquoise), 0.22);
	--th-glow-turquoise-25: rgba(var(--th-rgb-turquoise), 0.25);
	--th-glow-turquoise-30: rgba(var(--th-rgb-turquoise), 0.3);
	--th-glow-turquoise-35: rgba(var(--th-rgb-turquoise), 0.35);

	--th-home-notch-half: 8px;
	--th-home-notch-depth: 10px;
	--th-home-notch-lift: -14px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--th-font-sans);
	font-size: var(--th-text-base);
	line-height: var(--th-leading-normal);
	color: var(--th-color-ink-soft);
	background-color: var(--th-color-bg-page);
	-webkit-font-smoothing: antialiased;
}

/* Headings — premium hierarchy */
h1,
h2,
h3,
h4,
h5,
h6,
.th-heading {
	font-family: var(--th-font-display);
	font-weight: 700;
	color: var(--th-color-ink);
	line-height: var(--th-leading-tight);
	letter-spacing: var(--th-tracking-tight);
}

h1 {
	font-size: var(--th-text-4xl);
	margin: 0 0 var(--th-space-6);
}

h2 {
	font-size: var(--th-text-3xl);
	margin: 0 0 var(--th-space-5);
}

h3 {
	font-size: var(--th-text-2xl);
	margin: 0 0 var(--th-space-4);
}

h4 {
	font-size: var(--th-text-xl);
	margin: 0 0 var(--th-space-3);
}

h5 {
	font-size: var(--th-text-lg);
	margin: 0 0 var(--th-space-3);
}

h6 {
	font-size: var(--th-text-base);
	font-weight: 600;
	margin: 0 0 var(--th-space-2);
}

p {
	margin: 0 0 var(--th-space-4);
}

a {
	color: var(--th-color-accent);
	text-underline-offset: 0.15em;
	transition: color var(--th-transition), opacity var(--th-transition);
}

a:hover {
	color: var(--th-color-accent-secondary);
}

/* -------------------------------------------------------------------------- */
/* Containers — use .th-container* for new sections; existing .container stays Bootstrap */
/* -------------------------------------------------------------------------- */

.th-container {
	width: 100%;
	max-width: var(--th-container-xxl);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--th-space-gutter);
	padding-right: var(--th-space-gutter);
	box-sizing: border-box;
}

.th-container--narrow {
	max-width: var(--th-container-lg);
}

.th-container--article {
	max-width: var(--th-container-md);
}

.th-container--fluid {
	max-width: none;
}

/*
 * Bootstrap .container — max 1340px + symmetric gutters (matches .th-container rhythm).
 * Backgrounds stay edge-to-edge on outer sections; .container limits inner column width.
 */
#wrapper .container {
	max-width: min(100%, var(--th-container-xxl)) !important;
	padding-left: var(--th-space-gutter) !important;
	padding-right: var(--th-space-gutter) !important;
	box-sizing: border-box;
}

/* Narrow phones: legacy snapshots can strip gutters — enforce minimum side inset */
@media (max-width: 575.98px) {
	#wrapper .container {
		padding-left: max(1.125rem, var(--th-space-gutter), env(safe-area-inset-left, 0px)) !important;
		padding-right: max(1.125rem, var(--th-space-gutter), env(safe-area-inset-right, 0px)) !important;
	}
}

.th-section {
	padding-top: var(--th-space-section-y);
	padding-bottom: var(--th-space-section-y);
}

.th-section--tight {
	padding-top: var(--th-space-8);
	padding-bottom: var(--th-space-8);
}

.th-section--alt {
	background-color: var(--th-color-bg-subtle);
}

.th-section--accent-soft {
	background: linear-gradient(180deg, rgba(var(--th-rgb-turquoise), 0.12) 0%, transparent 46%);
}

.th-section--dark {
	background-color: var(--th-color-bg-dark);
	color: var(--th-color-inverse);
}

.th-section--dark h1,
.th-section--dark h2,
.th-section--dark h3,
.th-section--dark h4 {
	color: var(--th-color-inverse);
}

.th-section--dark p {
	color: rgba(248, 250, 252, 0.85);
}

/* -------------------------------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------------------------------- */

.th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--th-space-2);
	font-family: var(--th-font-sans);
	font-weight: 600;
	font-size: var(--th-text-sm);
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--th-radius-pill);
	padding: 0.65rem 1.35rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--th-transition),
		border-color var(--th-transition),
		color var(--th-transition),
		box-shadow var(--th-transition),
		transform var(--th-duration-fast) var(--th-ease-out);
}

.th-btn:focus-visible {
	outline: none;
	box-shadow: var(--th-shadow-accent-glow);
}

.th-btn--primary {
	background: linear-gradient(165deg, #1e7dcc 0%, var(--th-palette-denim) 52%, var(--th-color-accent-hover) 100%);
	color: var(--th-color-inverse);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: var(--th-shadow-sm);
}

.th-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--th-shadow-md);
	color: var(--th-color-inverse);
	filter: brightness(1.03);
}

.th-btn--accent {
	background: linear-gradient(180deg, var(--th-palette-turquoise) 0%, var(--th-palette-seagull) 100%);
	color: var(--th-palette-black);
	border-color: rgba(var(--th-rgb-denim), 0.18);
}

.th-btn--accent:hover {
	filter: brightness(1.04);
	color: var(--th-palette-black);
}

.th-btn--outline {
	background: transparent;
	color: var(--th-color-ink);
	border-color: var(--th-color-border-strong);
}

.th-btn--outline:hover {
	border-color: var(--th-palette-denim);
	color: var(--th-palette-denim);
}

.th-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: var(--th-color-inverse);
	border-color: rgba(255, 255, 255, 0.18);
}

.th-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	color: var(--th-color-inverse);
}

.th-btn--lg {
	padding: 0.85rem 1.75rem;
	font-size: var(--th-text-base);
}

.th-btn--sm {
	padding: 0.45rem 1rem;
	font-size: var(--th-text-xs);
}

/* Pair with .th-btn for variants, e.g. class="th-btn th-btn--primary th-btn--lg" */

/* -------------------------------------------------------------------------- */
/* Cards */
/* -------------------------------------------------------------------------- */

.th-card {
	background: var(--th-color-bg-page);
	border: 1px solid var(--th-color-border);
	border-radius: var(--th-radius-lg);
	box-shadow: var(--th-shadow-xs);
	padding: var(--th-space-6);
	transition:
		box-shadow var(--th-transition),
		border-color var(--th-transition),
		transform var(--th-duration-fast) var(--th-ease-out);
}

.th-card:hover {
	box-shadow: var(--th-shadow-sm);
	border-color: var(--th-color-border-strong);
}

.th-card--elevated {
	box-shadow: var(--th-shadow-md);
}

.th-card__title {
	font-size: var(--th-text-lg);
	font-weight: 700;
	color: var(--th-color-ink);
	margin: 0 0 var(--th-space-3);
}

.th-card__meta {
	font-size: var(--th-text-xs);
	color: var(--th-color-ink-muted);
	text-transform: uppercase;
	letter-spacing: var(--th-tracking-wide);
}

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

.th-label {
	display: block;
	font-size: var(--th-text-xs);
	font-weight: 600;
	color: var(--th-color-ink-soft);
	margin-bottom: var(--th-space-2);
	letter-spacing: var(--th-tracking-wide);
	text-transform: uppercase;
}

.th-input,
.th-textarea,
.th-select {
	width: 100%;
	font-family: var(--th-font-sans);
	font-size: var(--th-text-sm);
	line-height: var(--th-leading-snug);
	color: var(--th-color-ink);
	background: var(--th-color-bg-page);
	border: 1px solid var(--th-color-border-strong);
	border-radius: var(--th-radius-md);
	padding: 0.65rem 1rem;
	transition:
		border-color var(--th-transition),
		box-shadow var(--th-transition);
	box-sizing: border-box;
}

.th-input:focus,
.th-textarea:focus,
.th-select:focus {
	outline: none;
	border-color: var(--th-palette-denim);
	box-shadow: var(--th-shadow-accent-glow);
}

.th-textarea {
	min-height: 140px;
	resize: vertical;
}

/* -------------------------------------------------------------------------- */
/* Layout utilities */
/* -------------------------------------------------------------------------- */

.th-stack {
	display: flex;
	flex-direction: column;
	gap: var(--th-space-4);
}

.th-stack--tight {
	gap: var(--th-space-2);
}

.th-stack--loose {
	gap: var(--th-space-8);
}

.th-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--th-space-4);
}

.th-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--th-space-3);
}

.th-prose {
	max-width: 65ch;
}

.th-prose--wide {
	max-width: 75ch;
}

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

/* -------------------------------------------------------------------------- */
/* Navigation strip helpers (secondary row typography) */
/* -------------------------------------------------------------------------- */

.th-nav-label {
	font-size: var(--th-text-xs);
	font-weight: 600;
	letter-spacing: var(--th-tracking-nav);
	text-transform: uppercase;
	color: var(--th-color-ink-muted);
}

/* Responsive: tighten mobile gutters inside utilities already using clamp */

@media (max-width: 575.98px) {
	.th-section {
		padding-top: var(--th-space-8);
		padding-bottom: var(--th-space-8);
	}
}