/*
 * gf-2026.css — Gravity Forms in the 2026 design.
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS SEPARATELY FROM gravity-forms.css
 *
 * Gravity Forms injects its own three stylesheets (gform_basic,
 * gform_theme_components, gform_theme) LAST in <head> — after every theme
 * stylesheet, including the hardcoded ones. The theme's existing
 * assets/css/gravity-forms.css is enqueued at wp_head, so it sits UPSTREAM of
 * the plugin it is skinning and loses every equal-specificity tie. That is the
 * direct cause of its 31 !important declarations.
 *
 * This file is enqueued with an explicit dependency on GF's own handles, so
 * WordPress prints it AFTER them and source order does the work instead.
 *
 * WHICH FRAMEWORK THIS TARGETS
 * Production renders the LEGACY theme, verified from the live wrapper:
 *     class='gf_browser_unknown gform_wrapper gravity-theme gform-theme--no-framework'
 *     data-form-theme='gravity-theme'
 * NOT Orbital. A default install renders Orbital, which has a different class
 * contract entirely. Everything below is scoped to .gform_wrapper.gravity-theme.
 *
 * Never style on `gf_browser_*` — it is a cache-dependent browser-sniff class
 * that varies per response.
 *
 * WHAT THIS FILE DOES NOT DO
 * It does not disable Gravity Forms' own CSS. Those sheets also carry
 * functional visibility, conditional-logic and layout rules; dropping them
 * breaks the form, not just its looks.
 */

/* ===========================================================================
   FORM SHELL
   =========================================================================== */

.gform_wrapper.gravity-theme {
	--cm-gf-gap: 20px;
	font-family: var(--cm26-font-body);
	color: var(--cm26-ink);
}

/* The card the form sits in. Applied via a theme wrapper, not to the plugin's
   own element, so an un-wrapped embed still renders sanely. */
.cm-form-card {
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	box-shadow: var(--cm26-shadow-card);
	padding: 24px;
}

@media (min-width: 768px) { .cm-form-card { padding: 32px; } }

.gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--cm-gf-gap);
	row-gap: var(--cm-gf-gap);
}

.gform_wrapper.gravity-theme .gfield { grid-column: 1 / -1; min-width: 0; }

/* Half-width fields become full width on narrow screens — a two-up address or
   name row is unusable at 320px. */
@media (min-width: 640px) {
	.gform_wrapper.gravity-theme .gfield--width-half { grid-column: span 6; }
}

/* ===========================================================================
   LABELS
   ---------------------------------------------------------------------------
   Form 1 ships seven of its twelve labels hidden (placeholder-as-label), which
   leaves those fields with no visible name and no visible required marker. The
   labels are restored here by targeted rule, NOT by globally unhiding
   everything: honeypots, the validation container and conditionally hidden
   fields must stay hidden, and CSS must never override the plugin's own
   visibility logic.
   =========================================================================== */

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme .gform-field-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cm26-ink);
}

/* Restore a visible label where the form hides it, but never on the honeypot,
   never on a field the plugin has marked hidden, and never on the validation
   container. */
.gform_wrapper.gravity-theme .gfield:not(.gfield--type-honeypot):not(.gfield_visibility_hidden):not(.gform_validation_container) > .gfield_label.hidden_label,
.gform_wrapper.gravity-theme .gfield:not(.gfield--type-honeypot):not(.gfield_visibility_hidden):not(.gform_validation_container) > .gfield_label.screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 6px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.gform_wrapper.gravity-theme .gfield_required {
	color: var(--cm26-brand-ink);
	margin-left: 3px;
	font-weight: 600;
}

.gform_wrapper.gravity-theme .gfield_label_before_complex,
.gform_wrapper.gravity-theme legend.gfield_label {
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cm26-ink);
	padding: 0;
}

