/* =============================================================================
   AMPECO — single site-wide HubSpot form styling
   -----------------------------------------------------------------------------
   ONE place that styles every embedded HubSpot form to the NDS 2026 look.
   Enqueued site-wide by library/hubspot-forms.php after the theme's
   main-stylesheet.

   Targets `.hs-form` — the class HubSpot puts on the <form> in BOTH render
   modes (inline `hbspt.forms.create({target})`, which has NO `.hbspt-form`
   wrapper, and the legacy wrapped embed). The theme's _forms.scss keys off
   `.hbspt-form form` (≈0,2,1) and never touches the inline form; for wrapped
   forms the input `:not()` triplet below carries enough specificity to win.

   Ported + consolidated from the (now-retired) homepage-v2
   `.bd-form-fields--hubspot` styling and the migration-assessment block's local
   form CSS.

   Theme-reactive: LIGHT by default (most forms sit on light surfaces), DARK in
   dark contexts — `[data-theme="dark"]` (the migration tool) and the
   homepage-v2 dark modal (`.bd-modal` without `.bd-modal--light`). Palette via
   CSS variables so the rules are written once.
   ============================================================================= */

.hs-form {
  --hsf-font: var(--font-body, 'Lexend', sans-serif);
  --hsf-label: rgba(26, 30, 34, 0.6);
  --hsf-input-bg: rgba(8, 10, 13, 0.03);
  --hsf-input-ring: rgba(8, 10, 13, 0.14);
  --hsf-input-text: #1A1E22;
  --hsf-placeholder: rgba(26, 30, 34, 0.4);
  --hsf-brand: #50A4FA;
  --hsf-error: #DE3437;
  --hsf-legal: rgba(26, 30, 34, 0.5);

  /* Force the single-column stack even in wrapped contexts, where _forms.scss's
     `.hbspt-form form { display:flex; flex-wrap:wrap }` (0,1,1) would otherwise
     win and lay fields out in a row (shrinking the submit to content width). */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0;
  width: 100%;
}

/* Dark override — ONLY on an explicit dark context. Most surfaces (incl. the
   homepage-v2 book-a-demo modal, which is white, and the migration tool card)
   are light, so light is the default; dark must be opted into via
   [data-theme="dark"]. (Do NOT key dark off `.bd-modal` — that modal is white.) */
[data-theme="dark"] .hs-form {
  --hsf-label: rgba(245, 250, 255, 0.55);
  --hsf-input-bg: rgba(245, 250, 255, 0.04);
  --hsf-input-ring: rgba(245, 250, 255, 0.16);
  --hsf-input-text: #F5FAFF;
  --hsf-placeholder: rgba(245, 250, 255, 0.3);
  --hsf-error: #ff6b6b;
  --hsf-legal: rgba(245, 250, 255, 0.5);
}

/* Wrapper layout (only present in the legacy wrapped embed — harmless inline). */
.hbspt-form { width: 100%; }
.hbspt-form .form_wrapper { width: 100%; padding: 0; margin: 0; }

/* HubSpot's embed CSS caps fieldsets at ~500px — force full width so fields fill
   the column. */
.hs-form fieldset { width: 100% !important; max-width: 100% !important; border: 0; padding: 0; margin: 0; min-width: 0; }
/* HubSpot wraps each control in <div class="input"> with a right margin that
   leaves controls short of full width — zero it so every field is 100%. */
.hs-form .input { margin: 0; width: 100%; }

/* Hide HubSpot's hidden context fields (UTM, msclkid, the tool's hidden result
   fields, …) so they leave no gaps. Only hide fields with NO visible control —
   the intl-phone widget injects its own hidden <input> alongside the visible
   one, so it must NOT be caught here. */
.hs-form .hs-form-field:has(input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)) { display: none; }

/* Field wrapper + label. `width:100%` (not just flex-basis) — in a column flex,
   flex-basis is the MAIN axis (height), so fields need an explicit width to fill
   the row in BOTH inline and wrapped contexts. */
