/* ---------- Root kleuren (voor components die vars gebruiken) ---------- */
:root {
  --cassiopeia-color-primary: #000 !important;
  --cassiopeia-color-link: #000 !important;
  --cassiopeia-color-hover: #000 !important;
  --cassiopeia-color-bg: #000 !important;
  --cassiopeia-color-text: #333 !important;
}

/* ---------- Algemene achtergrond + tekst (hele site) ---------- */
html, body, .site, .site-inner, .wrapper, #g-main, .container {
  background-color: #fff !important;
  color: #333 !important;
}

.card-header {
  color: #222;
  background-color: #f5fafa;
}


@media (width >= 1200px) {
  h3, .h3 {
    font-size: 1.6rem;
  }
}

@media (width >= 1200px) {
  h2, .h2 {
    font-size: 1.8rem;
  }
}

@media (width >= 1200px) {
  h1, .h1 {
    font-size: 2rem;
  }
}

a {
  color: #000;
}

.page-link.active, .active > .page-link {
  background-color: #fff);
  border-color: #000;
}

.btn-primary {
  background-color: #e68922;
  border-color: #e68922;
}

.btn-primary {
  --btn-color: #fff;
  --btn-bg: #e68922;
  --btn-border-color: #e68922;
  --btn-hover-color: #fff;
  --btn-hover-bg: #e68922;
  --btn-hover-border-color: #e68922;
  --btn-focus-shadow-rgb: 39,39,111;
  --btn-active-color: #fff;
  --btn-active-bg: #e68922;
  --btn-active-border-color: #e68922;
  --btn-active-shadow: inset 0 3px 5px #00000020;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #e68922;
  --btn-disabled-border-color: #e68922;
}