/* Church visitor form — loaded only on CRM-enabled BS5 Legacy homepages.
   Colors are injected as --cv-* from the parish design tokens. */
.cv-lead-section {
  --cv-brand: #19315b;
  --cv-brand-deep: #19315b;
  --cv-on-brand: #fff;
  --cv-heading: var(--cv-brand);
  --cv-body: #5c6570;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--cv-brand) 12%, transparent), transparent 32%),
    color-mix(in srgb, var(--cv-brand) 6%, transparent);
}

.cv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--cv-heading);
}

.cv-eyebrow::before {
  content: "";
  width: 2rem;
  height: 4px;
  border-radius: 99px;
  background: var(--cv-brand);
}

.cv-lead-heading {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--cv-heading);
  font-family: var(--cv-heading-font, inherit);
}

.cv-lead-lede {
  font-size: 1.1rem;
  color: var(--cv-body);
  max-width: 38rem;
  margin-bottom: 0;
  font-family: var(--cv-body-font, inherit);
}

.cv-lead-intro,
.cv-lead-form {
  max-width: 42rem;
}

.cv-step-label {
  letter-spacing: 0.12em;
  color: var(--cv-heading);
}

.cv-lead-form h3 {
  color: var(--cv-heading);
  font-family: var(--cv-heading-font, inherit);
}

.cv-lead-form .option-tile {
  --bs-btn-bg: rgba(255, 255, 255, 0.72);
  --bs-btn-border-color: color-mix(in srgb, var(--cv-brand) 22%, transparent);
  --bs-btn-color: var(--cv-heading);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--cv-brand);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--cv-brand);
  --bs-btn-active-color: var(--cv-heading);
  text-align: left;
  font-weight: 600;
  padding: 0.85rem 1rem;
}

.cv-lead-form .btn-check:checked + .option-tile {
  box-shadow: inset 0 0 0 2px var(--cv-brand);
}

.cv-lead-form.form-card {
  background: color-mix(in srgb, var(--cv-brand) 10%, #fff);
}

.cv-progress-bar {
  background-color: var(--cv-brand) !important;
}

.cv-lead-nav {
  background: linear-gradient(90deg, var(--cv-brand) 0 66%, var(--cv-brand-deep) 66% 100%);
  color: var(--cv-on-brand);
}

/* Beat the BS5 chrome guard (`.btn.btn-link { color: link !important }`)
   so Next/Previous follow footer text, not the page link color. */
.default-layout--bs5-chrome .cv-lead-nav .btn.btn-link,
.default-layout--bs5-chrome .cv-lead-nav .btn.btn-link:hover,
.default-layout--bs5-chrome .cv-lead-nav .btn.btn-link:focus,
.default-layout--bs5-chrome .cv-lead-nav .btn.btn-link:active {
  color: inherit !important;
}

.cv-lead-form .form-label,
.cv-lead-form .form-control-lg {
  color: var(--cv-heading);
}

.cv-lead-form .form-control-lg {
  border-color: color-mix(in srgb, var(--cv-brand) 22%, transparent);
  font-family: var(--cv-body-font, inherit);
}

.cv-lead-form .form-control-lg:focus {
  border-color: var(--cv-brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cv-brand) 22%, transparent);
}