:root {
    --primary-color: forestgreen;
    --primary-color-light: rgba(34, 139, 34, 0.8);
    --secondary-color: orange;
}

body {
    font-family: system-ui, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
}

.container, footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

header {
    display: flex;
    align-items: center;
    gap: 2rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}
nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: var(--secondary-color);
}

a.active {
    font-weight: bold;
    text-decoration: underline;
}

.muted {
    color: #666;
}

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

button {
    background-color: var(--secondary-color);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 16px;
}

/* Hover: iets lichtere kleur */
button:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 85%, white);
}

/* Active: lijkt ingedrukt */
button:active {
    background-color: color-mix(in srgb, var(--secondary-color) 75%, white);
    transform: scale(0.97); /* klein beetje kleiner om indruk-effect te geven */
}

textarea, input {
    width: 278px;
    padding: 10px;
    background: #f9f9f9;
    border: solid 1px #d3d3d3;
}
/* --- header layout --- */
header.container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo links, nav rechts */
}

header.container nav {
    margin-left: auto;     /* duw nav naar rechts */
    position: relative;    /* anker voor z-index */
}

/* --- hamburger icon --- */
.nav__toggle {
    cursor: pointer;
    display: none;         /* alleen op mobiel tonen */
    position: relative;
    z-index: 2;            /* boven het overlay-menu blijven */
}
.nav__burger {
    position: relative; display: inline-block; width: 24px; height: 2px; background: currentColor;
}
.nav__burger::before, .nav__burger::after {
    content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
}
.nav__burger::before { transform: translateY(-6px); }
.nav__burger::after  { transform: translateY( 6px); }

/* kruisje wanneer open */
#nav-toggle:checked + .nav__toggle .nav__burger { background: transparent; }
#nav-toggle:checked + .nav__toggle .nav__burger::before { transform: rotate(45deg); top: 0; }
#nav-toggle:checked + .nav__toggle .nav__burger::after  { transform: rotate(-45deg); top: 0; }

/* --- menu basis --- */
.nav__list {
    list-style: none; margin: 0; padding: 0;
}

/* --- mobiel: overlay-menu over hele breedte/hoogte --- */
@media (max-width: 768px) {
    .nav__toggle { display: inline-flex; align-items: center; }

    .nav__list {
        display: none; /* standaard ingeklapt */
    }

    /* open = fullscreen overlay dat ook over het logo valt */
    #nav-toggle:checked ~ .nav__list {
        display: block;
        position: fixed;
        inset: 0;                  /* top/right/bottom/left = 0 */
        width: 100vw;
        height: 100vh;
        background: #fff;          /* kies je eigen achtergrond */
        padding: 80px 16px 24px;   /* ruimte boven voor het icoon */
        z-index: 1;                /* onder het icoon, boven de rest */
        overflow-y: auto;
    }

    .nav__list li a {
        display: block;
        padding: 14px 0;
        font-size: 1.1rem;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }
}

/* --- desktop: hamburger weg, menu altijd zichtbaar rechts --- */
@media (min-width: 769px) {
    .nav__toggle { display: none; }
    .nav__list { display: flex; gap: 1rem; align-items: center; }
}

/* Desktop: menu links uitlijnen, naast het logo */
@media (min-width: 769px) {
    header.container {
        justify-content: flex-start;  /* niet meer space-between */
        gap: 1.5rem;                  /* ruimte tussen logo en menu */
    }

    header.container nav {
        margin-left: 0;               /* nav niet naar rechts duwen */
    }

    .nav__toggle {
        display: none;                /* hamburger verbergen op desktop */
    }

    .nav__list {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start;  /* expliciet links uitlijnen */
    }
}

img.responsive-align {
    display: block;           /* nodig voor auto-marges */
    margin-inline: auto;      /* mobiel: centreren */
    max-width: 100%;
    height: auto;
}

@media (min-width: 769px) {
    img.responsive-align {
        /* desktop: rechts uitlijnen */
        display: inline;
        float: right;
        margin-inline-start: auto;
        margin-inline-end: 0;
    }
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 0;
}
.footer__left,
.footer__right { display: flex; align-items: center; gap: .75rem; }
.footer__center {
    flex: 1;
    text-align: center;
    font-size: .95rem;
}

/* Socials */
.social-link { display: inline-flex; line-height: 0; }
.social-link svg { width: 24px; height: 24px; fill: currentColor; transition: opacity .15s ease; }
.social-link:hover { opacity: .8; }

/* Merkkleuren */
.social-link.facebook { color: #1877F2; }   /* Facebook blauw */
.social-link.instagram { color: #E4405F; }  /* Instagram primair (ipv gradient) */

/* Mobiel: alles centreren en stapelen */
@media (max-width: 640px) {
    .footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .footer__left, .footer__right { justify-content: center; }
}

a.cta {
    display: block;                 /* maakt het anker een blok */
    width: fit-content;              /* knop zo breed als nodig voor de tekst */
    margin: 16px auto 0 auto;
    background-color: var(--secondary-color);
    padding: 8px 20px;
    border: none;
    cursor: pointer;
    color: black;                             /* tekstkleur zoals bij knoppen */
    text-decoration: none;                    /* link-underline weghalen */
    //border-radius: 4px;                        /* optioneel, als je knoppen afgerond zijn */
    transition: background-color 0.2s, transform 0.1s;
}

/* Hover: iets lichtere kleur */
a.cta:hover {
    background-color: color-mix(in srgb, var(--secondary-color) 85%, white);
}

/* Active: indruk-effect */
a.cta:active {
    background-color: color-mix(in srgb, var(--secondary-color) 75%, white);
    transform: scale(0.97);
}