/* =========================================================================
   HNZ Constructions — form overrides

   WPForms overrides giving the design's borderless underline fields.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css.
   ========================================================================= */

/* WPForms overrides ======================================================
   The design uses borderless fields with a single underline and a small bold
   label above. Set WPForms -> Settings -> General -> Include Form Styling to
   "None (recommended for theme styling)" so these rules are not fighting the
   plugin's own CSS.

   Note: the Phone field is WPForms Pro only. On Lite, use a Single Line Text
   field for it -- these rules cover both.
   ====================================================================== */

.wpforms-container .wpforms-field {
	padding: 10px 0 !important;
}

.contact__form .wpforms-container,
.contact__form .wpforms-container-full {
	margin: 0;
	max-width: none;
}

.contact__form .wpforms-field-container {
	display: grid;
}

.contact__form .wpforms-field {
	padding: 0;
}

div.wpforms-container-full .wpforms-field-label {
	margin-bottom: var(--sp-1) !important;
	color: var(--c-ink-muted) !important;
	font-family: var(--font-display);
}

/* Labels ---------------------------------------------------------------- */

.contact__form .wpforms-field-label,
.contact__form .wpforms-field-label-inline {
	display: block;
	margin: 0 0 var(--sp-1);
	font-family: var(--font-display) !important;
	font-size: 16px !important; /* 16px */
	font-weight: var(--fw-display) !important; /* 800 */
	font-style: normal !important;
	line-height: 1 !important; /* 100% */
	letter-spacing: var(--ls-tight) !important; /* -3% */
	text-transform: none !important;
	color: #606060 !important;
}

.contact__form div.wpforms-container-full .wpforms-field-label {
	color: #606060 !important;
}

.contact__form .wpforms-field-sublabel {
	margin-top: var(--sp-1);
	font-family: var(--font-display) !important;
	font-size: 16px !important; /* 16px */
	font-weight: var(--fw-display) !important; /* 800 */
	font-style: normal !important;
	line-height: 1 !important; /* 100% */
	letter-spacing: var(--ls-tight) !important; /* -3% */
	text-transform: none !important;
	color: #606060 !important;
}

.contact__form .wpforms-required-label {
	/* Native required attributes continue to expose the state to assistive
	   technology; the reference omits asterisks from the visual labels. */
	display: none;
}

/* Inputs ---------------------------------------------------------------- */

.contact__form .wpforms-field input[type="text"],
.contact__form .wpforms-field input[type="email"],
.contact__form .wpforms-field input[type="tel"],
.contact__form .wpforms-field input[type="url"],
.contact__form .wpforms-field input[type="number"],
.contact__form .wpforms-field select,
.contact__form .wpforms-field textarea {
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-ink);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--c-ink);
	appearance: none;
}

.contact__form .wpforms-field input:focus,
.contact__form .wpforms-field select:focus,
.contact__form .wpforms-field textarea:focus {
	/* The 1px->2px underline change alone isn't a reliable focus indicator
	   (WCAG 2.4.11) on a borderless field -- add a visible outline so
	   keyboard focus doesn't depend on someone noticing a 1px change. */
	/* WPForms 7 resets outline after the theme stylesheet. */
	outline: 0 !important;
	outline-offset: 0 !important;
	border-bottom-width: 2px !important;
	box-shadow: none;
}

.contact__form .wpforms-field textarea {
	/* Measured: label ink to the Message underline is 122px, vs 36px for a
	   single-line field's label-to-underline gap. Same top/bottom padding
	   (--sp-2 x2 = 16px) on both, so the textarea needs ~106px of content
	   height, not the previous 5.5rem (88px), to land the underline where
	   the export has it. */
	/* WPForms 7 applies its own field-height custom property after the theme
	   stylesheet. Keep the reference's 106px message area authoritative. */
	min-height: 6.625rem !important;
	resize: vertical;
}

.contact__form .wpforms-field input::placeholder,
.contact__form .wpforms-field textarea::placeholder {
	color: var(--c-ink-muted);
}

/* Name field: First / Last side by side --------------------------------- */

.contact__form .wpforms-field-row {
	max-width: none;
}

.contact__form .wpforms-field-name .wpforms-field-row::before,
.contact__form .wpforms-field-name .wpforms-field-row::after {
	/* WPForms' float-era clearfixes become empty grid items. */
	display: none !important;
	content: none !important;
}

.contact__form .wpforms-field-name .wpforms-field-row-block {
	display: flex;
	flex-direction: column;
}

.contact__form .wpforms-field-name .wpforms-field-sublabel {
	order: -1;
	margin: 0;
	font-family: var(--font-display) !important;
	font-size: 0 !important; /* 0px; preserves the accessible First / Last label text. */
	font-weight: var(--fw-display) !important; /* 800 */
	font-style: normal !important;
	line-height: 1 !important; /* 100% */
	letter-spacing: var(--ls-tight) !important; /* -3% */
	text-transform: none !important;
	color: #606060 !important;
}

.contact__form .wpforms-field-name .wpforms-field-sublabel::after {
	font-family: var(--font-display);
	font-size: 16px; /* 16px is the design's First / Last label size. */
	font-weight: var(--fw-display); /* 800 */
	font-style: normal;
	line-height: 1; /* 100% */
	letter-spacing: var(--ls-tight); /* -3% */
	text-transform: none;
	color: #606060;
}

.contact__form .wpforms-field-name .wpforms-field-row-block:first-child .wpforms-field-sublabel::after {
	content: "First Name:";
}

.contact__form .wpforms-field-name .wpforms-field-row-block:last-child .wpforms-field-sublabel::after {
	content: "Last Name:";
}

@media (max-width: 39.9375em) {
	.contact__form .wpforms-field-name .wpforms-field-row {
		/* WPForms 7 keeps name sub-fields in a flex row by default. */
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
	}

	.contact__form .wpforms-field-name .wpforms-field-row-block {
		width: 100% !important;
		margin-left: 0 !important;
	}
}

@media (min-width: 40em) {
	.contact__form .wpforms-field-name .wpforms-field-row {
		/* WPForms 7 restores display:flex in its frontend stylesheet. */
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* Measured: the two 325px fields sit 39px apart, not the 24px
		   (--sp-5) previously used -- no token matches 39px exactly. */
		gap: 2.4375rem;
	}

	.contact__form .wpforms-field-name .wpforms-field-row-block {
		width: 100% !important;
		float: none;
		clear: none !important;
		padding: 0 !important;
	}
}

/* Submit, styled as the arrow link ------------------------------------- */

.contact__form .wpforms-submit-container {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding: 0;
	/* Measured: Message's underline to the Submit row's ink is 47px, not
	   the 32px (--sp-6) previously used; --sp-7 (48px) is the closest
	   token. */
	margin-top: var(--sp-7);
}

.contact__form button.wpforms-submit,
.contact__form .wpforms-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	/* WPForms applies its default blue button treatment with a more specific
	   selector. The reference uses text and arrow only. */
	padding: 0 !important;
	background: transparent !important;
	border: 0;
	border-radius: 0;
	/* WPForms also applies typography through a more specific selector. */
	font-family: var(--font-display) !important;
	font-size: 24px !important; /* 24px */
	font-weight: var(--fw-display) !important; /* 800 */
	line-height: 1 !important; /* 100% */
	letter-spacing: var(--ls-tight) !important; /* -3% */
	color: var(--c-ink) !important;
	cursor: pointer;
	transition: opacity var(--transition);
}

.contact__form button.wpforms-submit:hover,
.contact__form .wpforms-submit:hover {
	background: transparent !important;
	opacity: 0.6;
}

/* The design pairs Submit with the long arrow. Drawn with a mask so it
   inherits the text colour, and sits after the button via flex.

   --arrow-mask's own viewBox is 32x22 (same shape as hnz_arrow()); the
   previous 34x12 box doesn't share that aspect ratio, so mask-size:contain
   was shrinking the visible arrow to fit the 12px height instead of
   drawing it at its designed size. Measured: the Submit row's 22px ink
   height is the arrow, not the type, confirming 32x22 is right here too. */
.contact__form .wpforms-submit-container::after {
	content: "";
	flex: none;
	width: 32px;
	height: 22px;
	background: currentcolor;
	pointer-events: none;
	-webkit-mask: var(--arrow-mask) no-repeat center / contain;
	mask: var(--arrow-mask) no-repeat center / contain;
	transition: transform var(--transition);
}

.contact__form .wpforms-submit-container:hover::after {
	transform: translateX(5px);
}

/* Validation / confirmation ------------------------------------------- */

.contact__form .wpforms-error,
.contact__form label.wpforms-error {
	margin-top: var(--sp-1);
	font-size: var(--fs-100); /* 12px */
	color: var(--c-ink);
}