.hs-form .hs-form-field { flex: 0 0 auto; width: 100% !important; max-width: 100% !important; box-sizing: border-box; position: relative; padding-bottom: 14px; margin: 0; }
.hs-form .hs-form-field .input,
.hs-form .hs-fieldtype-intl-phone,
.hs-form .hs-fieldtype-intl-phone select.hs-input,
.hs-form .hs-fieldtype-intl-phone input.hs-input { width: 100% !important; box-sizing: border-box; }
.hs-form .hs-form-field > label { display: block; font-family: var(--hsf-font); font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 5px; color: var(--hsf-label); }
.hs-form .hs-form-required { color: var(--hsf-brand); margin-left: 2px; }

/* Inputs / selects / textareas — exclude radio/checkbox AND the intl-phone
   WRAPPER (it carries .hs-input but only contains the real select + tel inputs,
   which get the box styling themselves). The :not() triplet also lifts this
   above _forms.scss's `.hbspt-form form [type=…]` rule in wrapped contexts. */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not(.hs-fieldtype-intl-phone) {
  width: 100%; height: auto; min-height: 0; box-sizing: border-box;
  background-color: var(--hsf-input-bg); border: none;
  box-shadow: var(--hsf-input-ring) 0px 0px 0px 1px inset;
  border-radius: 8px; padding: 11px 14px;
  font-family: var(--hsf-font); font-size: 14px; color: var(--hsf-input-text);
  outline: none; transition: box-shadow 0.15s; margin: 0;
}
.hs-form textarea.hs-input { min-height: 88px; }
.hs-form .hs-input::placeholder { color: var(--hsf-placeholder); }
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not(.hs-fieldtype-intl-phone):focus { box-shadow: var(--hsf-brand) 0px 0px 0px 1px inset, rgba(80, 164, 250, 0.18) 0px 0px 24px 0px; }
.hs-form .hs-input.invalid.error { box-shadow: var(--hsf-error) 0px 0px 0px 1px inset; }

/* Intl phone: wrapper is layout-only — its inner select + tel input are the
   boxed controls, stacked with a small gap. */
.hs-form .hs-fieldtype-intl-phone { display: flex; flex-direction: column; gap: 8px; width: 100% !important; background: transparent; box-shadow: none; border: none; padding: 0; }
.hs-form .iti { width: 100%; display: block; }
.hs-form .iti input.hs-input { width: 100% !important; padding-left: 54px !important; }

/* Submit. The theme's _forms.scss styles `.hbspt-form form … .hs-button` with
   deep specificity, so in WRAPPED contexts (e.g. the homepage-v2 modal) it would
   otherwise win. This is the single source of truth for HubSpot buttons, so the
   key visual props are forced. */
.hs-form .hs_submit { margin: 6px 0 0; padding-bottom: 0; width: 100% !important; align-self: stretch !important; }
.hs-form .hs_submit .actions { margin: 0; padding: 0; width: 100% !important; }
.hs-form .hs-button {
  width: 100% !important;
  background-color: var(--hsf-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 13px 24px !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: var(--hsf-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: opacity 0.2s;
}
.hs-form .hs-button:hover { opacity: 0.88; background-color: var(--hsf-brand) !important; }

/* Validation + legal / richtext copy. */
.hs-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.hs-form .hs-error-msgs li { margin: 0; }
.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label { color: var(--hsf-error); font-family: var(--hsf-font); font-size: 12px; }
.hs-form .legal-consent-container,
.hs-form .hs-richtext { font-family: var(--hsf-font); font-size: 11px; line-height: 1.5; color: var(--hsf-legal); margin-top: 4px; }
.hs-form .legal-consent-container a,
.hs-form .hs-richtext a { color: var(--hsf-brand); }

/* HubSpot's inline thank-you message. */
.hs-form.submitted-message,
.hs-form .submitted-message,
.hs-form .hs-submitted-message { font-family: var(--hsf-font); font-size: 15px; line-height: 1.5; color: var(--hsf-input-text); }