/* =============================================================
   Spartan Agency — Contact Form 7 skin
   Applies to every .wpcf7 form on the site (Contact page, Current
   Tenant maintenance request, Accessibility barrier report, listing
   inquiry on single properties).

   Accessibility notes:
     - Labels are real <label for> elements authored in the form
       template (see .cursor/tools/seed-cf7-forms.php); we only style.
     - Focus ring is a 2px gold outline + 2px offset (WCAG 2.4.7/2.4.11).
     - Error text uses --danger-ink on the page surface (>= 4.5:1) and
       invalid fields get a 2px --danger border (>= 3:1 non-text).
     - Required marker is a visual-only asterisk; the `*` in the label
       is aria-hidden and CF7 adds aria-required on the control.
   ============================================================= */

.wpcf7 {
  --cf7-field-bg: var(--surface-content);
  --cf7-field-border: var(--rule-soft);
  --cf7-field-ink: var(--text);
  --cf7-label-ink: var(--charcoal-2);
  --cf7-focus: var(--brand-primary);
  --cf7-danger: #B3261E;
  --cf7-success-bg: #EEF6EE;
  --cf7-success-ink: #1F5E2A;
  font-family: var(--font-body);
  color: var(--cf7-field-ink);
}

.wpcf7 p { margin: 0 0 1rem; }

.wpcf7 label,
.wpcf7 legend {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cf7-label-ink);
  margin-bottom: 0.35rem;
}

.wpcf7 .tx-required { color: var(--cf7-danger); margin-left: 2px; }

.wpcf7 .tx-cf7-note {
  font-size: 0.875rem;
  color: var(--text-muted, var(--ink-muted));
}

/* Two-column field grid on wide viewports; single column below 640px. */
.wpcf7 .tx-cf7-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-4);
}

@media (max-width: 640px) {
  .wpcf7 .tx-cf7-grid { grid-template-columns: 1fr; }
}

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

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cf7-field-border);
  border-radius: var(--r-sm);
  background: var(--cf7-field-bg);
  color: var(--cf7-field-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wpcf7 textarea { min-height: 9rem; resize: vertical; }

.wpcf7 select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232B2B2E' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.wpcf7 input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  font: inherit;
  color: var(--cf7-field-ink);
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 input[type="file"]:focus-visible {
  outline: 2px solid var(--cf7-focus);
  outline-offset: 2px;
  border-color: var(--cf7-focus);
}

/* Radio / checkbox groups authored with use_label_element */
.wpcf7 .tx-cf7-fieldset {
  border: 1px solid var(--cf7-field-border);
  border-radius: var(--r-sm);
  padding: 0.9rem 1rem 0.5rem;
  margin: 0 0 1rem;
  background: var(--cf7-field-bg);
}

.wpcf7 .tx-cf7-fieldset legend { padding: 0 0.35rem; margin-bottom: 0; }

.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox { display: grid; gap: 0.5rem; }

.wpcf7 .wpcf7-list-item { display: block; margin: 0; }

.wpcf7 .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  color: var(--cf7-field-ink);
  cursor: pointer;
  min-height: 32px;
}

.wpcf7 .wpcf7-list-item input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--brand-primary);
  flex: 0 0 auto;
}

/* Submit: reuse the gold primary button; CF7 wraps it in .wpcf7-submit */
.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  border: 2px solid var(--brand-primary);
  background: var(--brand-primary);
  color: var(--brand-primary-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wpcf7 .wpcf7-submit:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.wpcf7 .wpcf7-submit:focus-visible {
  outline: 2px solid var(--charcoal-2);
  outline-offset: 3px;
}

.wpcf7 .wpcf7-spinner { margin-left: 0.75rem; }

/* Validation + response states */
.wpcf7 .wpcf7-not-valid { border: 2px solid var(--cf7-danger); }

.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--cf7-danger);
}

.wpcf7 .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 2px solid var(--cf7-danger);
  border-radius: var(--r-sm);
  background: #FBEDEC;
  color: var(--cf7-danger);
  font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--cf7-success-ink);
  background: var(--cf7-success-bg);
  color: var(--cf7-success-ink);
}

/* Dark-surface forms (e.g. inside .section--dark) flip field chrome */
.section--dark .wpcf7,
.section--plum .wpcf7 {
  --cf7-field-bg: rgba(255, 255, 255, 0.06);
  --cf7-field-border: var(--rule-dark);
  --cf7-field-ink: var(--text-on-dark);
  --cf7-label-ink: var(--text-on-dark);
}