/* Gravity Forms overrides.
 *
 * Enqueued only when Gravity Forms is active (see sws_pws_enqueue_gravity_forms).
 *
 * Gravity Forms' own stylesheet stays enabled on purpose: its CSS grid classes
 * provide the two-column layout the handoff spec relies on, so disabling it
 * would mean re-implementing the grid for no gain. These rules restyle the
 * controls to match the design system's form components — the same values as
 * .pw-input / .pw-label / .pw-btn--primary — so the quote form does not read as
 * a plugin bolted onto the page.
 *
 * Every value resolves from a token. Where the handoff's Gravity Forms spec
 * transcribed a hex that drifted from the design system's own form components,
 * the component wins: one visual language across the site beats matching a
 * transcription. Those three cases are noted inline.
 */

/* Gravity Forms 2.7+ ("orbital") reads these custom properties, and styling
   through them is far more robust than fighting its selectors.
 *
 * !important is deliberate and load-bearing here. Gravity Forms enqueues its own
 * stylesheets *after* the theme's, so equal-specificity rules go to GF, and it
 * additionally emits an inline <style> block scoped to
 * `#gform_wrapper_N[data-form-index='0']` — ID specificity the theme cannot
 * out-specify without hardcoding an install-specific form id. Overriding a
 * vendor's design-token layer is exactly what !important is for; it is confined
 * to this block. */
.gform-theme--foundation,
.gform-theme--framework,
.gform_wrapper {
	--gf-color-primary: var(--action-primary-hover) !important;
	--gf-color-primary-rgb: 52, 133, 58 !important;
	--gf-color-primary-darker: var(--action-primary-hover) !important;
	--gf-color-primary-lighter: var(--green-400) !important;
	--gf-color-primary-contrast: var(--neutral-0) !important;
	--gf-color-danger: var(--status-danger) !important;
	--gf-color-out-ctrl-light-darker: var(--border-default) !important;
	--gf-color-in-ctrl-primary: var(--brand-green) !important;
	--gf-ctrl-border-color: var(--border-default) !important;
	--gf-ctrl-border-color-focus: var(--brand-green) !important;
	--gf-ctrl-border-radius: var(--radius-control) !important;
	--gf-ctrl-label-color-primary: var(--blue-900) !important;
	/* The required asterisk. Green because required is an affordance, and green
	   is this brand's affordance colour; danger red stays for real errors. */
	--gf-ctrl-label-color-req: var(--green-600) !important;
	--gf-ctrl-label-font-size: var(--fs-body-sm) !important;
	--gf-ctrl-desc-color: var(--text-muted) !important;
	--gf-field-gap-y: var(--space-5) !important;
	--gf-field-gap-x: var(--space-4) !important;
	--gf-form-gap-y: var(--space-5) !important;
}

.gform_wrapper{--gf-local-width:100%}

/* --------------------------------------------------------------- controls */

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield textarea,
.gform_wrapper .gfield select{
	width:100%;
	font-family:var(--font-body);
	font-size:var(--fs-body-sm);
	color:var(--neutral-900);
	background:var(--surface-card);
	border:1px solid var(--border-default);
	border-radius:var(--radius-control);
	padding:11px 12px;
	transition:var(--transition-control)
}

.gform_wrapper .gfield textarea{min-height:112px;resize:vertical;line-height:var(--lh-body)}
.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder{color:var(--neutral-400)}

.gform_wrapper .gfield input:hover,
.gform_wrapper .gfield textarea:hover,
.gform_wrapper .gfield select:hover{border-color:var(--border-strong)}

/* Focus matches .pw-input:focus — a green border plus the 35% green ring. The
   Gravity Forms spec transcribed #2a6b30 here; the component uses --brand-green,
   and every other input on the site follows the component. */
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus,
.gform_wrapper .gfield select:focus{
	outline:none;
	border-color:var(--brand-green);
	box-shadow:var(--focus-ring)
}

/* Native select arrow, drawn the same way components.css draws .pw-select. */
.gform_wrapper .gfield select{
	appearance:none;
	background-image:linear-gradient(45deg,transparent 49%,var(--neutral-500) 50%),linear-gradient(-45deg,transparent 49%,var(--neutral-500) 50%);
	background-size:6px 6px,6px 6px;
	background-position:calc(100% - 18px) 47%,calc(100% - 12px) 47%;
	background-repeat:no-repeat;
	padding-right:36px;
	/* No vertical padding on selects. Gravity Forms 3.x fixes the select's height
	   and line-height at the control size (38px) and centres the text with
	   line-height alone. The shared 11px padding above left a 14px content box,
	   so the state name rendered as the clipped tops of its letters. */
	padding-top:0;
	padding-bottom:0
}

/* ----------------------------------------------------------------- labels */

