* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --black: #000000;
    --beige: rgb(158, 140, 121);
    --darkblue: rgb(8, 8, 35);
    --offwhite: #dfdada;
}


body {
    background-color: var(--darkblue);
    margin-bottom: 30px;
}


/*BUTTON STYLING*/
.over_ons:hover,
.onze_projecten:hover,
.contact:hover {
    border-bottom: 1px solid var(--beige);
}
/*EINDE BUTTON STYLES*/



/*BEGIN NAVBAR CSS*/
.navbar {
    border-bottom: 1px solid var(--beige);
    width: 100%;
    height: 100px;
    display: flex;
    position: relative;             /* nodig voor de absolute dropdown */
    z-index: 50;
}

.left-navbar {
    flex: 2;
    display: flex;
    align-items: center;
}

.Logo {
    width: 55%;
    height: 100%;
    margin-left: 20px;
}

.right-navbar {
    height: 100%;
    flex: 5;
    justify-content: end;
    align-items: center;
    display: flex;
}

.over_ons,
.onze_projecten,
.contact {
    margin-right: 35px;
    text-decoration: none;
    border: none;
    background-color: transparent;
    color: var(--beige);
    font-size: 17px;
    cursor: pointer;
}


/* ========================================
   HAMBURGER — basis (verborgen op desktop)
   ======================================== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 14px;
    width: 52px;
    height: 52px;
    margin-right: 12px;
    margin-left: auto;
    transition: opacity 0.3s ease;
    z-index: 60;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger span {
    display: block;
    flex-shrink: 0;                 /* anders krimpen ze naar 0 in flex-column */
    height: 2px;
    width: 26px;
    background: var(--beige);
    margin: 4px 0;
    transition: transform 0.4s ease, opacity 0.3s ease, width 0.4s ease;
    transform-origin: center;
}

/* middelste lijntje is iets korter — luxe detail */
.hamburger span:nth-child(2) {
    width: 18px;
    margin-left: auto;
    margin-right: 0;
    align-self: flex-end;
}

/* hamburger animeert naar een X als 'm open is */
.hamburger.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
    width: 26px;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
    width: 26px;
}
/*EINDE NAVBAR CSS*/


/*
====================================================
RESPONSIVE — ULTRAWIDE (≥ 1920px)
body blijft full-width zodat de hero edge-to-edge
loopt; alleen de inner-containers worden begrensd
====================================================
*/
@media (min-width: 1920px) {

    /* navbar gecentreerd in een container — niet uit elkaar getrokken */
    .navbar {
        max-width: 1900px;
        margin: 0 auto;
        padding: 0 2.5rem;
    }

    .Logo {
        width: 45%;
        max-width: 280px;
    }

    .over_ons,
    .onze_projecten,
    .contact {
        font-size: 18px;
        margin-right: 45px;
    }
}


/*
====================================================
RESPONSIVE — TABLET / IPAD + TELEFOON (≤ 1024px)
hamburger actief, menu wordt elegante slide-down
====================================================
*/
@media (max-width: 1024px) {

    .navbar {
        height: 85px;
    }

    /* LOGO: vaste grootte zodat hij niet uitrekt
       als de flex-verhoudingen wegvallen */
    .left-navbar {
        flex: 0 0 auto;             /* niet meer rekken */
    }

    .Logo {
        width: auto;
        height: auto;
        max-height: 56px;
        margin-left: 22px;
        object-fit: contain;
    }

    /* HAMBURGER zichtbaar */
    .hamburger {
        display: flex;
    }

    /* MENU = slide-down dropdown */
    .right-navbar {
        position: absolute;
        top: 85px;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;                /* override de desktop height: 100% */
        flex: none;                  /* override de desktop flex: 5 */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        background: var(--darkblue);
        border-bottom: 1px solid var(--beige);

        /* slide-down via max-height i.p.v. display: none */
        max-height: 0;
        overflow: hidden;
        padding: 0;
        opacity: 0;
        transition:
            max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.4s ease,
            padding 0.5s ease;

        z-index: 40;
    }

    .right-navbar.active {
        max-height: 480px;
        opacity: 1;
        padding: 8px 0 24px;
    }

    /* LINKS in het dropdown menu — luxe stijl */
    .over_ons,
    .onze_projecten,
    .contact {
        margin: 0;
        padding: 22px 32px;
        width: 100%;

        font-family: 'Libre Baskerville', serif;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        text-align: center;
        color: var(--beige);

        border-bottom: 1px solid rgba(158, 140, 121, 0.12);

        /* zachte fade-in per item */
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity 0.4s ease,
            transform 0.4s ease,
            background 0.3s ease,
            letter-spacing 0.4s ease,
            color 0.3s ease;
    }

    .right-navbar.active .over_ons,
    .right-navbar.active .onze_projecten,
    .right-navbar.active .contact {
        opacity: 1;
        transform: translateY(0);
    }

    /* getrapte vertraging per item — luxe gevoel */
    .right-navbar.active .over_ons       { transition-delay: 0.10s, 0.10s, 0s, 0s, 0s; }
    .right-navbar.active .onze_projecten { transition-delay: 0.18s, 0.18s, 0s, 0s, 0s; }
    .right-navbar.active .contact        { transition-delay: 0.26s, 0.26s, 0s, 0s, 0s; }

    /* laatste link geen scheidingslijn */
    .right-navbar .contact {
        border-bottom: none;
    }

    /* hover/tap: subtiele beige achtergrond + bredere letter-spacing */
    .over_ons:hover,
    .onze_projecten:hover,
    .contact:hover,
    .over_ons:active,
    .onze_projecten:active,
    .contact:active {
        background: rgba(158, 140, 121, 0.06);
        color: var(--offwhite);
        letter-spacing: 0.35em;
        border-bottom: 1px solid rgba(158, 140, 121, 0.12); /* overschrijft de globale */
    }

    .right-navbar .contact:hover,
    .right-navbar .contact:active {
        border-bottom: none;
    }
}


/*
====================================================
RESPONSIVE — TELEFOON (≤ 768px)
====================================================
*/
@media (max-width: 768px) {

    .Logo {
        max-height: 48px;
        margin-left: 18px;
    }

    .hamburger {
        margin-right: 8px;
    }

    .over_ons,
    .onze_projecten,
    .contact {
        font-size: 0.78rem;
        padding: 20px 24px;
        letter-spacing: 0.28em;
    }
}


/*
====================================================
RESPONSIVE — KLEINE TELEFOON (≤ 480px)
====================================================
*/
@media (max-width: 480px) {

    .Logo {
        max-height: 42px;
        margin-left: 16px;
    }

    .over_ons,
    .onze_projecten,
    .contact {
        font-size: 0.72rem;
        padding: 18px 20px;
    }
}