/* ==========================================================================
   Travel Hub - Global shell: utility bar, header, navigation, footer
   (Redesign Phase 1B)

   Markup: template-parts/header-markup.php, template-parts/footer-markup.php.
   Every size, gap and colour here is a foundation token.

   Breakpoints: below 1024 the navigation collapses into one menu trigger and
   the utility bar is not shown; 1024 and up shows the full bar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utility bar (desktop only)
   -------------------------------------------------------------------------- */
.th-utility { display: none; }

@media (min-width: 1024px) {
	.th-utility {
		display: block;
		background: var(--th-color-night);
		color: var(--th-color-night-text);
		font-size: var(--th-fs-micro);
		line-height: var(--th-lh-ui);
	}
	.th-utility__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--th-space-6);
		min-block-size: var(--th-utility-h);
	}
	.th-utility__promise { margin: 0; }
	.th-utility__meta { display: flex; align-items: center; gap: var(--th-space-6); }
	.th-utility a { color: inherit; text-decoration: none; }
	.th-utility a:hover { color: #fff; }
	.th-utility a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
}

/* Language switch (shared markup: span.thc-sw > a.on) */
.th-utility .thc-sw,
.th-nav__lang .thc-sw,
.th-footer .thc-sw {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-1);
}
.th-utility .thc-sw a,
.th-footer .thc-sw a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 32px;
	min-block-size: 24px;
	padding-inline: var(--th-space-2);
	border-radius: var(--th-radius-sm);
	color: inherit;
	font-weight: var(--th-fw-heading);
	text-decoration: none;
}
.th-utility .thc-sw a.on,
.th-footer .thc-sw a.on { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* --------------------------------------------------------------------------
   Header
   Sticky from the first paint, so nothing jumps when it "activates": sticky
   positioning never takes the element out of flow. Only the shadow changes,
   driven by [data-th-scrolled] from thui.js.
   -------------------------------------------------------------------------- */
.th-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--thui-z-header);
	background: var(--th-color-surface);
	border-block-end: 1px solid var(--th-border-color);
	transition: box-shadow var(--th-dur) var(--th-ease);
}
.th-header[data-th-scrolled] { box-shadow: 0 8px 24px -16px rgba(18, 38, 58, 0.28); }
/* WordPress admin bar pushes the sticky offset below itself. */
.admin-bar .th-header { inset-block-start: var(--wp-admin--admin-bar--height, 0px); }

.th-header__inner {
	display: flex;
	align-items: center;
	gap: var(--th-space-6);
	block-size: var(--th-header-h);
}

.th-header__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	block-size: 100%;
	border-radius: var(--th-radius-sm);
}
.th-header__logo:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
/* Woo ships its own img rules on cart/account routes; both axes are capped
   here so no later generic rule can let the 660x276 file balloon. */
.th-header .th-header__logo-image {
	display: block;
	inline-size: auto;
	block-size: var(--th-logo-h);
	max-block-size: var(--th-logo-h);
	max-inline-size: 180px;
	object-fit: contain;
}

.th-header__actions {
	display: flex;
	align-items: center;
	gap: var(--th-space-3);
	margin-inline-start: auto;
}

/* Menu trigger: 48x48, three bars that become a cross. */
.th-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 1px solid var(--th-border-color);
	border-radius: var(--th-radius-control);
	background: var(--th-color-surface);
	color: var(--th-color-ink);
	cursor: pointer;
}
.th-header__toggle:focus-visible { outline: none; box-shadow: var(--th-focus-ring); }
.th-header__toggle-bars { position: relative; display: block; inline-size: 20px; block-size: 14px; }
.th-header__toggle-bars span {
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--th-dur) var(--th-ease), opacity var(--th-dur) var(--th-ease);
}
.th-header__toggle-bars span:nth-child(1) { inset-block-start: 0; }
.th-header__toggle-bars span:nth-child(2) { inset-block-start: 6px; }
.th-header__toggle-bars span:nth-child(3) { inset-block-start: 12px; }
.th-header__toggle[aria-expanded="true"] .th-header__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.th-header__toggle[aria-expanded="true"] .th-header__toggle-bars span:nth-child(2) { opacity: 0; }
.th-header__toggle[aria-expanded="true"] .th-header__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.th-header__cta { display: none; }

/* --------------------------------------------------------------------------
   Navigation - mobile / tablet panel (below 1024)
   -------------------------------------------------------------------------- */
.th-nav {
	position: fixed;
	inset-inline: 0;
	inset-block-start: calc(var(--th-header-h) + var(--wp-admin--admin-bar--height, 0px));
	inset-block-end: 0;
	display: none;
	flex-direction: column;
	gap: var(--th-space-6);
	padding-block: var(--th-space-4) var(--th-space-7);
	padding-inline: var(--th-gutter);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--th-color-surface);
	border-block-start: 1px solid var(--th-border-color);
}
.th-nav.is-open { display: flex; }
html.thui-nav-open { overflow: hidden; }

