/*
  Contact Form 7, wearing the site's own form styling.

  Loaded only when CF7 is active, and kept out of main.css so that file stays
  byte-identical to the static build.

  CF7 cannot be made to emit the exact markup the design was written against:
  it wraps every control in a span of its own, and it reports errors and the
  submission result in elements with its own class names. Rather than fight it,
  those elements are given the appearance of `.field__error`, `.has-error` and
  `.form__status`. The variables come from main.css.
*/

/* CF7 wraps each control in a span. Inline by default, which breaks the
   full-width inputs the layout expects. */
.form .wpcf7-form-control-wrap {
  display: block;
}

/* CF7 marks the control, not the field, so the error border is applied there
   instead of through `.field.has-error`. */
.field input.wpcf7-not-valid,
.field textarea.wpcf7-not-valid {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* CF7's per-field message, given the position and entrance of `.field__error`.
   It is only inserted when a field is invalid, so it needs no hidden state. */
.field .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--accent);
  animation: tee-cf7-tip 0.25s var(--ease) both;
}

@keyframes tee-cf7-tip {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field .wpcf7-not-valid-tip {
    animation: none;
  }
}

/* The submission result, styled as `.form__status`. CF7 keeps the element in
   the document and toggles it, so an empty one must not reserve a line. */
.form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-64);
}

.form .wpcf7-response-output:empty,
.form form:not(.invalid):not(.sent):not(.failed):not(.aborted):not(.spam) .wpcf7-response-output {
  display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  color: var(--accent);
}

/* If CF7's own [submit] tag is used instead of the button in the form
   template, its spinner lands next to the control and shifts the row. */
.form .wpcf7-spinner {
  margin: 0 0 0 12px;
  flex: 0 0 auto;
}

/* The form template uses a native button so it can carry the arrow, which
   means no CF7 spinner. CF7 marks the form while the request is in flight;
   that stands in for it. */
.wpcf7 form.submitting .btn {
  opacity: 0.55;
  pointer-events: none;
}

.form .btn:disabled,
.form .wpcf7-submit:disabled {
  opacity: 0.55;
  cursor: default;
}