/* ==========================================================================
   DAP Vertical Blocks - HubSpot form adapter styles

   hubspot-forms.js relabels HubSpot's DOM with the design's own class names, so
   the fields, labels and button are styled by components.css and pages.css
   verbatim. Nothing in this file restyles a field.

   What is here is only the parts HubSpot adds that the static markup has no
   equivalent for: its two wrapper divs, the required asterisk, its validation
   messages and its post-submit message.

   No em-dashes anywhere in this codebase, per brand guardrails.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Until onFormReady has run, the form is unclassed and unstyled. Hide it for
   that one frame so it never flashes as raw HubSpot markup.
   -------------------------------------------------------------------------- */
.dapv-hsform-target form:not(.dapv-hsform) {
  visibility: hidden;
}

.dapv-hsform-target {
  min-height: 1px;
}

/* --------------------------------------------------------------------------
   HubSpot wraps each control in div.input and the submit in div.actions. The
   design's .form-group is a flex column of label + control, so those wrappers
   would add a layout box that the static markup does not have.
   display:contents removes the box while leaving the element in the DOM, so
   HubSpot's own error insertion and event wiring keep working.
   -------------------------------------------------------------------------- */
.dapv-hsform .form-group > .input,
.dapv-hsform .hs_submit > .actions {
  display: contents;
}

/* --------------------------------------------------------------------------
   Every field on this form is required in HubSpot, so HubSpot appends an
   asterisk to all five labels. The approved design shows none, and marking
   every field adds no information. Hidden visually, still read by screen
   readers, which is the accessible way round.
   -------------------------------------------------------------------------- */
.dapv-hsform .hs-form-required {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* HubSpot emits an empty legend for every field that has no help text. */
.dapv-hsform .hs-field-desc:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Validation messages. New UI - the static form had no validation at all - so
   these are built from the design's own tokens rather than invented values.
   -------------------------------------------------------------------------- */
.dapv-hsform .hs-error-msgs,
.dapv-hsform .hs_error_rollup ul {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.dapv-hsform .hs-error-msg,
.dapv-hsform .hs-main-font-element {
  font-size: var(--t-small);
  line-height: var(--t-leading-body);
  color: var(--primary-500);
}

.dapv-hsform .form-input.error,
.dapv-hsform .form-input.invalid,
.dapv-hsform .form-textarea.error {
  border-color: var(--primary-500);
}

/* The roll-up above the button repeats what is already under each field. */
.dapv-hsform .hs_error_rollup {
  display: none;
}

/* --------------------------------------------------------------------------
   Post-submit message, shown in place of the form.
   -------------------------------------------------------------------------- */
.dapv-hsform-target .submitted-message {
  font-size: var(--t-body);
  line-height: var(--t-leading-body);
  color: var(--text-main);
}

.hc-closeband .dapv-hsform-target .submitted-message {
  color: var(--gray-900);
}