.th-nav__list { margin: 0; padding: 0; list-style: none; }
.th-nav__list a {
	display: flex;
	align-items: center;
	min-block-size: 56px;
	border-block-end: 1px solid var(--th-border-color);
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-ui);
	text-decoration: none;
}
.th-nav__list .current-menu-item > a { color: var(--th-color-action); }
.th-nav__list a:focus-visible { outline: none; box-shadow: var(--th-focus-ring); border-radius: var(--th-radius-sm); }

.th-nav__extras { display: flex; flex-direction: column; gap: var(--th-space-4); }
.th-nav__secondary {
	display: flex;
	align-items: center;
	min-block-size: 48px;
	color: var(--th-color-accent-ink);
	font-weight: var(--th-fw-heading);
	text-decoration: none;
}
.th-nav__lang { display: flex; align-items: center; justify-content: space-between; gap: var(--th-space-4); padding-block-start: var(--th-space-4); border-block-start: 1px solid var(--th-border-color); }
.th-nav__lang-label { color: var(--th-color-muted); font-size: var(--th-fs-small); }
.th-nav__lang .thc-sw a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 48px;
	min-block-size: 48px;
	border-radius: var(--th-radius-control);
	color: var(--th-color-ink);
	font-weight: var(--th-fw-heading);
	text-decoration: none;
}
.th-nav__lang .thc-sw a.on { background: var(--th-color-subtle); }

/* --------------------------------------------------------------------------
   Navigation - desktop (1024 and up)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.th-header__toggle { display: none; }
	.th-header__cta { display: inline-flex; }
	.th-header__inner { gap: var(--th-space-7); }

	.th-nav {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding: 0;
		overflow: visible;
		background: none;
		border: 0;
		margin-inline-start: auto;
	}
	.th-nav__extras { display: none; }

	.th-nav__list { display: flex; align-items: center; gap: var(--th-space-6); }
	.th-nav__list a {
		position: relative;
		min-block-size: 44px;
		border: 0;
		color: var(--th-color-text);
		font-size: var(--th-fs-small);
		font-weight: var(--th-fw-ui);
		white-space: nowrap;
	}
	/* Active / hover indicator sits on the header's bottom edge region, not
	   under the text baseline, so it reads as a tab rather than an underline. */
	.th-nav__list a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 6px;
		block-size: 2px;
		border-radius: 2px;
		background: var(--th-color-action);
		transform: scaleX(0);
		transition: transform var(--th-dur) var(--th-ease);
	}
	.th-nav__list a:hover { color: var(--th-color-ink); }
	.th-nav__list a:hover::after,
	.th-nav__list .current-menu-item > a::after { transform: scaleX(1); }
	.th-nav__list .current-menu-item > a { color: var(--th-color-ink); }

	.th-header__cta { min-block-size: var(--th-control-h); }
}

@media (min-width: 1280px) {
	.th-nav__list { gap: var(--th-space-7); }
}

@media (prefers-reduced-motion: reduce) {
	.th-nav__list a::after,
	.th-header__toggle-bars span,
	.th-header { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.th-footer {
	padding-block: var(--th-section-sm) var(--th-space-6);
	background: var(--th-color-night);
	color: var(--th-color-night-text);
	font-size: var(--th-fs-small);
	line-height: var(--th-lh-body);
}
.th-footer a { color: inherit; text-decoration: none; }
.th-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.th-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.th-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--th-space-7) var(--th-grid-gap);
}
.th-footer__brand { grid-column: 1 / -1; }
.th-footer__col:last-child { grid-column: 1 / -1; }

@media (min-width: 768px) {
	.th-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--th-space-8) var(--th-grid-gap); }
	.th-footer__brand { grid-column: span 12; }
	.th-footer__col,
	.th-footer__col:last-child { grid-column: span 4; }
}
@media (min-width: 1024px) {
	/* Span 3 of 12 = one column of the 4-up card grid. */
	.th-footer__brand,
	.th-footer__col,
	.th-footer__col:last-child { grid-column: span 3; }
}

.th-footer__logo { display: inline-block; line-height: 0; border-radius: var(--th-radius-sm); }
.th-footer .th-footer__logo img {
	display: block;
	inline-size: auto;
	block-size: 44px;
	max-block-size: 44px;
	max-inline-size: 180px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.th-footer__promise { margin: var(--th-space-4) 0 0; max-inline-size: 36ch; }
.th-footer__address { margin: var(--th-space-3) 0 0; font-style: normal; max-inline-size: 36ch; }

.th-footer__heading {
	margin: 0 0 var(--th-space-3);
	color: #fff;
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	line-height: var(--th-lh-ui);
	text-transform: uppercase;
}
.th-footer__links { margin: 0; padding: 0; list-style: none; }
.th-footer__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
	/* Mouse targets: the rows can sit closer, the text is unchanged. */
	.th-footer__links a { min-block-size: 36px; }
}
.th-footer__note { margin: var(--th-space-2) 0 0; color: var(--th-color-night-text); opacity: 0.8; }

