/* ============================================================
   Buob — Contact Form 7 integration
   The CF7 form markup already carries the design classes
   (buob-field / buob-field__control / buob-btn). These rules
   tame CF7's own wrappers, validation tips and response banner
   so the output matches the design.
   ============================================================ */

/* CF7 wraps the whole form in <div class="wpcf7"> */
.contact__form-col .wpcf7 { max-width: 660px; }

/* Lay the fields out like the original .contact__form (hidden inputs are
   display:none, so grid gaps ignore them). Field-to-field spacing comes from
   this grid gap — NOT from the <p> margins (which we zero below). */
.contact__form-col form.wpcf7-form {
  display: grid;
  gap: var(--space-6);
}

/* CF7 wraps each control in an inline span — make it block so the
   input/textarea fill the field width. */
.buob-field .wpcf7-form-control-wrap { display: block; }

/* --- autop artefacts ---
   CF7's autop wraps every field (and the submit) in its own <p> and sprinkles
   <br> after each label/control. Zero the <p> margins (top & bottom) and drop
   the stray line breaks so the label sits tight above its input. */
.contact__form-col .wpcf7-form p { margin-top: 0; margin-bottom: 0; }
.contact__form-col .wpcf7-form br { display: none; }

/* The two .contact__row fields share ONE autop <p> — make that <p> the
   two-column grid (the row div itself just passes through). */
.contact__row { display: block; }
.contact__row > p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .contact__row > p { grid-template-columns: 1fr; }
}

/* Submit button (CF7 adds .wpcf7-submit to our .buob-btn) */
.contact__form-col .buob-btn.wpcf7-form-control.wpcf7-submit,
.contact__form-col input.buob-btn[type="submit"] {
  justify-self: start;
  margin-top: var(--space-2);
  font-family: var(--font-body);
}

/* Ajax spinner sits next to the button */
.wpcf7-spinner { margin: 0 0 0 14px; }

/* Inline validation tip under a field */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #c0392b;
}
.buob-field--underline .buob-field__control.wpcf7-not-valid {
  border-bottom-color: #c0392b;
}
textarea.buob-field__control.wpcf7-not-valid {
  box-shadow: inset 0 0 0 1px #c0392b;
}

/* Response banner (success / validation / send failure) — styled like the
   design's .contact__sent card. */
.wpcf7 .wpcf7-response-output {
  margin: var(--space-6) 0 0 !important;
  padding: 20px 24px !important;
  border: 1px solid var(--teal-500) !important;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
  font-size: 16px;
  line-height: 1.5;
  color: var(--petrol-800);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--teal-500) !important;
  color: var(--petrol-800);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  border-color: #e0a400 !important;
  color: var(--ink-900);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c0392b !important;
  color: #c0392b;
}