// =============================================================================
// FIELD-ERROR — generic client-side validation feedback (see
// Resources/Public/JavaScript/form-validation.js). Deliberately global/
// unscoped so it applies to any form's fields regardless of which component
// they belong to (newsletter-form's own custom inputs, the real TYPO3 Form
// Framework's .form-control, or anything added later) — reuses the same
// --bs-form-invalid-color token _form-formframework.scss already uses for
// its own (server-rendered) .is-invalid/.invalid-feedback, so both the JS-
// driven and server-driven error states look identical everywhere.
// =============================================================================

// Imported last in main.scss so this wins ties (equal specificity) against
// each component's own border-color rule by cascade order, with no
// !important needed.
.is-invalid {
  border-color: var(--bs-form-invalid-color);
}

.field-error {
  display: block;
  margin-top: var(--space-1-5); // 6px
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--bs-form-invalid-color);
}