/* Generic HubSpot popup — one shared modal shell (template-parts/global/
   hubspot-popup.php) reused by every popup trigger on the site, plus the
   .hs-form rules further down that also style the contact page's own
   inline embed (page-contact.php), since both use real HubSpot markup.
   z-index:1000 clears .site-header's own 100 (base.css) with plenty of
   headroom. */
.hs-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow: hidden;
}

.hs-popup.is-open {
	display: block;
}

/* Same scroll-lock convention as body.has-menu-open (base.css) for the
   mobile nav. */
body.has-popup-open {
	overflow: hidden;
}

/* Invisible — just a full-viewport click target for "click outside to
   close" (site.js). The dark dimmed surround is .hs-popup__panel's own
   box-shadow below, NOT a background colour here — an actual overlay div
   between the panel and the page would sit directly behind the panel in
   paint order, so the panel's own backdrop-filter would blur THAT flat
   dark colour instead of the real page behind it (confirmed live: with a
   solid dark overlay here, the "frosted" panel just looked like plain
   opaque grey, no blur/detail visible at all, since there was nothing but
   flat colour immediately behind it to blur). */
.hs-popup__overlay {
	position: absolute;
	inset: 0;
}

/* Frosted glass. A huge-spread box-shadow on the panel itself stands in
   for a separate dark overlay div (see .hs-popup__overlay's own comment
   for why) — this way backdrop-filter blurs the actual page behind the
   panel, not a flat colour, so real detail/colour from whatever's back
   there actually shows through, softened. Panel fill only needs enough
   white to keep dark text legible over that blur, not to hide it. */
.hs-popup__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 53px;
	width: min(90vw, 62.5rem);
	max-height: 85vh;
	overflow-y: auto;
	padding: 80px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 9999px rgba(27, 27, 27, 0.75);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.hs-popup__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--color-ink);
}

.hs-popup__close:hover,
.hs-popup__close:focus-visible {
	opacity: 0.6;
}

.hs-popup__intro {
	flex: 1;
	min-width: 0;
}

.hs-popup__heading {
	margin: 0 0 20px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.1875rem;
	line-height: 1.2;
	color: var(--color-ink);
}

.hs-popup__description {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--color-ink);
}

.hs-popup__description em {
	font-style: italic;
}

.hs-popup__form-target {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.hs-popup__panel {
		flex-direction: column;
		align-items: stretch;
		width: 92vw;
		max-height: 90vh;
		padding: 48px 24px;
		gap: 32px;
	}

	.hs-popup__heading {
		font-size: 1.75rem;
	}
}

/* --- HubSpot form styling ---
   Targets HubSpot's own stable class names (forms.js re-renders a form's
   internal markup on validation/error-state changes, but always re-
   applies these same classes — styling them directly survives that,
   unlike JS that edits the rendered DOM structure, which a re-render
   would just wipe out again). Shared by every popup form AND the contact
   page's inline embed (page-contact.php) — one set of rules, no per-form
   CSS needed as more forms are added. */
.hs-form fieldset {
	max-width: 100% !important; /* HubSpot ships an inline max-width per column count */
}

.hs-form .hs-form-field {
	margin-bottom: 20px;
}

/* Every HubSpot form now has its own placeholder text configured (including
   the required-field asterisk baked directly into that placeholder where
   needed) — the label's own field-name text (and HubSpot's separate
   `<span class="hs-form-required">*</span>` marker, previously shown here)
   is redundant with that, so the whole label is hidden again. Only the
   direct field label is targeted (>), not a label nested inside
   .hs-error-msgs below, which is a validation message, not a field name,
   and must stay visible. */