/* ===========================================================================
   LABEL SPECIFICITY: beat gravity-forms.css at (0,4,0)
   ===========================================================================

   The rules above are (0,3,0) — `.gform_wrapper.gravity-theme` plus one class.
   The stylesheet they are meant to supersede writes the SAME declarations at
   `.gform_wrapper .gform_fields .gfield .gform-field-label`, which is (0,4,0)
   and therefore wins outright, regardless of which file loads last. Field
   labels were rendering at the old 1rem/1.4/#3c3c3c instead of the
   reference's 14.5px/1.65/#262423, and sub-labels at 0.8rem/1.3/#666 instead
   of 13.5px/1.65/#262423.

   The input, select and textarea rules in this file were already written at
   (0,4,1) for exactly this reason; the label rules were the ones left behind.
   Restating them on the full `.gform_fields .gfield` path gives (0,5,0),
   which wins without !important. The lower-specificity block above is kept
   deliberately: it still covers labels that sit outside `.gform_fields`.

   Measured off the reference, not guessed: 14.5px x 1.65 = 23.925px, which is
   what its contact form renders. =========================================== */

.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_label,
.gform_wrapper.gravity-theme .gform_fields .gfield .gform-field-label,
.gform_wrapper.gravity-theme .gform_fields .gfield legend.gfield_label,
.gform_wrapper.gravity-theme .gform_fields .gfield > label {
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.65;
	color: var(--cm26-ink);
	margin: 0 0 6px;
}

/* Sub-labels (First / Last, Street / City). The reference keeps these in ink
   at 13.5px rather than greying them out — a sub-label names a required
   field, so #666 on #fffdfb was both off-design and the weakest text on the
   form. */
