/* Hero quote-form card + #form-card scroll anchor.
   Enqueued on every location AND city-service single where alta_show_hero_form()
   is true (see functions.php) — that is ~700 pages, not just the Austin pilot.
   Keep that gate and this file in lockstep.
   Card + form rules adapted from inc/blocks/hero-image/hero-image.css. */

/* tailwind.css sets body,html{overflow-x:hidden}, which makes body a scroll
   container and silently disables position:sticky on the whole page. clip
   blocks horizontal scroll the same way WITHOUT creating a scroll container.
   (Browsers without clip support fall back to hidden: no sticky, no breakage.) */
html,
body {
	overflow-x: clip;
}

/* Top spacing: enough to clear the fixed header, tight enough that the
   H1 + form card land above the fold (the old 13rem pushed them below it). */
.loc-hero {
	padding-top: 8.5rem;
}
@media (min-width: 960px) {
	.loc-hero {
		padding-top: 10rem;
	}
}

/* Desktop: the form card is taller than the copy, so pin the left column
   while the card scrolls. Top offset clears the fixed header. */
@media (min-width: 960px) {
	.loc-hero .loc-hero__grid {
		align-items: flex-start;
	}
	.loc-hero .loc-hero__left {
		position: -webkit-sticky;
		position: sticky;
		top: 8rem;
	}
}

/* H1 fills its column. Outranks the theme's legacy width utilities
   (w-4/5 / sm:w-3/6 at the 960px breakpoint) that target the hero title. */
#location-hero.loc-hero h1 {
	width: 100%;
}
@media (min-width: 960px) {
	#location-hero.loc-hero h1 {
		width: 100%;
	}
}

/* Glassmorphism form card */
.loc-hero__glass {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 0 24px rgba(255, 255, 255, 0.05),
		0 12px 40px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Form labels sit on the dark card */
.loc-hero__form form label {
	color: #fff;
}

/* Match the HubSpot submit button height to the Call to Book button (3.5rem) */
.loc-hero__form .hs_submit {
	min-height: 3.5rem;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 1.5rem;
}
.loc-hero__form .hs_submit input.hs-button {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
}

/* Smooth scroll for the "Get a Free Quote" → #form-card anchor.
   Now that this file loads on ~700 pages it affects every in-page anchor
   (FAQ accordions included), so honour the reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Offset the scroll target so the fixed header doesn't cover the form section */
#form-card {
	scroll-margin-top: 6rem;
}

/* Reserve height for both HubSpot embeds. The hero form is injected after
   paint (desktop only — see hero.php), and the section embed renders late on
   slow connections; without a floor the page shifts and #form-card resolves to
   the wrong offset mid-scroll. */
.loc-hero__form {
	min-height: 420px;
}
#form-card .acf-form {
	min-height: 420px;
}

/* Pair fields onto one row to shorten the form (raw HubSpot embeds only).
   NB: the Zip field maps to HubSpot's "city" property → wrapper is .hs_city. */
.loc-hero__form form .hs_firstname,
.loc-hero__form form .hs_lastname,
.loc-hero__form form .hs_phone,
.loc-hero__form form .hs_city {
	float: left;
	width: 50%;
	box-sizing: border-box;
}
.loc-hero__form form .hs_firstname,
.loc-hero__form form .hs_phone {
	padding-right: 0.5rem;
}
.loc-hero__form form .hs_lastname,
.loc-hero__form form .hs_city {
	padding-left: 0.5rem;
}
.loc-hero__form form::after {
	content: "";
	display: block;
	clear: both;
}

/* Anything after the paired fields (consent checkbox, submit) must clear the
   floats and span full width, or it wraps into the gutter beside a pair. */
.loc-hero__form form .hs-form-field:not(.hs_firstname):not(.hs_lastname):not(.hs_phone):not(.hs_city),
.loc-hero__form form .hs_submit,
.loc-hero__form form .legal-consent-container {
	float: none;
	clear: both;
	width: 100%;
}