/* ===== Contact Form 7 — shared validation & response feedback =====
 *
 * Single source of truth for how every CF7 form on the site presents
 * errors and success: the bottom-of-form response banner, invalid-field
 * highlighting and the per-field inline tips. The page stylesheets
 * (form-page.css, contact.css, download-modal.css, roi-calculator.css)
 * own layout and input chrome only — their error rules were folded in
 * here so all forms fail (and succeed) with one consistent voice.
 *
 * Enqueued on CF7 form pages by inc/enqueue.php at priority 20 so it
 * loads after CF7's own stylesheet and after every page stylesheet.
 * Selector specificity is deliberately pitched to beat both:
 *   banner  .wpcf7 form.wpcf7-form .wpcf7-response-output   (0,3,1)
 *   fields  .wpcf7 .wpcf7-form .wpcf7-form-control.…        (0,4,0)
 * — above CF7 core's (0,2,1) and the page sheets' scoped input rules.
 *
 * Pairs with scripts/cf7-feedback.js (scroll-to-first-error + live
 * error clearing while the visitor types).
 */

:root {
  /* Foreground colours tuned for 4.5:1+ contrast on their soft
   * background counterparts — --color-danger itself (#D14848) only
   * reaches ~4:1 on white, so small text gets these darker steps. */
  --pi-cf7-danger-text:  #9E3232;
  --pi-cf7-warning-text: #7A560E;
  --pi-cf7-danger-ring:  rgba(209, 72, 72, 0.14);
}

/* --- Response banner (bottom of form) ------------------------------ */

.wpcf7 form.wpcf7-form .wpcf7-response-output {
  /* Alert-circle icon; the .sent state swaps in a check-circle. */
  --pi-cf7-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--off-white-40);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output:empty { display: none; }

/* Status icon — masked box painted with currentColor so it always
 * matches the banner's text colour without per-state icon assets. */
.wpcf7 form.wpcf7-form .wpcf7-response-output::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--pi-cf7-icon) center / contain no-repeat;
  mask: var(--pi-cf7-icon) center / contain no-repeat;
}

/* Validation failed / consent unticked / payment required — the
 * visitor needs to fix something: danger tone. */
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output {
  border-color: rgba(209, 72, 72, 0.35);
  background: var(--color-danger-soft);
  color: var(--pi-cf7-danger-text);
}

/* Send failed / aborted / flagged as spam — the visitor's input was
 * fine, the submission didn't go through: warning tone, not blame-red. */
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output {
  border-color: rgba(224, 166, 43, 0.45);
  background: var(--color-warning-soft);
  color: var(--pi-cf7-warning-text);
}

/* Sent — success tone with a check-circle icon. */
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
  --pi-cf7-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12.5l2.5 2.5L16 9.5'/></svg>");
  border-color: rgba(63, 174, 82, 0.4);
  background: var(--color-success-soft);
  color: var(--green-text);
}

/* Ease the banner in when a submission response lands. Runs once per
 * page (element only starts matching when the form leaves .init). */
@media (prefers-reduced-motion: no-preference) {
  .wpcf7 form.wpcf7-form:not(.init) .wpcf7-response-output {
    animation: pi-cf7-banner-in 0.28s var(--ease-standard) both;
  }
}
@keyframes pi-cf7-banner-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Invalid fields ------------------------------------------------- */

.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--pi-cf7-danger-ring);
}
.wpcf7 .wpcf7-form .wpcf7-form-control.wpcf7-not-valid:focus {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(209, 72, 72, 0.22);
}

/* Acceptance controls are a <span> wrapping checkbox + label text — put
 * the ring on the checkbox itself, not around the whole sentence. */
.wpcf7 .wpcf7-form .wpcf7-acceptance.wpcf7-not-valid {
  border: 0;
  box-shadow: none;
}
.wpcf7 .wpcf7-form .wpcf7-acceptance.wpcf7-not-valid input[type="checkbox"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--pi-cf7-danger-ring);
}

/* --- Inline per-field tips ------------------------------------------ */

.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--pi-cf7-danger-text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}