@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@600&display=swap');
/* -----------------------------------------
               Header section 
-------------------------------------------- */
.site-header {
    display: flex;               /* legt een flex-layout vast */
    align-items: center;         /* verticale centrering van items */
    gap: 12px;                   /* ruimte tussen logo en nav links */
    background-color: #958791; /* achtergrondkleur header */
    padding: 10px;               /* binnenruimte rond headerinhoud */
}

.site-header nav {
    display: flex;                 /* horizontale rij van links */
    flex: 1;                       /* nav neemt resterende ruimte in */
    justify-content: space-evenly; /* gelijkmatige spacing tussen links */
    align-items: center;           /* verticale centrering van links */
}

.site-header nav a {
    text-decoration: none;  /* geen onderstreping standaard */
    color: black;         /* linkkleur */
}
.site-header nav a:hover {
    text-decoration: underline;  /* onderstreping bij hover */
}

/* Verberg de checkbox zelf — dit is de onzichtbare schakelaar die de nav opent/sluit */
.nav-toggle {
    display: none;
}

/* Hamburger-knop (☰): standaard verborgen op grote schermen */
.nav-burger {
    display: none;        /* niet zichtbaar boven 640px */
    font-size: 1.6rem;    /* grote tekst zodat het ☰ symbool goed zichtbaar is */
    cursor: pointer;      /* wijstaanwijzer zodat het klikbaar lijkt */
    margin-left: auto;    /* duwt de knop helemaal naar rechts in de header */
    padding: 4px 8px;     /* kleine binnenruimte rondom het symbool */
    user-select: none;    /* voorkomt dat de gebruiker het symbool per ongeluk selecteert */
}

@media (max-width: 640px) {

    /* Toon de hamburger-knop enkel op kleine schermen */
    .nav-burger {
        display: block;
    }

    /* Verberg de navigatie standaard op mobiel */
    .site-header nav {
        display: none;                          /* nav is onzichtbaar totdat de checkbox aangevinkt is */
        flex-direction: column;                 /* links onder elkaar in plaats van naast elkaar */
        position: fixed;                        /* zweeft boven de rest van de pagina, scrollt niet mee */
        top: 0;                                 /* begint helemaal bovenaan het scherm */
        right: 0;                               /* staat tegen de rechterkant van het scherm */
        height: 100vh;                          /* vult de volledige schermhoogte */
        width: 220px;                           /* vaste breedte van het uitschuifpaneel */
        background-color: #958791;              /* zelfde kleur als de header voor consistentie */
        padding: 60px 20px 20px;               /* extra ruimte bovenaan zodat links niet achter de header vallen */
        box-shadow: -4px 0 12px rgba(0,0,0,0.2); /* schaduw aan de linkerkant om het paneel te laten 'zweven' */
        z-index: 999;                           /* zorgt dat het menu boven alle andere elementen staat */
        gap: 16px;                              /* ruimte tussen de navigatielinks */
    }

    /* Toon de nav wanneer de checkbox aangevinkt is */
    .nav-toggle:checked ~ nav {
        display: flex;    /* ~ is de "sibling selector": past nav aan als de checkbox ervóór aangevinkt is */
    }

    /* Verberg het ☰ symbool wanneer het menu open is */
    .nav-toggle:checked ~ label.nav-burger {
        font-size: 0;       /* maakt de originele tekst onzichtbaar (grootte 0) */
        position: fixed;    /* zweeft boven het menu */
        right: 20px;        /* 20px van de rechterkant */
        top: 10px;          /* 10px van de bovenkant */
        z-index: 1000;      /* hoger dan het nav-paneel zodat de knop altijd klikbaar blijft */
    }

    /* Toon een ✕ via ::before wanneer het menu open is */
    .nav-toggle:checked ~ label.nav-burger::before {
        content: '\2715';   /* unicode voor het × sluit-symbool */
        font-size: 1.6rem;  /* zelfde grootte als het originele ☰ symbool */
    }
}

/* -----------------------------------------
               Algemeen 
-------------------------------------------- */
h1, h2, h3 {
    color: #512940;                         /* accentkleur voor titels */
    font-family: 'Playfair Display', serif;   /* sierlijk extern lettertype */
}

body {
    font-family: 'Lato', Arial, sans-serif;  /* basis lettertype */
    margin: 0;                               /* verwijder standaard marge */
    min-height: 100vh;                       /* minimaal schermhoogte */
    display: flex;                           /* zet hoofdlayout als flex (kolom) */
    flex-direction: column;                  /* inhoud onder elkaar */
}

.content {
    background-color: #f2eef2;    /* lichte achtergrond voor content */
    margin: 10px;                   /* buitenruimte rond contentblok */
    padding: 10px;                  /* binnenruimte in contentblok */
    border-radius: 8px;             /* afgeronde hoeken */
}

