/* 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).
   The inner max-w-6xl keeps content centered. */

/* Hero image frame holds a 16:9 box whether or not an image is set. */
.le-service-detail-layout-standard-block .le-sdl-media {
    aspect-ratio: 16 / 9;
}

/* Provider (YouTube/Vimeo) video frame holds the same 16:9 box; the iframe is
   absolutely positioned inside it (markup), so the section reserves its height
   before the embed loads. A self-hosted <video> deliberately skips this class —
   its own dimensions govern, so a non-16:9 upload is never cropped. */
.le-service-detail-layout-standard-block .le-sdl-video {
    aspect-ratio: 16 / 9;
}

/* Card/section headers flagged for the body font ---------------------------
   Branding sets an UNLAYERED `h1–h6 { font-family: var(--font-heading) }`
   (inc/branding-fonts.php). Unlayered rules beat Tailwind's layered utilities
   regardless of specificity, so the `font-body` utility can't win on a heading
   tag by itself. Re-assert the body font here (unlayered + scoped) so the
   designated headers — incl. the shared sidebar cards rendered inside this
   block — use the branding body font. */
.le-service-detail-layout-standard-block h2.font-body,
.le-service-detail-layout-standard-block h3.font-body {
    font-family: var(--font-body);
}

/* Intro + FAQ answers print editor HTML, so both carry `le-prose` in markup —
   the shared WYSIWYG treatment in le-parent/assets/css/tailwind.css restores the
   paragraph rhythm, list markers, headings and link color that Tailwind's
   preflight strips. Nothing block-specific to add here. */

/* --- FAQ accordion ---------------------------------------------------------
   Panels start with [hidden] in markup. JS removes [hidden], animates the
   inline max-height between 0 and the measured content height, then sets it to
   none once open. The closed base + transition live here; the chevron flips
   off the trigger's aria-expanded so it stays in sync with the JS state. */
.le-service-detail-layout-standard-block .le-faq-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease;
}

.le-service-detail-layout-standard-block .le-faq-trigger[aria-expanded="true"] .le-faq-chevron {
    transform: rotate(180deg);
}

/* Native <button> defaults to the arrow cursor; underline the question on hover
   so the trigger reads as clickable (the color shift alone was too subtle). */
.le-service-detail-layout-standard-block .le-faq-trigger {
    cursor: pointer;
}

.le-service-detail-layout-standard-block .le-faq-trigger:hover span {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .le-service-detail-layout-standard-block .le-faq-panel,
    .le-service-detail-layout-standard-block .le-faq-chevron,
    .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="text"],
    .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="email"],
    .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="tel"],
    .le-service-detail-layout-standard-block .gform_wrapper .gfield select,
    .le-service-detail-layout-standard-block .gform_wrapper .gfield textarea {
        transition: none;
    }
}

/* Field labels — near-black, text-sm, medium weight, body font (dealer-selected); not the
   brand primary / heading font. Scoped + !important to beat the global GF label
   rule (tailwind.css `.gform_wrapper .gfield_label { @apply !text-xs
   !font-semibold !text-primary … }`), matching the contact-form block. */
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield_label {
    color: var(--color-text) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    font-family: var(--font-body) !important;
}

/* --- Sidebar form fields: focus highlight ---------------------------------
   The sticky sidebar renders a Gravity Form (shared inc/service-detail-sidebar-
   render.php). In the Standard theme, le-standard/style.css forces an always-on
   `.gfield input { box-shadow:none !important; border-color:…border… !important }`
   base, which suppresses the focus ring/border and leaves a brief border flash on
   the previous field when moving between fields. Re-assert an authoritative focus
   state here (primary border + soft primary ring), matching the contact-form block. */
.le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="text"],
.le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="email"],
.le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="tel"],
.le-service-detail-layout-standard-block .gform_wrapper .gfield select,
.le-service-detail-layout-standard-block .gform_wrapper .gfield textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="text"]:focus,
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="email"]:focus,
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield input[type="tel"]:focus,
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield select:focus,
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield textarea:focus {
    border-color: var(--color-primary) !important;
    /* Matches the contact-form block's focus treatment exactly. */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    outline: none;
}

/* Sidebar submit button hover ring — 1px to match the contact-form button. The
   global Gravity Forms invert uses a 2px inset ring; trim it by 1px here. */
html body .le-service-detail-layout-standard-block .gform_wrapper .gform_footer input[type="submit"]:hover,
html body .le-service-detail-layout-standard-block .gform_wrapper .gform_footer .gform_button:hover {
    box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

/* Sidebar message field — match the design's compact height (78px). Overrides
   the global `.gform_wrapper .gfield textarea { min-block-size: 12rem !important }`
   (which otherwise pins it tall). Width is the field's natural 100% of the
   sidebar card (~296px at full width); resize is disabled to prevent layout shifts. */
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield textarea {
    min-block-size: 0 !important;
    min-height: 0 !important;
    height: 4.875rem; /* 78px */
    line-height: 1.5;
    resize: none;
}

/* Placeholder — neutral gray, body font, matching the contact-form block (the
   global GF rule otherwise tints placeholders with the brand primary). */
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield input::placeholder,
html body .le-service-detail-layout-standard-block .gform_wrapper .gfield textarea::placeholder {
    color: var(--color-gray) !important;
    opacity: 0.85;
    font-family: var(--font-body) !important;
}