/* Algemeen */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}
body {
    background:#0a0c16;
    color:#f1f1f1;
}

/* Navigatie */
nav {
    background:#1c2a50;
    padding:15px 30px;
    display:flex;
    justify-content:center;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
nav ul {display:flex; gap:30px; list-style:none;}
nav a {
    color:#fff;
    font-weight:600;
    padding:10px 20px;
    border-radius:8px;
    transition:0.3s;
    text-decoration: none; /* verwijdert de standaard streepjes onder links */
}
nav a:hover {background:#2a3b6d;}
nav .join-button {
    position:absolute;
    left:30px;
    top:50%;
    transform:translateY(-50%);
    background:#2a3b6d;
    color:#fff;
    padding:6px 15px;
    font-size:0.9rem;
    border-radius:10px;
    font-weight:600;
    transition:0.3s;
}
nav .join-button:hover {background:#3b4f8a;}

/* Layout */
.layout, .apv-layout {
    display:flex;
    max-width:1200px;
    margin:40px auto;
    gap:30px;
    padding:0 20px;
}

/* Zijbalk */
.sidebar {
    background: rgba(28,42,80,0.9);
    border-radius:12px;
    padding:25px 20px;
    width:320px;
    position:sticky;
    top:100px;
    height:fit-content;
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
    margin-left:-50px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.sidebar h3 {
    text-align:center;
    color:#ffffff;
    margin-bottom:20px;
    font-size:1.3rem;
    font-weight:700;
}
.sidebar button {
    display:block;
    width:100%;
    background:#2a3b6d;
    color:#fff;
    border:none;
    padding:14px 16px;
    border-radius:6px;
    margin-bottom:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    text-align:left;
}
.sidebar button:hover {background:#3b4f8a;}
.sidebar button.active {background:#0a0c169c; color:#fff;}

/* APV-content */
#apv, .apv-content {
    flex:1;
    background: #ffffff0d;
    border-radius:12px;
    padding:30px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
#apv h1, .apv-content h1 {
    font-size:2.5rem;
    color:#ffffff;
    text-align:center;
    margin-bottom:10px;
}
#apv .intro, .apv-content p.sub {
    text-align:center;
    font-size:1.2rem;
    color:#bfc5db;
    margin-bottom:30px;
}
#apv table, .apv-content table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px;
}
#apv th, #apv td, .apv-content th, .apv-content td {
    border:1px solid #2a3b6d;
    padding:10px;
    text-align:left;
}
#apv th, .apv-content th {background:#2a3b6d; color:#fff;}
#apv tr:nth-child(even), .apv-content tr:nth-child(even) {background: #ffffff0d;}
#apv .note, .apv-content .note {color:#bfc5db; margin-bottom:10px;}

/* Artikelen */
.article {
    margin-bottom:30px;
}
.article h2 {
    background:#2a3b6d;
    padding:12px 15px;
    border-radius:8px;
    margin-bottom:10px;
    font-size:1.3rem;
}
.article p, .article li {
    color:#979797;
    line-height:1.7;
}
.article ul {
    margin-left:20px;
    margin-top:10px;
}

/* Footer */
footer {
    background:#1c2a50;
    color:#fff;
    text-align:center;
    padding:20px;
    font-size:0.9rem;
    border-top:1px solid #2a3b6d;
    margin-top:auto;
}

/* Responsief */
@media(max-width:900px){
    .layout, .apv-layout {flex-direction:column; align-items:center;}
    .sidebar {
        width:100%;
        position:static;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }
    .sidebar button {flex:1 1 40%; text-align:center;}
}
html {scroll-behavior:smooth;}

/* Collapsible artikelen */
.article .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 0; /* start zonder padding */
}

.article.open .content {
    max-height: 5000px; /* groot genoeg voor alle inhoud */
    padding: 10px 0;   /* padding bij open */
}

.article .content h3 {
    font-size: 1.1rem;
    color: #ffffff;   /* oranje, zodat het opvalt */
    margin: 10px 0 5px 0;
}

.article .content h3,
.article .content h4 {
    font-size: 1.1rem;
    color: #ffffff;
    margin: 20px 0 10px 0; /* 20px boven, 10px onder voor ruimte */
}

.article .content p,
.article .content ul {
    margin-bottom: 15px; /* ruimte onder paragrafen en lijsten */
}