/* -----------------------------------------
               Homepagina 
-------------------------------------------- */
.lab-cards {
    display: grid;                                                  /* grid layout: verdeel items automatisch in rijen en kolommen */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    /* auto-fit: vul alle beschikbare ruimte in
                                                                    minmax(250px, 1fr): elke kolom is minstens 250px breed, groeit mee met beschikbare ruimte
                                                                    repeat: herhaal dit patroon zoveel keer als nodig */
    gap: 20px;                                                      /* ruimte tussen alle kaarten (horizontaal en verticaal) */
    margin: 20px 0;                                                 /* buitenruimte: 20px boven en onder, 0px links en rechts */
}

.card {
    background-color: white;                /* witte achtergrond voor elke kaart */
    padding: 15px;                            /* binnenruimte in elke kaart */
    border-radius: 8px;                       /* afgeronde hoeken voor een zachtere uitstraling */
    border-left: 5px solid #b22d64;         /* linker randje van 5px voor accent */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  /* schaduw onder de kaart: 2px naar beneden, 4px vervaging, zwart met 10% doorzichtigheid */
}

/* -----------------------------------------
        voorstelling van de hobby
-------------------------------------------- */
.foto-amy {
    display: flex;               /* flex layout voor horizontale uitlijning */
    gap: 20px;                   /* ruimte tussen tekst en afbeelding */
    align-items: flex-start;     /* tekst en foto bovenaan uitlijnen */
}

.foto-amy img {
    width: 500px;                /* vaste breedte voor foto */
    flex-shrink: 0;              /* foto kleiner niet maken */
    border-radius: 8px;          /* afgeronde hoeken */
}

.foto-amy-text {
    flex: 1;                     /* tekst neemt rest van ruimte */
}

.intro-section a {
    color: #b22d64;            /* accentkleur voor links in intro */
    text-decoration: none;       /* geen onderstreping standaard */
}

.intro-section a:hover {
    text-decoration: underline;  /* onderstreping bij hover */
}   

/* -----------------------------------------
               Fotogalerij 
-------------------------------------------- */
.steps-container {
    display: grid;                                                   /* stappen naast elkaar */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));     /* auto-fit: vul alle beschikbare ruimte in minmax(260px, 1fr): elke stap is minstens 260px breed, groeit mee met beschikbare ruimte
                                                                        repeat: herhaal dit patroon zoveel keer als nodig */
    gap: 14px;                                                       /* ruimte tussen stappen */
}   

.step {
    margin: 0;                        /* verwijder standaard marge van figcaption */
    background-color: #f8f4f7;      /* lichte roze achtergrond voor elke stap */
    border: 1px solid #e3c9d6;      /* dunne roze rand rond elke stap */
    border-radius: 8px;               /* afgeronde hoeken voor zachtere uitstraling */
    overflow: hidden;                 /* voorkomt dat inhoud buiten de stap valt bij afgeronde hoeken */
}

.step img {
    width: 100%;        /* afbeelding vult de volledige breedte van de stap */
    aspect-ratio: 1/1;  /* zorgt ervoor dat de afbeelding vierkant blijft, ongeacht de breedte */
    object-fit: cover;  /* zorgt ervoor dat de afbeelding de hele ruimte vult zonder vervorming, bijsnijden indien nodig */
    display: block;     /* voorkomt ongewenste ruimte onder de afbeelding */
}

.step figcaption {
    padding: 12px;     /* binnenruimte rond de tekst in de figcaption */
}

.step h3 {
    margin-top: 0;        /* verwijder standaard marge (anders te veel witruimte) */                 
    color: #b22d64;     /* accentkleur voor stap titels */
    font-size: 1rem;      /* tekstgrootte voor stap titels */
}

.step p {
    line-height: 1.6;   /* verhoogde regelafstand voor betere leesbaarheid */
}
/* -----------------------------------------
                  Tips 
-------------------------------------------- */
.tips-content > p {
    border: 1px solid #e3c9d6;  /* dunne roze rand rond <p> box */
}

.tips-content h2 {
    counter-increment: tip;             /* verhoog teller met 1 bij elke h2 */
    position: relative;                 /* nodig om ::before exact op deze h2 te positioneren */
    margin: 20px 0 0;                   /* ruimte boven elke sectietitel */
    padding: 12px 12px 12px 50px;       /* extra linkerpedding voor het nummer */
    background-color: #ffffff;        /* witte achtergrond voor de titel */
    border-left: 5px solid #b22d64;   /* accentlijn links */
    border-radius: 10px 10px 0 0;       /* afgeronde hoeken alleen bovenaan */
}

.tips-content h2::before {              /* Nummerbolletje vóór elke h2 */
    content: counter(tip);              /* toon huidige waarde van de 'tip' teller */
    position: absolute;                 /* absolute positionering ten opzichte van de h2 */
    left: 14px;                         /* 14px van de linkerkant van de h2 */
    top: 50%;                           /* verticaal midden van h2 (van boven) */
    transform: translateY(-50%);        /* corrigeert zodat bol exact gecentreerd staat (van onder) */
    width: 26px;                        /* vaste breedte voor bolletje */
    height: 26px;                       /* vaste hoogte voor bolletje */
    line-height: 26px;                  /* tekst verticaal centreren binnen de bol */
    text-align: center;                 /* tekst horizontaal centreren binnen de bol */
    border-radius: 50%;                 /* maakt van de vierkante box een cirkel */
    background-color: #f2d7e4;        /* lichte roze achtergrond voor het bolletje */
    color: #b22d64;                   /* accentkleur voor het nummer in het bolletje */
    font-weight: bold;                  /* maakt het nummer vetgedrukt voor betere leesbaarheid */
}

