/* =====================================================================
   Belfry HubSpot Form Styles  —  v4 (2026-05-14)
   =====================================================================
   Shared CSS for the embedded HubSpot forms replacing the Webflow forms.
   All values extracted from belfrysoftware.com/demo on 2026-04-30 via
   read-only inspection. Source rules are noted inline.

   This stylesheet must be referenced on any page that embeds one of the
   Belfry HubSpot forms. Without it, the embed falls back to HubSpot's
   default rendering, which does NOT match the rest of the Belfry site.

   v4 (2026-05-14) — NO WRAPPER NEEDED. Styles now apply directly to the
   HubSpot v2 rendered structure (.hbspt-form / form.hs-form). Simply add
   the <link> to this stylesheet — no <div class="hs-form-html"> wrapper
   required. Also: placeholder-only labels are the default (visible
   labels are hidden via visually-hidden technique). Submit button uses
   !important to override Webflow's bleed-through .button rules.

   v3 (2026-05-07) changes:
   - Switched from HubSpot developer embed to basic v2 embed (the developer
     embed forced a country-code selector on the phone field that couldn't
     be disabled).
   - New Book a Demo form ID: 811a3b88-a670-4355-9eca-89a9856d5b92
   - Companion HTML mocks updated to drop Canadian provinces from the State
     dropdown, add Canada AND United States to the Country dropdown, and
     rename the UTM Source last touch hidden field API name from `utm_source`
     (legacy dropdown, deprecating) to `utm_source_last_touch` (new single-
     line text field).
   - Country field hidden by default; shown only when State = "Other". On
     submit, US-state selections should auto-fill Country = "United States"
     on the back end.
   - Added defensive selectors for HubSpot's v2 wrapper classes
     (.hbspt-form, form.hs-form, form[id^="hsForm"]) so styling applies
     even if Helppli embeds the form without the :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) wrapper.

   Used by:
     belfry-hubspot-demo-form-test.html         (live embed test)
     belfry-hubspot-demo-form-test-mock.html    (mock HTML, CSS-only test)
     belfry-hubspot-whitepaper-form-test-mock.html
     belfry-hubspot-email-form-test-mock.html

   Belfry brand tokens:
     --dark-slate-blue: #253a8e   primary brand / button background
     --lavender:        #e8edff   focus accent
     body color:        #333
     label color:       #444748
     placeholder:       #8E9192
     input border:      #e0e0e0
     container shadow:  rgba(0,0,0,0.05) 0 2px 14px 9px
     font (form):       Inter, sans-serif
     font (body):       Arial, "Helvetica Neue", Helvetica, sans-serif
   ===================================================================== */

:root {
  --dark-slate-blue: #253a8e;
  --lavender: #e8edff;
  --text-color: #333;
  --label-color: #444748;
  --placeholder-color: #8E9192;
  --input-border: #e0e0e0;
  --input-border-focus: #bbbbbb;
  --container-shadow: 0 2px 14px 9px rgba(0, 0, 0, 0.05);
  --container-radius: 8px;
  --button-radius: 8px;
  --input-radius: 4px;
  --form-font: Inter, sans-serif;
  --body-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ----- Page reset / base ---------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color);
  background-color: #fff;
  padding: 48px 24px;
}
.test-page-wrap { max-width: 720px; margin: 0 auto; }
.test-page-wrap h1 {
  font-family: var(--form-font);
  font-size: 32px;
  font-weight: 600;
  color: var(--dark-slate-blue);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.test-page-wrap p.subtitle {
  font-family: var(--form-font);
  font-size: 16px;
  color: #666;
  margin: 0 0 32px;
}
.test-banner {
  background: var(--lavender);
  color: var(--dark-slate-blue);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--form-font);
  font-size: 13px;
  line-height: 1.5;
}

/* ----- Form container — Belfry's .contact-form .w-form card -----------
   Primary container is :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) (wrapper Helppli should add around
   the HubSpot v2 embed). Defensive selectors below also target HubSpot's
   own v2 wrapper (.hbspt-form) and the rendered form element itself so
   styling holds even if the :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) wrapper is missing. */
.hs-form-html,
.hbspt-form,
form.hs-form,
form[id^="hsForm"] {
  max-width: 592px;
  margin: 0 auto;
  padding: 44px 48px;
  background-color: #fff;
  border-radius: var(--container-radius);
  box-shadow: var(--container-shadow);
  font-family: var(--form-font);
  color: var(--text-color);
}
/* If both the wrapper AND the inner form are present, only the outer
   wrapper should carry the card styling — strip it off the inner form. */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hbspt-form,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) form.hs-form,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) form[id^="hsForm"],
