@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;600&display=swap");

/* ---------- Kleuren en basis ---------- */
:root {
  --km-groen: #173a28;        /* dennengroen */
  --km-groen-donker: #0e2619;
  --km-rood: #a3201f;         /* kerstrood */
  --km-rood-donker: #7d1615;
  --km-goud: #d4a63c;         /* goud voor accenten */
  --km-creme: #fbf6ec;        /* achtergrond */
  --km-papier: #ffffff;
  --km-tekst: #2a2522;
  --km-lijn: #e8dcc4;

  /* Cassiopeia-variabelen overschrijven */
  --cassiopeia-color-primary: var(--km-groen);
  --cassiopeia-color-link: var(--km-rood);
  --cassiopeia-color-hover: var(--km-groen);
  --cassiopeia-font-family-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cassiopeia-font-family-headings: "Playfair Display", Georgia, "Times New Roman", serif;
  --cassiopeia-font-weight-headings: 700;
}

body.site {
  background: var(--km-creme);
  color: var(--km-tekst);
  font-family: var(--cassiopeia-font-family-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ---------- Header met lichtsnoer ---------- */
.container-header {
  position: relative;
  background: linear-gradient(160deg, var(--km-groen) 0%, var(--km-groen-donker) 100%);
  padding-bottom: 22px;
  box-shadow: none;
}

/* het lichtsnoer onderaan de header */
.container-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 60%, #ffd86b 0 4px, rgba(255, 216, 107, .35) 5px 7px, transparent 8px) 0 0 / 96px 20px repeat-x,
    radial-gradient(circle at 50% 60%, #ff5a4e 0 4px, rgba(255, 90, 78, .35) 5px 7px, transparent 8px) 24px 0 / 96px 20px repeat-x,
    radial-gradient(circle at 50% 60%, #7fe08a 0 4px, rgba(127, 224, 138, .35) 5px 7px, transparent 8px) 48px 0 / 96px 20px repeat-x,
    radial-gradient(circle at 50% 60%, #fff4d6 0 4px, rgba(255, 244, 214, .35) 5px 7px, transparent 8px) 72px 0 / 96px 20px repeat-x,
    linear-gradient(#3a2f25, #3a2f25) 0 6px / 100% 1px no-repeat;
  animation: km-twinkel 2.4s ease-in-out infinite alternate;
}

@keyframes km-twinkel {
  from { filter: brightness(.85); }
  to   { filter: brightness(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .container-header::after { animation: none; }
}

/* sitenaam en slogan */
.container-header .navbar-brand,
.container-header .brand-logo {
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff8e7;
  letter-spacing: .01em;
}

.container-header .navbar-brand a:hover,
.container-header .brand-logo:hover {
  color: var(--km-goud);
  text-decoration: none;
}

.container-header .site-description {
  color: var(--km-goud);
  font-size: .95rem;
  font-style: italic;
}

/* ---------- Hoofdmenu ---------- */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: #fff8e7;
  font-weight: 600;
}

.container-header .mod-menu > li > a:hover,
.container-header .metismenu > li > a:hover,
.container-header .mod-menu > li.active > a,
.container-header .metismenu > li.active > a {
  color: var(--km-goud);
  text-decoration: none;
}

/* uitklapmenu */
.container-header .metismenu .mm-collapse {
  background: var(--km-papier);
  border-top: 3px solid var(--km-goud);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.container-header .metismenu .mm-collapse a {
  color: var(--km-groen);
}

.container-header .metismenu .mm-collapse a:hover {
  background: var(--km-creme);
  color: var(--km-rood);
}

/* hamburgerknop op mobiel */
.container-header .navbar-toggler {
  color: #fff8e7;
  border-color: rgba(255, 248, 231, .5);
}

/* ---------- Kruimelpad ---------- */
.mod-breadcrumbs {
  background: transparent;
  font-size: .9rem;
  padding: .5rem 0;
}

.mod-breadcrumbs a {
  color: var(--km-groen);
}

/* ---------- Inhoud ---------- */
.container-component,
.com-content-article {
  background: transparent;
  min-width: 0; /* voorkomt dat brede tabellen de kolom oprekken */
}

.item-page,
.com-content-article {
  background: var(--km-papier);
  border: 1px solid var(--km-lijn);
  border-radius: 10px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

h1, h2, h3, h4,
.page-header h1, .page-header h2 {
  font-family: var(--cassiopeia-font-family-headings);
  color: var(--km-rood);
  line-height: 1.2;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  margin-top: 2.25rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--km-goud);
  display: inline-block;
}

h3 {
  font-size: 1.3rem;
  color: var(--km-groen);
  margin-top: 1.75rem;
}

a {
  color: var(--km-rood);
  text-decoration-color: rgba(163, 32, 31, .35);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--km-groen);
  text-decoration-color: currentColor;
}

/* de "Metro: ..." regels */
.item-page p > em:only-child {
  display: inline-block;
  font-style: normal;
  font-size: .9rem;
  color: var(--km-groen);
  background: #eef4ee;
  border-radius: 999px;
  padding: .15rem .75rem;
}

/* lijstjes met een gouden ster */
.item-page ul {
  list-style: none;
  padding-left: 1.4rem;
}

.item-page ul > li {
  position: relative;
  margin-bottom: .4rem;
}

.item-page ul > li::before {
  content: "\2605";
  position: absolute;
  left: -1.3rem;
  top: .05rem;
  color: var(--km-goud);
  font-size: .85rem;
}

.item-page ol > li::marker {
  color: var(--km-rood);
  font-weight: 700;
}

/* ---------- Tabellen ---------- */
.item-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: .97rem;
  background: var(--km-papier);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--km-lijn);
}

.item-page thead th {
  background: var(--km-groen);
  color: #fff8e7;
  text-align: left;
  font-weight: 600;
  padding: .7rem .9rem;
}

.item-page tbody td {
  padding: .65rem .9rem;
  border-top: 1px solid var(--km-lijn);
  vertical-align: top;
}

.item-page tbody tr:nth-child(even) td {
  background: #fdf9f1;
}

/* brede tabellen op mobiel horizontaal laten scrollen */
@media (max-width: 700px) {
  .item-page table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---------- Knoppen ---------- */
.btn-primary,
.btn-primary:visited {
  background: var(--km-rood);
  border-color: var(--km-rood);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--km-rood-donker);
  border-color: var(--km-rood-donker);
}

/* ---------- Zijbalk en modules ---------- */
.sidebar-left .card,
.sidebar-right .card,
.main-top .card,
.main-bottom .card {
  background: var(--km-papier);
  border: 1px solid var(--km-lijn);
  border-top: 4px solid var(--km-rood);
  border-radius: 10px;
}

.card .card-header {
  background: transparent;
  font-family: var(--cassiopeia-font-family-headings);
  color: var(--km-groen);
  font-size: 1.15rem;
  border-bottom: 1px solid var(--km-lijn);
}

/* ---------- Footer ---------- */
.container-footer {
  background: var(--km-groen-donker);
  color: #e9e1cf;
  border-top: 4px solid var(--km-goud);
}

.container-footer a {
  color: var(--km-goud);
}

.container-footer a:hover {
  color: #fff8e7;
}

/* terug-naar-boven-knop */
.back-to-top-link {
  background: var(--km-rood);
  border-color: var(--km-rood);
}