/*
 * Safari / iOS compatibility layer.
 * These rules add WebKit fallbacks without changing the site's visual design.
 */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Prevent WebKit flex items from expanding past their Bootstrap columns. */
.row > [class*="col-"],
.banner-content > *,
.feature-item > *,
.video-content,
.content-desc {
	min-width: 0;
}

/* Keep the fixed navigation and animated layers sharp in Safari. */
#top,
.hero-banner--slider .hero-slider__slide,
.logos-slide,
.logos-slide-clients,
.slider-track {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#top,
.hero-banner--slider .hero-slider__slide {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.logos-slide,
.logos-slide-clients,
.slider-track {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	will-change: transform;
}

/* Safari form controls inherit the existing custom appearance consistently. */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
	-webkit-appearance: none;
	appearance: none;
	opacity: 1;
}

select {
	appearance: none;
}

/* Standard fallbacks for the WebKit fill-available declarations in style.css. */
@media (max-width: 1024px) {
	.video-content video {
		max-width: 100%;
		max-width: -webkit-fill-available;
	}
}

@media (max-width: 768px) {
	.feature-item > div {
		width: 100%;
		width: -webkit-fill-available;
	}
}

@media (max-width: 500px) {
	.video-content video {
		max-width: 100%;
		max-width: -webkit-fill-available;
	}
}

/* Fallback for Safari versions that do not implement display:ruby. */
@supports not (display: ruby) {
	.labels-secondary {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
}

/* Use the intended balanced headings when the browser supports the standard. */
.services-header h3,
.title-center h4 {
	text-wrap: balance;
}

/* Respect the safe area only when a device exposes one; desktop stays unchanged. */
@supports (padding: max(0px)) {
	#top {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	.close-modal {
		top: max(20px, env(safe-area-inset-top));
		right: max(30px, env(safe-area-inset-right));
	}
}

/* iOS Safari viewport bars must not resize or crop the hero during interaction. */
@supports (-webkit-touch-callout: none) {
	html,
	body {
		min-height: -webkit-fill-available;
	}

	.video-modal {
		height: -webkit-fill-available;
	}

	.background-video {
		-webkit-transform: translateY(-50%) translateZ(0);
		transform: translateY(-50%) translateZ(0);
	}
}

@supports (-webkit-touch-callout: none) and (height: 100svh) {
	@media (max-width: 1024px) {
		.hero-banner,
		.hero-banner.hero-banner--slider {
			height: 80svh;
		}

		.video-modal {
			height: 100dvh;
		}
	}
}