.hbspt-form form.hs-form,
.hbspt-form form[id^="hsForm"] {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) form,
.hbspt-form form,
form.hs-form,
form[id^="hsForm"] {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ----- 2-column row (FirstName + LastName) ---------------------------- */
.hs-form-field, fieldset.form-columns-1, fieldset.form-columns-2 {
  min-width: 0;
}
/* Zero all fieldset margins/padding with !important so HubSpot's injected
   margin:15px on fieldsets doesn't double up the form's flex-gap spacing.
   Live /demo shows 15px between fields — staging was hitting 30px because
   HubSpot adds an extra fieldset margin on top of the form's gap. */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset.form-columns-2,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset.form-columns-1,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
fieldset.form-columns-2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
fieldset.form-columns-1 {
  display: block;
}
fieldset.form-columns-2 .hs-form-field {
  flex: 1 1 0;
  min-width: 0;
}
/* Force zero margin-top on side-by-side row children to keep First/Last
   Name (and any other 2-column pair) on the same baseline. HubSpot's own
   injected CSS adds margin-top:15px to the second child, breaking the
   row alignment. Specificity bumped via doubled class + form ancestor. */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset.form-columns-2 .hs-form-field.hs-form-field {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
fieldset.form-columns-1 .hs-form-field {
  width: 100%;
}

/* ----- Field wrapper + label (placeholder-only by default) ------------ */
.hs-form-field {
  display: flex;
  flex-direction: column;
}
/* Labels are hidden by default (visually-hidden for screen readers).
   Placeholder text on inputs provides the visible field labeling.
   To show labels above fields, override with: .hs-form-field > label { position: static; ... } */
.hs-form-field > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Re-show certain labels that should remain visible (e.g. checkbox consent
   labels with inline text — see Email Form subscription consent). */
.hs-form-booleancheckbox > label,
.hs-form-checkbox > label,
.hs-form-radio > label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}
.hs-form-required {
  color: var(--dark-slate-blue);
  margin-left: 2px;
}
.hs-field-desc {
  font-family: var(--form-font);
  font-size: 12px;
  color: #888;
  margin: 4px 0 0;
}

/* Form footer link block — for the "Already using Belfry?" line that
   lives inside the form card on /demo, below the submit button. Scoped
   to form scope to avoid styling unrelated .form-footer elsewhere. */
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer {
  font-family: var(--form-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-color);
  margin: 16px 0 0;
}
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer a {
  color: var(--dark-slate-blue);
  text-decoration: underline;
  font-weight: 400 !important; /* override Webflow's default bold on links */
}
/* Override <strong>/<b> inside the footer link — the rendered HTML wraps
   "email support" in <strong>, which inherits its bold weight regardless
   of the link's font-weight. Force normal on these specifically. */
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer strong,
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer b,
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer a strong,
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer a b {
  font-weight: 400 !important;
}
:is(.hs-form-html, .hbspt-form, form.hs-form, form[id^="hsForm"]) .form-footer a:hover {
  color: #1d2e75;
}

/* ----- Conditional fields (Country shown when State = Other) ---------
   HubSpot puts BOTH the State field and (when revealed) the Country
   field inside a single `.hs-dependent-field` wrapper. State is always
   the first .hs-form-field child; Country gets added as the second when
   State = "Other".
   We need 15px spacing ABOVE Country (the conditional one) only — NOT
   above State. Adjacent-sibling selector (+) targets just the second
   .hs-form-field, leaving State's spacing handled by the form's flex-gap. */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-dependent-field > .hs-form-field + .hs-form-field {
  margin-top: 15px;
}

/* ----- Inputs / textareas / selects -----------------------------------
   Use HubSpot-specific classes (.hs-input) where possible to avoid
   colliding with non-HubSpot inputs on the host page. */
.hs-input,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="text"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="email"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="tel"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="number"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="url"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) select {
  width: 100% !important;
  height: 42px !important;
  padding: 11px 12px !important;
  margin: 0;
  border: 1px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  background-color: #fff !important;
  font-family: var(--form-font) !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 16.8px;
  color: var(--text-color) !important;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea {
  height: auto !important;
  min-height: 96px;
  resize: vertical;
}
.hs-input::placeholder,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input::placeholder,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea::placeholder {
  color: var(--placeholder-color) !important;
  opacity: 1 !important;
}

/* Focus state */
.hs-input:focus,
.hs-input:focus-visible,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input:focus,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea:focus,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) select:focus {
  outline: 0;
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--lavender) !important;
}

