/* =========================================================
   ALPHA STRIKE — FORMS COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-form-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-6);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-form-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-form-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-form-demo__title {
    margin: 0 0 var(--alpha-spacing-3);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-form-demo__description {
    max-width: 720px;
    margin: 0;

    color: var(--alpha-text-secondary);
}

.alpha-form-demo__section {
    margin-top: var(--alpha-spacing-8);
}

.alpha-form-demo__section h2 {
    margin: 0 0 var(--alpha-spacing-4);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h3);
    line-height: var(--alpha-line-height-heading);
}


/* =========================================================
   2. FORM FOUNDATION
   ========================================================= */

.alpha-form {
    width: 100%;
    max-width: 520px;
}

.alpha-form__field {
    display: flex;
    flex-direction: column;

    gap: var(--alpha-spacing-2);
}


/* =========================================================
   3. LABEL
   ========================================================= */

.alpha-form__label {
    color: var(--alpha-text-primary);

    font-size: var(--alpha-font-size-label);
    font-weight: var(--alpha-font-weight-bold);
}


/* =========================================================
   4. SHARED CONTROL FOUNDATION
   ========================================================= */

.alpha-form__input,
.alpha-form__select,
.alpha-form__textarea {
    width: 100%;
    box-sizing: border-box;

    padding:
        var(--alpha-spacing-3)
        var(--alpha-spacing-4);

    border:
        var(--alpha-border-thin)
        solid
        var(--alpha-border-default);

    border-radius: var(--alpha-radius-sm);

    background: var(--alpha-surface-primary);

    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);

    line-height: var(--alpha-line-height-body);

    transition:
        border-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard),
        background-color var(--alpha-motion-duration-fast)
            var(--alpha-motion-ease-standard);
}


/* =========================================================
   5. INPUT
   ========================================================= */

.alpha-form__input {
    min-height: 44px;
}

.alpha-form__input::placeholder,
.alpha-form__textarea::placeholder {
    color: var(--alpha-text-muted);
    opacity: 1;
}


/* =========================================================
   6. SELECT
   ========================================================= */

.alpha-form__select {
    min-height: 44px;

    cursor: pointer;
}


/* =========================================================
   7. TEXTAREA
   ========================================================= */

.alpha-form__textarea {
    min-height: 120px;

    resize: vertical;
}


/* =========================================================
   8. HOVER
   ========================================================= */

.alpha-form__input:hover:not(:disabled),
.alpha-form__select:hover:not(:disabled),
.alpha-form__textarea:hover:not(:disabled) {
    border-color: var(--alpha-border-strong);
}


/* =========================================================
   9. FOCUS
   ========================================================= */

.alpha-form__input:focus-visible,
.alpha-form__select:focus-visible,
.alpha-form__textarea:focus-visible {
    outline:
        var(--alpha-border-medium)
        solid
        var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);

    border-color: var(--alpha-interactive-focus);
}


/* =========================================================
   10. HELPER TEXT
   ========================================================= */

.alpha-form__helper {
    margin: 0;

    color: var(--alpha-text-muted);

    font-size: var(--alpha-font-size-caption);
    line-height: var(--alpha-line-height-compact);
}


/* =========================================================
   11. ERROR STATE
   ========================================================= */

.alpha-form__input--error {
    border-color: var(--alpha-border-accent);
}

.alpha-form__input--error:focus-visible {
    outline-color: var(--alpha-border-accent);
    border-color: var(--alpha-border-accent);
}

.alpha-form__error {
    margin: 0;

    color: var(--alpha-text-accent);

    font-size: var(--alpha-font-size-caption);
    line-height: var(--alpha-line-height-compact);
}

/* =========================================================
   11b. SUBMISSION NOTE
   Added for core/js/05_forms.js - a status line under the
   submit button confirming what happens on submit (this form
   opens the visitor's email client via mailto:, there is no
   backend endpoint wired up).
   ========================================================= */

.alpha-form__note {
    margin-top: var(--alpha-spacing-3);

    color: var(--alpha-text-muted);

    font-size: var(--alpha-font-size-caption);
    line-height: var(--alpha-line-height-compact);
}

.alpha-form__note--success {
    color: var(--alpha-text-accent);
}


/* =========================================================
   12. DISABLED STATE
   ========================================================= */

.alpha-form__input:disabled,
.alpha-form__select:disabled,
.alpha-form__textarea:disabled {
    background: var(--alpha-interactive-disabled);
    border-color: var(--alpha-interactive-disabled);

    color: var(--alpha-text-primary);

    cursor: not-allowed;
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-form__input,
    .alpha-form__select,
    .alpha-form__textarea {
        transition: none;
    }
}


/* =========================================================
   14. RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

    .alpha-form-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-form {
        max-width: none;
    }
}