/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Nunito:wght@400;700&display=swap');

/* --- ECHTE AARDEKLEUREN PALET (ZONDER FEL WIT) --- */
:root {
    --kleur-achtergrond: #EAE0D5;        /* Basis: Warme taupe / zandkleur */
    --kleur-kaart-achtergrond: #F5F1E9;  /* Iets lichtere, gebroken wit voor kaarten */
    --kleur-tekst: #5C4033;             /* Donker, warm bruin (iets zachter) */
    --kleur-titel: #8B4513;             /* Zadelbruin, voor titels (blijft) */
    --kleur-accent: #A0522D;            /* Sienna, voor knoppen en accenten */
    --kleur-wit-tekst: #FFFFFF;         /* Alleen voor tekst op donkere knoppen */
}

/* --- Algemene Stijlen --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    line-height: 1.7;
}
.container { max-width: 1100px; margin: auto; padding: 0 20px; }
h1, h2, h3 { font-family: 'Poppins', sans-serif; color: var(--kleur-titel); margin-bottom: 20px; line-height: 1.3; }
section { padding: 80px 0; }
p { margin-bottom: 15px; }

/* --- Navigatiebalk --- */
.navbar {
    background: var(--kleur-kaart-achtergrond);
    padding: 1rem 0;
    position: sticky; top: 0; z-index: 100;
    border-bottom: 2px solid #DCD0C0;
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.navbar .logo { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--kleur-titel); text-decoration: none; }
.navbar .nav-links { list-style: none; display: flex; }
.navbar .nav-links li { margin-left: 25px; }
.navbar .nav-links a { text-decoration: none; color: var(--kleur-tekst); font-weight: 600; transition: color 0.3s; padding-bottom: 5px; }
.navbar .nav-links a:hover { color: var(--kleur-accent); }
.navbar .nav-links a.active { color: var(--kleur-titel); border-bottom: 2px solid var(--kleur-accent); }

/* --- Algemene elementen --- */
.btn { display: inline-block; background: var(--kleur-accent); color: var(--kleur-wit-tekst); padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: 700; transition: transform 0.3s, background-color 0.3s; }
.btn:hover { background: var(--kleur-titel); transform: translateY(-3px); }
.section-intro { text-align: center; max-width: 700px; margin: 0 auto 50px auto; }

/* --- Specifieke Pagina-onderdelen --- */

/* Hero Sectie (Home) */
#home-hero { 
    background-image: url('images/tafel foto.jpg'); 
    background-size: cover; 
    background-position: center; 
    height: 60vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    position: relative; 
    padding: 0 20px; 
}
#home-hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(92, 64, 51, 0.4); }
.hero-content { background: rgba(245, 241, 233, 0.92); padding: 40px; border-radius: 20px; max-width: 700px; z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.hero-content h1 { font-size: 3rem; }

/* Intro Sectie (Home) */
.home-intro-grid {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}
.home-intro-tekst { flex: 1; }

/* "Waarom" Lijst (Home) */
.waarom-lijst { list-style: none; padding: 0; }
.waarom-lijst li { background: var(--kleur-kaart-achtergrond); padding: 20px; border-radius: 10px; margin-bottom: 15px; display: flex; align-items: center; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.waarom-lijst li:hover { transform: scale(1.02); }
.waarom-lijst li::before { content: '🌟'; font-size: 1.5rem; margin-right: 15px; }

/* Over Ons Pagina - Desktop/Algemeen */
#over-ons { background-color: var(--kleur-kaart-achtergrond); }
.over-ons-grid { 
    display: flex; 
    gap: 50px; 
    align-items: center; 
} /* Dit maakt hem horizontaal op desktop */

/* Gecombineerde stijl voor alle grote foto's op de site */
.home-intro-foto,
.foto-tante-container {
    flex: 0 0 300px;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Gedeeld hover-effect voor alle grote foto's */
.home-intro-foto:hover,
.foto-tante-container:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 12px 25px rgba(92, 64, 51, 0.2);
}

/* Stijl voor de IMG tag binnen de fotocontainers */
.home-intro-foto img,
.foto-tante-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.over-ons-tekst { flex: 1; }
.over-ons-tekst .heartbeat-line { width: 120px; height: 40px; margin: -10px 0 20px 0; }
.over-ons-tekst .heartbeat-line path { stroke: var(--kleur-accent); stroke-width: 3; fill: none; }

/* Diensten & Activiteiten Pagina */
.grid-twee-kolom, .grid-drie-kolom { display: grid; gap: 30px; }
.grid-twee-kolom { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-drie-kolom { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kaart { background: var(--kleur-kaart-achtergrond); padding: 30px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.3s; display: flex; flex-direction: column;}
.kaart:hover { transform: translateY(-10px); }
.kaart .emoji { font-size: 2.5rem; margin-bottom: 15px; }
.kaart img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; }

/* Contact Pagina */
.contact-info-groot { background: var(--kleur-kaart-achtergrond); padding: 40px; border-radius: 15px; max-width: 600px; margin: auto; text-align: center; }

/* Footer */
footer { background: var(--kleur-tekst); color: var(--kleur-kaart-achtergrond); text-align: center; padding: 30px 0; margin-top: 40px; }


/* --- Fotogalerij Stijlen (Activiteitenpagina) --- */
#sfeerimpressie {
    background-color: var(--kleur-kaart-achtergrond);
}

/* AANGEPAST: Foto's kleiner gemaakt */
.fotogalerij-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.galerij-item {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-out;
    aspect-ratio: 4 / 3;
}

.galerij-item:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 12px 25px rgba(92, 64, 51, 0.2);
}

/* AANGEPAST: Stijl geldt nu voor foto's EN video's */
.galerij-item img,
.galerij-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- HAMBURGER MENU & RESPONSIVE FIXES --- */

/* Verbergt de checkbox overal */
#menu-toggle {
    display: none;
}

