/*
 * forms.css — Global Form Elements
 * Digital Apache v3
 *
 * PURPOSE: Inputs, textareas, selects, and labels.
 * Used for Contact and Career AJAX forms.
 *
 * DEPENDENCIES: tokens.css → ... → forms.css
 * LOAD ORDER: Seventh.
 */

/* ============================================
   FORM GROUPS
============================================ */

.form__group {
    margin-bottom: var(--space-4);
}

.form__group--last {
    margin-bottom: 0;
}

/* ============================================
   LABELS & HINTS
============================================ */

.form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-dark);
    margin-bottom: var(--space-2);
}

.form__hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ============================================
   INPUTS, TEXTAREAS, SELECTS
============================================ */

.form__input,
.form__textarea,
.form__select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-body);
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    transition: var(--transition-base);
    outline: none;
}

/* Textarea specific */
.form__textarea {
    min-height: var(--space-24);
    resize: vertical;
}

/* Select specific */
.form__select {
    cursor: pointer;
    appearance: none;
    /* Custom arrow will be handled via background SVG if needed in future */
}

/* ============================================
   INTERACTIVE STATES
============================================ */

.form__input:hover,
.form__textarea:hover,
.form__select:hover {
    border-color: var(--color-border-dark);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    background-color: var(--color-white);
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   DISABLED / READONLY
============================================ */

.form__input:disabled,
.form__textarea:disabled,
.form__select:disabled {
    background-color: var(--color-bg-footer);
    color: var(--color-text-muted);
    cursor: not-allowed;
    border-color: var(--color-border);
}

/* ============================================
   FORM MESSAGES (AJAX Responses)
============================================ */

.form__message {
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-4);
    display: none;
    /* Hidden by default, toggled via JS */
}

.form__message.is-active {
    display: block;
}

.form__message--success {
    background-color: var(--color-bg-card-teal);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
}

.form__message--error {
    background-color: var(--color-bg-card-pink);
    color: var(--color-text-dark);
    border: 1px solid var(--color-primary);
    /* Brand orange as warning/error */
}

/* End of forms.css */