/* --------------------------------------------------------------------------
   WP + Contact Form 7 fit
   --------------------------------------------------------------------------
   site.css owns the design system. This file adapts Contact Form 7's own
   markup to it — CF7 styles are dequeued, so everything here is ours.

   CF7 output for reference:
   - text/email/select/textarea controls render as the element itself, wrapped
     in <span class="wpcf7-form-control-wrap" data-name="...">real element</span>
   - a checkbox renders as nested spans:
       <span class="wpcf7-form-control-wrap" data-name="consent">
         <span class="wpcf7-form-control wpcf7-checkbox ..." id="f-consent">
           <span class="wpcf7-list-item first last">
             <label><input type="checkbox" name="consent[]" ...>
               <span class="wpcf7-list-item-label">…</span></label>
           </span></span></span>
   - validation errors land inside the wrap as .wpcf7-not-valid-tip and the
     control gets .wpcf7-not-valid
   - the whole form is wrapped in <div class="wpcf7"><form class="wpcf7-form">…
   - a status map is applied to the <form> element (class + [data-status])
   - empty the .screen-reader-response with a visually-hidden treatment
   -------------------------------------------------------------------------- */

/* Flatten the per-control wrapper span so the real control sits directly in
   the .field grid. Safe: the wrapper is never the layout box we style. */
.wpcf7-form-control-wrap { display: contents; }

/* Confirm the reserved spinner/status elements are inert in this theme. */
.wpcf7 .wpcf7-form .wpcf7-spinner { display: none; }

/* The response banner is populated by CF7 on submit. Hidden until it has
   content, then styled per form status. */
.wpcf7-response-output { display: none; }
.wpcf7-response-output:not(:empty) {
  display: block;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--fg-muted);
}
.form[data-status="invalid"] .wpcf7-response-output:not(:empty),
.form[data-status="failed"] .wpcf7-response-output:not(:empty) {
  border-color: #D9705E;
  color: #F0A899;
  background: rgba(217, 112, 94, .06);
}
.form[data-status="sent"] .wpcf7-response-output:not(:empty) {
  border-color: var(--brass-700);
  background: rgba(217, 164, 65, .05);
}

/* CF7's per-field inline tip reads as our .field__error. */
.wpcf7-not-valid-tip {
  display: flex;
  align-items: center; gap: .4rem;
  margin-top: .45rem;
  font-size: .8125rem; color: #F0A899;
}
.wpcf7-not-valid-tip::before {
  content: "!";
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* Invalid control + label states, mirroring .field--invalid in site.css. */
.field__control.wpcf7-not-valid { border-color: #D9705E; }
.field:has(> .wpcf7-form-control-wrap .wpcf7-not-valid) > .field__label { color: #F0A899; }
.check:has(.wpcf7-not-valid) label { color: #F0A899; }

/* Consent checkbox: the nested CF7 spans collapse so .check's grid gets the
   real input and the label as its two columns. */
.check .wpcf7-form-control.wpcf7-checkbox,
.check .wpcf7-list-item { display: contents; }
.check .wpcf7-not-valid-tip { grid-column: 1 / -1; }

/* Consent checkbox: make the CF7 label a flex row so the checkbox and text
   sit side-by-side with a horizontal gap. */
.check label {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.check input[type="checkbox"] {
  margin-top: .15rem;
  flex: none;
}

/* Error summary CF7 announces to assistive tech — visually hidden, still
   exposed to the accessibility tree. */
.wpcf7 .screen-reader-response {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.wpcf7 .screen-reader-response ul { list-style: none; margin: 0; padding: 0; }

/* The submit button takes its button classes from the form template
   ([submit class:btn class:btn--primary "Send message"]) — make sure the
   CF7-added control class never interferes. */
.wpcf7-submit { cursor: pointer; }