/**
 * FORM FIELDS — shared styling for form inputs, labels, and submit
 * status messages. Used on TWO pages: index.html's "Contact" section,
 * and partner.html's lead-submission form (both use the same
 * .contact-form/.cf-row/.cf-field/.cf-actions/.cf-status class names).
 * Not used by admin.html, which has its own separate input/status
 * styles in its own <style> block.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change how text inputs/textareas look (border, background,
 *     rounded corners, the color they turn on focus) — .cf-field;
 *   - change the layout of a 2-column field row (e.g. "Contact person" /
 *     "Contact info" side-by-side) — .cf-row, and its mobile version at
 *     the bottom of this file;
 *   - change the success/error message colors under a form — .cf-status.
 *
 * This file must load after base.css (it uses base.css's --accent/
 * --text/--card color variables). If you only change the layout here,
 * it affects BOTH the marketing contact form and the partner form — if
 * you only want to change one of them, you may need page-specific CSS
 * instead (see each page's own <style> block, or add a new file).
 */

/* ── CONTACT FORM ────────────────────────────────── */
.contact-form { text-align: left; }
/* Puts two fields side by side (e.g. name + email) on one row. See the
   @media block at the bottom — on narrow screens this collapses to a
   single column instead. */
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.cf-field label { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.cf-field input, .cf-field textarea {
  font-family: var(--body); font-size: .92rem; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; resize: vertical;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--text-3); opacity: .7; }
/* The border/background change you see when you click into a field. */
.cf-field input:focus, .cf-field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--card-hov);
}
.cf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.cf-actions .btn { border: none; cursor: pointer; }
.cf-actions .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
/* The "Thanks for reaching out!" / error text that appears under the
   submit button after a form is sent — the actual text and which state
   (success/error) is set by JavaScript (contact-form.js / partner.js),
   this just controls the color for each state. */
.cf-status { font-size: .86rem; margin: 0; }
.cf-status[data-state="success"] { color: var(--accent-lt); }
.cf-status[data-state="error"]   { color: #ff8a7a; }

/* Mobile: stack the 2-column field row into one column, since two
   fields side by side get too cramped on a phone-width screen. */
@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; gap: 0; }
}