.gform_wrapper .gfield .gfield_label{
	font-family:var(--font-body);
	font-size:var(--fs-body-sm);
	font-weight:var(--fw-semibold);
	color:var(--blue-900);
	margin-block-end:6px
}

/* The required marker's colour comes from --gf-ctrl-label-color-req above.
 *
 * Do NOT inject an asterisk with ::after here. Gravity Forms 3.x renders the
 * marker as nested spans that BOTH carry .gfield_required —
 *   <span class="gfield_required"><span class="gfield_required gfield_required_asterisk">*</span></span>
 * — so a ::after rule on that class fires twice and paints two extra asterisks
 * next to the one Gravity Forms already outputs. */
.gform_wrapper .gfield_required{margin-inline-start:3px}

.gform_wrapper .gfield_description{font-size:var(--fs-caption);color:var(--text-muted);padding-block-start:4px}

/* ----------------------------------------------------- radios / checkboxes */

.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox{display:flex;flex-direction:column;gap:10px}

/* Applied via each field's CSS class in the import file — the design shows the
   consistency and analytical choices on one row. */
.gform_wrapper .pws-choices-inline .gfield_radio{flex-direction:row;flex-wrap:wrap;gap:var(--space-5)}

.gform_wrapper .gchoice{display:flex;align-items:flex-start;gap:10px}
.gform_wrapper .gchoice label{font-size:var(--fs-body-sm);color:var(--text-body);cursor:pointer}
.gform_wrapper .gchoice input[type="radio"],
.gform_wrapper .gchoice input[type="checkbox"]{
	appearance:none;
	margin:2px 0 0;
	width:17px;height:17px;flex:none;
	border:1px solid var(--border-strong);
	background:var(--surface-card);
	transition:var(--transition-control);
	cursor:pointer
}
.gform_wrapper .gchoice input[type="checkbox"]{border-radius:var(--radius-xs)}
.gform_wrapper .gchoice input[type="radio"]{border-radius:50%}
.gform_wrapper .gchoice input:hover{border-color:var(--brand-green)}
.gform_wrapper .gchoice input:checked{background:var(--action-primary);border-color:var(--action-primary)}
.gform_wrapper .gchoice input[type="radio"]:checked{box-shadow:inset 0 0 0 3px var(--neutral-0)}
.gform_wrapper .gchoice input:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ----------------------------------------------------------------- button */

/* Matches .pw-btn--primary, gradient included, rather than the flat #40a040 the
 * spec transcribed — every other primary button on the site is the gradient.
 *
 * Gravity Forms 3.x renders the submit as <button type="submit"
 * class="gform_button button">, not an <input type="submit">, so both are
 * targeted. The flat brand green arrives via --gf-color-primary above; these
 * rules add the gradient and the design system's padding on top. */
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper .gform_page_footer button.gform_button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"]{
	display:inline-flex;align-items:center;
	font-family:var(--font-body);
	font-weight:var(--fw-semibold);
	font-size:var(--fs-body-sm);
	line-height:1;
	color:var(--text-on-green);
	background:var(--gradient-green) !important;
	border:1px solid transparent;
	border-radius:var(--radius-control);
	box-shadow:var(--shadow-inset-top);
	padding:13px 22px !important;
	height:auto !important;
	cursor:pointer;
	transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard)
}
.gform_wrapper .gform_footer button.gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover{background:var(--action-primary-hover) !important}
.gform_wrapper .gform_footer button.gform_button:active,
.gform_wrapper .gform_footer input[type="submit"]:active{transform:var(--press-scale)}
.gform_wrapper .gform_footer button.gform_button:focus-visible,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible{box-shadow:var(--focus-ring);outline:none}

/* ----------------------------------------------------------------- errors */

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select{border-color:var(--status-danger)}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
	font-size:var(--fs-caption);
	font-weight:var(--fw-medium);
	color:var(--status-danger);
	background:var(--status-danger-surface);
	border:none;
	border-left:3px solid var(--status-danger);
	border-radius:var(--radius-card);
	padding:var(--space-3) var(--space-4);
	margin-block-start:6px
}
.gform_wrapper .gform_validation_errors{
	background:var(--status-danger-surface);
	border:none;
	border-left:3px solid var(--status-danger);
	border-radius:var(--radius-card);
	box-shadow:none
}
.gform_wrapper .gform_validation_errors > h2{
	font-family:var(--font-heading);
	font-size:var(--fs-h4);
	color:var(--status-danger)
}

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

.gform_confirmation_message{
	display:flex;gap:var(--space-3);
	padding:var(--space-4);
	border-radius:var(--radius-card);
	font-size:var(--fs-body-sm);
	background:var(--status-success-surface);
	border-left:3px solid var(--status-success);
	color:var(--green-900)
}