/* 
Paragraaf direct na h2 (h2 + p):
- vormt het onderste deel van de "kaart"
- sluit visueel aan op de h2 erboven
*/
.tips-content h2 + p {
    margin: 0 0 14px;                   /* geen marge boven, wel ruimte onder */
    padding: 12px;                      /* binnenruimte in de paragraaf */
    background-color: #ffffff;        /* witte achtergrond voor de paragraaf */
    border-top: 1px dashed #dba8be;   /* dunne stippellijn als scheiding tussen h2 en p */
    border-radius: 0 0 10px 10px;       /* afgeronde hoeken alleen onderaan, sluit aan op h2 */
}

.tips-content h2 + p:hover {
    background-color: #fcf8fa;        /* Hover-effect op de tekstkaart - lichte kleurverandering */
} 
/* -----------------------------------------
                  Contact 
-------------------------------------------- */
.logo {
    width: 30px;     /* vaste breedte */
    height: 30px;    /* vaste hoogte */
    flex: 0 0 auto;  /* voorkomt rekken in flex */
}

#contactlogos {
    display: flex;    /* horizontale rij van logo's */
    gap: 100px;       /* ruime afstand tussen logo's */
}

.contact-formulier {
  display: inline-flex;
  flex-direction: column;                      /* stapel formuliergroepen onder elkaar */
  gap: 1rem;                                   /* ruimte tussen rijen/elementen */
  padding: 1rem;                               /* binnenruimte rond het formulier */
  background-color: rgba(178,45,100,0.08);   /* achtergrondkleur voor formulier */
  border-radius: 8px;                          /* afgeronde hoeken voor zachtere look */
  align-self: flex-start;                      /* voorkomt dat parent het uitrekt */
}

.contact-formulier button {
  align-self: flex-start;        /* zet knop links in plaats van 100% breedte */
  padding: 0.5rem 1rem;          /* verticale/horizontale padding */
  font-size: 1rem;               /* leesbare tekstgrootte */
  max-width: 220px;              /* voorkom te brede knop */
  cursor: pointer;               /* wijstaanwijzer bij hover */
}

.contact-formulier fieldset { /* veldgroeppen kleiner maken */
  align-self: flex-start;     /* shrink-to-fit binnen de parent */
  max-width: 480px;           /* voorkom te brede veldgroepen */
  padding: 0.5rem;            /* binnenruimte rond veldgroep */
  border-radius: 8px;         /* afgeronde hoeken voor zachtere look */
}

/* -----------------------------------------
               footer section 
-------------------------------------------- */
footer {
    background-color: #958791;   /* zelfde kleur als header voor consistentie */
    color: black;                /* tekstkleur footer */
    text-align: center;            /* gecentreerde tekst */
    padding: 2px;                  /* binnenruimte rond tekst */
}

main, .content {
    flex: 1;      /* zorgt ervoor dat footer nr beneden gaat */
}

/* -----------------------------------------
          Responsiviteit (afbeeldingen)
-------------------------------------------- */
/* Standaard (boven 640px): grotere afbeeldingen */
.foto-amy img {
    width: 500px;
    flex-shrink: 0;
}

.step img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Onder 640px: kleinere afbeeldingen + aangepaste layout */
@media (max-width: 640px) {

    /* Hobby pagina: foto onder de tekst ipv naast */
    .foto-amy {
        flex-direction: column;
    }

    .foto-amy img {
        width: 100%;       /* volle breedte op kleine schermen */
        flex-shrink: 1;
    }

    /* Fotogalerij: één kolom */
    .steps-container {
        grid-template-columns: 1fr;
    }

    .step img {
        aspect-ratio: 4/3;  /* iets breder formaat op mobiel */
    }

    /* Lab-kaarten: één kolom */
    .lab-cards {
        grid-template-columns: 1fr;
    }

    /* Contact logo's: kleinere icoontjes */
    #contactlogos {
        gap: 30px;
    }

    #contactlogos img {
        width: 60px;
        height: 60px;
    }

    /* Header nav: kleinere tekst */
    .site-header nav {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.85rem;
    }

    /* Amyloidose grafiek op hobby pagina */
    .foto-amy figure img {
        width: 100%;
        max-width: 100%;
    }
}

/* 
logo's: https://www.flaticon.com/
Kleurpalette:
- #958791 (achtergrondkleur header & footer) - Venus
- #f2eef2 (achtergrondkleur content) - Bon Jour
- #010101 (voor de tekst) - Black
- #ffffff (voor de achtergrond) - White
- #512940 (voor hoofdingen)- Livid Brown
- #b22d64 (accentkleur) - Hibiscus
*/