/* ==========================================================================
   Contact Form 7 → the theme's form

   main.css already dresses this form: .form-card, .form-grid, .field,
   .field__input and the validation states all came from the static build.
   Contact Form 7 renders the same fields inside wrappers of its own, so what
   follows maps its structure and its state classes onto those, rather than
   styling the form a second time.

   Loaded only on a page that actually holds a form — see inc/cf7.php.
   ========================================================================== */

/* --------------------------------------------------------------- layout --
   .form-card is the flex column, and the plugin puts two divs between it and
   the fields. Both pass the column through so the fields keep their rhythm
   and the message box still takes the leftover height. */
.form-card > .wpcf7 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.form-card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* The hidden inputs sit in a fieldset. It draws nothing, but as a flex child
   it still takes a gap. */
.form-card .wpcf7-form > .hidden-fields-container {
  display: none;
}

/* Every control is wrapped in an inline span, which would leave the inputs
   at their default width instead of filling the field. */
.form-card .wpcf7-form-control-wrap {
  display: block;
  position: static;
}

/* The message box grows to fill the card, through the wrapper as well. */
.form-card .field--grow .wpcf7-form-control-wrap {
  display: flex;
  flex: 1 1 auto;
}
.form-card .field--grow textarea.field__input {
  flex: 1 1 auto;
}

/* Contact Form 7 sizes controls with cols/size attributes; the field owns
   its width here. */
.form-card .field__input {
  box-sizing: border-box;
}

/* ----------------------------------------------------------- validation --
   .field__err is the static build's message under a field. The plugin's
   equivalent is .wpcf7-not-valid-tip, and it marks the input itself with
   aria-invalid — which main.css already styles. */
.form-card .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8f2d19;
}

/* --------------------------------------------------------------- status --
   One output element for every outcome, so the state lives on the form and
   the colour is chosen from it. Mirrors .form-status / .is-ok / .is-err. */
.form-card .wpcf7-response-output {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  font-size: 0.86rem;
  font-weight: 500;
  display: none;
}
.form-card .wpcf7-form.sent .wpcf7-response-output {
  display: block;
  color: #2f5d3a;
  background: rgba(47, 93, 58, 0.09);
  border-color: rgba(47, 93, 58, 0.24);
}
.form-card .wpcf7-form.invalid .wpcf7-response-output,
.form-card .wpcf7-form.unaccepted .wpcf7-response-output,
.form-card .wpcf7-form.payment-required .wpcf7-response-output,
.form-card .wpcf7-form.failed .wpcf7-response-output,
.form-card .wpcf7-form.aborted .wpcf7-response-output,
.form-card .wpcf7-form.spam .wpcf7-response-output {
  display: block;
  color: #8f2d19;
  background: rgba(168, 54, 31, 0.07);
  border-color: rgba(168, 54, 31, 0.24);
}

/* -------------------------------------------------------------- sending --
   The form template uses a real <button> so the gold arrow can sit inside it,
   which means no [submit] tag and so no plugin spinner. The button says what
   is happening instead. */
.form-card .wpcf7-form.submitting button[type="submit"] {
  opacity: 0.65;
  pointer-events: none;
}