/**
 * Form Alert Styles
 *
 * Platform-level defaults for form-handler.js messaging (success/error
 * alerts and field validation errors). Automatically linked on pages that
 * contain a CMS form (action="{{form}}") via the template injection system
 * (see server/config/template-injections.js).
 *
 * The stylesheet is injected before the template's own stylesheet so any
 * rule here can be overridden by a template with equal or higher
 * specificity. Values are intentionally neutral (no template CSS
 * variables) so they look reasonable on any template.
 */

/* Form-level success/error messages injected at the top of the form */
.hp-form-alert {
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.hp-form-alert.hp-alert-success {
    background-color: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.hp-form-alert.hp-alert-error {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Field-level validation messages appended after the offending field */
.hp-form-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Flag the offending field itself. Important is required so template
   input styling (often multi-class selectors) does not mask the error. */
.hp-field-error {
    border-color: #dc2626 !important;
}