/*
 * Solidres Cloud waiting list (/cloud): an intro, one card per customer group (its headline, the
 * line under both, the five features in that group's order), and the waiting list form
 * (plg_system_srwaitlist, which puts it where the article says {srwaitlist}). Loaded by
 * html/com_content/article/default.php when the article carries the .sr-cw wrapper. Colours are
 * the template's tokens, so both schemes follow.
 */

.sr-cw {
  color: var(--sr-text);
}

.sr-cw h1,
.sr-cw h2 {
  color: var(--sr-ink);
}

/* Intro */

.sr-cw-intro {
  max-width: 46rem;
  padding-block: 8px 8px;
}

.sr-cw-eyebrow,
.sr-cw-group__for {
  margin: 0 0 6px;
  color: var(--sr-link);
  font-family: var(--sr-font-heading);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sr-cw h1 {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
}

.sr-cw-lead {
  margin: 0 0 12px;
  color: var(--sr-ink);
  font-size: 1.25rem;
  line-height: 1.5;
}

/* "Which one is you?": two choices that lead to their group's section */
.sr-cw-paths__title {
  margin: 24px 0 10px;
  color: var(--sr-ink);
  font-family: var(--sr-font-heading);
  font-size: 1.25rem;
}

.sr-cw-paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .sr-cw-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sr-cw-paths a {
  display: block;
  height: 100%;
  padding: 14px 44px 14px 16px;
  border: 2px solid var(--sr-brand);
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
  color: var(--sr-text);
  text-decoration: none;
  position: relative;
}

.sr-cw-paths li:last-child a {
  border-color: var(--sr-accent);
}

/* An arrow pointing down the page, drawn by the border */
.sr-cw-paths a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

.sr-cw-paths a:hover {
  background: var(--sr-tint);
}

.sr-cw-paths strong {
  display: block;
  color: var(--sr-ink);
  font-size: 1.0625rem;
}

.sr-cw-skip {
  margin: 0;
}

.sr-cw-group {
  scroll-margin-top: 16px;
}

.sr-cw-who {
  margin: 0 0 20px;
}

.sr-cw-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sr-line);
  font-size: 0.9375rem;
}

.sr-cw-note strong {
  color: var(--sr-ink);
}

/* The two groups: stacked, then side by side */

.sr-cw-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-block: 32px;
}

@media (min-width: 960px) {
  .sr-cw-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sr-cw-group {
  padding: 24px 20px;
  border: 1px solid var(--sr-line);
  border-top: 4px solid var(--sr-brand);
  border-radius: var(--sr-radius);
  background: var(--sr-surface);
  box-shadow: var(--sr-shadow);
}

@media (min-width: 768px) {
  .sr-cw-group {
    padding: 28px;
  }
}

.sr-cw-group--b {
  border-top-color: var(--sr-accent);
}

.sr-cw-group--b .sr-cw-group__for {
  color: var(--sr-accent-text);
}

.sr-cw-group h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.3;
}

/* The line under both headlines, in the same words */
.sr-cw-line {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-tint);
  color: var(--sr-ink);
  font-weight: 700;
}

.sr-cw-features {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-cw-features li {
  position: relative;
  padding-left: 28px;
}

/* A tick drawn by the border, in the group's colour */
.sr-cw-features li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 2px;
  width: 14px;
  height: 8px;
  border-bottom: 3px solid var(--sr-brand);
  border-left: 3px solid var(--sr-brand);
  transform: rotate(-45deg);
}

.sr-cw-group--b .sr-cw-features li::before {
  border-color: var(--sr-accent);
}

.sr-cw-features strong {
  color: var(--sr-ink);
}

/* The form */

.sr-cw-join {
  margin-block: 8px 24px;
  padding: 28px 20px;
  border-radius: var(--sr-radius);
  background: var(--sr-tint);
  scroll-margin-top: 16px;
}

@media (min-width: 768px) {
  .sr-cw-join {
    padding: 32px;
  }
}

.sr-cw-join > * {
  max-width: 40rem;
}

.sr-cw-join h2 {
  margin: 0 0 8px;
  font-size: 1.75rem;
}

.sr-cw-join > p {
  margin: 0 0 20px;
}

/* The fields' borders read against the page (3:1), which Bootstrap's line colour does not. */
.sr-waitlist {
  --bs-border-color: var(--sr-muted);
}

.sr-waitlist__field {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.sr-waitlist .form-label {
  color: var(--sr-ink);
  font-weight: 700;
}

/* Bootstrap draws a legend as a large floated heading. */
.sr-waitlist legend.form-label {
  float: none;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

.sr-waitlist .form-control {
  max-width: 28rem;
  background-color: var(--sr-surface);
}

.sr-waitlist .form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.2em;
  background-color: var(--sr-surface);
}

.sr-waitlist__hint {
  margin: -4px 0 10px;
  color: var(--sr-muted);
}

.sr-waitlist__choices .form-check-inline {
  margin-right: 24px;
}

/* Bootstrap turns a missing answer's labels red, which reads below 4.5:1 on the tint; the
 * error under them says what is wrong. */
.sr-waitlist .form-check-input.is-invalid ~ .form-check-label {
  color: var(--sr-ink);
}

.sr-waitlist__error {
  margin: 6px 0 0;
  color: var(--sr-danger-text);
  font-weight: 700;
}

.sr-waitlist__errors,
.sr-waitlist__done {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface);
}

.sr-waitlist__errors {
  border: 2px solid var(--sr-danger-text);
}

.sr-waitlist__errors ul {
  margin: 0;
  padding-left: 20px;
}

.sr-waitlist__errors p,
.sr-waitlist__done p {
  margin: 0 0 6px;
}

.sr-waitlist__errors a {
  color: var(--sr-danger-text);
}

.sr-waitlist__done {
  border-left: 4px solid var(--sr-green-text);
}

.sr-waitlist__done-title {
  color: var(--sr-ink);
  font-size: 1.125rem;
}

.sr-waitlist__done p:last-child {
  margin-bottom: 0;
}