.th-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--th-space-3) var(--th-space-6);
	margin-block-start: var(--th-space-9);
	padding-block-start: var(--th-space-6);
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--th-fs-micro);
}
.th-footer__rights { margin: 0; margin-inline-end: auto; }
.th-footer__legal { display: flex; flex-wrap: wrap; gap: var(--th-space-1) var(--th-space-6); }
.th-footer__legal a { display: inline-flex; align-items: center; min-block-size: 44px; }
@media (min-width: 1024px) {
	.th-footer__legal a { min-block-size: 32px; }
}
@media (max-width: 767px) {
	.th-footer { padding-block-start: var(--th-space-9); }
	.th-footer__bar { flex-direction: column; align-items: flex-start; margin-block-start: var(--th-space-7); }
}

/* --------------------------------------------------------------------------
   Legacy page shell content (/contact/)
   The mu-plugin page prints its own inline stylesheet AFTER the theme's, with
   single-class selectors (.thc-wrap, .thc-ahero, .thc-btn ...). Scoping every
   rule under .thc-main (the theme's <main>) is what lets the grid and tokens
   win without !important. Markup, form and script are not changed.
   -------------------------------------------------------------------------- */
.th-utility .thc-sw,
.th-nav__lang .thc-sw,
.th-footer .thc-sw { padding: 0; background: none; border-radius: 0; }

.thc-main .thc-wrap {
	box-sizing: border-box;
	inline-size: min(100% - 2 * var(--th-gutter), var(--th-container));
	max-inline-size: none;
	margin-inline: auto;
	padding-inline: 0;
}
.thc-main .thc-ahero { padding-block: var(--th-section-sm); color: #fff; }
.thc-main .thc-ahero h1 {
	margin: 0;
	color: #fff;
	font-size: var(--th-fs-h1);
	font-weight: var(--th-fw-display);
	line-height: var(--th-lh-heading);
	letter-spacing: var(--th-ls-heading);
}
.thc-main .thc-ahero p { margin: var(--th-gap-title) 0 0; max-inline-size: var(--th-measure-lead); color: rgba(255, 255, 255, 0.86); font-size: var(--th-fs-lead); }
.thc-main .thc-sec { padding-block: var(--th-section-sm) var(--th-section); }
.thc-main .thc-h2 { margin: 0; color: var(--th-color-ink); font-size: var(--th-fs-h2); font-weight: var(--th-fw-display); line-height: var(--th-lh-heading); }
.thc-main .thc-h2[style] { margin-block-start: var(--th-section-sm) !important; }
.thc-main .thc-sub { margin: var(--th-gap-h2) 0 var(--th-gap-head); color: var(--th-color-muted); }
.thc-main .thc-pg-grid,
.thc-main .thc-why { gap: var(--th-grid-gap); }
.thc-main .thc-two { gap: var(--th-grid-gap-lg); }
.thc-main .thc-pg-card,
.thc-main .thc-why div,
.thc-main .thc-emg,
.thc-main .thc-form { border-radius: var(--th-radius-card); }
.thc-main .thc-pg-card,
.thc-main .thc-form,
.thc-main .thc-emg { padding: var(--th-space-6); }
.thc-main .thc-pg-card { border-color: var(--th-border-color); box-shadow: var(--th-shadow-card); }
.thc-main .thc-pg-card h3 { margin: 0 0 var(--th-gap-h3); color: var(--th-color-ink); font-size: var(--th-fs-h4); }
.thc-main .thc-form input,
.thc-main .thc-form select { min-block-size: var(--th-control-h); border-radius: var(--th-radius-control); }
.thc-main .thc-form textarea { border-radius: var(--th-radius-control); }
.thc-main .thc-form .row { gap: var(--th-space-4); margin-block-end: var(--th-space-4); }
.thc-main .thc-form label { margin-block-end: var(--th-space-2); }
.thc-main .thc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--th-icon-gap);
	min-block-size: var(--th-control-h);
	padding-inline: var(--th-control-pad-x);
	border-radius: var(--th-radius-control);
	font-size: var(--th-control-fs);
	font-weight: var(--th-control-fw);
}
.thc-main .thc-cta { margin-block: var(--th-section-sm) 0; padding: var(--th-space-9) var(--th-space-6); border-radius: var(--th-radius-panel); }
.thc-main .thc-emg h3,
.thc-main .thc-cta h3 { color: #fff; }