/* ==========================================================================
   Contact Form 7

   inc/cf7.php rewrites CF7's field markup into the markup the design already
   has, so this file is deliberately short: it only covers the things CF7 puts
   on the page in its own right, which a static form could not have had.

   Nothing here restyles a field. If a field ever needs a rule in this file,
   that is a sign the rewrite in inc/cf7.php has stopped matching.
   ========================================================================== */

/* ------------------------------------------------------------------ wrappers

   CF7 wraps every control in a span, and a checkbox or radio group in two more.
   Left alone, the outer one becomes the grid item inside .ne-grid-2 and the
   input beneath it stops being one, and .ne-choice's flex row gets a single
   child instead of one per option.

   display: contents removes them from the layout without removing them from the
   document, which is exactly what is wanted: CF7 still finds its own elements,
   and the boxes the design lays out are the design's own. */
.wpcf7-form-control-wrap,
.ne-choice .wpcf7-radio,
.ne-choice .wpcf7-list-item,
.ne-check .wpcf7-acceptance,
.ne-check .wpcf7-checkbox,
.ne-check .wpcf7-list-item {
  display: contents;
}

/* CF7's hidden-field block is a fieldset, which would otherwise inherit the
   .ne-fieldset border in some browsers' default styling. */
.wpcf7 form > .hidden-fields-container {
  display: none;
}

/* CF7's own stylesheet gives list items an inline-block and a left margin. With
   display: contents above there is no box to carry either, but the label inside
   is a real box and CF7's margin rule can reach it. */
.ne-choice .wpcf7-list-item > label {
  margin: 0;
}

/* CF7's own scaffolding: the hidden field block and the screen-reader summary.
   The summary must stay reachable by assistive technology, so it is hidden the
   way the design hides text, not with display: none. */
.wpcf7 form .wpcf7-response-output {
  border: 1px solid var(--ne-amber);
  border-left: 3px solid var(--ne-amber);
  background-color: color-mix(in srgb, var(--ne-amber) 8%, var(--ne-white));
  padding: var(--ne-space-6);
  margin: var(--ne-space-5) 0 0;
  font-size: 0.9375rem;
}

/* An invalid submission is not a success. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: var(--ne-error-ink);
  border-left-color: var(--ne-error-ink);
  background-color: color-mix(in srgb, var(--ne-error) 8%, var(--ne-white));
  color: var(--ne-error-ink);
}

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The submit spinner. CF7 places it after the button; the design's button row is
   a flex row, so it needs to sit on the baseline rather than push the row. */
.wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

/* CF7 marks a failed field on the control itself. The design's error colour,
   applied to the border the field already has. */
.wpcf7 .ne-input[aria-invalid="true"] {
  border-color: var(--ne-error-ink);
}

/* A validation message sits under its field. .ne-error carries the colour and
   the size; this only has to undo CF7's own inline-block spacing. */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
}