/* =========================================
   1. CONFIGURATIE & VARIABELEN
   ========================================= */
:root {
    /* FONTS */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    
    /* KLEUREN */
    --color-bg: #fdfdfd;           /* Pagina achtergrond */
    --color-text: #1d1d1f;         /* Hoofdtekst (Apple Black) */
    --color-text-light: #515154;   /* Secundaire tekst */
    --color-primary: #0067c2;      /* Brand Blue */
    --color-card-bg: #ffffff;      /* Kaart achtergrond */
    --color-border: rgba(0,0,0,0.08); /* Subtiele lijntjes */

    /* AFMETINGEN */
    --width-wide: 1100px;          /* Voor Menu & Grids */
    --width-reading: 740px;        /* Voor Artikelen & Intro */
    --nav-height: 70px;
    --spacing: 24px;               /* Standaard padding */
    --radius: 12px;                /* Afronding hoeken */
}

/* =========================================
   2. RESET
   ========================================= */
*, *:before, *:after {
    box-sizing: border-box; 
}

body {
    background-color: var(--color-bg);
    font-family: var(--font-sans);
    font-size: 17px;          
    line-height: 1.6;         
    color: var(--color-text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary); text-decoration: none; transition: 0.2s; }
a:hover { color: #004585; }

/* Verwijder standaard lijst-bolletjes */
ul, ol { list-style: none; padding: 0; margin: 0; }

/* =========================================
   3. LAYOUT CONTAINERS
   ========================================= */
/* BREED: Voor Navigatie, Footer en Kaartjes */
.container, nav, .footer-inner {
    max-width: var(--width-wide);
    margin: 0 auto;
    padding: 0 var(--spacing);
    width: 100%;
}

/* SMAL: Voor Intro, Artikelen en Tekst */
.container-narrow, article, .post, .intro, .aboutme {
    max-width: var(--width-reading);
    margin: 0 auto;
    padding: 0 var(--spacing);
    width: 100%;
}

/* =========================================
   4. NAVIGATIE (Gecentreerd & Sticky)
   ========================================= */
#navigation {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: 999;
    
    /* Centreer de container */
    display: flex;
    justify-content: center; 
    align-items: center;
}

nav {
    display: flex;
    justify-content: center; /* Items in het midden */
    align-items: center;
    position: relative;
}

/* Desktop Menu */
.menu {
    display: flex;
    gap: 32px;
    align-items: center;
}

.menu a {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
}
.menu a:hover, .menu a.active {
    color: var(--color-primary);
}

/* Hamburger verbergen op desktop */
#menuToggle { display: none; }

/* =========================================
   5. HERO & INTRO
   ========================================= */
.intro {
    padding-top: 140px; 
    padding-bottom: 60px;
    text-align: center;
}

.intro h1 {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    line-height: 1.1;
}

/* Blauwe Knop Styling */
.btn-primary { 
    display: inline-block; 
    background: var(--color-primary); 
    color: #fff !important; 
    padding: 14px 28px; 
    border-radius: 50px; 
    font-weight: 600; 
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 10px rgba(0, 103, 194, 0.3);
    cursor: pointer;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 103, 194, 0.4);
    background: #0056a3; 
}

/* =========================================
   6. GRID CARDS
   ========================================= */
.cards {
    display: grid;
    /* Minimaal 280px zorgt dat er sneller 2 naast elkaar passen */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px auto;
    padding-bottom: 40px;
}

.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    padding: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative; /* Nodig voor stretched-link */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* Afbeelding vult breedte */
.card__image-container {
    height: 180px; 
    width: 100%; 
    overflow: hidden;
    background-color: #f0f0f0;
}
.card__image-container img { 
    width: 100%; height: 100%; object-fit: cover; 
}

/* Inhoud kaart */
.card__content { 
    padding: 24px; 
    display: flex; flex-direction: column; flex: 1; 
}

.card__title {
    font-size: 1.15rem; 
    margin: 0 0 10px 0; 
    font-family: var(--font-serif);
    line-height: 1.3;
}
.card__title a { color: var(--color-text); font-weight: 700; }
.card__title a:hover { color: var(--color-primary); }

.card__info {
    margin-top: auto; font-size: 0.85rem; color: var(--color-text-light);
}

/* KLIKBAAR MAKEN VAN DE HELE KAART */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* =========================================
   7. BLOG VIEW TOGGLE & LIST VIEW
   ========================================= */

