/* ==========================================================================
   Enquiry form. All colours come from tokens.css — no colour is hard-coded.

   Status is never signalled by colour alone: every error carries an icon and
   a written message, and the invalid state also thickens the control boundary.
   ========================================================================== */

/* --- enquiry type cards: state driven by the native radio --- */
.sj-type-card {
  display: block;
  cursor: pointer;
  padding: .875rem;
  border-radius: var(--sj-radius);
  border: var(--sj-border-width) solid var(--sj-control-border);
  background: var(--sj-white);
  color: var(--sj-ink);
  transition: background-color .2s, color .2s;
}
.sj-type-card:hover { background: var(--sj-seafoam); }
.sj-type-card:has(input:checked) {
  background: var(--sj-teal);
  color: var(--sj-white);
}
/* Selection is also conveyed by the native radio's checked state, which
   assistive technology reports independently of colour. */
.sj-type-card:has(input:checked)::after {
  content: " \2713";
  font-weight: 700;
}

/* --- consent checkbox: a comfortable target --- */
.sj-form input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--sj-teal);
  cursor: pointer;
  border-radius: 4px;
}
.sj-form input[type="checkbox"] + label { cursor: pointer; }

/* --- required marker --- */
.sj-req { color: var(--sj-ink); font-weight: 700; }

/* --- field level errors: icon + text, plus a heavier boundary --- */
.sj-field-error {
  display: block;
  margin-top: .3rem;
  font-size: var(--sj-body);
  font-weight: 600;
  color: var(--sj-ink);
}
.sj-field-error::before {
  content: "\26A0";
  margin-right: .35rem;
  font-weight: 700;
}
.sj-invalid {
  border-width: 3px !important;
  border-color: var(--sj-teal) !important;
  background-color: var(--sj-seafoam);
}

/* --- error summary --- */
.sj-error-summary {
  border: var(--sj-border-width) solid var(--sj-teal);
  background: var(--sj-sand);
  color: var(--sj-ink);
  border-radius: var(--sj-radius);
  padding: 1rem 1.15rem;
}
.sj-error-summary h2 { font-size: var(--sj-body); font-weight: 700; margin: 0 0 .4rem; }
.sj-error-summary h2::before { content: "\26A0"; margin-right: .4rem; }
.sj-error-summary ul { margin: 0; padding-left: 1.1rem; font-size: var(--sj-body); }
/* the confirmation is essential information: body size, like the errors */
.sj-success p { font-size: var(--sj-body); }
.sj-error-summary a { color: var(--sj-ink); text-decoration: underline; }

/* --- success --- */
.sj-success {
  border: var(--sj-border-width) solid var(--sj-teal);
  background: var(--sj-seafoam);
  color: var(--sj-ink);
  border-radius: var(--sj-radius);
  padding: 2.25rem;
  text-align: center;
}
.sj-success-mark {
  width: 3rem; height: 3rem; margin: 0 auto 1rem;
  border-radius: var(--sj-radius-pill);
  background: var(--sj-teal); color: var(--sj-white);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* --- honeypot: off-screen and out of the tab order; people never see it --- */
.sj-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- submitting state --- */
.sj-form[data-submitting="true"] button[type="submit"] {
  background: var(--sj-seafoam);
  color: var(--sj-ink);
  border-color: var(--sj-ink);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sj-type-card { transition: none; }
}