/* ─── Contact Form 7 — global output styling ─────────────────────────────────
   CF7 always emits its own classes (.wpcf7-form-control, .wpcf7-submit,
   .wpcf7-form-control-wrap, .wpcf7-response-output, …) regardless of a
   specific form's own custom field classes, so every rule here targets
   those rather than any one form's field-tag classes — this covers
   whatever CF7 form appears anywhere on the site (the newsletter signup,
   a future contact page, …), not just one instance. A specific placement's
   own layout (e.g. the newsletter's inline email+button row) stays local to
   that section; this file is only the shared look: inputs, submit,
   validation, and the response message.
   ────────────────────────────────────────────────────────────────────────── */

.wpcf7-form {
  position: relative;
}

/* CF7 6.x wraps its hidden anti-spam/meta inputs in a real <fieldset>,
   which browsers give a default visible border/padding — invisible only
   when CF7's own plugin stylesheet is enqueued, which this install
   doesn't load, so reset it explicitly rather than depend on that plugin
   CSS being present. */
fieldset.hidden-fields-container {
  display: none;
}

.wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

textarea.wpcf7-form-control,
.wpcf7-form-control-wrap input.wpcf7-form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-color);
  color: var(--text-color);
  font-size: var(--text-base);
  font-family: inherit;

  &.wpcf7-not-valid {
    border-color: var(--negative-color);
  }
}

textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

/* Absolutely positioned under its own field instead of pushing layout —
   an error tip appearing mid-form no longer shifts whatever sits beside
   or below that field (e.g. a submit button on the same row). */
.wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--negative-color);
  white-space: nowrap;
}

/* Full button treatment (not just relying on a `class:btn` field-tag
   option, which a form author may or may not have set) so a CF7 submit
   reads as a primary CTA regardless of the specific form's own classes. */
input.wpcf7-submit.wpcf7-form-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  transition:
    background var(--hover-duration) var(--timing),
    color var(--hover-duration) var(--timing),
    border-color var(--hover-duration) var(--timing);

  &:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
  }
}

.wpcf7-spinner {
  margin: 0 0 0 8px;
}

/* ─── Response message — a floating popup, not an inline block ───────────────
   Absolutely positioned below the form (.wpcf7-form is the position:
   relative anchor above) so it never shifts the form's own layout — a
   success or error message used to push whatever sat below it down the
   page. Hidden until CF7's own AJAX handler actually fills it with text,
   then fades/rises in as a small elevated card; success gets the
   strongest "popup" treatment (shadow + tinted card), error/other states
   stay quieter but are still an absolute, non-layout-shifting box.
   ────────────────────────────────────────────────────────────────────────── */
.wpcf7-response-output {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  /* Extra clearance (not just 10px) because a per-field .wpcf7-not-valid-tip
     sits absolutely right under its own field, at roughly this same height
     when a form is a single field row (e.g. the newsletter signup) — this
     keeps the two from overlapping into one unreadable line. */
  margin: 26px 0 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--hover-duration) var(--timing),
    transform var(--hover-duration) var(--timing);

  &:not(:empty) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

form.sent .wpcf7-response-output {
  border-color: var(--positive-color);
  background: color-mix(in srgb, var(--positive-color) 12%, var(--surface-color));
  color: var(--positive-color);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--positive-color) 25%, transparent);
}

form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output,
form.spam .wpcf7-response-output,
form.invalid .wpcf7-response-output,
form.unaccepted .wpcf7-response-output {
  border-color: var(--negative-color);
  background: color-mix(in srgb, var(--negative-color) 12%, var(--surface-color));
  color: var(--negative-color);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--negative-color) 18%, transparent);
}