/*
 * 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; }
/* "Show field labels" off (bridge 4.95.0): gone from sight, still in the page. Screen readers keep
 * announcing the label, which is why this is a clip and not display:none. A sighted visitor cannot
 * click it (it is one pixel) and nothing here claims they can. Deliberately NOT the honeypot's
 * off-screen trick above: that one moves a box away, this one has to keep a real label attached to
 * a real field. Out of flow, so the field's flex gap does not leave an empty row where it was. */
.field__label--sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}
.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); }
/* The invisible Turnstile container. An Invisible widget draws nothing; this keeps its empty box from adding a gap to the form. */
.form__turnstile { margin: 0; padding: 0; line-height: 0; }
.form__turnstile:empty { display: none; }
@media (max-width: 600px) {
    .form__fields { grid-template-columns: 1fr; }
}