/* Hero Standard block (Theme B) — base styles.
   Structurally separate from .le-hero-block (Premium); shares only the data model. */

/* Full-bleed is provided by the unconstrained content area of the "Full Width"
   page template — the section fills its container at 100% width. No width:100vw
   (which counts the scrollbar gutter and caused horizontal overflow). */

/* Neutral dark scrim over the image band so white headline/CTAs stay legible.
   Kept here (not as a brand-tinted token) because the design calls for a flat
   neutral overlay; legibility must not depend on the dealer's primary color. */
.le-hero-standard-block .le-hero-standard-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.le-hero-standard-block .le-hero-standard-cta-primary {
    transition: background-color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .le-hero-standard-block .le-hero-standard-cta-primary {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   Schedule Service form (Gravity Forms) — Standard hero design.

   These rules tune the SHARED Gravity Forms styling (assets/css/tailwind.css)
   for THIS form only, replacing what used to be a per-form admin CSS override.
   !important is required because the shared GF rules are themselves !important
   (Gravity Forms forces it) — this is the unavoidable case CLAUDE.md allows.
   The solid-button invert hover is intentionally NOT overridden, so the
   centralized hover behavior is preserved.
   ---------------------------------------------------------------------------- */

/* Labels: text-sm, medium weight, dark text (shared = xs / semibold / primary). */
.le-hero-standard-block .gform_wrapper .gfield_label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text) !important;
    margin-bottom: 0.375rem !important;
}

/* Inputs/selects: 4px radius, neutral border, dark text on the cream surface
   (shared = rounded-lg / gray-200 / text-primary / almost-white bg). */
.le-hero-standard-block .gform_wrapper .gfield input[type="text"],
.le-hero-standard-block .gform_wrapper .gfield input[type="email"],
.le-hero-standard-block .gform_wrapper .gfield input[type="tel"],
.le-hero-standard-block .gform_wrapper .gfield select,
.le-hero-standard-block .gform_wrapper .gfield textarea {
    /* 4px = the card's "rounded"; inputs aren't .le-btn, so no radius token. */
    border-radius: 0.25rem !important;
    border-color: var(--color-border) !important;
    background-color: var(--color-background) !important;
    color: var(--color-text) !important;
}

/* Muted placeholder. */
.le-hero-standard-block .gform_wrapper .gfield input::placeholder {
    color: color-mix(in srgb, var(--color-text) 45%, transparent) !important;
}

/* Focus: primary ring + border (shared uses a secondary ring, no border shift). */
.le-hero-standard-block .gform_wrapper .gfield input:focus,
.le-hero-standard-block .gform_wrapper .gfield select:focus,
.le-hero-standard-block .gform_wrapper .gfield textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

/* Submit: full-width + semibold (shared = inline, bold). Background, text color
   and the invert hover are left to the centralized rule on purpose. */
.le-hero-standard-block .gform_wrapper .gform_footer,
.le-hero-standard-block .gform_wrapper .gform-grid-col--size-auto {
    width: 100% !important;
    max-width: 100% !important;
}
.le-hero-standard-block .gform_wrapper .gform_footer input[type="submit"],
.le-hero-standard-block .gform_wrapper .gform_footer button,
.le-hero-standard-block .gform_wrapper .gform_button {
    width: 100% !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Select caret matches the dark text. */
.le-hero-standard-block .gform_wrapper .ginput_container_select::after {
    border-color: var(--color-text) !important;
}

/* Optional white outline on the primary CTA ("Primary CTA — White Border"),
   for heroes where the background photo runs dark or busy and the button's edge
   disappears into it.

   Deliberately a scoped class rather than the `border-white` utility:
   tailwind.css declares `.le-btn.border-white:hover` after `.le-btn.bg-primary:hover`
   at equal specificity, so that utility would give a solid CTA the translucent
   outline-button hover instead of the invert it is supposed to get. Keeping the
   border here leaves every centralized hover rule untouched.

   box-shadow rather than `border`, so the 2px costs no layout — a border would
   change the button's height and misalign it against the secondary CTA beside it. */
.le-hero-standard-cta-bordered {
	box-shadow: 0 0 0 2px #fff;
}