/*
 * Contact Form 7 integration.
 *
 * Kept out of theme.css: that file is the design artifact and is carried over
 * from the prototype byte for byte. Everything here exists only because a
 * plugin puts wrapper elements around the controls.
 *
 * The wrappers are made transparent to layout rather than styled around.
 * `display: contents` removes their boxes while leaving the real <input> as a
 * direct child of the `.field` grid, so every rule the design already carries
 * keeps applying and nothing is duplicated.
 */

.form .wpcf7-form-control-wrap { display: contents; }

/* The consent row is a two-column grid of [checkbox] [label]. CF7 nests the
   input four elements deep and supplies its own label element; flattening all
   of them puts the real input and our own <label for="f-gdpr"> back into those
   two columns. Clicking the text still toggles the box: a label with
   `display: contents` generates no box of its own but keeps its association. */
.field--consent .wpcf7-acceptance,
.field--consent .wpcf7-list-item,
.field--consent .wpcf7-list-item > label { display: contents; }
.field--consent .wpcf7-list-item-label { display: none; }

/* Validation and status messages. CF7 ships its own colours; these are the
   design's, and the response output is a real region so a screen reader is
   told when a submission succeeded or failed. */
.wpcf7 form .wpcf7-response-output {
  margin: var(--s-2) 0 0;
  padding: .85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--body);
  background: var(--surface);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--brand-deep); color: var(--brand-ink); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--crisis); color: var(--crisis); }

.wpcf7-not-valid-tip {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--crisis);
}
.field input.wpcf7-not-valid,
.field select.wpcf7-not-valid,
.field textarea.wpcf7-not-valid { border-color: var(--crisis); }

/* The submit control is an <input>, not a <button>, so it does not inherit the
   flex box the icon buttons use. Everything else about .btn already applies. */
.form input.wpcf7-submit { width: auto; min-height: 0; }

.wpcf7-spinner { margin-inline-start: .5rem; }