/**
 * Form errors that can actually be read.
 *
 * THE BUG
 *
 * inline_form_errors is enabled site-wide. On a validation failure it takes the
 * real message off the top of the page and replaces it with a summary -
 * "1 error has been found: Start date" - and moves the text that says what is
 * wrong onto the field itself.
 *
 * templates/form/form-element.html.twig does render that text, into
 * <div class="invalid-feedback">. But Bootstrap ships
 *
 *   .invalid-feedback { display: none }
 *
 * and only reveals it for an element that follows a control carrying
 * .is-invalid. Drupal never adds .is-invalid - it marks the wrapper .has-error
 * and the control .error - so the condition is never met. The explanation of
 * every form error is therefore present in the page and invisible, and a member
 * is told which field is wrong but never what about it is wrong.
 *
 * THE FIX
 *
 * Reveal it under the class Drupal does set. .has-error .invalid-feedback is
 * two classes against Bootstrap's one, so this wins on specificity without
 * !important, and it is scoped so the .invalid-feedback that
 * js/credit-card-form.js drives through .is-invalid keeps its own behaviour.
 *
 * Loaded after style.min.css in yardsale.libraries.yml. It is a separate file
 * rather than an scss edit so it needs no gulp run and can be removed by
 * deleting one line from the library.
 */

.has-error .invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  color: #b02a37;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Mark the control as well. Drupal puts `error` on it; without a rule for that
 * class the field the summary links to looks no different from its neighbours
 * once you have scrolled to it. */
.has-error input.error,
.has-error select.error,
.has-error textarea.error,
.has-error input.form-control.error,
.has-error select.form-control.error,
.has-error textarea.form-control.error {
  border-color: #dc3545;
}

.has-error input.error:focus,
.has-error select.error:focus,
.has-error textarea.error:focus {
  border-color: #b02a37;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}