/**
 * Registration wizard progress bar + step layout (AL-1046).
 *
 * Steps are hidden via the [hidden] attribute, set only by the wizard JS -
 * without JS nothing here hides anything and the form degrades to one long
 * page.
 */

/**
 * The theme sets display on .form-wrapper/.form-group containers, which beats
 * the UA stylesheet's [hidden] { display: none } on specificity. Without this
 * the "hidden" steps would stay visible AND jQuery Validate would stop
 * treating them as ':hidden', so per-step validation would validate the whole
 * form at once.
 */
.registration-wizard--js [data-wizard-step][hidden] {
  display: none !important;
}

.registration-wizard__progress-list {
  display: flex;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}

/**
 * From step 2 on the greeting above the form is hidden, and with it the only
 * thing that held the progress bar off the account-type links directly above
 * the form - the bar would otherwise start flush against them.
 *
 * 20px, not a round guess: that is the margin-top of the greeting's own <h3>,
 * i.e. exactly the gap the links had under them on step 1. Applied only in the
 * headerless state, so step 1's spacing is untouched.
 */
.registration-wizard--no-page-header .registration-wizard__progress {
  margin-top: 20px;
}

.registration-wizard__progress-item {
  flex: 1;
  position: relative;
  text-align: center;
}

.registration-wizard__progress-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #d0d0d0;
  z-index: 0;
}

.registration-wizard__progress-item.is-complete:not(:last-child)::after {
  background: #2a7a3b;
}

.registration-wizard__progress-circle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d0d0d0;
  color: #fff;
  font-weight: bold;
  /**
   * Optical, not geometric, centring. align-items: center already puts the
   * line box dead centre, but KorpusGrotesk's ascent and descent are
   * asymmetric, so the digit's *ink* landed 1.48px above the circle's middle -
   * plainly visible at 28px. With border-box sizing this padding shrinks the
   * content box, and centring within it moves the glyph down by half the
   * padding: 3px measures out at 0.02px off centre.
   */
  box-sizing: border-box;
  padding-top: 3px;
}

.registration-wizard__progress-item.is-active .registration-wizard__progress-circle {
  background: #0a5ca8;
}

.registration-wizard__progress-item.is-complete .registration-wizard__progress-circle {
  background: #2a7a3b;
}

.registration-wizard__progress-label {
  display: block;
  margin-top: 0.5em;
  font-size: 0.8em;
}

.registration-wizard__step-title {
  margin-top: 0;
}

.registration-wizard__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
}

.registration-wizard__nav .registration-wizard__back {
  margin-right: auto;
}

/**
 * The last step has no nav container of its own: "Back" is inserted straight
 * into Drupal's own .form-actions next to the real submit button, because a
 * wrapper of ours would stack the two buttons on separate rows. .form-actions
 * is display: block in the theme, so lay it out to match the other steps -
 * Back left, primary action right.
 */
.registration-wizard--js .registration-wizard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.5em;
}

/**
 * Checkbox and radio alignment (Field of interests, What sort, Terms).
 *
 * The theme follows the Bootstrap pattern of absolutely positioning the input
 * into the label's left padding, and adds margin-top: 4px on top of that -
 * which pushes the box below the centre of the label's first line. Everything
 * else about the pattern is fine, so only the offset is removed; zeroing the
 * negative margin-left instead would drop the input on top of the label text.
 */
.registration-wizard--js .form-item.checkbox input.form-checkbox,
.registration-wizard--js .form-item.radio input.form-radio,
.registration-wizard--js .form-item.checkbox input[type="checkbox"],
.registration-wizard--js .form-item.radio input[type="radio"] {
  margin-top: 0;
}

/**
 * Make the validation messages noticeable (AL-1046 item 3).
 *
 * clientside_validation already inserted these as label.error, but the theme
 * leaves them at 10px in body-text black, so users genuinely could not tell
 * that a field had failed - that is the "no clear error message appears"
 * complaint in the ticket, not a missing validator. Scoped to this form only,
 * through a library attached just to the registration form.
 */
.registration-wizard--js label.error {
  display: block;
  margin-top: 0.35em;
  color: #e41f18;
  font-size: 0.85em;
  font-weight: bold;
}

.registration-wizard--js input.error,
.registration-wizard--js select.error,
.registration-wizard--js textarea.error {
  border-color: #e41f18;
}

/**
 * A checkbox's or radio's message is appended to the .form-item wrapper rather
 * than left inside the label - see the errorPlacement override in
 * registration-wizard.js - so it needs the indent the option text has, or it
 * would start further left than anything else in the group.
 */
.registration-wizard--js .form-item.checkbox label.error,
.registration-wizard--js .form-item.radio label.error {
  margin-left: 20px;
}

/**
 * The password requirements, listed under the field from the enabled
 * password_policy configuration rather than left to be discovered by failing.
 * Sized like the theme's own help text, which this stands in for.
 */
.registration-wizard--js .registration-wizard__password-rules-wrapper {
  margin-top: 0.5em;
  font-size: 0.85em;
}

.registration-wizard--js .registration-wizard__password-rules-title {
  display: block;
}

.registration-wizard--js .registration-wizard__password-rules {
  margin: 0.25em 0 0;
  padding-left: 1.25em;
}