/* =========================================================
   Register / Thank-you / 404 — shared page styles.
   Left: contact identity (heading, company name, address + contact cards).
   Right: registration form card.
   ========================================================= */

.register__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}

.register__intro {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--sp-4);
}

.register__p15 .card-grid { grid-template-columns: minmax(0, 1fr); }
.register .info-card__text a[href^="mailto:"] { overflow-wrap: anywhere; }
.register__p15-title { max-width: 18ch; }
.register__p15-company {
  margin-top: var(--sp-4);
  color: var(--c-orange-text);
  font-weight: 700;
  font-size: var(--fs-5);
  letter-spacing: .01em;
}

/* address/contact reuse the shared .info-card component; page-scoped link style
   since .info-card__text carries no anchors anywhere else on the site */
.register .info-card__text a { color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-card-line); }
.register .info-card__text a:hover { color: var(--c-orange-title); border-color: var(--c-orange-title); }


/* ---------- form card ---------- */
.register-form {
  background: #fff;
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-5);
}

.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--fs-4); font-weight: 700; color: var(--c-ink); }
.field__required { color: var(--c-red-num); }
.field__input {
  min-height: 46px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  font-size: var(--fs-4);
  color: var(--c-ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:hover { border-color: var(--c-orange); }
.field__input:focus { outline: none; border-color: var(--c-orange-text); background: #fff; box-shadow: 0 0 0 3px rgba(173, 92, 0, .35); }
.field__input[aria-invalid="true"] { border-color: var(--c-red-num); background: #fff; }
.field__error { margin: 0; font-size: var(--fs-5); font-weight: 600; color: var(--c-red-num); }
.field__error:empty { display: none; }

.field--role { border: 0; padding: 0; margin: 0; }
.field--role legend { padding: 0; }
.role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.role-option {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-card-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  font-size: var(--fs-4);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.role-option:hover { border-color: var(--c-orange); }
.role-option:has(input:checked) { border-color: var(--c-orange); background: var(--c-orange-tint); box-shadow: 0 0 0 1px var(--c-orange); }
.role-option input { width: 18px; height: 18px; accent-color: var(--c-orange); flex-shrink: 0; }

.field--checkbox { gap: 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-5); line-height: 1.5; color: var(--c-text); cursor: pointer; }
.checkbox-row input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--c-orange); flex-shrink: 0; }
.checkbox-row a { color: var(--c-orange-text); text-decoration: underline; }

/* honeypot — off-canvas, not display:none, so bots that skip hidden fields still fill it in */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.register-form__status { font-size: var(--fs-5); font-weight: 600; color: var(--c-red-num); }
.register-form__status:empty { display: none; }
/* success text needs to clear WCAG AA on white; no green token in site.css covers that
   (--c-wa is a brand/icon green, ~2.5:1 on white) — kept as a scoped exception, see needs_shared */
.register-form__status[data-ok="true"] { color: var(--c-success); }

.register-form__submit { width: 100%; }
.register-form__submit[aria-busy="true"] { opacity: .75; cursor: progress; }

.cf-turnstile { margin-top: -.2rem; }

@media (min-width: 900px) {
  .register-form { padding: var(--sp-7); }
}
@media (max-width: 900px) {
  .register__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  /* phones/tablets: the form is the point of the page — show it before the contact details */
  .register__form-wrap { order: -1; }
}
@media (max-width: 560px) {
  .role-options { grid-template-columns: 1fr; }
}

/* ---------- simple status pages: thank-you, 404 ---------- */
.status-page { padding-block: var(--section-y); }
/* Nested inside its own .wrap (not combined on the same element — same
   pattern as .page-header__inner / .register__intro) so it never inherits
   .wrap's margin-inline:auto centering; stays left-aligned under the
   H1/intro at every viewport. */
.status-page__inner { max-width: 640px; }
.status-page__icon { width: 64px; height: 64px; margin: 0 0 var(--sp-6); color: var(--c-orange); }
.status-page__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }