/* --- Overall Form Container (Card Style) ---
   Every Gravity Forms selector below is scoped under `.le-contact-form-block`
   (the block wrapper around the form output) so these styles stay local to this
   block and never affect other Gravity Forms on the same page. */
.le-contact-form-block {
    background-color: #fff;
    /* p-8 — with the 536px max-width and 1px border this yields 470px-wide
       fields (536 − 2px border − 64px padding = 470). */
    padding: 2rem;
    /* Match the design card: 1px border + 4px radius, no drop shadow. */
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    margin: 0 auto;
    /* Match the design column width; max-width so it still shrinks on mobile. */
    max-width: 536px;
}

html .le-contact-form-block .gform_wrapper .gform_required_legend {
    display: none;
}

/* --- Headings & Descriptions --- */
html .le-contact-form-block .gform_wrapper .gform_heading .gform_title {
    color: var(--color-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    /* 8px */
}

html .le-contact-form-block .gform_wrapper .gform_heading .gform_description {
    color: var(--color-gray-light);
    font-size: var(--text-xs);
    margin-bottom: 1.5625rem;
    /* 25px */
}

/* A little more space between fields. This is the grid row-gap, which only
   applies BETWEEN fields — it does not add space above the first field, so the
   gap under the supporting header is unchanged. */
html body .le-contact-form-block .gform_wrapper .gform_fields {
    --gf-form-gap-y: 1.5rem;
    row-gap: 1.5rem;
    grid-row-gap: 1.5rem;
}

/* --- Field Labels --- */
/* Match the design: near-black, text-sm, medium weight, body font (NOT the brand
   primary / heading font). !important + this higher-specificity selector is
   needed to beat the global GF label rule (tailwind.css) which forces
   `!text-primary !font-semibold !text-xs`. */
html body .le-contact-form-block .gform_wrapper .gfield_label {
    color: var(--color-text) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    margin-bottom: 0.375rem !important;
    font-family: var(--font-body) !important;
}

/* Required Asterisk */
html .le-contact-form-block .gform_wrapper .gfield_required {
    color: var(--color-primary);
    margin-left: -0.05rem;
    /* 2px */
}

/* --- Inputs, Textareas, and Dropdowns ---
   High specificity (`html body .le-contact-form-block … .gfield`) + !important so
   these beat the global GF rule in tailwind.css (`.gform_wrapper .gfield input
   { @apply !border !border-gray-200 !rounded-lg !px-3 !py-2.5 !text-sm
   !bg-almost-white !text-primary }`) which would otherwise force its own
   border/radius/padding/color and the brand primary text color. */
html body .le-contact-form-block .gform_wrapper .gfield input[type="text"],
html body .le-contact-form-block .gform_wrapper .gfield input[type="email"],
html body .le-contact-form-block .gform_wrapper .gfield input[type="tel"],
html body .le-contact-form-block .gform_wrapper .gfield select,
html body .le-contact-form-block .gform_wrapper .gfield textarea {
    width: 100%;
    padding: 0.625rem 1rem !important; /* px-4 py-2.5 */
    /* 1px border ~#D0CAC2, derived from tokens (no hard-coded hex). */
    border: 0.0625rem solid color-mix(in srgb, var(--color-border) 78%, var(--color-gray) 22%) !important;
    border-radius: 0.25rem !important; /* rounded */
    background-color: #fff !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important; /* Inter (body font), not branding */
    font-size: var(--text-sm) !important;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body .le-contact-form-block .gform_wrapper .gfield select option {
    color: var(--color-text);
    font-family: var(--font-body);
}

/* Input Placeholders — neutral gray (not the brand primary), Inter. High
   specificity + !important to beat the global `placeholder:text-primary/40`. */
html body .le-contact-form-block .gform_wrapper .gfield input::placeholder,
html body .le-contact-form-block .gform_wrapper .gfield textarea::placeholder {
    color: var(--color-gray) !important;
    opacity: 0.85;
    font-family: var(--font-body) !important;
}

/* Focus States — match the design: primary border + a soft primary ring.
   High specificity + !important so it beats the child theme's always-on
   `.gfield input { border-color / box-shadow: none !important }` base override
   (le-standard/style.css), which otherwise suppresses the focus highlight and
   leaves a brief border flash on the previous field when moving between fields. */
html body .le-contact-form-block .gform_wrapper .gfield input[type="text"]:focus,
html body .le-contact-form-block .gform_wrapper .gfield input[type="email"]:focus,
html body .le-contact-form-block .gform_wrapper .gfield input[type="tel"]:focus,
html body .le-contact-form-block .gform_wrapper .gfield select:focus,
html body .le-contact-form-block .gform_wrapper .gfield textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    outline: none;
}

/* Message field height. The global `.gform_wrapper .gfield textarea {
   min-block-size: 12rem !important }` pins the height and overrides GF's
   Small/Medium/Large field-size setting, so we drop that floor here and set an
   explicit fixed height instead. Resize is disabled to match the design. */
html body .le-contact-form-block .gform_wrapper .gfield textarea {
    min-block-size: 0 !important;
    min-height: 0 !important;
    height: 8.75rem; /* 140px */
    line-height: 1.5;
    resize: none;
}

/* --- Submit Button --- */
.le-contact-form-block .gform-theme--framework .gform_footer input[type="submit"].gform_button,
.le-contact-form-block .gform-theme--framework .gform_page_footer input[type="submit"].gform_button {
    --gf-ctrl-btn-bg-color-primary: var(--color-primary);
    /* Invert on hover (match service-detail / .le-btn): drive GF's own framework
       hover to a white surface with brand text + border. Previously this was
       --color-primary-dark, so GF's variable-driven hover DARKENED the button and
       won over the explicit invert below — that's why it wasn't inverting. */
    --gf-ctrl-btn-bg-color-hover-primary: #fff;
    --gf-ctrl-btn-color-hover-primary: var(--color-primary);
    --gf-ctrl-btn-bg-color-focus-primary: var(--color-primary-dark);
    --gf-ctrl-btn-bg-color-active-primary: var(--color-primary-dark);
    --gf-ctrl-btn-color-primary: #fff;
    /* Follow the per-theme button radius token (Standard 6px / Premium 12px). */
    --gf-ctrl-btn-radius: var(--le-btn-radius, 0.375rem);
    --gf-ctrl-btn-font-size: var(--text-sm);
    --gf-ctrl-btn-font-weight: 700;
    --gf-ctrl-btn-height: 2.75rem;
}

/* Target 2: Deep Specifity Chain using ID Wildcard (Forces Legacy / Theme overrides) */
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"],
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"],
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button,
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button {
    background-color: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 1.5rem;
    border: 0 solid transparent;
    border-radius: var(--le-btn-radius, 0.375rem) !important;
    width: 100%;
    display: block;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-top: 0.625rem;
    min-height: 2.75rem;
    /* 50px */
}


/* Keep button color on click/focus/submitting states */
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"]:active,
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"]:active,
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button:active,
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button:active,
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"]:focus,
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"]:focus,
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button:focus,
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button:focus,
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"]:focus-visible,
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"]:focus-visible,
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button:focus-visible,
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button:focus-visible,
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"][disabled],
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"][disabled],
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button[disabled],
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button[disabled],
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button[aria-disabled="true"],
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button[aria-disabled="true"] {
    background-color: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* Submit button hover — invert to a white surface with brand-color text and a
   thin inset brand ring (the "outline"), matching the centralized Gravity Forms
   / .le-btn hover used in service-detail-layout-standard. Deep selector chain +
   !important so it beats the GF framework theme and this block's own base button
   styles; excludes the disabled/submitting state so a busy button doesn't flip. */
html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"]:hover:not([disabled]):not([aria-disabled="true"]),
html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"]:hover:not([disabled]):not([aria-disabled="true"]),
html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button:hover:not([disabled]):not([aria-disabled="true"]),
html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button:hover:not([disabled]):not([aria-disabled="true"]) {
    background-color: #fff !important;
    color: var(--color-primary) !important;
    box-shadow: inset 0 0 0 2px var(--color-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .le-contact-form-block .gform_wrapper .gform_footer input[id^="gform_submit_button_"],
    html body .le-contact-form-block .gform_wrapper .gform_page_footer input[id^="gform_submit_button_"],
    html body .le-contact-form-block .gform_wrapper .gform_footer .gform_button,
    html body .le-contact-form-block .gform_wrapper .gform_page_footer .gform_button {
        transition: none;
    }
}

/* --- Validation / Error Messages --- */
html .le-contact-form-block .gform_wrapper .gform_validation_errors,
html .le-contact-form-block .gform_wrapper .gfield_validation_message,
html .le-contact-form-block .gform_wrapper .validation_message,
html .le-contact-form-block .gform_wrapper .gform_submission_error {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

/* --- Hide Gravity Forms Loader Container --- */
html .le-contact-form-block .gform_wrapper .gform-loader,
html .le-contact-form-block .gform_wrapper .gform-loader-spinner,
html .le-contact-form-block .gform_wrapper .gform_ajax_spinner,
html .le-contact-form-block .gform_wrapper .gform_ajax_spinner_container {
    display: none !important;
}

html .le-contact-form-block .gform_wrapper .gform_confirmation_message {
    color: var(--color-primary-dark);
    background-color: var(--color-cream);
    border: 0.0625rem solid var(--color-gray-light);
    /* 1px */
    border-radius: 0.5rem;
    /* 8px */
    padding: 1.5rem;
}