/**
 * @file plugins/generic/amhContact/styles/form.css
 *
 * What the contact form shows while somebody fills it in.
 *
 * Only the parts this plugin adds - the required markers, the complaints and
 * the remaining-characters note. The form's own layout, fields and buttons are
 * the theme's, and are left alone so that restyling the theme restyles this
 * with it.
 *
 * Loaded on the public pages by the plugin rather than compiled into the theme,
 * because these belong to the validation, and turning the plugin off should
 * take them with it.
 */

/*
 * The required marker.
 *
 * Red and an asterisk, because that is the convention every form on the web has
 * taught people to read. It is `aria-hidden`, with the word "Required" beside it
 * for anybody listening rather than looking - a screen reader announcing
 * "asterisk" says nothing useful.
 */
.amh-field__required {
  margin-left: 0.15em;
  color: #c02b2b;
  font-weight: 700;
}

/*
 * The note under a field.
 *
 * Three states in one element: a quiet "Required" while the field is waiting,
 * the specific complaint in red once something is actually wrong, and nothing
 * at all once it is right. There is no separate line at the top of the form
 * explaining the asterisk - the fields say what they want themselves, where
 * somebody filling one in is already looking.
 *
 * A fixed minimum height, so the fields below do not jump down the page as a
 * note appears and goes.
 */
.amh-field__note {
  min-height: 1.25rem;
  margin: 0.375rem 0 0;
  color: #5a6478;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.amh-field__note--error {
  color: #c02b2b;
}

.amh-field__note[hidden] {
  display: block;
  visibility: hidden;
}

/*
 * Room for the counter to sit at the far end of the note's line, rather than
 * costing a second line under a field that is already the tallest on the form.
 */
.amh-field {
  position: relative;
}

/*
 * A field with something wrong with it.
 *
 * The border changes as well as the message appearing, so the field is findable
 * by glancing down the form rather than by reading every line under it. Colour
 * alone is not the signal - the message is.
 */
.amh-field--invalid .amh-field__input {
  border-color: #c02b2b;
}

.amh-field--invalid .amh-field__input:focus {
  border-color: #c02b2b;
  box-shadow: 0 0 0 3px rgba(192, 43, 43, 0.15);
}

/*
 * How much room is left in the message.
 *
 * Sits on the same line as the field's note, opposite it: the note says what is
 * wrong on the left, the count says how much room is left on the right, and
 * neither costs a line of its own.
 */
.amh-field__counter {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding-left: 1rem;
  background: inherit;
  color: #5a6478;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: right;
}

.amh-field__counter[hidden] {
  display: none;
}

/* Past the limit, which the field itself prevents but a paste can reach. */
.amh-field__counter--spent {
  color: #c02b2b;
  font-weight: 700;
}