/*
 * V6.3.2 whole-site phone viewport and compact-footer correction.
 *
 * Loaded last on every public route. The parent theme intentionally styled the
 * mobile action bar as a floating rounded dock. Combined with route-specific
 * wrappers and viewport-width drawers, that made the site appear to sit inside
 * a bordered phone preview. These rules keep spacing inside content while all
 * page surfaces and global chrome use the real viewport.
 */

/* New footer elements use the existing theme tokens at every breakpoint. */
.wt-footer__brand-link {
	display: inline-flex;
}

.wt-footer__brand-link:hover {
	text-decoration: none;
}

.wt-footer__summary {
	margin: 0 0 var(--wt-space-4);
	color: var(--wt-text-on-dark-muted);
	line-height: 1.6;
}

.wt-footer__contact--compact .wt-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wt-space-3);
	color: var(--wt-text-on-dark);
	text-decoration: none;
}

.wt-footer__contact--compact .wt-footer__contact-item .wt-icon {
	flex: none;
	color: var(--wt-orange);
}

.wt-footer__actions {
	display: grid;
	gap: var(--wt-space-2);
}

.wt-footer__action {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wt-line-light-strong);
	border-radius: var(--wt-radius);
	color: var(--wt-white);
	font-weight: var(--wt-weight-bold);
	text-decoration: none;
}

.wt-footer__action .wt-icon {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wt-orange);
}

.wt-footer__action--accent {
	border-color: var(--wt-orange);
	background: var(--wt-orange);
	color: var(--wt-navy-charcoal);
}

.wt-footer__action--accent .wt-icon {
	color: var(--wt-navy-charcoal);
}

.wt-footer__bottom p {
	margin: 0;
}

