/* ============================================================
   style.css — Algemene stijlen voor de hele website
   Auteur: Dio Beunder
============================================================ */

/* CSS RESET: zorgt dat elke browser de pagina hetzelfde weergeeft */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basis stijl voor de hele pagina: lettertype, regelafstand en achtergrondkleur */
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #000;
    background-color: #f5f5f0;
}

/* ============================================================
   NAVIGATIE: balk bovenaan met links naar andere pagina's
============================================================ */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* Navigatiebalk: home links, rest rechts */
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f0eedc;
    padding: 0.3rem 2rem;
   
}

/* Home knop links in de navigatie */
.navHome {
    text-decoration: none;
    padding-left: 0rem;
}

/* Navigatielinks op een rij rechts */
nav ul {
    display: flex;
    gap: 11rem;
    list-style: none;
    padding: 0;
    margin-right: 12rem;
}

/* Stijl van alle navigatielinks: blauw, vet en zonder onderstreping */
nav a {
    text-decoration: none;
    color: #0000ff;
    font-weight: bold;
    font-size: 1.3rem;
    transition: opacity 0.3s;
}

/* Link wordt doorzichtig als je er met de muis overheen gaat */
nav a:hover {
    opacity: 0.7;
}

/* Ruimte onder de navigatie zodat de inhoud er niet achter verdwijnt */
main {
    margin-top: 80px;
}

/* ============================================================
   HERO SECTIE: grote afbeelding bovenaan met naam en foto
============================================================ */

/* Hero sectie vult bijna het hele scherm */
.heroSectie {
    min-height: 90vh;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 0;
    position: relative;
}

/* Naam en foto naast elkaar met CSS Grid */
.heroInhoud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Naamtekst links uitgelijnd */
.heroTekst {
    justify-self: start;
    margin-left: calc((100vw - 1400px) / -2);
    padding-left: 2rem;
    margin-top: 11rem;
}

/* Naam boven elkaar met CSS Grid */
.heroNaam {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0;
}

/* Voornaam "DIO" in grote vette letters */
.heroVoornaam {
    font-size: 20rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.9;
}

/* Achternaam "Beunder" in sierlijk blauw schrift, overlapt met voornaam */
.heroAchternaam {
    font-size: 22rem;
    font-family: "sloop-script-two", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #0000ff;
    margin-top: -14rem;
    position: relative;
    z-index: 1;
    margin-left: 4rem;
}

/* Profielfoto naast de naam */
.heroFoto {
    justify-self: start;
    margin-left: -24rem;
    margin-top: -15rem;
}

/* Maximale breedte van de profielfoto */
.heroFoto img {
    max-width: 600px;
    height: auto;
    display: block;
}

/* Pijl naar beneden met een stuiterende animatie */
.scrollPijl {
    text-align: center;
    padding-bottom: 2rem;
    animation: bounce 2s infinite;
}

/* Animatie voor de stuiterende pijl */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* ============================================================
   OVER MIJ SECTIE: introductietekst met knop naar about me
============================================================ */

/* Lichte achtergrond voor de over mij sectie */
.overMij {
    background-color: #fffef8;
    padding: 4rem 2rem;
}

/* Tekst en knop naast elkaar met CSS Grid */
.overMijInhoud {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr auto;
    gap: 3rem;
    align-items: start;
}

/* Introductietekst */
.overMijTekst {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 800px;
}

/* Knop "read more about me": zwart met afgeronde hoeken */
.leesMeerKnop {
    background-color: #000;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
    white-space: nowrap;
}

/* Knop wordt donkergrijs als je er overheen gaat */
.leesMeerKnop:hover {
    background-color: #333;
}

/* ============================================================
   RECENT WERK SECTIE: drie voorbeeldwerken met portfolioknop
============================================================ */

/* Recent werk sectie met maximale breedte */
.recentWerk {
    padding: 5rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Sectietitel boven het raster gecentreerd */
.recentWerkTitel {
    text-align: center;
    margin-bottom: 4rem;
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
}

/* Groot vet woord "RECENT" */
.recentWerkTitelBold {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 0.9;
}

/* Sierlijk woord "Work" in blauw */
.recentWerkTitelScript {
    font-size: 6rem;
    font-family: "sloop-script-two", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #0000ff;
    margin-top: -4rem;
    margin-left: 4rem;
}

/* Drie werkvakken naast elkaar met CSS Grid */
.recentWerkRaster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Afbeeldingen vullen het hele vak */
.recentWerkRaster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Grijs vak voor een werkafbeelding */
.recentWerkItem {
    aspect-ratio: 3 / 4;
    background-color: #e8e8e8;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Knop "See my portfolio": zwart met afgeronde hoeken */
.portfolioKnop {
    display: block;
    width: fit-content;
    margin: 0 auto;
    background-color: #000;
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* Knop wordt donkergrijs als je er overheen gaat */
.portfolioKnop:hover {
    background-color: #333;
}

/* ============================================================
   VOETTEKST: contactgegevens onderaan de pagina
============================================================ */

/* Voettekst met achtergrondkleur en ruimte */
footer {
    background-color: #f5f5f0;
    padding: 3rem 2rem;
    margin-top: 4rem;
}

/* Instagram en e-mail naast elkaar gecentreerd */
.contactLinks {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 4rem;
}

/* Icoon en tekst naast elkaar per contactlink */
.contactLink {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #000;
    font-size: 1.1rem;
    transition: opacity 0.3s;
}

/* Link wordt doorzichtig als je er overheen gaat */
.contactLink:hover {
    opacity: 0.7;
}

/* ============================================================
   RESPONSIVE: aanpassingen voor tablets (scherm kleiner dan 1024px)
============================================================ */
@media (max-width: 1024px) {

    /* Naam en foto onder elkaar in plaats van naast elkaar */
    .heroInhoud {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .heroTekst {
        justify-self: center;
        padding-left: 0;
    }

    /* Kleinere lettertypes op tablet */
    .heroVoornaam {
        font-size: 6rem;
    }

    .heroAchternaam {
        font-size: 4rem;
    }

    /* Twee werkvakken naast elkaar op tablet */
    .recentWerkRaster {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tekst en knop onder elkaar op tablet */
    .overMijInhoud {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .leesMeerKnop {
        justify-self: center;
    }
}

/* ============================================================
   RESPONSIVE: aanpassingen voor mobiel (scherm kleiner dan 768px)
============================================================ */
@media (max-width: 768px) {

    /* Navigatielinks onder elkaar op mobiel */
    nav ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        text-align: center;
    }

    /* Nog kleinere lettertypes op mobiel */
    .heroVoornaam {
        font-size: 4rem;
    }

    .heroAchternaam {
        font-size: 3rem;
    }

    .recentWerkTitelBold {
        font-size: 3rem;
    }

    .recentWerkTitelScript {
        font-size: 2.5rem;
    }

    /* Één werkvak per rij op mobiel */
    .recentWerkRaster {
        grid-template-columns: 1fr;
    }

    /* Contactlinks onder elkaar op mobiel */
    .contactLinks {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contactLink {
        justify-content: center;
    }
}