/* src/static/styles/pages/contact.css, owner: Contact agent (C). Page-only components in
   alphabetical order, all inside the page layer (design-spec §C.3). ≤ 15 KB.
   Used by /nl/contact/, /en/contact/ and the two result pages of the form
   without JavaScript. The channels (in the page head through headChannels),
   the split, the form fields, the status box, the steps, the FAQ, the prose
   and the fact panel (readout) are shared components in style.css. */
@layer page {
  /* The form's intro line under its h2 (C .form__intro: 16 px under the h2),
     and the note on the required fields (C .form__required: 8 px under the
     intro, the form 24 px under it) */
  .form-intro {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-4);
  }
  .form-required {
    margin-block: var(--space-2) var(--space-5);
    color: var(--ink-2);
    font: 400 var(--text-small)/var(--leading-ui) var(--font-sans);
  }

  /* The h2s of the side column beside the form ("Wat er daarna gebeurt",
     "Veelgestelde vragen"): C .section__title--small, 26 px at every width;
     the second keeps a section-like 48 px gap under the steps (C [D: P4]). */
  .section__title--small {
    font-size: 1.625rem;
    line-height: 1.2;
  }
  .split__side > * + h2 { margin-block-start: var(--space-7); }

  /* Sending and the reply (motion option A, 02-formulier.md). The status sits
     under the button row; its gap goes with the row, which hides on success. */
  .contact-form > .form-status { margin-block-end: 0; }
  .button-row:has(+ .form-status:not(:empty)) { margin-block-end: var(--space-5); }
  /* Two labels in one grid cell: the button is as wide busy as idle; the
     hidden label is not part of the button's name. */
  .contact-form button[type="submit"] { display: inline-grid; }
  .submit__idle, .submit__busy { grid-area: 1 / 1; }
  .submit__busy, [aria-disabled="true"] > .submit__idle { visibility: hidden; }
  [aria-disabled="true"] > .submit__busy { visibility: visible; }
  /* style.css greys the busy button; without the hover pair it turns ink on hover */
  .contact-form button[aria-disabled="true"] { --button-bg-hover: var(--surface); --button-fg-hover: var(--ink-3); }
  /* After success the fields stay as what you sent, inert and dimmed (ink stays 4.6:1) */
  .input-row[inert] { opacity: 0.6; }
  @media (forced-colors: active) {
    .contact-form button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  }
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    .contact-form button[type="submit"] { transition-timing-function: var(--ease-out); }
    .contact-form [aria-invalid="true"] { transition: border-color var(--duration-fast) var(--ease-out); }
    .contact-form > .form-status { transition: opacity var(--duration-base) var(--ease-out); }
    .contact-form > .form-status:empty { opacity: 0; }
    .contact-form > .input-row { transition: opacity var(--duration-base) var(--ease-in); }
  }
}