/*
 * Gravity Forms validation banner, every form (inc/gf-notice.php).
 *
 * The doubled class and the `html body` prefix are deliberate: they put these
 * rules above both the plugin's gravity-theme sheet and the four per-template
 * banner styles (gform.css, application.css, realtor-form.css, edmonton.css),
 * whichever order the sheets print in, so the banner looks the same on every
 * form. The colours are the design system's error scale.
 */
html body .gform_wrapper .gform_validation_errors.gform_validation_errors {
	position: relative;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid #f4c7c3;
	border-radius: 14px;
	background: #fef3f2;
	box-shadow: none;
	font-family: var(--font-sans, "Poppins", system-ui, sans-serif);
	text-align: left;
}

html body .gform_wrapper .gform_validation_errors.gform_validation_errors > h2,
html body .gform_wrapper .gform_validation_errors.gform_validation_errors .gform_submission_error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans, "Poppins", system-ui, sans-serif);
	/* !important: mobile.css sizes every `main[class^="ij"] section h2` with
	   !important at <=560px, which would make this a 23px heading. */
	font-size: 15px !important;
	font-weight: 600;
	line-height: 24px !important;
	letter-spacing: normal;
	text-transform: none;
	color: #912018;
}

/* Gravity Forms moves focus here after a failed submit (tabindex="-1") so a
   screen reader announces the error; that keeps working, but the banner is
   not something a keyboard user tabs to, so it gets no focus ring. */
html body .gform_wrapper .gform_validation_errors.gform_validation_errors:focus,
html body .gform_wrapper .gform_validation_errors.gform_validation_errors:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* The plugin draws "!" with its icon font, absolutely positioned over the text.
   Put it back in the flow as a filled circle, and draw the "!" with the site
   font so it does not depend on the icon font loading. */
html body .gform_wrapper .gform_validation_errors.gform_validation_errors .gform-icon {
	position: static;
	inset: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d92d20;
	color: #fff;
	font-size: 0;
	line-height: 1;
}

html body .gform_wrapper .gform_validation_errors.gform_validation_errors .gform-icon::before {
	content: "!";
	font-family: var(--font-sans, "Poppins", system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

@media (max-width: 560px) {
	html body .gform_wrapper .gform_validation_errors.gform_validation_errors { padding: 12px 14px; border-radius: 12px; }
	html body .gform_wrapper .gform_validation_errors.gform_validation_errors > h2,
	html body .gform_wrapper .gform_validation_errors.gform_validation_errors .gform_submission_error { font-size: 14px !important; line-height: 22px !important; gap: 10px; }
	html body .gform_wrapper .gform_validation_errors.gform_validation_errors .gform-icon { width: 22px; height: 22px; }
}

/*
 * Select arrows, every form (added 2026-10-02).
 *
 * The browser's own arrow (appearance:auto) ignores padding and sits hard
 * against the right edge, a few pixels from the border, while the text has
 * 14-36px on the left. Replaced with a drawn chevron 18px in from the edge,
 * and the text kept clear of it. Multi-selects and list boxes keep the native
 * control, as they have no arrow.
 */
html body .gform_wrapper select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2341505d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 16px 16px;
	text-overflow: ellipsis;
}

/* ---- Choices no longer jump the page to the top (2026-10-06) ----
   The theme's chip and card styles hide each radio/checkbox with position:absolute.
   Gravity Forms' .gchoice wrapper is not positioned, so the hidden input was placed
   relative to the whole page (y = -1). Clicking a choice moves focus to that input
   and the browser scrolled up to it: 557px on Contact Us, 9,796px on the home page.
   Anchoring the input to its own choice keeps focus where the visitor clicked. */
.gform_wrapper .gchoice { position: relative; }

/* Text blocks inside forms (e.g. the calculator's disclaimer) use the design's font,
   not the parent theme's Helvetica (2026-10-06). */
.gform_wrapper .gfield_html { font-family: var(--font-sans); }


/* Legacy-markup forms (7, 12, 15) also draw an icon as the heading's
   ::before, which showed a second ! beside the circle above (2026-10-20).
   Where the circle is present, it is the only icon. */
html body .gform_wrapper .gform_validation_errors.gform_validation_errors > h2:has(.gform-icon)::before {
	display: none !important;
	content: none !important;
}

/* Legacy-markup forms (7, 12, 15): no rule above and below a field in error
   (2026-10-20). The tinted background and the message stay. */
html body .gform_legacy_markup_wrapper li.gfield.gfield_error,
html body .gform_legacy_markup_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

/* Legacy-markup forms in error look like the other forms (2026-10-20): no
   tinted panel behind the field, and the message flush with the input. */
html body .gform_legacy_markup_wrapper li.gfield.gfield_error,
html body .gform_legacy_markup_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
	background: transparent !important;
}
html body .gform_legacy_markup_wrapper li.gfield.gfield_error .validation_message {
	padding-right: 0 !important;
}