/* Shared SFMC form styles for every site. Source file: compiled by npm run build to css/global/sfmc-forms.css.
   Load through each site root's cssFileImports. Override the --sfmc-form-* tokens in the site stylesheet, not here. */
.sfmc-form {
  --sfmc-form-error: #b3261e;      /* 6.5:1 on white. Re-check contrast against the site background. */
  --sfmc-form-success: #1b6e3a;
  --sfmc-form-border: #6b6b6b;     /* 3:1+ for input boundaries (WCAG 1.4.11) */
  --sfmc-form-focus: #005fcc;
  max-width: 36rem;
}

.sfmc-form__field { margin-bottom: 1rem; }
.sfmc-form__label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.sfmc-form__hint { margin: 0.25rem 0 0; font-size: 0.875rem; }

.sfmc-form__input {
  display: block;
  width: 100%;
  min-height: 44px;              /* touch target */
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sfmc-form-border);
  border-radius: 4px;
  font: inherit;
}

.sfmc-form__input:focus-visible,
.sfmc-form__checkbox:focus-visible,
.sfmc-form__submit:focus-visible {
  outline: 3px solid var(--sfmc-form-focus);
  outline-offset: 2px;
}

.sfmc-form__input[aria-invalid="true"] {
  border-color: var(--sfmc-form-error);
  border-width: 2px;
}

.sfmc-form__error { margin: 0.25rem 0 0; color: var(--sfmc-form-error); font-size: 0.875rem; }

.sfmc-form__field--checkbox { display: flex; gap: 0.5rem; align-items: flex-start; }
.sfmc-form__field--checkbox .sfmc-form__label { font-weight: 400; margin: 0; }
.sfmc-form__checkbox { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex-shrink: 0; }

.sfmc-form__submit { min-height: 44px; padding: 0.5rem 1.5rem; font: inherit; cursor: pointer; }
.sfmc-form__submit[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* Honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.sfmc-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sfmc-form__status { margin: 0.75rem 0 0; min-height: 1.5em; }
.sfmc-form__status[data-state="error"] { color: var(--sfmc-form-error); }
.sfmc-form__status[data-state="success"] { color: var(--sfmc-form-success); }

.sfmc-form select.sfmc-form__input { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }
.sfmc-form__field--checkbox .sfmc-form__error { flex-basis: 100%; }
.sfmc-form__field--checkbox { flex-wrap: wrap; }

/* Layout: one column; fields marked "Half width" pair up from 576px. */
.sfmc-form__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 1rem; column-gap: 1rem; }
.sfmc-form__form > * { grid-column: 1 / -1; }
@media (min-width: 576px) {
  .sfmc-form__form > .sfmc-form__field--half { grid-column: auto / span 1; }
}
textarea.sfmc-form__input { min-height: 6rem; resize: vertical; }