/* Toggle Knoppen */
.view-toggle {
    display: flex; gap: 8px; background: #f0f2f5; padding: 4px; border-radius: 8px;
}
.view-btn {
    border: none; background: transparent; padding: 8px; border-radius: 6px;
    cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center;
}
.view-btn:hover { background: rgba(0,0,0,0.05); color: #000; }
.view-btn.active { background: #fff; color: var(--color-primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* LIST VIEW TRANSFORMATIE */
.cards.list-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cards.list-view .card {
    flex-direction: row; /* Plaatje links, tekst rechts */
    align-items: center;
    min-height: 140px;
    transform: none; /* Geen jump effect */
}
.cards.list-view .card:hover {
    transform: none;
    background-color: #fafafa;
}

.cards.list-view .card__image-container {
    width: 220px; /* Vaste breedte plaatje */
    height: 100%;
    min-height: 140px;
    flex-shrink: 0;
}

.cards.list-view .card__content {
    justify-content: center;
    padding: 10px 30px;
}
.cards.list-view .card__title { font-size: 1.3rem; margin-bottom: 10px; }

/* Mobiele fallback voor List View */
@media (max-width: 650px) {
    .cards.list-view .card { flex-direction: column; }
    .cards.list-view .card__image-container { width: 100%; height: 180px; }
}

/* =========================================
   8. ARTIKELEN (Blog Posts)
   ========================================= */

/* HEADER & LABEL FIX */
.post-header {
    text-align: center;
    margin-top: 120px; /* VEEL RUIMTE VOOR HET MENU */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* DE BADGE STYLING */
.post-label {
    display: inline-block;
    background: rgba(0, 103, 194, 0.1); /* Lichtblauw */
    color: var(--color-primary);         /* Blauwe tekst */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 103, 194, 0.1);
}

.post-title {
    font-size: 3rem;
    font-family: var(--font-serif);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -1.5px;
    color: #111;
}

/* META BLOCK (Foto & Naam) */
.post-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.author-avatar-container {
    width: 54px; height: 54px; flex-shrink: 0;
}
.author-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover; border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.meta-info {
    display: flex; flex-direction: column; text-align: left; line-height: 1.3;
}
.author-name {
    font-size: 1rem; font-weight: 700; color: #111; letter-spacing: -0.3px;
}
.meta-details {
    font-size: 0.85rem; color: var(--color-text-light); font-weight: 500;
}
.meta-details .separator { margin: 0 4px; font-weight: bold; }

/* CONTENT STYLING */
.post-intro { 
    font-size: 1.35rem; color: #333; font-family: var(--font-serif);
    line-height: 1.6; margin: 50px 0; text-align: left;
}
.post-thumbnail { margin-bottom: 60px; }

.post-content h2 { 
    margin-top: 3.5rem; margin-bottom: 1rem; font-size: 1.8rem;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.post-content p { 
    margin-bottom: 1.8rem; font-size: 1.125rem; line-height: 1.75; color: #2c2c2e;
}

/* FOOTER & TAGS */
.post-footer {
    margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--color-border);
}
.tag-pill {
    background: #f1f3f5; color: #555; padding: 8px 18px; border-radius: 100px;
    font-size: 0.85rem; font-weight: 600; display: inline-block;
    margin-right: 8px; margin-bottom: 8px; transition: all 0.2s;
}
.tag-pill:hover {
    background: var(--color-text); color: #fff; transform: translateY(-2px);
}

/* =========================================
   9. FOOTER
   ========================================= */
footer {
    border-top: 1px solid var(--color-border);
    padding: 60px 0; margin-top: 80px; font-size: 0.9rem;
}
.footer-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-socials { display: flex; gap: 15px; }
.footer-socials img { width: 24px; opacity: 0.6; transition: 0.2s; }
.footer-socials img:hover { opacity: 1; }

/* =========================================
   10. MOBIEL MENU (OVERLAY)
   ========================================= */
@media (max-width: 800px) {
    nav { justify-content: space-between; }
    .hidemobile, #navigation .menu { display: none !important; }
    
    .intro h1 { font-size: 2rem; }
    .post-header { margin-top: 100px; }
    .post-title { font-size: 2.2rem; }
    .footer-inner { flex-direction: column; gap: 20px; text-align: center; }

    #menuToggle { display: block; position: relative; z-index: 101; }
    #menuToggle input {
        display: block; width: 40px; height: 32px; position: absolute;
        top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2;
    }
    #menuToggle span {
        display: block; width: 28px; height: 3px; margin-bottom: 5px;
        position: relative; background: #1d1d1f; border-radius: 3px; z-index: 1;
        transition: transform 0.4s, opacity 0.4s;
    }
    #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: scale(0.2); }
    #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); }
    #menuToggle input:checked ~ span { transform: rotate(45deg) translate(-2px, -1px); }

    #menu {
        position: fixed; width: 100vw; height: 100vh;
        margin: 0; padding: 120px 0 0 0;
        top: 0; left: 0; background: rgba(255,255,255,0.98);
        list-style-type: none; text-align: center;
        transform: translate(-100%, 0);
        transition: transform 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        display: flex; flex-direction: column; gap: 20px;
    }
    #menu li { font-size: 1.2rem; font-weight: 600; }
    #menuToggle input:checked ~ ul { transform: none; }
}