/* BASIS */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    background-color: #f3eee7;
    color: #2b2118;
}

/* BOVENBALK */
header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 7%;
    background-color: rgba(7, 22, 42, 0.96);
    border-bottom: 1px solid rgba(184, 137, 62, 0.5);
}

.logo {
    color: #d2ad6a;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    color: #f5eee3;
    text-decoration: none;
    font-size: 16px;
}

nav a:hover {
    color: #d2ad6a;
}

/* OPENING MET FRANSE LELIE */
.hero {
    min-height: 78vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 7%;

    background:
        linear-gradient(
            rgba(4, 14, 29, 0.56),
            rgba(4, 14, 29, 0.72)
        ),
        url("achtergrond.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    text-align: center;
    color: white;
}

.hero-content {
    max-width: 850px;
    padding: 45px;

    background-color: rgba(5, 16, 31, 0.55);
    border: 1px solid rgba(210, 173, 106, 0.6);
    border-radius: 4px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.kleine-titel {
    margin: 0 0 18px;
    color: #d9b978;
    font-size: 14px;
    letter-spacing: 4px;
}

.hero h1 {
    margin: 0 0 20px;
    font-size: clamp(46px, 7vw, 82px);
    line-height: 1.05;
    font-weight: normal;
    color: #fffaf2;
}

.hero p {
    margin: 0 auto 30px;
    max-width: 700px;
    font-size: 20px;
    line-height: 1.7;
    color: #f0e9df;
}

/* KNOPPEN */
.knop {
    display: inline-block;

    padding: 14px 25px;

    background-color: #b8893e;
    color: white;

    text-decoration: none;
    border: 1px solid #d2ad6a;
    border-radius: 2px;

    transition: 0.2s ease;
}

.knop:hover {
    background-color: #d2ad6a;
    color: #152238;
    transform: translateY(-2px);
}

/* ALGEMENE SECTIES */
.sectie {
    padding: 90px 7%;
    text-align: center;
}

.sectie h2 {
    margin-top: 0;
    margin-bottom: 20px;

    font-size: 42px;
    font-weight: normal;
    color: #4a2f1d;
}

.intro,
.sectie > p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;

    font-size: 18px;
    line-height: 1.7;
}

/* COLLECTIE */
.collectie-grid {
    max-width: 1250px;
    margin: 55px auto 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.kaart {
    overflow: hidden;

    background-color: #fffaf4;
    border: 1px solid #d8c7b2;

    text-align: left;

    box-shadow: 0 8px 24px rgba(70, 50, 35, 0.08);
}

.foto-placeholder {
    height: 250px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #d9d0c5;
    color: #75695d;

    font-size: 18px;
}

.kaart h3 {
    margin: 25px 25px 12px;

    font-size: 25px;
    font-weight: normal;
    color: #4a2f1d;
}

.kaart p {
    margin: 0 25px 20px;
    line-height: 1.6;
}

.kaart a {
    display: inline-block;
    margin: 0 25px 28px;

    color: #8a622d;
    font-weight: bold;
    text-decoration: none;
}

/* RESTAURATIE */
.donker {
    background-color: #101f33;
    color: #eee5d8;
}

.donker h2 {
    color: #d2ad6a;
}

.licht {
    margin-top: 20px;
}

/* CONTACT */
.contact {
    background-color: #e6dbcc;
}

/* FOOTER */
footer {
    padding: 30px 7%;

    background-color: #07162a;
    color: #cbbca8;

    text-align: center;
    font-size: 14px;
}

/* MOBIEL */
@media (max-width: 800px) {

    header {
        flex-direction: column;
        gap: 15px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .hero {
        min-height: 70vh;
        background-attachment: scroll;
    }

    .hero-content {
        padding: 30px 20px;
    }

    .collectie-grid {
        grid-template-columns: 1fr;
    }

    .sectie {
        padding: 65px 6%;
    }
}