/* LCA 2026 form connection — presentation only.
 *
 * Field geometry comes from the retained `.field` baseline in `components.css`, which the
 * design system records as "Retained .field: .45rem gap, 48px minimum control height, 2px
 * radius" (`components/form.md`). This file adds only what a real, connected form needs:
 * a two-column composition, the checkbox and select variants, the per-field error, the
 * linked error summary and the truthful status region.
 *
 * It owns no field names, limits, enum values or user messages. Those belong to
 * `site/src/data/forms.json` and the CRM integration contract.
 *
 * The footer newsletter is deliberately NOT styled here: its accepted design already lives
 * in `components.css` (`.newsletter-control`, `.newsletter-submit`, `.footer-newsletter-state`).
 * This file only supplies the states a submission can reach.
 *
 * The error accent #a52524 is the retained baseline's existing demo accent; the design
 * system records that it "does not approve a site-wide semantic status palette". It is used
 * here only for invalid fields, per-field messages and the error summary.
 */
:root {
  --form-error: #a52524;
}

.lca-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.lca-form .field-wide { grid-column: 1 / -1; }

/* The required marker is explained in text before every form, so the asterisk itself is
   decoration for assistive technology. */
.form-required-note { color: var(--color-muted); font-size: .8rem; }
.form-required-note .marker { color: var(--form-error); font-weight: 700; }

/* Honeypot: present in the document for the CRM's passive bot protection, invisible and
   unreachable for a real visitor. Never focusable, so an aria-hidden wrapper is safe. */
.form-honey { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Checkbox and select variants of the retained field baseline. The checkbox overrides the
   baseline's 48px control geometry, which is sized for text inputs. */
.lca-form .field-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.lca-form .field-check input[type='checkbox'] { width: 22px; height: 22px; min-height: 22px; margin: .1rem 0 0; padding: 0; border: 1px solid var(--color-ink); border-radius: 2px; background: var(--color-paper); accent-color: var(--color-teal); }
.lca-form .field-check label { font-size: .875rem; font-weight: 500; line-height: 1.6; }
.lca-form .field-check .field-error { grid-column: 1 / -1; }
.lca-form select { cursor: pointer; }
.lca-form .field-hint { color: var(--color-muted); font-size: .78rem; line-height: 1.5; }

/* Invalid state. A rejected field keeps its value and is marked by more than colour: the
   border widens and the message below names the problem. */
.lca-form .is-invalid :is(input, textarea, select) { border-color: var(--form-error); border-width: 2px; }
.field-error { color: var(--form-error); font-size: .8rem; line-height: 1.5; }
.field-error:empty { display: none; }

/* Error summary: receives focus after a rejected submission and links to each field. */
.form-errors { padding: var(--space-6); border-left: 4px solid var(--form-error); background: var(--color-mist); }
.form-errors__title { font-weight: 600; }
.form-errors ul { margin-top: var(--space-2); padding-left: 1.15rem; list-style: disc; }
.form-errors li + li { margin-top: var(--space-1); }
.form-errors a { color: inherit; }

/* Status region: the sending, success and failure acknowledgements. Success is never
   carried by colour alone — it is a sentence, with a heading. */
.form-status:empty { display: none; }
.form-status { padding: var(--space-6); border-left: 4px solid var(--color-line); background: var(--color-mist); font-size: .9rem; line-height: 1.65; }
.form-status__title { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: var(--space-1); }
.form-status.is-success { border-left-color: var(--color-teal); }
.form-status.is-failure { border-left-color: var(--form-error); }
.form-status:focus-visible,
.form-errors:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }

.lca-form .actions { margin: 0; }

/* The pending state a form shows while its endpoint or opening status is unconfirmed.
   It is deliberately not a disabled-looking form: nothing here can send. */
.contact-section .form-pending { margin-top: var(--space-6); }

@media (max-width: 55rem) {
  .lca-form { grid-template-columns: 1fr; gap: var(--space-4); }
  .lca-form .field-wide { grid-column: auto; }
}