/* ====== Design tokens ====== */
:root{
    /* Kern */
    --bg: #F7F7FB; 
    --surface:#FFFFFF; 
    --fg:#0F172A; 
    --muted:#6B7280; 
    --border:#E5E7EB;
    --primary:#0B1B4D; 
    --secondary:#4F46E5; 
    --accent:#8B5CF6;
    --link:#4F46E5; 
    --link-hover:#4338CA;

    /* Hero/gradient */
    --hero-from:#342aeb; 
    --hero-to:#c57ced;
  }

  /* Dark mode */
  :root[data-theme="dark"]{
    --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --surface:#0f172a;
    --link:#60a5fa;
    --shadow:0 10px 24px rgba(0,0,0,.35);
    --bs-card-title-color: #94a3b8;
  }

  /* ====== Base ====== */
  html,body{background:var(--bg); color:var(--fg); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;}
  a{color:var(--link); text-decoration:none}
  a:hover{opacity:.9}
  .container{max-width:1100px}

  /* === HERO HEADER === */
  .site-hero{
    position: relative;
    min-height: 220px;
    display: grid;
    place-items: center;
    background-image: var(--hero-img), linear-gradient(180deg, var(--hero-from), var(--hero-to)); /* fallback */
    background-size: cover;
    background-position: center;
    color: #fff;
  }
  .site-hero__overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  }
  :root[data-theme="dark"] .site-hero__overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
  }
  .site-hero__inner{ position: relative; text-align: center; padding: 3rem 1rem; }
  .site-hero__title{
    font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .site-hero__subtitle{
    margin: .5rem 0 0;
    color: rgba(255,255,255,.9);
    font-weight: 500;
  }

  .navbar .btns { margin-right: 8px; }
  .navbar { margin-top: 0; }
  .navbar{background:#111827}
  :root[data-theme="dark"] .navbar{background:#0b1220}

  /* Kaarten */
  .card{
    background:var(--surface);
    border:1px solid rgba(2,8,23,.06);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(2,8,23,.10)}

  /* Mini-topbar in kaarten met accentkleur */
  .card .accent-bar{height:4px; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);}
 
  /* Typografie van content */
  .markdown-body{max-width:80ch; margin-inline:auto; font-size:17px; line-height:1.7}
  .markdown-body h1,.markdown-body h2{letter-spacing:-.01em}
  .markdown-body img{max-width:100%; height:auto}
  .markdown-body pre,.markdown-body code{background:#bfafc7; color:#1a2740; padding: 3px;}
  .markdown-body pre{padding:1rem; border-radius:12px; overflow:auto}

  /* Utilities */
  .text-muted{color:var(--muted)!important}

  /* Knoppen */
  .btn-primary{
    --bs-btn-color: #fff;
    --bs-btn-bg: #4F46E5;   
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4338CA; 
    --bs-btn-hover-border-color: #4338CA;
    --bs-btn-active-bg: #3730A3;
    --bs-btn-active-border-color: #3730A3;
    --bs-btn-focus-shadow-rgb: 79,70,229;
  }
  .btn-outline-primary{
    --bs-btn-color: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4F46E5;
    --bs-btn-hover-border-color: #4F46E5;
    --bs-btn-focus-shadow-rgb: 79,70,229;
  }
  .btn-accent{
    --bs-btn-color:#fff;
    --bs-btn-bg:#8B5CF6;
    --bs-btn-border-color:#8B5CF6;
    --bs-btn-hover-bg:#7C3AED;
    --bs-btn-hover-border-color:#7C3AED;
    --bs-btn-active-bg:#6D28D9;
    --bs-btn-active-border-color:#6D28D9;
    --bs-btn-focus-shadow-rgb:139,92,246;
  }

  .room {
    margin-top: auto; 
    margin-bottom: 1rem;
    margin-left: 2rem; 
    margin-right: 2rem;
}

/* ===== Contrast fixes voor deze pagina ===== */

/* Headings: zorg dat 'text-primary' AA haalt in beide thema's */
.text-primary{ color: var(--link); }
:root[data-theme="dark"] .text-primary{ color: #bfdbfe; } /* lichter op donker */

/* Meta/labels duidelijker */
.content-header .meta { color: var(--muted); }
.content-header strong { color: var(--fg); }

/* Outline secondary buttons (de thema-knoppen bovenaan) */
.btn-outline-secondary{
  --bs-btn-color:#374151;          /* donkerder tekst */
  --bs-btn-border-color:#4b5563;   /* beter zichtbaar */
  --bs-btn-hover-color:#111827;
  --bs-btn-hover-bg:#e5e7eb;
  --bs-btn-hover-border-color:#374151;
}
:root[data-theme="dark"] .btn-outline-secondary{
  --bs-btn-color:#e5e7eb;
  --bs-btn-border-color:#94a3b8;
  --bs-btn-hover-color:#0b1220;
  --bs-btn-hover-bg:#e5e7eb;       /* invert voor duidelijke hover */
  --bs-btn-hover-border-color:#e5e7eb;
}

/* Chips (tags) – 'btn-soft' met voldoende contrast */
.btn.btn-soft{
  --chip-bg:#f3ecff;  /* licht indigo */
  --chip-fg:#1e3a8a;  /* donker indigo voor 7+:1 */
  background:var(--chip-bg);
  color:var(--chip-fg);
  border:1px solid #d4b2f8;
  margin-top: 3px;
}
.btn.btn-soft:hover{
  background:#e0e7ff;
  border-color:#a5b4fc;
  color:#172554;
}
:root[data-theme="dark"] .btn.btn-soft{
  --chip-bg:#111827;
  --chip-fg:#e5e7eb;
  background:var(--chip-bg);
  color:var(--chip-fg);
  border:1px solid #374151;        /* zichtbaar op donker */
}
:root[data-theme="dark"] .btn.btn-soft:hover{
  background:#1f2937;
  border-color:#4b5563;
}

/* Kaarten: titels en tags beter leesbaar */
.card-title{ color: var(--fg); }
.card-text.text-muted{ color: var(--muted); }

/* Links in kaarten: altijd onderstreept + duidelijk focus */
a{ text-decoration: underline; text-underline-offset: 2px; }
a.btn{ text-decoration: none; } /* buttons blijven zonder underline */

/* Focusstijlen: goed zichtbaar toetsenbord-navigatie */
a:focus-visible,
button:focus-visible{
  outline: 3px solid #f59e0b;      /* amber focus ring */
  outline-offset: 2px;
}

/* “Lees meer” knop spacing (houdt AA-contrast, kleuren uit je tokens) */
.room.btn.btn-primary{
  font-weight: 600;
}

/* Grid-kaarten: minimale hoogte zodat titels/tags niet tegen de knop plakken */
.card.w-100.d-flex.flex-column .card-body{
  min-height: 140px;
}