.contact__form .wpforms-field input.wpforms-error,
.contact__form .wpforms-field textarea.wpforms-error {
	border-bottom-color: var(--c-ink);
	border-bottom-width: 2px;
}

.contact__form .wpforms-confirmation-container-full {
	margin: 0;
	padding: var(--sp-4);
	background: var(--c-surface-muted);
	border: 0;
	font-size: var(--fs-200); /* 13px */
}

/* Native fallback ======================================================
   Mirrors the same visual language when no plugin shortcode is configured.
   ====================================================================== */

.hnz-contact-form {
	display: grid;
	gap: var(--sp-5);
}

.hnz-contact-form label,
.hnz-contact-form label > span {
	display: block;
}

.hnz-contact-form label > span {
	margin-bottom: var(--sp-1);
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: var(--fw-display);
	font-style: normal;
	line-height: 1;
	letter-spacing: var(--ls-tight);
	text-transform: none;
	color: #606060;
}

.hnz-contact-form input,
.hnz-contact-form textarea {
	width: 100%;
	padding: var(--sp-2) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--c-ink);
	border-radius: 0;
	box-shadow: none;
	font: var(--fw-regular) var(--fs-200) / 1.5 var(--font-body);
	color: var(--c-ink);
	appearance: none;
}

.hnz-contact-form textarea {
	min-height: 6.625rem;
	resize: vertical;
}

.hnz-contact-form input:focus,
.hnz-contact-form textarea:focus {
	outline: 2px solid var(--c-ink);
	outline-offset: 4px;
	border-bottom-width: 2px;
}

.hnz-contact-form__names {
	display: grid;
	gap: var(--sp-5);
}

.hnz-contact-form__submit {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-7);
}

.hnz-contact-form__submit button {
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font-display);
	font-size: var(--fs-300); /* 13px */
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--c-ink);
	cursor: pointer;
}

.hnz-contact-form__submit::after {
	content: "";
	flex: none;
	width: 32px;
	height: 22px;
	background: currentcolor;
	pointer-events: none;
	-webkit-mask: var(--arrow-mask) no-repeat center / contain;
	mask: var(--arrow-mask) no-repeat center / contain;
	transition: transform var(--transition);
}

.hnz-contact-form__submit:hover::after {
	transform: translateX(5px);
}

.hnz-contact-form__notice {
	margin: 0 0 var(--sp-5);
	padding: var(--sp-4);
	background: var(--c-surface-muted);
	font-size: var(--fs-200); /* 13px */
}

.hnz-contact-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (min-width: 40em) {
	.hnz-contact-form__names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.4375rem;
	}
}

/* Homepage V2 contact --------------------------------------------------- */

.page-template-template-home-v2 .contact__form .wpforms-field-container {
	row-gap: 24px;
}

.page-template-template-home-v2 .contact__form .wpforms-field {
	padding: 0 !important;
}

.page-template-template-home-v2 .hnz-contact-form {
	gap: 24px;
}

.page-template-template-home-v2 .contact__form .wpforms-field textarea,
.page-template-template-home-v2 .hnz-contact-form textarea {
	min-height: 8.75rem !important;
}

.page-template-template-home-v2 .contact__form .wpforms-submit-container,
.page-template-template-home-v2 .hnz-contact-form__submit {
	justify-content: center;
	margin-top: 5.75rem !important;
}

.page-template-template-home-v2 .contact__form button.wpforms-submit,
.page-template-template-home-v2 .contact__form .wpforms-submit,
.page-template-template-home-v2 .hnz-contact-form__submit button {
	min-width: 17.75rem;
	padding: 18px 26px !important;
	border: 1px solid currentcolor !important;
	background: linear-gradient(var(--c-ink), var(--c-ink)) bottom / 100% 0 no-repeat !important;
	font-family: var(--font-display) !important;
	font-size: 14px !important;
	font-weight: var(--fw-display) !important;
	line-height: 1 !important;
	letter-spacing: 0.17em !important;
	text-transform: uppercase;
	justify-content: center;
	color: var(--c-ink) !important;
	transition:
		background-size 460ms cubic-bezier(0.22, 1, 0.36, 1),
		color 280ms ease,
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 280ms ease;
}