/* Native select chevron */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238E9192' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* ----- Hidden fields — defensive hide by name -------------------------
   NOTE (2026-05-07): UTM source last touch swapped from `utm_source`
   (legacy dropdown, being deprecated) to `utm_source_last_touch` (new
   single-line text field). Both names are defensively hidden here to
   handle the transition window. */
input[type="hidden"],
.hs-fieldtype-hidden,
input[name="utm_source"],
input[name="utm_source_last_touch"],
input[name="utm_medium"],
input[name="utm_campaign"],
input[name="utm_term"],
input[name="utm_content"],
input[name="lead_source_page"] {
  display: none !important;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-field:has(> .input > input[type="hidden"]),
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-field:has(> input[type="hidden"]),
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-field:has(input[name^="utm_"]),
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-field:has(input[name="lead_source_page"]) {
  display: none !important;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset:has(> .hs-form-field:only-child[style*="display: none"]),
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset.hs-fieldtype-hidden {
  display: none !important;
}

/* ----- Submit button — Belfry .button ---------------------------------
   !important is necessary to override Webflow's .button class which is
   applied site-wide and otherwise wins on cascade order. */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-submit,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs_submit,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .actions {
  width: 100%;
  margin-top: 8px;
}
.hs-button,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="submit"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) button[type="submit"] {
  display: block !important;
  width: 100% !important;
  /* Belfry /demo computed values: padding 17.4px 26.1px, font 17.4px,
     line-height 22.65 (1.3). Using absolute px (not rem) because /demo
     uses a custom html root font-size of 17.42px. */
  padding: 17.4px 26.1px !important;
  background-color: var(--dark-slate-blue) !important;
  color: #fff !important;
  border: 2px solid var(--dark-slate-blue) !important;
  border-radius: var(--button-radius) !important;
  font-family: var(--form-font) !important;
  font-size: 17.4px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 200ms ease, border-color 200ms ease, transform 80ms ease;
  -webkit-appearance: none;
  appearance: none;
  /* Belt-and-suspenders: kill the orange/coral that Webflow's .button often inherits */
  background-image: none !important;
}
.hs-button:hover,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="submit"]:hover,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) button[type="submit"]:hover {
  background-color: #1d2e75 !important;
  border-color: #1d2e75 !important;
}
.hs-button:active,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="submit"]:active,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) button[type="submit"]:active {
  transform: translateY(1px);
}
.hs-button:focus-visible,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="submit"]:focus-visible,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) button[type="submit"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--lavender) !important;
}

/* ----- Validation / error states -------------------------------------- */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-input.invalid,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-input.error,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input.invalid,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input.error,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea.invalid,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) textarea.error,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) select.invalid,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) select.error {
  border-color: #d23535;
  box-shadow: 0 0 0 3px rgba(210, 53, 53, 0.12);
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-error-msgs,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-error-msg,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-main-font-element {
  color: #d23535;
  font-family: var(--form-font);
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0 0;
  list-style: none;
  padding: 0;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-error-msgs label { color: #d23535; }
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .submitted-message,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .submitted-form-message {
  font-family: var(--form-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color);
  text-align: center;
  padding: 24px;
}

/* ----- Checkboxes / radios (Subscription Consent etc.) ---------------- */
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-booleancheckbox,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-checkbox,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-radio,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-booleancheckbox-display,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-checkbox-display,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-radio-display {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-booleancheckbox label,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-checkbox label,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-radio label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-booleancheckbox input,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-checkbox input,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-radio input,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="checkbox"],
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--dark-slate-blue);
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
  padding: 0;
  border: 1px solid var(--input-border);
}
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-booleancheckbox-display span,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-checkbox-display span,
:is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-form-radio-display span {
  font-family: var(--form-font);
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.4;
}

/* ----- Mobile breakpoints — match Belfry site (767px / 480px) --------- */
@media (max-width: 767px) {
  body { padding: 24px 16px; }
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) { padding: 32px 24px; max-width: 100%; }
  .test-page-wrap h1 { font-size: 26px; }
}
@media (max-width: 480px) {
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) { padding: 24px 18px; }
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) fieldset.form-columns-2 {
    flex-direction: column;
    gap: 15px;
  }
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) .hs-button,
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) input[type="submit"],
  :is(.hbspt-form, form.hs-form, form[id^="hsForm"]) button[type="submit"] {
    padding: 14px 18px;
    font-size: 15px;
  }
}