/*
 * Form styles.
 *
 * The iron rule: **not one hard-coded value.** Colours, radii and spacing all go through
 * variables, preferring the editor palette (--af-color-*, emitted from the theme settings
 * page via SiteTokens) and falling back to the theme's own variables.
 * Forms are a capability the theme provides, but they appear inside layouts built in the
 * editor — bringing their own look would produce "a sophisticated page with a very
 * WordPress form in it".
 */
.aum-form {
  --f-text:    var(--af-color-text, var(--text-on-bg, #222));
  --f-muted:   var(--af-color-muted, var(--text-muted, #888));
  --f-line:    var(--af-color-line, var(--border, rgba(127,127,127,.28)));
  --f-surface: var(--af-color-surface, var(--card-bg, transparent));
  --f-brand:   var(--af-color-brand, var(--primary, #3366cc));
  --f-ink:     var(--af-color-brand-ink, #fff);
  --f-danger:  var(--af-color-signal, #e5484d);
  --f-radius:  var(--af-radius-input, 2px);
  --f-gap:     16px;

  color: var(--f-text);
  width: 100%;
}

/* Honeypot: it has to be visually absent but readable by bots. display:none makes some
   bots skip it. */
.aum-form-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.aum-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--f-gap);
}
.aum-form-field.is-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .aum-form-grid { grid-template-columns: 1fr; }
}

.aum-form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.aum-form-req { color: var(--f-brand); margin-inline-start: 3px; }

.aum-form-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--f-text);
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  transition: border-color .16s, box-shadow .16s;
  /* Form controls do not inherit the page font by default; without this line a dark site
   sprouts a white box with pale text in it. */
  appearance: none;
}
.aum-form-input::placeholder { color: var(--f-muted); }
.aum-form-input:focus {
  outline: none;
  border-color: var(--f-brand);
  /* The focus ring is a translucent spread of the primary colour, not the browser's default
   blue outline */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-brand) 28%, transparent);
}
textarea.aum-form-input { resize: vertical; min-height: 120px; }
select.aum-form-input { cursor: pointer; }

.aum-form-choices { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.aum-form-choice {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
}
.aum-form-choice input { accent-color: var(--f-brand); width: 16px; height: 16px; }
.aum-form-consent { align-items: flex-start; line-height: 1.5; }
.aum-form-consent a { color: var(--f-brand); text-decoration: underline; }

.aum-form-help  { margin: 6px 0 0; font-size: 12px; color: var(--f-muted); }
.aum-form-error {
  margin: 6px 0 0; font-size: 12px; color: var(--f-danger);
  min-height: 0;             /* Takes no space when there is no error, so the form does not jump */
}
.aum-form-error:empty { display: none; }
.aum-form-field.has-error .aum-form-input { border-color: var(--f-danger); }

.aum-form-foot { margin-top: 22px; }
.aum-form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--f-ink);
  background: var(--f-brand);
  border: 0; border-radius: var(--f-radius);
  cursor: pointer;
  transition: opacity .16s;
}
/*
 * Text inside a button must be given a colour **explicitly**; inheritance is not enough.
 *
 * The theme has a global reset setting `--text-on-bg` on 71 element types, `span` among
 * them. The button's label lives in `<span class="aum-form-submit-label">`, and that span
 * **matches that rule itself** — and a declaration an element matches directly always
 * beats a value inherited from its parent, regardless of specificity.
 *
 * The result: the button ends up with the dark palette's ground and the light palette's
 * text — white on fluorescent green, barely legible. Not a miscalculated contrast
 * (brand-ink was right all along), but inheritance being cut off on the way down.
 *
 * So: any container whose background differs from the page must set the colour again on
 * the text elements inside it.
 */
.aum-form-submit,
.aum-form-submit * { color: var(--f-ink); }

.aum-form-submit:hover { opacity: .86; }
.aum-form-submit[disabled] { opacity: .55; cursor: default; }

.aum-form-spinner { display: none; width: 14px; height: 14px; }
.aum-form.is-sending .aum-form-spinner {
  display: block;
  border: 2px solid color-mix(in srgb, var(--f-ink) 40%, transparent);
  border-top-color: var(--f-ink);
  border-radius: 50%;
  animation: aum-form-spin .7s linear infinite;
}
@keyframes aum-form-spin { to { transform: rotate(360deg); } }
/* No spinner under reduced motion — the button still reads as disabled, so the state is
   conveyed either way */
@media (prefers-reduced-motion: reduce) {
  .aum-form.is-sending .aum-form-spinner { animation: none; }
}

.aum-form-message { margin: 16px 0 0; font-size: 14px; }
.aum-form-message:empty { display: none; }
.aum-form.is-ok   .aum-form-message { color: var(--f-brand); }
.aum-form.is-fail .aum-form-message { color: var(--f-danger); }

.aum-form-missing {
  padding: 12px 14px; font-size: 13px;
  border: 1px dashed var(--f-line, rgba(127,127,127,.4));
  color: var(--f-muted, #888);
}