/* ==========================================================================
   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;
}

/* On success the panel above the form IS the message, so CF7's own response area
   would be the same sentence twice on one screen. Same rule as the field messages
   below: whichever element the design already has wins, and it is settled by a
   rule rather than by whichever script runs last.

   Failures keep CF7's output, because there is no panel for those. */
.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}

/* 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);
}

/* ------------------------------------------------------- validation messages

   One message per field, and this is what enforces it.

   Five fields carry the approved build's own wording in a hidden .ne-error span
   ("Please tell us your name."), which assets/js/form.js reveals when CF7 reports
   that field invalid. CF7 also writes its own tip into the same field, with its
   own generic wording ("Please fill this in."), and both were appearing.

   It was tried in JavaScript first and could not work. CF7 dispatches the
   wpcf7invalid event in one promise callback and inserts its tips in the NEXT one,
   so a handler on the event runs before the tips exist: it removed nothing, and
   then CF7 added them. Timing was the wrong tool.

   So the rule is declared instead of raced. A field that has its own message hides
   CF7's; a field that does not — the two date fields, company, additional
   requirements — shows CF7's, styled to match. */
.wpcf7 .ne-field:has(.ne-error) .wpcf7-not-valid-tip {
  display: none;
}

/* Where CF7's tip IS the message, it gets the design's error styling. .ne-error is
   added to it in inc/cf7.php; this only undoes CF7's own inline-block spacing. */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
}