/* Solvit brand, taken from solvit.co.ke (theme solvit2023).
   Avenir and DIN Pro are licensed fonts, so Nunito Sans stands in for body text. */
:root {
  --solvit-red: #ff353f;
  --solvit-red-dark: #e0222c;
  --solvit-navy: #05264e;
  --solvit-ink: #252525;
  --solvit-text: #5d6f7d;
  --solvit-footer: #003149;
  --solvit-soft: #f5f7fa;
  --bs-body-font-family: "Nunito Sans", Avenir, "Segoe UI", Arial, sans-serif;
  --bs-body-color: var(--solvit-text);
  --bs-link-color: var(--solvit-red-dark);
  --bs-link-hover-color: var(--solvit-navy);
}

body { background: var(--solvit-soft); color: var(--solvit-text); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

h1, h2, h3, .brand-heading {
  font-family: "Josefin Sans", "Nunito Sans", sans-serif;
  font-weight: 700;
  color: var(--solvit-navy);
}
h2 { font-size: 1.75rem; }

.site-header { background: #fff; border-bottom: 3px solid var(--solvit-red); }
.site-header img { height: 40px; width: auto; }
.site-header .tagline { color: var(--solvit-navy); font-weight: 600; font-size: .9rem; }

.site-footer { background: var(--solvit-footer); color: #b5c9dd; font-size: .875rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--solvit-red); }

.card { border: 0; border-radius: 12px; }
.step { font-size: .8rem; color: var(--solvit-red-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.form-card { max-width: 640px; margin: auto; }
.form-label { color: var(--solvit-ink); }

/* Primary action: Solvit red with dark text, as on solvit.co.ke (better contrast than white on this red) */
.btn-brand {
  --bs-btn-bg: var(--solvit-red);
  --bs-btn-border-color: var(--solvit-red);
  --bs-btn-color: #000;
  --bs-btn-hover-bg: var(--solvit-red-dark);
  --bs-btn-hover-border-color: var(--solvit-red-dark);
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: var(--solvit-red-dark);
  --bs-btn-active-border-color: var(--solvit-red-dark);
  --bs-btn-active-color: #000;
  --bs-btn-disabled-bg: var(--solvit-red);
  --bs-btn-disabled-border-color: var(--solvit-red);
  --bs-btn-disabled-color: #000;
  font-weight: 700;
  border-radius: 8px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--solvit-red);
  box-shadow: 0 0 0 .2rem rgba(255, 53, 63, .2);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--solvit-navy); }
.nav-pills .nav-link { color: var(--solvit-navy); }