@media (max-width: 767px) {
	:root {
		--wt-gutter: clamp(0.95rem, 4.4vw, 1.2rem);
		--wt-mobile-bar-h: 4.25rem;
	}

	html,
	body {
		width: 100%;
		max-width: none;
		margin: 0;
		overflow-x: clip;
	}

	body {
		padding-inline: 0;
		padding-bottom: 0;
		background: var(--wt-white);
	}

	/*
	 * Global shell: page backgrounds reach both sides of the screen. Only the
	 * inner .wt-container supplies readable content gutters.
	 */
	.wt-site,
	.wt-main {
		width: 100%;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding-inline: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-x: clip;
	}

	.wt-header,
	.wt-footer,
	.wt-contact-strip,
	.wt-home,
	.wt-home > section,
	.wt-section,
	.wt-page-hero,
	.wt-page-hero--photo,
	.wt-shop-page,
	.wt-experience,
	.wt-about-page {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		border-inline: 0;
		border-radius: 0;
	}

	.wt-container,
	.wt-container--narrow {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		padding-inline: var(--wt-gutter);
	}

	/*
	 * Grid and flex descendants are allowed to shrink. This prevents one long
	 * title, address, form control, or product value from widening the page.
	 */
	.wt-site :where(
		main,
		section,
		article,
		aside,
		header,
		footer,
		nav,
		div,
		form,
		fieldset,
		ul,
		ol,
		li
	) {
		min-width: 0;
	}

	.wt-site :where(
		img,
		picture,
		video,
		svg,
		iframe,
		table,
		input,
		select,
		textarea,
		button
	) {
		max-width: 100%;
	}

	.wt-site :where(
		h1,
		h2,
		h3,
		h4,
		p,
		address,
		a,
		span,
		strong,
		small,
		label,
		legend
	) {
		overflow-wrap: anywhere;
	}

	/*
	 * Header: keep the logo and menu inside the viewport at every phone width.
	 */
	.wt-header__inner {
		width: 100%;
		min-height: 4.5rem;
	}

	.wt-header__brand,
	.wt-header__logo,
	.wt-header__logo--core,
	.wt-header__logo--bundled {
		min-width: 0;
		max-width: calc(100% - 5.25rem);
	}

	.wt-header__logo img,
	.wt-header__logo--core img,
	.wt-header__logo--bundled img {
		width: auto;
		max-width: min(12rem, 54vw);
		height: auto;
		max-height: 3.25rem;
		object-fit: contain;
	}

	.wt-header__actions {
		flex: none;
	}

	.wt-menu-toggle {
		min-width: 2.8rem;
		max-width: 5rem;
	}

	/*
	 * Page heroes and media remain inside their section rather than creating a
	 * viewport-width overhang.
	 */
	.wt-hero,
	.wt-page-hero--photo,
	.wt-page-hero__media,
	.wt-hero__media {
		max-width: 100%;
		overflow: hidden;
	}

	.wt-page-hero--photo .wt-page-hero__inner,
	.wt-hero .wt-hero__inner {
		width: 100%;
		max-width: 100%;
		padding-inline: var(--wt-gutter);
	}

	.wt-page-hero__visuals {
		max-width: calc(100% - (2 * var(--wt-gutter)));
	}

	/*
	 * Finder, forms, catalogs and content cards may still be visually rounded,
	 * but their outer wrappers never become a separate narrow page frame.
	 */
	.wt-home .wt-finder .wt-container,
	.wt-finder .wt-container,
	.wt-shop-page > .wt-container,
	.wt-experience > .wt-container,
	.wt-about-page > .wt-container {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.wt-finder__panel,
	.wt-finder__panel-body,
	.wt-finder__form,
	.wt-finder__group,
	.wt-finder__row,
	.wt-finder__vehicle-grid,
	.wt-finder__catalog-search,
	.wt-shop,
	.wt-shop__main,
	.wt-catalog-toolbar,
	.wt-booking-layout,
	.wt-booking-form,
	.wt-about-contact__panel {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.wt-site :where(.wt-input, .wt-select, input, select, textarea) {
		width: 100%;
		min-width: 0;
	}

	.wt-shop-filters,
	.wt-drawer__panel {
		max-width: 100%;
	}

	.wt-shop-filters {
		width: min(22rem, 100%);
	}

	.wt-drawer__panel {
		width: min(22rem, 100%);
	}

	/*
	 * Mobile footer: replace the inherited desktop stack with a compact,
	 * action-first layout. The dark footer extends behind the fixed action bar
	 * so there is no pale strip or second visual "phone frame" at the bottom.
	 */
	.wt-footer--compact {
		width: 100%;
		padding-block:
			clamp(1.75rem, 7vw, 2.4rem)
			calc(var(--wt-mobile-bar-h) + env(safe-area-inset-bottom, 0px) + 1rem);
		background:
			radial-gradient(circle at 100% 0%, rgba(16, 144, 211, 0.16), transparent 17rem),
			radial-gradient(circle at 0% 100%, rgba(255, 91, 18, 0.13), transparent 16rem),
			var(--wt-navy-charcoal);
	}

	.wt-footer--compact > .wt-container {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding-inline: var(--wt-gutter);
	}

	.wt-footer__grid--compact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		max-width: 100%;
		gap: 1.5rem 1rem;
	}

	.wt-footer__grid--compact > .wt-footer__col {
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.wt-footer__col--brand,
	.wt-footer__col--actions {
		grid-column: 1 / -1;
	}

	.wt-footer__brand-link {
		display: inline-flex;
		max-width: 9.25rem;
		border-radius: 0.75rem;
	}

	.wt-footer__brand-link:hover {
		text-decoration: none;
	}

	.wt-footer--compact .wt-footer__logo,
	.wt-footer--compact .wt-footer__bundled-logo {
		display: block;
		width: 8.5rem;
		max-width: 100%;
		height: auto;
		max-height: 6.25rem;
		margin: 0;
		padding: 0.55rem;
		border: 1px solid rgba(255, 255, 255, 0.72);
		border-radius: 0.7rem;
		background: var(--wt-white);
		object-fit: contain;
	}

	.wt-footer--compact .wt-footer__logo img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 5rem;
		object-fit: contain;
	}

	.wt-footer__summary {
		max-width: 32rem;
		margin: 0.85rem 0 1rem;
		color: var(--wt-text-on-dark-muted);
		font-size: 0.78rem;
		line-height: 1.55;
	}

	.wt-footer__contact--compact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.55rem;
		width: 100%;
	}

	.wt-footer__contact--compact .wt-footer__contact-item {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
		min-width: 0;
		min-height: 2.6rem;
		padding: 0.58rem 0.65rem;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 0.65rem;
		background: rgba(255, 255, 255, 0.045);
		color: var(--wt-text-on-dark);
		font-size: 0.7rem;
		line-height: 1.35;
		text-decoration: none;
	}

	.wt-footer__contact--compact .wt-footer__contact-item--address,
	.wt-footer__contact--compact .wt-footer__contact-item--hours {
		grid-column: 1 / -1;
	}

	.wt-footer__contact--compact .wt-icon {
		flex: 0 0 auto;
		width: 1rem;
		height: 1rem;
		margin-top: 0.08rem;
		color: var(--wt-orange);
	}

	.wt-footer--compact h2 {
		margin: 0 0 0.65rem;
		font-size: 0.72rem;
		line-height: 1.25;
		letter-spacing: 0.055em;
	}

	.wt-footer--compact .wt-footer__list {
		display: grid;
		gap: 0.1rem;
	}

	.wt-footer--compact .wt-footer__list a {
		display: flex;
		align-items: center;
		min-height: 2rem;
		padding-block: 0.25rem;
		color: var(--wt-text-on-dark);
		font-size: 0.74rem;
		line-height: 1.25;
	}

	.wt-footer--compact .wt-footer__list a::before {
		content: "";
		flex: 0 0 auto;
		width: 0.28rem;
		height: 0.28rem;
		margin-inline-end: 0.45rem;
		border-radius: 50%;
		background: var(--wt-orange);
	}

	.wt-footer__actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.wt-footer__action {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.32rem;
		min-width: 0;
		min-height: 3.7rem;
		padding: 0.55rem 0.3rem;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 0.75rem;
		background: rgba(255, 255, 255, 0.06);
		color: var(--wt-white);
		font-size: 0.68rem;
		font-weight: 800;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
	}

	.wt-footer__action .wt-icon {
		width: 1.15rem;
		height: 1.15rem;
		color: var(--wt-orange);
	}

	.wt-footer__action--accent {
		border-color: var(--wt-orange);
		background: linear-gradient(135deg, var(--wt-orange), var(--wt-orange-bright));
		color: var(--wt-navy-charcoal);
	}

	.wt-footer__action--accent .wt-icon {
		color: var(--wt-navy-charcoal);
	}

	.wt-footer--compact .wt-footer__social {
		margin-top: 0.75rem;
	}

	.wt-footer--compact .wt-footer__bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		max-width: 100%;
		gap: 0.55rem;
		margin-top: 1.4rem;
		padding-top: 0.9rem;
	}

	.wt-footer--compact .wt-footer__bottom p {
		margin: 0;
		font-size: 0.65rem;
		line-height: 1.45;
	}

	.wt-footer--compact .wt-footer__legal {
		gap: 0.75rem;
		font-size: 0.65rem;
	}

	/*
	 * Replace the inset floating "phone dock" with a stable full-width action
	 * bar. Safe-area padding keeps it usable on devices with a home indicator.
	 */
	.wt-mobile-bar {
		inset-inline: 0;
		inset-block-end: 0;
		width: 100%;
		max-width: none;
		height: auto;
		min-height: var(--wt-mobile-bar-h);
		margin: 0;
		padding: 0 0 env(safe-area-inset-bottom, 0px);
		border: 0;
		border-top: 1px solid var(--wt-line-light-strong);
		border-radius: 0;
		background: color-mix(in srgb, var(--wt-navy-charcoal) 96%, transparent);
		box-shadow: 0 -0.45rem 1.3rem rgba(3, 18, 31, 0.2);
		backdrop-filter: blur(16px);
		overflow: hidden;
		transform: none;
	}

	.wt-mobile-bar__item {
		min-width: 0;
		min-height: var(--wt-mobile-bar-h);
		margin: 0;
		padding: 0.58rem 0.35rem;
		border-radius: 0;
	}

	.wt-mobile-bar__item--accent {
		position: static;
		inset: auto;
		min-height: var(--wt-mobile-bar-h);
		margin: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 380px) {
	:root {
		--wt-gutter: 0.85rem;
	}

	.wt-header__logo img,
	.wt-header__logo--core img,
	.wt-header__logo--bundled img {
		max-width: 50vw;
	}

	.wt-mobile-bar__item {
		font-size: 0.68rem;
	}
}

@supports not (overflow: clip) {
	@media (max-width: 767px) {
		html,
		body,
		.wt-site,
		.wt-main {
			overflow-x: hidden;
		}
	}
}