/* ==========================================================================
   forms.css — .wf-field/.wf-input/.wf-select/.wf-fieldset/.wf-error/.wf-help
   (PLAN §6.2, §7, §11.5d). Consumed by C for the RSVP form.
   Inputs >=16px (prevents iOS zoom). Errors carry text, never colour-only.
   ========================================================================== */

/* Field wrapper: label + control + help/error. */
.wf-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Labels read as elegant letter-spaced small-caps in warm terracotta — echoes
   the save-the-date / section eyebrows for a soft, romantic feel. */
.wf-field__label,
.wf-fieldset > legend {
  font-family: var(--font-serif);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--c-terracotta-dk);
}

/* Optional leading icon on a label (e.g. dietary 🍴, song ♫). Decorative. */
.wf-field__icon {
  display: inline-flex;
  vertical-align: -0.15em;
  margin-inline-end: 0.4em;
  color: var(--c-terracotta);
}
.wf-field__icon svg { width: 1.05em; height: 1.05em; }

/* Required marker (text, not colour-only). */
.wf-field__req {
  color: var(--c-terracotta-dk);
  font-weight: 600;
  margin-inline-start: 0.15em;
}

/* RSVP deadline notice — a clear, legible callout (NOT the decorative script
   eyebrow). Serif small-caps in strong terracotta so guests can read the date. */
.wf-rsvp__deadline {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--c-terracotta-dk);
  margin-block-end: var(--space-2xs);
}

/* Center the RSVP section header (title + deadline + intro) so it matches every
   other section's centered header. The form fields below stay left-aligned. */
#rsvp > .u-container > h2,
#rsvp > .u-container > .wf-rsvp__deadline,
#rsvp > .u-container > .wf-help {
  text-align: center;
}

/* Two-column field row on wider screens (e.g. name | email); stacks on mobile. */
.wf-form__row {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 40rem) {
  .wf-form__row { grid-template-columns: 1fr 1fr; }
}

/* Text inputs / textarea / select share .wf-input look — soft warm cream fields
   with a gentle hairline and rounded corners (the "cute" look). */
.wf-input,
.wf-select,
textarea.wf-input {
  width: 100%;
  min-height: 48px;                 /* comfortable tap target */
  padding: 0.8rem 1rem;             /* airy */
  font-family: var(--font-body);
  font-size: 1rem;                  /* >=16px — iOS no-zoom */
  color: var(--c-sepia);
  background-color: #FBF8F1;        /* soft cream, a touch lighter than the ground */
  border: 1px solid color-mix(in srgb, var(--c-parchment-line) 75%, transparent);
  border-radius: 0.7rem;            /* softer/rounder than the default */
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
textarea.wf-input { min-height: 6rem; resize: vertical; }

.wf-input::placeholder,
textarea.wf-input::placeholder { color: var(--c-sepia-soft); opacity: 0.65; }

.wf-input:hover,
.wf-select:hover,
textarea.wf-input:hover { border-color: var(--c-clay); background-color: #fff; }

.wf-input:focus-visible,
.wf-select:focus-visible {
  border-color: var(--c-terracotta-dk);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-terracotta) 25%, transparent);
}

/* Invalid state — paired with text + aria-invalid (never colour-only). */
.wf-input[aria-invalid="true"],
.wf-select[aria-invalid="true"] {
  border-color: var(--c-error);
}

/* Fieldset (radio groups, e.g. attending yes/no). */
.wf-fieldset {
  border: 1px solid color-mix(in srgb, var(--c-parchment-line) 75%, transparent);
  border-radius: 0.7rem;
  background-color: #FBF8F1;
  padding: var(--space-md);
}
.wf-fieldset > legend {
  padding-inline: var(--space-xs);
}

/* Guest rows: name + dietary side by side on wider screens. */
.wf-guest-row {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 40rem) {
  .wf-guest-row { grid-template-columns: 1fr 1fr; }
}

/* Radio/checkbox row — generous tap target. */
.wf-choice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  cursor: pointer;
}
.wf-choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--c-terracotta); }

/* Help text. */
.wf-help {
  font-size: var(--step--1);
  color: var(--c-sepia-soft);
}

/* Inline field error (text + colour). */
.wf-error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--c-error);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
/* Leading "warning" glyph so errors aren't colour-only (BRIEF §8). */
.wf-error::before { content: "\26A0"; font-size: 1em; line-height: 1; }
.wf-error:empty { display: none; }

/* Submit-time error summary (role="alert" / aria-live region, C provides). */
.wf-form__summary {
  border: 1px solid var(--c-error);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-error) 8%, var(--c-parchment));
  color: var(--c-error);
  padding: var(--space-sm) var(--space-md);
}
.wf-form__summary:empty { display: none; }

/* Honeypot — visually hidden but NOT display:none (so bots fill it). */
.wf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}