/*
 * First-party form styling (Build 008 Gate 5) — Contact, Contact Support,
 * Consultation. Shared by template-parts/er-form.php.
 */

.er-form {
    display: flex;
    flex-direction: column;
    gap: var(--er-space-5);
    max-width: 560px;
}

.er-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--er-space-2);
}

.er-form-row label {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--er-text-faint);
}

.er-form-row input,
.er-form-row select,
.er-form-row textarea {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border-strong);
    color: var(--er-text);
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-3) var(--er-space-4);
    font-family: var(--er-font-body);
    font-size: var(--er-text-base);
}

.er-form-row input:focus-visible,
.er-form-row select:focus-visible,
.er-form-row textarea:focus-visible {
    outline: 2px solid var(--er-accent-strong);
    outline-offset: 2px;
    border-color: var(--er-accent-strong);
}

.er-form-row textarea {
    resize: vertical;
}

/* Honeypot: visually hidden from real visitors, not display:none (some bots
   skip display:none fields specifically), still removed from tab order. */
.er-form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.er-form-status {
    border-radius: var(--er-radius-sm);
    border-left: 3px solid;
    padding: var(--er-space-4) var(--er-space-5);
    margin-bottom: var(--er-space-6);
    max-width: 560px;
}

.er-form-status strong {
    display: block;
    margin-bottom: var(--er-space-1);
    color: var(--er-text);
}

.er-form-status p {
    margin: 0;
    font-size: var(--er-text-sm);
}

.er-form-status--success {
    background: var(--er-bg-raised);
    border-left-color: var(--er-accent-strong);
}

.er-form-status--error {
    background: var(--er-bg-raised);
    border-left-color: var(--er-risk);
}