/* Stijl en positionering van het Hamburger-icoon */
.menu-icon {
    display: none; /* Standaard verborgen op desktop */
    font-size: 30px;
    cursor: pointer;
    color: var(--kleur-titel);
    position: absolute; 
    right: 20px;
    top: 15px; 
    z-index: 101; 
}


/* --- MEDIA QUERY VOOR MOBIEL (Max Breedte 768px) --- */
@media (max-width: 768px) {
    
    /* 1. De hamburger knop tonen */
    .menu-icon {
        display: block;
    }

    /* 2. Het hele menu inklappen */
    .navbar .nav-links {
        display: none; /* Verbergt het menu standaard op mobiel */
        flex-direction: column; 
        width: 100%;
        position: absolute;
        top: 67px; 
        left: 0;
        text-align: center;
        background: var(--kleur-kaart-achtergrond);
        border-top: 1px solid #DCD0C0;
        padding: 10px 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 99;
    }
    
    /* Zorg voor padding op de links, nu ze verticaal staan */
    .navbar .nav-links li {
        width: 100%;
        margin: 0;
    }
    .navbar .nav-links a {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .navbar .nav-links li:last-child a {
        border-bottom: none;
    }

    /* 3. De Magie: Menu tonen als de checkbox is aangevinkt */
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }
    
    /* --- Algemene Lay-out Fixes Mobiel --- */
    
    .container {
        padding: 0 15px; 
    }
    
    /* Hero Sectie (tekst en hoogte) */
    #home-hero {
        height: 50vh; 
        padding-bottom: 25px;
        /* Tekst centreren op mobiel (aangezien de foto-fix is verwijderd) */
        align-items: center; 
        padding: 0 20px; 
    }
    .hero-content {
        padding: 30px;
    }
    .hero-content h1 {
        font-size: 2rem; 
    }

    /* Intro Sectie (Foto en Tekst onder elkaar) */
    .home-intro-grid {
        flex-direction: column; 
        gap: 30px;
    }
    
    /* <<< DE FIX VOOR DE OVER ONS PAGINA IS HIER TOEGEVOEGD! >>> */
    .over-ons-grid {
        flex-direction: column; 
        gap: 30px;
    }

    /* Foto's vullen de breedte, maar zijn niet te groot */
    .home-intro-foto,
    .foto-tante-container {
        flex: none; 
        width: 100%; 
        max-width: 400px;
        height: 300px;
        margin: auto;
    }
    
    /* Roosters/Kaarten onder elkaar */
    .grid-twee-kolom, 
    .grid-drie-kolom {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    
    /* Teksten en padding */
    h1, h2, h3 { 
        margin-bottom: 15px; 
    }
    section { 
        padding: 60px 0; 
    }
}