.gform_wrapper.gravity-theme .gform_fields .gfield .gform-field-label--type-sub,
.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_complex label,
.gform_wrapper.gravity-theme .gform_fields .gfield .ginput_container_time label,
.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_time_hour label,
.gform_wrapper.gravity-theme .gform_fields .gfield .gfield_time_minute label {
	font-family: var(--cm26-font-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.65;
	color: var(--cm26-ink);
	margin: 4px 0 0;
}

/* The consent row's own copy and its policy links: 13.5px body at regular
   weight, in body ink. They were inheriting 15.2px/500 and painting the links
   coral (#ff675b), which is the decorative accent and only 2.1:1 on paper. */
.gform_wrapper.gravity-theme .gform_fields .gfield--type-consent .gform-field-label--type-inline,
.gform_wrapper.gravity-theme .gform_fields .gfield--type-consent .gfield_consent_description {
	font-family: var(--cm26-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.625;
	color: var(--cm26-body);
}

.gform_wrapper.gravity-theme .gform_fields .gfield--type-consent a {
	/*
	 * Body colour with an underline, as the reference has it — not the brand
	 * red. The underline is what marks these as links, so colour is not
	 * carrying the distinction and SC 1.4.1 is satisfied either way.
	 */
	color: var(--cm26-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* These must STAY hidden. Listed explicitly so a future label rule cannot
   accidentally expose them. */
.gform_wrapper.gravity-theme .gform_validation_container,
.gform_wrapper.gravity-theme .gfield--type-honeypot,
.gform_wrapper.gravity-theme .gfield_visibility_hidden {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ===========================================================================
   CONTROLS
   =========================================================================== */

/*
 * SPECIFICITY NOTE
 * assets/css/gravity-forms.css styles fields at
 *     .gform_wrapper .gform_fields .gfield input[type="text"]   -> (0,3,1)
 * so a flatter selector here loses on specificity no matter what order the
 * sheets load in. These selectors are deliberately shaped to (0,4,1) — one
 * class more — which wins cleanly without a single !important. If that older
 * block is ever retired, these can be flattened again.
 */
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="text"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="email"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="tel"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="url"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="number"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="password"],
.gform_wrapper.gravity-theme .gform_fields .gfield input[type="date"],
.gform_wrapper.gravity-theme .gform_fields .gfield select,
.gform_wrapper.gravity-theme .gform_fields .gfield textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	background: var(--cm26-card);
	color: var(--cm26-ink);
	border: 1.5px solid var(--cm26-input-border);
	border-radius: var(--cm26-radius-input);
	font-family: var(--cm26-font-body);
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	line-height: 1.65; /* reference: 26.4px, which is what makes a field 50px tall, not 46px */
	transition: border-color .15s var(--cm26-ease), box-shadow .15s var(--cm26-ease);
}

.gform_wrapper.gravity-theme .gform_fields .gfield textarea { min-height: 132px; resize: vertical; }

.gform_wrapper.gravity-theme .gform_fields .gfield input:hover,
.gform_wrapper.gravity-theme .gform_fields .gfield select:hover,
.gform_wrapper.gravity-theme .gform_fields .gfield textarea:hover { border-color: var(--cm26-input-hover); }

.gform_wrapper.gravity-theme .gform_fields .gfield input:focus,
.gform_wrapper.gravity-theme .gform_fields .gfield select:focus,
.gform_wrapper.gravity-theme .gform_fields .gfield textarea:focus {
	border-color: var(--cm26-brand-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 53, 43, .18);
}

/* Keep a ring in forced-colors mode, where box-shadows are discarded. */
@media (forced-colors: active) {
	.gform_wrapper.gravity-theme input:focus,
	.gform_wrapper.gravity-theme select:focus,
	.gform_wrapper.gravity-theme textarea:focus { outline: 2px solid Highlight; outline-offset: 1px; }
}

.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder { color: var(--cm26-stone); opacity: 1; }

.gform_wrapper.gravity-theme input:disabled,
.gform_wrapper.gravity-theme select:disabled,
.gform_wrapper.gravity-theme textarea:disabled,
.gform_wrapper.gravity-theme input[readonly] {
	background: var(--cm26-sand);
	color: var(--cm26-body);
	cursor: not-allowed;
}

/* The state select is a real <select> with configured options — never replaced
   by a plain text field. */
.gform_wrapper.gravity-theme .gform_fields .gfield select {
	appearance: none;
	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='%236b6460' stroke-width='1.75' 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 14px center;
	padding-right: 40px;
}

/* ===========================================================================
   COMPLEX FIELDS — address, name
   =========================================================================== */

.gform_wrapper.gravity-theme fieldset.gfield { border: 0; margin: 0; padding: 0; min-width: 0; }

.gform_wrapper.gravity-theme .ginput_complex {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 8px;
}

@media (min-width: 640px) {
	.gform_wrapper.gravity-theme .ginput_complex.ginput_container_address {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gform_wrapper.gravity-theme .ginput_address_line_1,
	.gform_wrapper.gravity-theme .ginput_address_line_2 { grid-column: 1 / -1; }
}

.gform_wrapper.gravity-theme .ginput_complex > span { display: block; min-width: 0; }

/* ===========================================================================
   CHOICES — the selected-service tiles
   ---------------------------------------------------------------------------
   The reference wraps each choice in a label. Gravity Forms renders the input
   and the label as SIBLINGS inside .gchoice, so the reference's selectors do
   not transfer. :has() gives the same selected-state tile against the real
   markup, with a plain-border fallback where :has() is unsupported.
   =========================================================================== */

.gform_wrapper.gravity-theme .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield_radio {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

@media (min-width: 640px) {
	.gform_wrapper.gravity-theme .gf_list_2col .gfield_checkbox,
	.gform_wrapper.gravity-theme .gfield_checkbox.gf_list_2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-input);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s var(--cm26-ease), background-color .15s var(--cm26-ease);
}

.gform_wrapper.gravity-theme .gchoice:hover { border-color: var(--cm26-input-border); }

.gform_wrapper.gravity-theme .gform_fields .gfield .gchoice:has(input:checked) {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

/* The whole tile is a comfortable target, but the real input keeps its own
   label association — the native control is never replaced. */
.gform_wrapper.gravity-theme .gchoice input[type="checkbox"],
.gform_wrapper.gravity-theme .gchoice input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--cm26-brand-ink);
}

.gform_wrapper.gravity-theme .gchoice label {
	margin: 0;
	font-family: var(--cm26-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--cm26-ink);
	cursor: pointer;
}

/* ===========================================================================
   CONSENT
   The wording, the unchecked default and the stored value are form settings and
   are not touched here. Only the presentation is.
   =========================================================================== */

.gform_wrapper.gravity-theme .gfield--type-consent .ginput_container_consent {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--cm26-sand);
	border-radius: var(--cm26-radius-input);
}

.gform_wrapper.gravity-theme .gfield--type-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--cm26-brand-ink);
}

.gform_wrapper.gravity-theme .gfield_consent_label,
.gform_wrapper.gravity-theme .gfield--type-consent label {
	font-family: var(--cm26-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--cm26-body);
}

.gform_wrapper.gravity-theme .gfield_consent_label a { color: var(--cm26-brand-ink); text-underline-offset: 3px; }

