/**
 * Kerrigan — Global form field styling
 *
 * Targets Gravity Forms markup so any GF form dropped into a section picks
 * up the design. Figma reference: the hero "Get Storm Damage Inspection"
 * row — Roboto 18/400, line-height 36, placeholder #010101, white field,
 * square corners, sitting in a single row beside the submit button.
 *
 * GF's Orbital theme is disabled (theme="legacy" on the shortcode), so these
 * rules are the only form styling on the site. The submit is filtered to a
 * <button> carrying .btn .btn-primary .btn-arrow, so its appearance comes
 * from the global button system.
 */

/* Field height is a token so the submit cannot drift away from the inputs it
 * sits beside — which is exactly what happened: the button inherited .btn's
 * 20px block padding and rendered 60px against 48px fields. Figma has both at
 * 48 (button y 866-913, fields 867-912 on the hero export). */
.gform_wrapper {
	--field-height: 48px;
}

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	flex: 1 1 0;
	min-width: 180px;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield_label {
	position: absolute !important;
	overflow: hidden;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	height: var(--field-height);
	border: 0;
	border-radius: var(--radius-0);
	/* 20 at the developer's instruction, replacing the 16 these were built
	 * with. Height still comes from --field-height, so the zero vertical
	 * padding is unchanged. */
	padding: 0 var(--space-20);
	background-color: var(--white);
	color: var(--primary-black);
	font-family: var(--font-body);
	font-size: var(--fs-18);
	font-weight: 400;
	line-height: var(--lh-18-30);
	transition: var(--transition);
}

.gform_wrapper textarea {
	height: auto;
	min-height: 120px;
	/* The textarea is in the same selector list, but it sets its own padding to
	 * keep a vertical inset the single-line fields do not need — so the 20
	 * has to be restated here or it would sit 4px narrower than its siblings. */
	padding: var(--space-12) var(--space-20);
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--primary-black);
	opacity: 1;
}

.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: 2px solid var(--primary-green);
	outline-offset: 0;
}

/* Submit — appearance comes from the global .btn system; only layout here. */
.gform_wrapper .gform_footer {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* Gravity Forms leaves these at its own near-black, which the theme's inherited
 * --body-grey then paints. On the hero, which sits on a black photo, every
 * message was rendering invisible — the errors were there and unreadable. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	border-radius: var(--radius-0);
	color: var(--error-red);
	font-size: var(--fs-16);
}

/* Gravity Forms puts the summary in an <h2>, so base.css's `h1..h6 { color:
 * var(--primary-black) }` repainted it black inside the red block it sits in —
 * near-invisible on the hero's photo. Named here so the heading rule cannot
 * reach it, and held to the message size rather than a display heading's. */
.gform_wrapper .gform_submission_error {
	margin: 0;
	color: var(--error-red);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-body);
}

/* The hero's inline row is on a dark photo: the field hints are not errors, so
 * they go white rather than red, and GF's 20px default is brought back to the
 * 16 the messages beside them use — at 20 the phone hint wrapped to two lines
 * and pushed the row taller. */
.form-inline .gform_wrapper .gfield_description,
.form-inline .gform_wrapper .instruction {
	color: var(--white);
	font-size: var(--fs-16);
}

.form-inline .gform_wrapper .gfield_validation_message,
.form-inline .gform_wrapper .validation_message,
.form-inline .gform_wrapper .gform_validation_errors {
	color: var(--error-red);
	font-size: var(--fs-16);
}

/* -------------------------------------------------------------------
 * Inline single-row layout — the hero variant.
 *
 * Measured from Figma: the row spans the full 1440 container as
 * 4 fields x 270 + button 300 + 4 gaps x 15. The fields list and the
 * submit are siblings inside <form>, so the form is the flex row and the
 * fields list is a nested flex row.
 * ------------------------------------------------------------------- */
.form-inline .gform_wrapper form {
	display: flex;
	align-items: stretch;
	gap: var(--space-15);
}

/* GF wraps the fields in .gform-body, so that is the flex child of <form>,
 * not .gform_fields itself. */
.form-inline .gform_wrapper .gform-body {
	flex: 1 1 auto;
	min-width: 0;
}

.form-inline .gform_wrapper .gform_fields {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-15);
}

.form-inline .gform_wrapper .gfield {
	flex: 1 1 0;
	min-width: 0;
}

.form-inline .gform_wrapper .gform_footer {
	flex: 0 0 300px;
}

.form-inline .gform_wrapper .gform_footer .gform_button {
	width: 100%;
	/* Match the fields exactly. padding-block must go with it — .btn's own
	 * 20px would otherwise fight the height and re-centre the label. */
	height: var(--field-height);
	padding-block: 0;
	padding-inline: 0;
}

/* This submit sits on the black hero bar, where .btn-primary's black hover
 * makes the fill disappear into the background. Invert to white instead.
 *
 * Note this is the opposite call to the header CTA, which sits on the same
 * black ground and does take the black hover — so the two are set
 * independently rather than sharing an "on dark" variant.
 *
 * (The Gravity Forms submit filter hard-codes one class list for every form,
 * so the variant cannot simply be added to the markup.) */
.form-inline .gform_wrapper .gform_footer .gform_button:hover,
.form-inline .gform_wrapper .gform_footer .gform_button:focus-visible {
	background-color: var(--white);
	color: var(--primary-green);
}

/* Legacy GF markup nests the fields in a <ul>; strip the list defaults
 * that show through now the plugin stylesheets are disabled. */
.gform_legacy_markup_wrapper ul.gform_fields {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_legacy_markup_wrapper ul.gform_fields > li.gfield {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1199px) {

	.form-inline .gform_wrapper form {
		flex-wrap: wrap;
	}

	.form-inline .gform_wrapper .gform-body {
		flex: 1 1 100%;
	}

	.form-inline .gform_wrapper .gform_fields {
		flex-wrap: wrap;
	}

	.form-inline .gform_wrapper .gfield {
		flex: 1 1 calc(50% - var(--space-15));
	}

	.form-inline .gform_wrapper .gform_footer {
		flex: 1 1 100%;
	}
}

@media (max-width: 767px) {

	.form-inline .gform_wrapper .gfield {
		flex: 1 1 100%;
	}
}

@media (max-width: 767px) {

	.gform_wrapper .gfield {
		flex: 1 1 100%;
	}

	.gform_wrapper .gform_footer,
	.gform_wrapper .gform_footer .gform_button {
		width: 100%;
	}
}

/* Editor-only notice shown where a form ID has not been set yet. */
.form-missing-notice {
	border: 1px dashed var(--primary-green);
	padding: var(--space-16);
	background-color: var(--white);
	color: var(--primary-black);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: var(--lh-body);
}