:root{
    --navy:#073664;
    --blue:#0066b3;
    --bright:#087fdb;
    --ink:#172b3d;
    --muted:#5e7182;
    --bg:#f3f7fa;
    --line:#d9e3eb;
    --white:#fff;
    --radius:18px;
    --shadow:0 12px 35px rgba(14,47,76,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.65;
}

a{color:var(--blue)}
a:hover{color:var(--navy)}

img{
    max-width:100%;
    height:auto;
}

.container{
    width:min(1160px,calc(100% - 40px));
    margin-inline:auto;
}

.section{padding:64px 0}
.section-soft{background:#eaf2f7}

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(7,54,100,.97);
    color:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.12);
}

.topbar{
    width:min(1200px,calc(100% - 32px));
    min-height:76px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.brand{
    color:#fff;
    text-decoration:none;
    font-weight:750;
    letter-spacing:.1px;
}

.custom-logo{
    max-height:50px;
    width:auto;
}

.primary-nav ul{
    list-style:none;
    display:flex;
    gap:26px;
    margin:0;
    padding:0;
}

.primary-nav a{
    color:#fff;
    text-decoration:none;
    font-weight:650;
}

.primary-nav a:hover,
.primary-nav .current-menu-item>a{
    text-decoration:underline;
    text-underline-offset:6px;
}

.menu-toggle{
    display:none;
    background:transparent;
    border:1px solid rgba(255,255,255,.6);
    color:#fff;
    border-radius:8px;
    padding:8px 12px;
}

.skip-link{
    position:absolute;
    left:-9999px;
}

.skip-link:focus{
    left:12px;
    top:12px;
    z-index:1000;
    background:#fff;
    padding:10px;
}

.hero{
    min-height:520px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#fff;
    background:
        radial-gradient(circle at 20% 10%,rgba(20,155,255,.36),transparent 35%),
        linear-gradient(125deg,#073664,#0073c8);
    padding:84px 20px;
}

.hero-inner{max-width:820px}

.hero h1{
    font-size:clamp(2.5rem,6vw,4.8rem);
    line-height:1.04;
    margin:.15em 0 .3em;
}

.hero p{font-size:1.2rem}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.78rem;
    font-weight:800;
    color:var(--bright);
    margin:0 0 8px;
}

.hero .eyebrow,
.page-hero .eyebrow{
    color:#bfe5ff;
}

.hero-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
}

/* ===== KNOPPEN ===== */

.button{
    display:inline-block;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    border:0;
    border-radius:10px;
    padding:12px 18px;
    font-weight:750;
    cursor:pointer;
    transition:.2s;
}

.button:hover{
    background:var(--navy);
    color:#fff;
    text-decoration:none;
}

.button-light{
    background:#fff;
    color:var(--navy);
}

.button-light:hover{
    background:#eaf5fc;
    color:var(--navy);
}

.button-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,.6);
}

.button-secondary{
    background:#edf4f8;
    color:var(--navy);
}

/* ===== HIER ZAT HET PROBLEEM ===== */

.accent-card a{
    color:#fff;
}

.accent-card .button-light,
.accent-card .button-light:hover,
.accent-card .button-light:focus,
.accent-card .button-light:visited{
    background:#fff;
    color:var(--navy) !important;
    text-decoration:none;
}

/* =============================== */

.topic-grid,
.cards-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.card,
.content-card{
    background:#fff;
    border:1px solid rgba(7,54,100,.08);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px;
}

.topic-card{
    text-decoration:none;
    color:var(--ink);
    transition:.2s transform,.2s box-shadow;
}

.topic-card:hover{
    transform:translateY(-5px);
    color:var(--ink);
    box-shadow:0 18px 42px rgba(14,47,76,.16);
}

.topic-card h2{
    font-size:1.25rem;
}

.topic-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:14px;
    background:#e7f4fd;
    color:var(--blue);
    font-size:1.3rem;
}

.text-link{font-weight:750}

.two-col{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:28px;
    align-items:start;
}

.two-col h2,
.cta-grid h2{
    font-size:clamp(1.7rem,3vw,2.5rem);
    line-height:1.2;
}

.clean-list{
    list-style:none;
    margin:0;
    padding:0;
}

.clean-list li+li{
    border-top:1px solid var(--line);
}

.clean-list a{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:16px 0;
    text-decoration:none;
}

.clean-list span{
    color:var(--muted);
    font-size:.9rem;
}

.cta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.accent-card{
    background:linear-gradient(135deg,var(--navy),var(--blue));
    color:#fff;
}

.page-hero{
    background:linear-gradient(125deg,var(--navy),var(--blue));
    color:#fff;
    padding:72px 0;
}

.page-hero h1{
    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1.08;
    margin:0;
}

.page-hero p{
    font-size:1.1rem;
}

.content-card{
    max-width:900px;
}

.entry-content h2,
.entry-content h3{
    line-height:1.25;
}

.entry-content>*:first-child{
    margin-top:0;
}

.event-date{
    color:var(--blue);
    font-weight:800;
}

.event-card h2,
.advice-item h2{
    line-height:1.25;
}

.event-card h2 a,
.advice-item h2 a{
    text-decoration:none;
    color:var(--ink);
}

.advice-list{
    display:grid;
    gap:18px;
}

.advice-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;
}

.contact-form{
    display:grid;
    gap:18px;
    margin-top:28px;
}

.contact-form label{
    font-weight:700;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    border:1px solid #b9c9d6;
    border-radius:10px;
    padding:12px;
    font:inherit;
    margin-top:6px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:3px solid rgba(8,127,219,.2);
    border-color:var(--bright);
}

.notice{
    padding:14px;
    border-radius:10px;
    margin:18px 0;
}

.success{
    background:#e7f7ed;
    color:#175b31;
}

.error{
    background:#fff0f0;
    color:#8a2525;
}

.site-footer{
    background:var(--navy);
    color:#fff;
    padding:36px 0;
}

.footer-inner{
    width:min(1160px,calc(100% - 40px));
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:24px;
}

.site-footer a{
    color:#fff;
}

.pagination{
    margin-top:32px;
}

.nav-links{
    display:flex;
    gap:8px;
}

.page-numbers{
    background:#fff;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
}

.page-numbers.current{
    background:var(--blue);
    color:#fff;
}

@media(max-width:900px){

    .topic-grid,
    .cards-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .two-col,
    .cta-grid{
        grid-template-columns:1fr;
    }

    .primary-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:76px;
        background:var(--navy);
        padding:18px;
    }

    .primary-nav.is-open{
        display:block;
    }

    .primary-nav ul{
        flex-direction:column;
        gap:12px;
    }

    .menu-toggle{
        display:block;
    }

    .advice-item{
        align-items:flex-start;
        flex-direction:column;
    }

    .footer-inner{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:560px){

    .container{
        width:min(100% - 28px,1160px);
    }

    .section{
        padding:42px 0;
    }

    .topic-grid,
    .cards-grid{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:460px;
    }

    .card,
    .content-card{
        padding:22px;
    }

    .footer-inner{
        grid-template-columns:1fr;
    }
}