/*
 * Gravity Forms control styling for composed routes.
 *
 * The baked-in legacy stylesheet was the only thing dressing the enquiry form's
 * native controls; dropping it on composed routes left raw user-agent inputs and
 * a default grey submit button. Rather than resurrect the legacy pill (navy,
 * 100px radius, 20px Montserrat -- from a palette this design replaced), the
 * controls are given the reference idiom: `.r-cta` for the submit, the shared line
 * and body tokens for the fields.
 *
 * Every selector is scoped to `.gform_wrapper` so nothing here can reach a Core
 * block or a design-system component.
 */

.gform_wrapper :where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	textarea,
	select
) {
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid var(--sq-line2, #dcd8cc);
	border-radius: 0;
	background: #fff;
	color: var(--sq-ink, #17160f);
	font-family: var(--sq-font-body, "Nunito Sans", Arial, sans-serif);
	font-size: 15px;
	line-height: 1.7;
	padding: 11px 12px;
}

.gform_wrapper :where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	textarea,
	select
):focus {
	/* Focus OUTLINE is deliberately not set here. The global
	 * `:focus-visible` rule in base.css is the single owner of the focus
	 * indicator; a form-scoped override meant the site's most important
	 * form was the one surface that did not inherit a fix to it. The
	 * override that used to live here was 1px, inset by -2px, and drew in
	 * --sq-sage2 (#6fa267) for 2.98:1 on white -- under the 3:1 that
	 * WCAG 2.2 SC 1.4.11 requires of a focus indicator.
	 * The border tint below is a second, additive affordance, not the
	 * indicator, so it stays. */
	border-color: var(--sq-sage2, #6fa267);
}

.gform_wrapper textarea {
	min-height: 132px;
	resize: vertical;
}

.gform_wrapper :where(.gfield_label, .gform_wrapper legend) {
	color: inherit;
	font-family: var(--sq-font-body, "Nunito Sans", Arial, sans-serif);
	font-size: 14px;
	font-weight: 600;
}

.gfield_required.gfield_required_asterisk {
	color: var(--sq-alert, #b00020);
}

/* Same pill as the shell CTA, so the form's action reads as one of the design's
   buttons rather than a user-agent default. */
.gform_wrapper :where(input[type="submit"], button[type="submit"], .gform_button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: var(--sq-ink, #17160f);
	color: #fff;
	cursor: pointer;
	font: 700 12.5px/1 var(--sq-font-display, "Montserrat", Arial, sans-serif);
	letter-spacing: .01em;
	padding: 15px 24px;
	white-space: nowrap;
	transition: background .2s;
	-webkit-appearance: none;
	appearance: none;
}

.gform_wrapper :where(input[type="submit"], button[type="submit"], .gform_button):hover {
	background: var(--sq-ink2, #2c2a20);
}

/* On the dark CTA band the ink pill would disappear into the band. */
:where(.dark-cta, .r-closing) .gform_wrapper :where(input[type="submit"], button[type="submit"], .gform_button) {
	background: var(--sq-sage, #82b479);
	color: var(--sq-ink, #17160f);
}

:where(.dark-cta, .r-closing) .gform_wrapper :where(input[type="submit"], button[type="submit"], .gform_button):hover {
	background: var(--sq-sage2, #6fa267);
}