/*
  The starter's Umbraco Forms theme "site" (Views/Partials/Forms/Themes/site/). Deliberately plain, like starter.css:
  a project restyles it with its design system's tokens. Uses only the starter's tokens (starter.css :root); mobile
  first. Errors have no colour of their own: they are bold text with a drawn "!" and the field gets a heavy border, so
  the state never depends on colour. Inputs and the button are at least 44 px tall.
*/
.site-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40rem; }

.site-form__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.site-form__fieldset-caption { padding: 0; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; }
.site-form__fields { display: flex; flex-direction: column; gap: 1.25rem; }

.site-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.site-form__group { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.site-form__label { font-weight: 700; padding: 0; }
.site-form__required { font-weight: 400; }
.site-form__help { margin: 0; color: var(--starter-muted); font-size: 0.9375rem; }

.site-form__control input[type="text"],
.site-form__control input[type="email"],
.site-form__control input[type="tel"],
.site-form__control input[type="number"],
.site-form__control input[type="url"],
.site-form__control input[type="date"],
.site-form__control select,
.site-form__control textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--starter-text);
  background: var(--starter-background);
  border: 1px solid var(--starter-muted);
  border-radius: 0.25rem;
}
.site-form__control textarea { min-height: 8rem; resize: vertical; }

/* Choices: each option at least 44 px tall. */
.site-form__control .radiobuttonlist,
.site-form__control .checkboxlist { display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__control .radiobuttonlist label,
.site-form__control .checkboxlist label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.site-form__control input[type="radio"],
.site-form__control input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--starter-text); }

/* Errors: next to the field, bold with a drawn "!" (never colour alone). */
.site-form__error:empty { display: none; }
.site-form__error,
.site-form .field-validation-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--starter-text);
}
.site-form__error:not(:empty)::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--starter-text);
  color: var(--starter-background);
  font-size: 0.8125rem;
  line-height: 1;
}
.site-form .input-validation-error { border-width: 3px; border-color: var(--starter-text); }

/* Text-only notes (e.g. the privacy note) and the privacy line. */
.site-form__note p { margin: 0; }
.site-form__note-title { font-weight: 700; }
.site-form__privacy { margin: 0; }

.site-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.site-form__submit {
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--starter-background);
  background: var(--starter-text);
  border: 2px solid var(--starter-text);
  border-radius: 0.25rem;
  cursor: pointer;
}
.site-form__submit:focus-visible { outline: 3px solid var(--starter-focus); outline-offset: 3px; }
.site-form__submit[aria-disabled="true"] { cursor: progress; }
.site-form__status { margin: 0; }

/* FORMS-13: "6 of 6 chosen" under a Checkboxes field with At most, and the boxes left over once the limit is reached. */
.site-form__count { margin: 0; color: var(--starter-muted); font-size: 0.9375rem; }
.site-form__option--off { opacity: 0.55; cursor: not-allowed; }

/* FORMS-13: the file field with script: an outline button like the inputs, then the chosen files with Remove buttons.
   Without script the browser's own input shows (the rule above never hides it). */
.site-form__file-button,
.site-form__file-remove {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--starter-text);
  background: var(--starter-background);
  border: 1px solid var(--starter-muted);
  border-radius: 0.25rem;
  cursor: pointer;
  align-self: flex-start;
}
.site-form__file-button { font-weight: 700; border-width: 2px; border-color: var(--starter-text); }
.site-form__file-button:focus-visible,
.site-form__file-remove:focus-visible { outline: 3px solid var(--starter-focus); outline-offset: 3px; }
.site-form__control input[type="file"][aria-invalid="true"] + .site-form__file-button { border-width: 3px; }
.site-form__files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__files[hidden] { display: none; }
.site-form__file { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.site-form__file-name { overflow-wrap: anywhere; }
.site-form__control:has(.site-form__file-button) { display: flex; flex-direction: column; }
.site-form__status:empty { display: none; }

.site-form .umbraco-forms-hidden,
.umbraco-forms-hidden { display: none; }
.site-form .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The message shown after sending (Forms' "message on submit"). */
.umbraco-forms-submitmessage { display: block; padding: 1rem; border: 2px solid var(--starter-text); border-radius: 0.25rem; }

/* Forms built in Content (FORMS-1, Views/Partials/SiteForms/Form.cshtml): the error summary, the thank-you, the trap field. */
.site-form__summary { padding: 1rem; border: 3px solid var(--starter-text); border-radius: 0.25rem; }
.site-form__summary:focus-visible { outline: 3px solid var(--starter-focus); outline-offset: 3px; }
.site-form__summary-title { margin: 0 0 0.5rem; font-size: 1.125rem; }
.site-form__summary ul { margin: 0; padding-left: 1.25rem; }
.site-form__summary a { color: inherit; font-weight: 700; }
.site-form__options { display: flex; flex-direction: column; gap: 0.25rem; }
.site-form__option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.site-form__option input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--starter-text); }
.site-form__thanks { padding: 1rem; border: 2px solid var(--starter-text); border-radius: 0.25rem; }
.site-form__thanks:focus-visible { outline: 3px solid var(--starter-focus); outline-offset: 3px; }
.site-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }