/* ============================================================================
   ECCLESIA · WordPress / Contact Form 7 shims
   Loaded after css/style.css. Uses only the design tokens defined there —
   no new design language. CF7 handles its own validation and AJAX; these
   rules simply dress its injected markup in the "Kingdom" form styles.
   ========================================================================== */

/* ------------------------------------------------ WP core accessibility */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto;
  padding: .6rem 1rem; clip: auto; white-space: normal;
  background: var(--green); color: #fff; border-radius: var(--r-sm); font-weight: 700;
}

/* WP-injected image alignment / caption classes in post content */
.alignleft   { float: left; margin: .4rem 1.4rem 1rem 0; }
.alignright  { float: right; margin: .4rem 0 1rem 1.4rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-xs); color: var(--faint); margin-top: .4rem; }

/* ------------------------------------------------------- CF7 structure */
.wpcf7 p { margin: 0; }
.wpcf7-form-control-wrap { display: block; position: relative; }
.wpcf7 input[type="submit"] { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; }

/* Validation tip under an invalid control (mirrors .field.is-invalid::after) */
.wpcf7-not-valid-tip { display: block; margin-top: .35rem; font-size: var(--fs-xs); color: #b4503f; }
.field .wpcf7-not-valid,
.wpcf7 .wpcf7-not-valid { border-color: #b4503f; box-shadow: 0 0 0 4px rgba(180, 80, 63, .1); }

/* Response output banner (success / error states on the <form> element) */
.wpcf7 .wpcf7-response-output {
  margin: 1.4rem 0 0; padding: .85rem 1.1rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  font-size: var(--fs-sm); color: var(--muted); background: var(--paper);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--green-line); background: var(--green-tint); color: var(--green);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: #b4503f; background: #f3e3df; color: #b4503f;
}

/* Submission spinner */
.wpcf7-spinner { background-color: var(--green); margin: 0 0 0 12px; vertical-align: middle; }

/* Screen-reader validation summary */
.wpcf7 .screen-reader-response {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wpcf7 .screen-reader-response ul { list-style: none; padding: 0; margin: 0; }

/* --------------------------------------------- CF7 checkboxes as chips
   A [checkbox] tag with class:chips renders the reference .chips row:
   .wpcf7-checkbox.chips > .wpcf7-list-item > label > input + span.  */
.wpcf7-checkbox.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.wpcf7-checkbox.chips .wpcf7-list-item { margin: 0; }
.wpcf7-checkbox.chips .wpcf7-list-item label { position: relative; cursor: pointer; display: inline-block; }
.wpcf7-checkbox.chips .wpcf7-list-item input { position: absolute; opacity: 0; }
.wpcf7-checkbox.chips .wpcf7-list-item-label {
  display: inline-block; padding: .45rem .9rem; border-radius: 100px;
  border: 1.5px solid var(--line-2); font-size: .9rem; color: var(--muted); transition: all .2s;
}
.wpcf7-checkbox.chips .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--green); }
.wpcf7-checkbox.chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  background: var(--green-tint); border-color: var(--green); color: var(--green); font-weight: 600;
}

/* ------------------------------------------------ Enquiry form submit
   CF7 renders <input type="submit" class="… btn btn--lg btn--block"> — an
   input cannot contain the reference button's inline #i-send svg, so paint
   the same arrow as a background just right of the centred label. */
.form input.wpcf7-submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: calc(50% + 5em) center;
}

/* --------------------------------------------- Footer newsletter (CF7) */
/* CF7 outputs <form class="… footer__news"> with an injected hidden-fields
   <fieldset> and <p> wrappers inside the flex row; keep the reference
   single-row layout (email field + icon button) intact. */
.footer__news { flex-wrap: wrap; }
.footer__news .hidden-fields-container { display: none; }
.footer__news .field p { display: flex; margin: 0; }
.footer__news .field .wpcf7-form-control-wrap { flex: 1; }
.footer__news > p { display: flex; flex: none; margin: 0; }

/* Validation / response banners drop to their own full-width row */
.footer__news .wpcf7-response-output { flex-basis: 100%; }

/* The submit is an <input>, not the reference <button>: reproduce the white
   icon-button skin and undo the dark field skin from `.footer__news input` */
.footer .footer__news input.wpcf7-submit {
  flex: none; width: auto; min-width: 48px; min-height: 44px; padding: 0 .9rem;
  background: #fff; border: 0; color: var(--green-deep);
  border-radius: var(--r); font-weight: 700;
  transition: transform .2s;
}
.footer .footer__news input.wpcf7-submit:hover { transform: translateY(-2px); }

.footer .wpcf7 .wpcf7-response-output {
  margin-top: .8rem; background: transparent;
  border-color: rgba(255, 255, 255, .2); color: var(--on-green-soft);
}
.footer .wpcf7 form.sent .wpcf7-response-output { border-color: #8fd3b3; color: #8fd3b3; background: transparent; }
.footer .wpcf7-not-valid-tip { color: #f0b9ac; }
.footer .wpcf7 .wpcf7-not-valid { border-color: #f0b9ac; box-shadow: 0 0 0 4px rgba(240, 185, 172, .12); }
.footer .wpcf7-spinner { background-color: #8fd3b3; }

/* The reCAPTCHA v3 badge and the WhatsApp fab both anchor bottom-right;
   lift the badge above the 58px fab (20px offset + gap). Inline-styled by
   Google, so !important is required. */
.grecaptcha-badge { bottom: 92px !important; }