/* --- Centrale Variabelen --- */
:root {
    --cda-groen: #2cc84d; 
    --cda-blauw: #3c415d; 
    --cda-oranje: #ff8f1f;
    --cda-beige: #eee9e2; 
    --wit: #ffffff; 
    --tekst-donker: #3c415d;
}

/* --- Basis Layout --- */
html { scroll-behavior: smooth; }
body { 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
    color: var(--tekst-donker); 
    background: var(--wit); 
    line-height: 1.8; 
    overflow-x: hidden; 
}

/* --- Header & Navigatie --- */
header { background: var(--wit); padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
nav { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo-link img { height: 40px; display: block; }

.back-link { 
    text-decoration: none; 
    color: var(--cda-blauw); 
    font-weight: 700; 
    font-size: 0.9rem; 
    transition: color 0.3s ease; 
    display: flex; 
    align-items: center; 
    gap: 8px;
}
.back-link:hover { color: var(--cda-groen); }

/* --- Programma Overzicht Kaarten (index.html) --- */
.topic-card { 
    background: var(--cda-beige); 
    padding: 45px; 
    border-radius: 20px; 
    text-decoration: none; /* Verwijdert de onderstreping */
    color: var(--cda-blauw); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border-left: 8px solid var(--cda-groen);
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
}
.topic-card:hover { 
    transform: translateY(-10px); 
    background: var(--cda-groen); 
    color: white; 
    box-shadow: 0 15px 30px rgba(44, 200, 77, 0.2);
}
.topic-card h2 { font-weight: 900; margin-top: 0; font-size: 1.5rem; color: inherit; }
.topic-card p { font-size: 1rem; opacity: 0.9; color: inherit; }
.arrow { font-weight: 900; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 20px; }

/* --- Hoofdstuk Pagina Content (wonen.html etc.) --- */
main { max-width: 850px; margin: 60px auto; padding: 0 20px; }
.chapter-badge { background: var(--cda-beige); color: var(--cda-blauw); padding: 6px 18px; border-radius: 50px; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; }

/* De h1 blijft hetzelfde */
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 900; color: var(--cda-blauw); margin: 25px 0; letter-spacing: -1px; }
h1::after { content: "."; color: var(--cda-groen); }

/* SPECIFIEK: Alleen h2's binnen een <article> krijgen de groene streep */
article h2 { 
    font-weight: 900; 
    color: var(--cda-blauw); 
    margin-top: 60px; 
    font-size: 1.8rem; 
    border-left: 6px solid var(--cda-groen); 
    padding-left: 20px; 
}

/* De h2's in de kaartjes hebben GEEN streep meer nodig */
.topic-card h2 { 
    font-weight: 900; 
    margin-top: 0; 
    font-size: 1.5rem; 
    color: inherit; 
    border-left: none; /* Voor de zekerheid extra uitgezet */
    padding-left: 0; 
}

/* --- Lijsten --- */
ul { padding-left: 0; list-style: none; margin: 30px 0; }
li { margin-bottom: 20px; padding-left: 30px; position: relative; }
li::before { content: "✓"; color: var(--cda-groen); position: absolute; left: 0; font-weight: 900; }
li strong { 
    color: var(--cda-blauw); 
    font-weight: 900; 
    display: inline; /* Dit zorgt dat het weer in de regel vloeit */
}

/* --- Knoppen onderaan hoofdstukken --- */
.chapter-nav { margin-top: 80px; padding-top: 40px; border-top: 3px solid var(--cda-beige); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nav-card { background: var(--cda-beige); padding: 25px; border-radius: 15px; text-decoration: none; color: var(--cda-blauw); transition: all 0.3s ease; }
.nav-card:hover { background: var(--cda-groen); color: white; transform: translateY(-5px); }
.nav-card span { display: block; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; opacity: 0.7; margin-bottom: 5px; }
.nav-card strong { font-size: 1.1rem; display: block; line-height: 1.2; }

/* --- Footer --- */
footer { background: var(--cda-blauw); color: white; text-align: center; padding: 60px 20px; margin-top: 120px; }
.footer-slogan { font-weight: 900; font-size: 1.2rem; }

/* --- Mobiel --- */
@media (max-width: 600px) {
    .chapter-nav { grid-template-columns: 1fr; }
    .nav-card { text-align: center; }
}

/* Zorgt voor een vloeiende beweging naar de sectie en voorkomt dat de kop achter het menu valt */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Dit creëert 'ademruimte' boven de kop waar je naartoe linkt */
}

/* Optioneel: Geeft een subtiel effect aan de sectie waar je naartoe springt */
:target {
    animation: highlight 1.5s ease-out;
}

@keyframes highlight {
    0% { background-color: rgba(255, 142, 1, 0.1); }
    100% { background-color: transparent; }
}

/* De kop moet ruimte bieden aan het icoon */
h1[id], h2[id], h3[id] {
    position: relative;
    transition: all 0.2s ease;
}

/* De styling van het anchor-teken */
h1[id]::after, h2[id]::after, h3[id]::after {
    content: "#";
    margin-left: 10px;
    color: var(--cda-oranje);
    opacity: 0; /* Standaard onzichtbaar */
    font-weight: 400;
    font-size: 0.7em;
    transition: opacity 0.2s ease;
}

/* Zichtbaar bij hover */
h1[id]:hover::after, h2[id]:hover::after, h3[id]:hover::after {
    opacity: 1;
}