/* ============================================================
   Contact Form 7 → .contact__form compatibility
   ------------------------------------------------------------
   The CF7 form template is raw HTML we author, so .field-row, .field
   and <label> come out exactly as designed. Four things CF7 adds are
   outside that template, and they are reconciled here rather than by
   editing styles.css.

   The <form> itself picks up .contact__form through the
   wpcf7_form_class_attr filter in includes/class-assets.php, so the
   card styling lands on the right element.
   ============================================================ */

/* 1 · CF7 wraps every control in an inline <span>. Left alone, the
      `.field input{width:100%}` rule sizes to a shrink-wrapped span
      rather than the column. */
.contact__form .wpcf7-form-control-wrap {
  display: block;
}

/* CF7's own <div class="wpcf7"> becomes the grid child, so it must be
   allowed to shrink inside the 1fr 1.1fr track. */
.contact__grid > .wpcf7 {
  min-width: 0;
}

/* 2 · Inline validation message — copy of .err, minus the display:none
      (CF7 only prints the tip when the field is actually invalid). */
.contact__form .wpcf7-not-valid-tip {
  color: var(--danger);
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

/* …and the matching red border, which .field.invalid used to supply. */
.contact__form .wpcf7-not-valid {
  border-color: var(--danger);
}

/* 3 · Response box — copy of .form-ok. CF7 shows it for errors too, so
      the error state is tinted from the danger token instead. */
.contact__form .wpcf7-response-output {
  background: var(--cci-blue-50);
  color: var(--cci-blue);
  border: 0;
  border-radius: 10px;
  padding: 14px 16px!important;
  margin: 14px 0 0!important;
  font-size: 14px;
  font-weight: 500;
}
.contact__form.invalid .wpcf7-response-output,
.contact__form.spam .wpcf7-response-output,
.contact__form.failed .wpcf7-response-output,
.contact__form.aborted .wpcf7-response-output {
  background: var(--danger-soft);
  color: var(--danger);
}

/* 4 · Keep the spinner out of the button's flow. */
.contact__form .wpcf7-spinner {
  display: block;
  margin: 10px auto 0;
}