/* forms — field group, contact form, newsletter
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Form field. Labels always visible; help text before the control; errors state
   the fix. The field-group vocabulary is ours — see notes.md. */
.field-group { display: flex; flex-direction: column; gap: .4rem; }
.field-label { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); }
.field-label .field-required { color: var(--surface-brand); }
.field-help { font-size: var(--fs-min); color: var(--muted); }
.field-message { font-size: var(--fs-min); font-weight: 700; color: var(--surface-brand); }

.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form input[type="tel"], .contact-form input[type="url"],
.contact-form input[type="search"], .contact-form select, .contact-form textarea,
.field-group input, .field-group select, .field-group textarea {
  width: 100%;
  font-size: var(--fs-min);
  padding: .875rem 1rem;
  /* an empty field has no label inside it, so the border is the only thing
     marking where to click: interactive weight, not hairline (WCAG 1.4.11) */
  border: 2px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.field-group textarea { resize: vertical; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus,
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--link); }
.field-group.is-error input, .field-group.is-error select, .field-group.is-error textarea { border-color: var(--surface-brand); }

/* .contact-form is a plain container. It used to be a 2-column grid intended for
   a theme-native form (.field-group children + .contact-form__actions) that was
   never built — the block always renders a Formidable form, whose fields are
   nested too deep for this grid to reach. On the form-only layout .contact-form
   also wraps the title, so the grid split title|form side by side (the "messy"
   look). Formidable owns the field layout; this stays a block. */
.contact-form { display: block; }

.newsletter-signup { background: var(--surface-dark); border-radius: var(--radius-md); padding: 1.8rem 1.9rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.newsletter-form { flex: 1 1 340px; display: flex; gap: .625rem; flex-wrap: wrap; }
.newsletter-form input[type="email"], .newsletter-form input[type="text"] {
  flex: 1 1 240px; min-width: 0; width: 100%;
  font-size: var(--fs-min); padding: .875rem 1rem;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink);
}
.newsletter-form button[type="submit"], .newsletter-form input[type="submit"] {
  font-weight: 700; padding: .875rem 1.625rem; border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-accent-bg); color: var(--btn-accent-text);
  transition: background var(--transition);
}