/*!
 * Form controls of the website, design language 2.1, rule 6: the field with
 * label, hint and error (partial _WebsiteField.cshtml) and the check box with
 * its label (partial _WebsiteCheckbox.cshtml). Ground sheet, border 1px in ink 2,
 * an error as a border of 2px in ink and a sentence under the control, never a
 * colour alone.
 */

.website-field + .website-field {
  margin-top: 28px;
}

.website-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--website-font-size-text);
  line-height: 1.3;
}

.website .website-field__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--website-color-ink-2);
  border-radius: var(--website-radius);
  background: var(--website-color-sheet);
  color: var(--website-color-ink);
  font-family: inherit;
  /* 17px on the phone as well: below 16px iOS zooms into a tapped field. */
  font-size: var(--website-font-size-text);
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.website textarea.website-field__input {
  min-height: 168px;
  resize: vertical;
}

.website .website-field__input:hover,
.website .website-field__input:focus-visible {
  border-color: var(--website-color-ink);
}

.website .website-field__input:focus-visible {
  outline-offset: 3px;
}

.website-field__hint {
  margin: 8px 0 0;
  color: var(--website-color-ink-2);
  font-size: var(--website-font-size-small);
  line-height: 1.5;
}

/* Invalid: 2px in ink. The padding shrinks by the extra pixel, so the text in
   the field does not move. */
.website .website-field--invalid .website-field__input {
  padding: 11px;
  border: 2px solid var(--website-color-ink);
}

@media (max-width: 759px) {
  .website-field + .website-field {
    margin-top: 24px;
  }
}

/* Check box: box and label side by side, the label may wrap, the error stands
   under the label. */
.website-checkbox {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 14px;
}

/* Box and tick share one cell. The tick is an inline SVG in the markup, drawn
   in currentColor, so it follows the mode without a second image. */
.website-checkbox__control {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.website .website-checkbox__box {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--website-color-ink-2);
  border-radius: var(--website-radius);
  background: var(--website-color-sheet);

  /* A form control does not inherit the text colour; without this the focus
     ring in currentColor would be the pure black or white of the browser
     instead of the ink of the page. */
  color: var(--website-color-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.website .website-checkbox__box:hover {
  border-color: var(--website-color-ink);
}

/* Checked: filled in ink with a tick in the button ink. */
.website .website-checkbox__box:checked {
  border-color: var(--website-color-ink);
  background: var(--website-color-ink);
}

.website-checkbox__tick {
  position: absolute;
  inset: 1px;
  display: none;
  width: 20px;
  height: 20px;
  color: var(--website-color-button-ink);
  pointer-events: none;
}

.website-checkbox__box:checked + .website-checkbox__tick {
  display: block;
}

.website-checkbox__label {
  font-size: 15.5px;
  line-height: 1.5;
  cursor: pointer;
}

.website-checkbox .website-error {
  grid-column: 2;
  margin-top: 4px;
}

.website .website-checkbox--invalid .website-checkbox__box {
  border: 2px solid var(--website-color-ink);
}