/* ===========================================================================
   DESCRIPTIONS, VALIDATION, CONFIRMATION
   Errors are never signalled by colour alone — the message text, the border and
   the field's aria-invalid all carry it.
   =========================================================================== */

.gform_wrapper.gravity-theme .gfield_description {
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--cm26-stone);
}

.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 6px;
	padding: 8px 10px;
	background: rgba(163, 34, 26, .07);
	border-left: 3px solid var(--cm26-error);
	border-radius: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cm26-error);
}

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error select,
.gform_wrapper.gravity-theme .gfield_error textarea,
.gform_wrapper.gravity-theme [aria-invalid="true"] { border-color: var(--cm26-error-line); }

.gform_wrapper.gravity-theme .gform_validation_errors {
	margin-bottom: 24px;
	padding: 16px 18px;
	background: rgba(163, 34, 26, .07);
	border: 1px solid var(--cm26-error);
	border-radius: var(--cm26-radius);
}

.gform_wrapper.gravity-theme .gform_validation_errors h2,
.gform_wrapper.gravity-theme .gform_submission_error {
	margin: 0 0 6px;
	font-family: var(--cm26-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--cm26-error);
}

.gform_wrapper.gravity-theme .gform_validation_errors ol { margin: 8px 0 0 1.1em; font-size: 14.5px; }
.gform_wrapper.gravity-theme .gform_validation_errors a { color: var(--cm26-error); }

.gform_confirmation_message,
.gform_wrapper.gravity-theme .gform_confirmation_message {
	padding: 20px 22px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-left: 3px solid var(--cm26-brand-ink);
	border-radius: var(--cm26-radius);
	font-size: 16.5px;
	color: var(--cm26-prose);
}

/* ===========================================================================
   FOOTER / SUBMIT
   =========================================================================== */

.gform_wrapper.gravity-theme .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 0;
}

.gform_wrapper.gravity-theme .gform_footer .gform_button,
.gform_wrapper.gravity-theme .gform_footer .gform_button.button,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: var(--cm26-radius);
	background: var(--cm26-brand-ink);
	color: var(--cm26-on-brand);
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .005em;
	cursor: pointer;
	transition: background-color .18s var(--cm26-ease), transform .18s var(--cm26-ease);
}

.gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover { background: var(--cm26-brand-hover); }

.gform_wrapper.gravity-theme .gform_button:active:not(:disabled) { transform: translateY(1px); }

.gform_wrapper.gravity-theme .gform_button:focus-visible,
.gform_wrapper.gravity-theme input[type="submit"]:focus-visible {
	outline: 3px solid var(--cm26-brand-ink);
	outline-color: var(--cm26-brand-ink);
	outline-offset: 3px;
}

.gform_wrapper.gravity-theme .gform_button[disabled],
.gform_wrapper.gravity-theme .gform_ajax_spinner + .gform_button { opacity: .55; cursor: not-allowed; }

.gform_wrapper.gravity-theme .gform_ajax_spinner { width: 20px; height: 20px; }

/* GF's own phone country selector is a tertiary theme button; give it the
   surrounding design without changing its behaviour. */
.gform_wrapper.gravity-theme .gform-phone__country-selector {
	min-height: 44px;
	border-radius: var(--cm26-radius-input) 0 0 var(--cm26-radius-input);
	border: 1.5px solid var(--cm26-input-border);
	border-right: 0;
	background: var(--cm26-sand);
}

/* ===========================================================================
   INQUIRY MODAL
   ---------------------------------------------------------------------------
   The shared #getStartedModal (Gravity Form #2).
   NOTE: Gravity Forms' gform/post_render wiring depends on a MutationObserver
   watching document.body for `style` and `class` changes. The dialog is opened
   by toggling a CLASS, which keeps that observer firing. Do not convert it to
   [hidden], inert or popover alone — doing so silently kills the phone input
   mask and the placeholder polyfill.
   =========================================================================== */

#getStartedModal .gform_wrapper.gravity-theme { --cm-gf-gap: 16px; }

#getStartedModal .gform_wrapper.gravity-theme .gform_fields { row-gap: 16px; }

/* On AJAX success Gravity Forms replaceWith()s the whole wrapper, so anything
   keyed on #gform_wrapper_2 stops applying. Everything above is keyed on the
   .gform_wrapper.gravity-theme class pair instead, which survives the swap. */