/*
* Forms — Gravity Forms, styled entirely by the theme.
*
* GF's own CSS is switched off (gform_disable_css in inc/leasing-form.php), so
* this file is the whole story — including GF's utility hides (honeypot,
* hidden-field wrappers) that its basic CSS used to provide.
*
* Colors come from custom properties set by the surrounding scheme
* (css/leasing.css: .leasing--section.dark-mod / .light-mod). The fallbacks
* here are the light scheme. Figma: "DY to Dev (Copy)" RxMqP7fHzNqKWMVOMECYIx
* 610:264 (dark), 610:320 (errors), 610:402 (success), 610:433 (light).
*
* Comp measurements (1728 frame): field 59px tall = 20px padding + 18.94px
* line; pill radius 48 (textarea 32); label → field 12px; field → next label
* 33px; column gap 15px; labels inset ~6px from the field edge.
*/
/* --- GF utility hides (GF's basic CSS is off) ----------------------------- */
.gform_wrapper .gform_validation_container, /* honeypot */
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_heading, /* empty: no title/description, no required legend */
.gform_wrapper .hidden_label .gfield_label {
display: none;
}
/* --- Layout: 12-column grid, GF's half-width fields pair up from 576px ---- */
.gform_wrapper .gform_fields {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--form-row-gap, 33px) var(--form-col-gap, 15px);
margin: 0;
padding: 0;
border: 0;
}
.gform_wrapper .gfield {
grid-column: 1 / -1;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
@media (min-width: 576px) {
.gform_wrapper .gfield--width-half {
grid-column: span 6;
}
}
/* --- Labels --------------------------------------------------------------- */
.gform_wrapper .gfield_label {
display: block;
margin: 0 0 12px;
padding-inline: 6px;
font-size: var(--wp--preset--font-size--body);
font-weight: 500;
line-height: 1.08;
letter-spacing: 0;
color: var(--form-text, #000);
transition: color .2s;
}
/* "Name*" — the asterisk is part of the label, same color, no gap. */
.gform_wrapper .gfield_required {
color: inherit;
}
/* --- Controls ------------------------------------------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
display: block;
width: 100%;
min-height: 59px;
margin: 0;
padding: 20px 28px;
box-sizing: border-box;
border: 0;
border-radius: 48px;
background-color: var(--form-field-bg, rgba(0, 0, 0, .1));
color: var(--form-text, #000);
font-family: inherit;
font-size: var(--wp--preset--font-size--body);
font-weight: 500;
line-height: 1.08;
letter-spacing: 0;
/* Borders are inset shadows, so focus/error never shift the layout. */
box-shadow: none;
-webkit-appearance: none;
appearance: none;
transition: box-shadow .2s;
}
.gform_wrapper textarea {
height: 108px;
min-height: 108px;
border-radius: 32px;
resize: vertical;
}
/* Chevron = the comp's "Arrow 6" vector (12.15 × 6.9), 28px from the edge. */
.gform_wrapper select {
padding-right: 56px;
background-image: var(--form-chevron, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.1505 6.90027'%3E%3Cpath d='M5.4919 6.65863C5.81409 6.98081 6.33645 6.98081 6.65863 6.65863L11.9089 1.40836C12.2311 1.08618 12.2311 0.56382 11.9089 0.241637C11.5867 -0.0805452 11.0644 -0.0805452 10.7422 0.241637L6.07527 4.90854L1.40836 0.241637C1.08618 -0.0805456 0.563819 -0.0805457 0.241637 0.241637C-0.0805457 0.56382 -0.0805457 1.08618 0.241636 1.40836L5.4919 6.65863Z' fill='black' fill-opacity='0.6'/%3E%3C/svg%3E"));
background-repeat: no-repeat;
background-position: right 28px center;
background-size: 12.15px 6.9px;
cursor: pointer;
}
/* The open list is drawn by the OS — give it readable colors on both schemes. */
.gform_wrapper select option {
background-color: #fff;
color: #000;
}
.gform_wrapper ::placeholder {
color: var(--form-placeholder, rgba(0, 0, 0, .6));
opacity: 1;
}
/* Autofill paints its own light background (and dark text) — hold it off
so white-on-green fields stay legible. */
.gform_wrapper input:-webkit-autofill {
-webkit-text-fill-color: var(--form-text, #000);
caret-color: var(--form-text, #000);
transition: background-color 0s 600000s, color 0s 600000s;
}
/* Focus: the comp's 1px ring. The transparent outline is for forced-colors
mode, which drops box-shadows. */
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
outline: 2px solid transparent;
box-shadow: inset 0 0 0 1px var(--form-focus, #000);
}
/* --- Error state (comp: red label + 2px red ring, no per-field text) ------
The reds are tuned per scheme to pass AA for the 17.6px labels and the
form message (comp #f2502f measured 3.37:1 on green, 3.01:1 on cream) —
see css/leasing.css. */
.gform_wrapper .gfield_error .gfield_label {
color: var(--form-error, #c23519);
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
box-shadow: inset 0 0 0 2px var(--form-error, #c23519);
}
/* Focused AND invalid: keep the red, add the focus color inside it. */
.gform_wrapper .gfield_error input:focus-visible,
.gform_wrapper .gfield_error select:focus-visible,
.gform_wrapper .gfield_error textarea:focus-visible {
box-shadow: inset 0 0 0 2px var(--form-error, #c23519), inset 0 0 0 3px var(--form-focus, #000);
}
/* Per-field messages stay for screen readers (GF links them with
aria-describedby) but aren't drawn — the comp shows only the red label and
ring. Turnstile has no label to turn red, so its message is shown. */
.gform_wrapper .gfield:not(.gfield--type-turnstile) .validation_message {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
.gform_wrapper .gfield--type-turnstile .validation_message {
margin: 8px 0 0;
padding-inline: 6px;
color: var(--form-error, #c23519);
font-size: var(--wp--preset--font-size--body);
font-weight: 500;
line-height: 1.3;
}
/* Turnstile is interaction-only: usually an empty row. The negative margin
cancels that row's grid gap so it costs nothing. When Cloudflare does show
the widget, js/leasing-form.js adds .lwh-turnstile-shown and the gap comes
back — CSS can't tell on its own: the iframe sits in a closed shadow root,
out of reach of :has(). */
.gform_wrapper .gfield--type-turnstile:not(.lwh-turnstile-shown) {
margin-top: calc(-1 * var(--form-row-gap, 33px));
}
/* --- Form-level message + submit row ----------------------------------------
GF prints the message BEFORE the