/* Gravity Forms, wearing the design's clothes.
 *
 * Gravity's own stylesheets are switched off (see inc/forms.php) because the
 * design is specific enough that overriding them costs more than dressing the
 * markup directly. That trade has one consequence worth remembering: anything
 * Gravity relies on CSS for -- hiding the honeypot, laying out its column grid,
 * showing validation state -- has to be done here instead.
 *
 * The sections' own rules (`.audit-card input`, `.demo-form label`) already
 * reach Gravity's fields, since they are written as descendant selectors and
 * Gravity renders inside the section's container. This file covers what those
 * rules cannot know about.
 */

/* ---- wrapper ------------------------------------------------------------ */

.gform_wrapper,
.gform_wrapper form {
	margin: 0;
}

.gform_anchor {
	position: absolute;
}

/* The honeypot is a real field that Gravity hides with the stylesheet this
   theme turns off. Without this it renders as a visible text input. */
.gform_validation_container,
.gfield--type-honeypot {
	display: none !important;
}

/* Gravity's twelve-column grid, which the modern markup assumes. */
.gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gfield {
	grid-column: span 12;
	min-width: 0;
}

.gfield--width-half { grid-column: span 6; }
.gfield--width-third { grid-column: span 4; }
.gfield--width-quarter { grid-column: span 3; }

/* A form set to hidden labels keeps them for screen readers only -- the design
   carries the field name in the placeholder. */
.gform_fields.hidden_label .gfield_label,
.gfield_label.gform-field-label--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ginput_container { display: block; }

.gform_footer { display: block; }

/* Gravity prints its own hidden bookkeeping inputs in the footer; they must not
   pick up the field styling the sections apply to `input`. */
.gform_wrapper input[type="hidden"] {
	display: none !important;
}

/* ---- validation --------------------------------------------------------- */

/* The design writes a required field as `Label*`, the star raised and coral.
   Gravity nests a span inside a span, so both are levelled to plain inline. */
.gform_wrapper .gfield_required {
	display: inline;
	margin: 0;
	padding: 0;
	color: var(--coral, #e8473b);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	vertical-align: baseline;
}

/* Gravity's error summary is not shown: every field already carries its own
   message, and the panels these forms sit in are drawn to a fixed height, so a
   banner repeating what is already on screen costs layout it does not have.
   It stays in the document rather than being removed, because Gravity moves
   focus to it on a failed submission and screen readers announce it -- which is
   the only job it is doing here. */
.gform_wrapper .gform_validation_errors {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gform_wrapper .gfield_error :is(input, textarea, select) {
	border-color: var(--coral, #e8473b);
}

/* The field messages sit in the gap the design already leaves between fields,
   rather than adding height.
 *
 * These panels are height-locked by construction -- the card, and the section
 * around it, are both drawn to a fixed height, and on Get a Demo the form is
 * absolutely positioned inside its section. Anything that grows therefore
 * spills over the section below instead of pushing it down. Taking the message
 * out of flow keeps every resting pixel exactly as drawn and still puts the
 * message directly under the field it belongs to.
 *
 * `pointer-events: none` so a message can never intercept a click meant for the
 * field beneath it. */
.gform_wrapper .gfield { position: relative; }


/* Gravity gives the message both `gfield_description` and `validation_message`,
   so it is named by both classes here -- otherwise the description rule below,
   at the same specificity and later in the file, sets its size and spacing.
   Sized to clear the tightest gap the design leaves between two fields, which
   is 16px on the SEO card, so the message never reaches the field beneath. */
.gform_wrapper .gfield_description.validation_message,
.gform_wrapper .gfield_validation_message {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	color: var(--coral, #e8473b);
	font-size: 11px;
	line-height: 15px;
	pointer-events: none;
}

.gform_wrapper .gfield_description {
	margin-top: 6px;
	font-size: 13px;
	line-height: 18px;
}

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

/* Replaces the form in place after an ajax submission, so it inherits the panel
   it sat in and only needs its own rhythm. */
.gform_confirmation_message {
	margin: 0;
	padding: 8px 0;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}

/* With the form gone the panel would otherwise hold its message against the
   top edge and leave the rest empty, so the message takes the space instead. */
.audit-card:has(.gform_confirmation_message),
.demo-form:has(.gform_confirmation_message) {
	display: flex;
	flex-direction: column;
}

.audit-card:has(.gform_confirmation_message) .gform_wrapper,
.demo-form:has(.gform_confirmation_message) .gform_wrapper {
	display: grid;
	flex: 1;
	place-items: center;
}

.gform_confirmation_message p:last-child { margin-bottom: 0; }

/* Gravity's ajax transport iframe. */
iframe.gform_ajax_frame {
	position: absolute;
	width: 1px;
	height: 1px;
	border: 0;
	opacity: 0;
}

/* ---- the audit cards ----------------------------------------------------- */

/* The spacing itself lives with the sections, in blocks/lead-hero/style.css:
   the design set it on the `<label>` that wrapped each input, and those rules
   name `.gfield` too. Gravity's honeypot is the first field in the DOM, so a
   rule meant for the first *visible* field is written against the field that
   follows the honeypot. */

.audit-card .gform_footer { margin: 0; }

/* ---- the demo form ------------------------------------------------------- */

/* The demo form's grid is the design's own two fixed columns, not Gravity's
   twelve, so the column spans it hands out have to be released -- except for
   the message, which the design runs across the row. */
.demo-form .gfield { grid-column: auto; }
.demo-form .gfield--width-full { grid-column: 1 / -1; }

/* The design's `label > span` rule reserves the label's line, and Gravity puts
   the label text and the required marker in spans of their own -- so that rule
   lands on both and stacks them. They are the label's contents, not the label
   line, so they go back to being inline. */
.demo-form .gfield_label > span {
	display: inline;
	height: auto;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.demo-form .gform_footer { margin: 0; }