/**
 * Oxalis Theme — YARDOS demo-request pages (Contact Us subpages)
 *
 * Shared by page-contact-demo.php for both /contact-us/yardos-demo and
 * /contact-us/yardos-estimation-demo. Hero reuses ox-contact-hero__*
 * from contact.css unchanged — this file covers the form section only:
 * a real HubSpot embed styled dark to match Figma (node 2924:218 /
 * 2927:1742), overriding hubspot-form.css's default light/cream styling
 * which otherwise applies to every [data-hubspot-form] on the site.
 */

/* ─── FORM SECTION ───────────────────────────────────────────────── */
.ox-contact-demo-form {
  background: #13252A;
  padding: 24px 179px 80px;
  box-sizing: border-box;
}
.ox-contact-demo-form__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1154px;
}
.ox-contact-demo-form__eyebrow .ox-yardos-eyebrow__label {
  color: #F3F4F4;
}

/* ─── DARK OVERRIDE for the embedded HubSpot form ───────────────────
   hubspot-form.css styles [data-hubspot-form] for light/cream pages by
   default — override here, scoped to this page's form wrapper only. */
.ox-contact-demo-form__form.hs-form,
.ox-contact-demo-form__form [data-hubspot-form],
.ox-contact-demo-form__form {
  color: #F3F4F4;
}
/* Broad catch-all: force every text node in the embed light, regardless of
   HubSpot's exact nesting (labels, legends, spans inside li's, etc.) — more
   robust than chasing HubSpot's internal class names one by one. Muted/
   background exceptions are carved back out below. */
.ox-contact-demo-form__form .hs-form,
.ox-contact-demo-form__form .hs-form * {
  color: #F3F4F4;
}
.ox-contact-demo-form__form .hs-form label {
  color: #F3F4F4;
}
.ox-contact-demo-form__form .hs-form input[type="text"],
.ox-contact-demo-form__form .hs-form input[type="email"],
.ox-contact-demo-form__form .hs-form input[type="tel"],
.ox-contact-demo-form__form .hs-form input[type="number"],
.ox-contact-demo-form__form .hs-form select,
.ox-contact-demo-form__form .hs-form textarea {
  background: #1F3035;
  border-color: #717C7F;
  color: #F3F4F4;
}
.ox-contact-demo-form__form .hs-form input:focus,
.ox-contact-demo-form__form .hs-form select:focus,
.ox-contact-demo-form__form .hs-form textarea:focus {
  border-color: #FF6600;
}
.ox-contact-demo-form__form .hs-form ::placeholder {
  color: #717C7F;
}

/* Checkboxes / radios (multi-select cost-drivers, single-select timeline) */
.ox-contact-demo-form__form .hs-form input[type="checkbox"],
.ox-contact-demo-form__form .hs-form input[type="radio"] {
  accent-color: #FF6600;
  width: 16px;
  height: 16px;
}
.ox-contact-demo-form__form .hs-form .hs-form-checkbox label,
.ox-contact-demo-form__form .hs-form .hs-form-radio label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  color: #F3F4F4;
}

/* Field-group question headings ("Where does managing the work cost you
   the most today?") render as the fieldset legend/label in HubSpot's
   markup — keep them light and un-uppercased, unlike normal field labels. */
.ox-contact-demo-form__form .hs-form fieldset legend,
.ox-contact-demo-form__form .hs-form .hs-field-desc {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #F3F4F4;
}

.ox-contact-demo-form__form .hs-form .legal-consent-container,
.ox-contact-demo-form__form .hs-form .hs-richtext {
  color: #717C7F;
}

/* Submit button — solid orange fill (matches this page's Figma button,
   distinct from the cream/orange-outline .ox-btn-cta used elsewhere). */
.ox-contact-demo-form__form .hs-form input[type="submit"],
.ox-contact-demo-form__form .hs-form .hs-button {
  background: #FF6600;
  border: 1px solid #FF6600;
  color: #F3F4F4;
}
.ox-contact-demo-form__form .hs-form input[type="submit"]:hover,
.ox-contact-demo-form__form .hs-form .hs-button:hover {
  background: #CC5200;
  border-color: #CC5200;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ox-contact-demo-form { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 600px) {
  .ox-contact-demo-form { padding-left: 24px; padding-right: 24px; }
}