.hs-form .hs-form-field > label {
	display: none;
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form textarea,
.hs-form select {
	/* !important: HubSpot ships its own per-form <style> block (inspect a
	   live form to see it — a class scoped to that exact form's ID) with
	   `fieldset.form-columns-1 .hs-input{width:95%}`. Three classes there
	   beats this rule's one class + two elements regardless of source
	   order, confirmed live (computed width measured 526px of a 554px
	   field — 95% exactly) — !important is the only way to still win
	   against that without literally matching its own ID-specific
	   selector (which would break the instant HubSpot regenerates it). */
	width: 100% !important;
	padding: 16px 30px;
	border: 1px solid #e3e3e3;
	border-radius: 100px;
	background: #fafafa;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	color: var(--color-ink);
	box-sizing: border-box;
}

.hs-form textarea {
	border-radius: 15px;
	min-height: 6.25rem;
	resize: vertical;
}

/* HubSpot's own per-form stylesheet also puts a fixed 8px margin-right on
   every field's .input wrapper — including single-column fields
   (fieldset.form-columns-1), where there's no second field alongside it
   for that margin to act as a gap against, so it just reads as this field
   falling 8px short of the fields above/below it (confirmed live: 98.6%
   of the fieldset width instead of 100%). Left alone for form-columns-2/3,
   where it's the actual, wanted gap between paired fields. */
.hs-form fieldset.form-columns-1 .input {
	margin-right: 0 !important;
}

/* Same 8px margin-right also lands on the LAST field in a form-columns-2/3
   row, where — unlike between the fields it's meant to separate — there's
   nothing after it to create a gap against either, so that row's own
   right edge fell 8px short of the single-column fields' now-full-width
   right edge above/below it. Trimmed here so every row, paired or not,
   lines up on the same right edge. */
.hs-form fieldset.form-columns-2 .hs-form-field:last-child .input,
.hs-form fieldset.form-columns-3 .hs-form-field:last-child .input {
	margin-right: 0 !important;
}

/* The whole input is now the outer pill (matching every other field here),
   with the native ::file-selector-button as a second pill nested inside it
   via this padding — "No file chosen" (native browser text, not something
   markup/content can target directly) inherits this color/font instead.
   Matches the same pattern on invanity.co.uk/contact/'s live HubSpot form.
   The button itself is ink/white rather than a near-identical off-white —
   barely distinguishable from its own #fafafa surroundings otherwise —
   which also reads as "the same dark pill" as the submit button's own
   hover state below, not an arbitrary new color. */
.hs-form input[type="file"] {
	/* !important: guards against that native size="30" sizing hint some
	   browsers still honour as a minimum — see .hs-form-field .input's own
	   comment just above for the full story. */
	width: 100% !important;
	display: block;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #e3e3e3;
	border-radius: 100px;
	background: #fafafa;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.hs-form input[type="file"]::file-selector-button {
	padding: 14px 28px;
	margin-right: 14px;
	border: none;
	border-radius: 999px;
	background: var(--color-ink);
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 600;
	/* Deliberately a step smaller than the input's own 0.9375rem ("No file
	   chosen" — .hs-form input[type="file"] above) — the two came out
	   identical the first time this was reduced, which read as "nothing
	   changed" rather than the button standing apart as its own smaller
	   pill label. */
	font-size: 0.8125rem;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.hs-form input[type="file"]::file-selector-button:hover {
	opacity: 0.85;
}

.hs-form ::placeholder {
	color: var(--color-ink);
	opacity: 0.6;
}

.hs-form .hs-error-msgs {
	margin: 4px 0 0;
	padding: 0 30px;
	list-style: none;
}

.hs-form .hs-error-msgs label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: #c0392b;
}

.hs-form input[type="submit"],
.hs-form .hs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 10.625rem;
	padding: 16px 33px;
	margin-top: 10px;
	border: 1px solid #e3e3e3;
	border-radius: 40px;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Tried reproducing the site's own two-span "rolling text" hover here
   first (.btn__roll, base.css) via content:attr(value) reading the
   input's own value attribute for a duplicate text layer, avoiding any
   injected markup a HubSpot re-render could wipe out. Confirmed live it
   doesn't render at all though — <input> is a replaced element, and
   ::before/::after generated content is a well-known no-op on those in
   every browser, regardless of the input's type. Not fixable without
   markup HubSpot doesn't give us, so this is the next best thing: colour
   inverts and the button lifts with a soft shadow on hover instead, for
   the same "something responded" feedback. */
.hs-form input[type="submit"]:hover,
.hs-form .hs-button:hover {
	background: var(--color-ink);
	color: var(--color-white);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(27, 27, 27, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.hs-form input[type="submit"],
	.hs-form .hs-button {
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.hs-form input[type="submit"]:hover,
	.hs-form .hs-button:hover {
		transform: none;
	}
}

.hs-form .hs-richtext {
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.hs-form .submitted-message {
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-ink);
}