.page-template-template-home-v2 .contact__form button.wpforms-submit:hover,
.page-template-template-home-v2 .contact__form .wpforms-submit:hover,
.page-template-template-home-v2 .hnz-contact-form__submit button:hover,
.page-template-template-home-v2 .contact__form button.wpforms-submit:focus-visible,
.page-template-template-home-v2 .contact__form .wpforms-submit:focus-visible,
.page-template-template-home-v2 .hnz-contact-form__submit button:focus-visible {
	background-size: 100% 100% !important;
	color: #fff !important;
	opacity: 1;
	box-shadow: 0 0.75rem 1.75rem rgb(51 49 50 / 14%);
	transform: translateY(-2px);
}

.page-template-template-home-v2 .contact__form button.wpforms-submit:active,
.page-template-template-home-v2 .contact__form .wpforms-submit:active,
.page-template-template-home-v2 .hnz-contact-form__submit button:active {
	box-shadow: none;
	transform: translateY(0) scale(0.98);
}

.page-template-template-home-v2 .contact__form .wpforms-submit-container::after,
.page-template-template-home-v2 .hnz-contact-form__submit::after {
	display: none;
	content: none;
}

.page-template-template-home-v2 .hnz-contact-form label > span {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	color: #606060;
}

.page-template-template-home-v2 .contact__form .wpforms-field-label,
.page-template-template-home-v2 .contact__form .wpforms-field-sublabel,
.page-template-template-home-v2 .hnz-contact-form label > span {
	transform-origin: left bottom;
	transition:
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		color 280ms ease;
}

.page-template-template-home-v2 .contact__form .wpforms-field:focus-within > .wpforms-field-label,
.page-template-template-home-v2 .contact__form .wpforms-field-row-block:focus-within .wpforms-field-sublabel,
.page-template-template-home-v2 .hnz-contact-form label:focus-within > span {
	transform: translateY(-4px) scale(0.75);
	color: var(--c-ink) !important;
}

.page-template-template-home-v2 .contact__form .wpforms-field input[type="text"],
.page-template-template-home-v2 .contact__form .wpforms-field input[type="email"],
.page-template-template-home-v2 .contact__form .wpforms-field input[type="tel"],
.page-template-template-home-v2 .contact__form .wpforms-field input[type="url"],
.page-template-template-home-v2 .contact__form .wpforms-field input[type="number"],
.page-template-template-home-v2 .contact__form .wpforms-field select,
.page-template-template-home-v2 .hnz-contact-form input {
	min-height: 56px !important;
}

.page-template-template-home-v2 .contact__form .wpforms-field input:focus,
.page-template-template-home-v2 .contact__form .wpforms-field select:focus,
.page-template-template-home-v2 .contact__form .wpforms-field textarea:focus,
.page-template-template-home-v2 .hnz-contact-form input:focus,
.page-template-template-home-v2 .hnz-contact-form textarea:focus {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid var(--c-ink) !important;
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

.page-template-template-home-v2 .contact__form .wpforms-field input:-webkit-autofill,
.page-template-template-home-v2 .hnz-contact-form input:-webkit-autofill {
	background-color: transparent !important;
	-webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
	box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
	-webkit-text-fill-color: var(--c-ink) !important;
	caret-color: var(--c-ink);
}

.page-template-template-home-v2 .contact__form .wpforms-field input:autofill,
.page-template-template-home-v2 .hnz-contact-form input:autofill {
	background-color: transparent !important;
	box-shadow: 0 0 0 1000px var(--c-surface) inset !important;
	color: var(--c-ink) !important;
	caret-color: var(--c-ink);
}

@media (min-width: 40em) {
	.page-template-template-home-v2 .contact__form .wpforms-field-name .wpforms-field-row,
	.page-template-template-home-v2 .hnz-contact-form__names {
		column-gap: 5.5% !important;
	}
}

@media (max-width: 699px) {
	.page-template-template-home-v2 .contact__form .wpforms-field-name .wpforms-field-row,
	.page-template-template-home-v2 .hnz-contact-form__names {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 24px;
		column-gap: 0 !important;
	}

	.page-template-template-home-v2 .contact__form .wpforms-submit-container,
	.page-template-template-home-v2 .hnz-contact-form__submit {
		margin-top: 3rem !important;
	}

	.page-template-template-home-v2 .contact__form button.wpforms-submit,
	.page-template-template-home-v2 .contact__form .wpforms-submit,
	.page-template-template-home-v2 .hnz-contact-form__submit button {
		width: 100%;
		min-width: 0;
	}
}