/**
 * Forms WCAG Enhancements
 * Minimal CSS to improve accessibility on top of Bootstrap 5
 */

/* ============================================
   Touch Targets - Mobile
   ============================================ */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents auto-zoom on iOS */
        padding: 12px 16px;
    }

    .form-check-input {
        min-width: 24px;
        min-height: 24px;
    }

    .btn {
        min-height: 48px;
        padding: 12px 24px;
    }
}

/* ============================================
   WCAG 1.4.11 - Non-text Contrast (borders)
   Bootstrap default #dee2e6 = ~1.35:1 on white — FAIL
   #64748b (slate-500) = 4.65:1 on white — PASS
   ============================================ */
.form-control,
.form-select,
.form-check-input {
    border-color: #64748b;
}

/* ============================================
   Focus Indicators - Enhanced
   ============================================ */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25);
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* ============================================
   Required Field Indicators
   ============================================ */
.text-danger {
    font-weight: bold;
}

/* ============================================
   Form Text (Help Text) - Better Contrast
   ============================================ */
.form-text {
    color: #495057; /* Darker than Bootstrap default for better contrast */
    margin-top: 0.5rem;
}

/* ============================================
   Validation Feedback - Always Visible
   ============================================ */
.invalid-feedback,
.valid-feedback {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Show invalid feedback when field is invalid */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block !important;
}

/* ============================================
   Loading State for Submit Button
   ============================================ */
.btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ============================================
   Character Counter
   ============================================ */
#messageCounter {
    font-weight: 500;
}

#messageCounter.text-warning {
    color: #fd7e14 !important; /* More visible orange */
}

/* ============================================
   ARIA Live Regions - Screen Reader Only
   ============================================ */
.sr-only,
#form-error-announcer,
#modal-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Alert Messages - Better Visibility
   ============================================ */
.alert {
    border-width: 2px;
    border-left-width: 5px;
}

.alert-success {
    border-left-color: #198754;
}

.alert-danger {
    border-left-color: #dc3545;
}

/* ============================================
   Form Group Spacing
   ============================================ */
.mb-3 {
    margin-bottom: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 2rem !important;
}

/* ============================================
   Print Styles - Hide Forms
   ============================================ */
@media print {
    form,
    .btn {
        display: none !important;
    }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .spinner-border {
        animation: none !important;
        border-left-color: transparent;
    }

    .alert {
        transition: none !important;
    }
}