/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form-shell {
    width: min(100%, var(--width-content-sm));
}

.contact-form {
    display: grid;
    gap: var(--space-5);
}

.contact-form > div:not(.contact-form__actions):not(.contact-form__honeypot) {
    display: grid;
    gap: var(--space-2);
}

.contact-form label {
    font-weight: var(--font-weight-semibold);
}

.contact-form__control {
    width: 100%;
    min-height: var(--space-12);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
}

textarea.contact-form__control {
    min-height: var(--space-24);
    resize: vertical;
}

.contact-form__control:focus-visible {
    border-color: var(--color-brand-primary);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.contact-form ul {
    margin: var(--space-1) var(--space-0) var(--space-0);
    padding-left: var(--space-5);
    color: var(--color-state-error);
    font-size: var(--font-size-sm);
}

.contact-form__summary {
    padding: var(--space-4);
    border: 1px solid var(--color-state-error);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.contact-form__summary p {
    margin: var(--space-0);
    font-weight: var(--font-weight-semibold);
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.contact-form__honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}