/*
 * Layerly Forms — the form component's own rules.
 *
 * Moved verbatim out of layerly-base-theme/style.css (LAYERLY-FORMS-PLAN.md §11, Phase 1) so the
 * plugin that RENDERS the form also ships the CSS the form needs. Byte-for-byte the same
 * declarations the theme carried, deliberately: this phase changes where the rules live, never
 * what they say.
 *
 * SCOPE, on purpose. Only the `.form*` rules moved. The `.field*` primitives stayed in the theme
 * because they style fields anywhere on a Layerly site, not just inside a form. Phase 2 — the
 * Elementor widget, where there is no Layerly theme underneath — owns bringing those along.
 *
 * The custom properties on `.form` are the component's knobs; a child theme overrides them by
 * re-declaring `.form`. This stylesheet is enqueued at wp_enqueue_scripts priority 5, BEFORE the
 * theme and before any child, so a child's override still wins on equal specificity.
 */
.form {
    --form-gap: var(--space-md);
    --form-cols: 2;
    --field-bg: var(--color-surface);
    --field-fg: var(--color-text);
    --field-border: var(--color-border);
    --field-radius: var(--radius-md);
    --field-pad: var(--space-md);
    --field-focus: var(--color-primary);
    --label-color: var(--color-text);
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__fields { display: grid; grid-template-columns: repeat(var(--form-cols), 1fr); gap: var(--form-gap); }
.form__submit { margin-top: var(--form-gap); }
.form__status { margin-top: var(--space-sm); font-size: var(--text-sm); min-height: 1.2em; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-success); }
@media (max-width: 600px) {
    .form__fields { grid-template-columns: 1fr; }
}