/* ALGEMENE PAGINA STIJL */

/*  achtergrondkleur, lettertype , standaard tekstkleur */
body {
    background-color: #333333; /* donkergrijs als achtergrond */
    font-family: Arial, sans-serif; /* makkelijk leesbaar lettertype */
    margin: 0; /* haal standaard marge van browser weg */
    color: black; /* gewone tekstkleur */
}

/* header */

/* De bovenkant van de pagina met titel en intro */
header {
    background-color: white; /* header achtergrond wit zodat het opvalt */
    padding: 15px; /* beetje ruimte binnenin header */
    border: 15px solid gray; /* dikke rand rondom header */
    border-radius: 10px; /* ronde hoeken voor een zachte look */
    text-align: center; /* alles in het midden uitlijnen */
}

/* Intro tekst onder de header titel */
#intro {
    font-size: 18px; /* iets groter zodat het makkelijk leesbaar is */
    margin: auto; /* centreren */
    text-align: center; /* tekst in het midden zetten */
}

/* NAVIGATIE*/

/* De navigatie horizontaal naast elkaar zetten */
.nav-list {
    list-style: none; /* geen bullets */
    display: flex; /* items in een rij */
    justify-content: center; /* alles centreren */
    gap: 20px; /* ruimte tussen de links */
    padding: 0; /* standaard padding weg */
}

/* Links in de navigatie mooi en duidelijk maken */
.nav-list li a {
    text-decoration: none; /* geen onderlijn normaal */
    font-weight: bold; /* dikke letters */
    color: black; /* zwarte tekst */
    font-size: 18px; /* iets groter zodat het goed leesbaar is */
}

/* Hover effect zodat je ziet dat je eroverheen gaat */
.nav-list li a:hover {
    text-decoration: underline; /* onderlijn als je eroverheen gaat */
}

/*  SECTION EN LAYOUT */

/* Main content en aside naast elkaar */
div {
    display: flex;
    gap: 20px; /* ruimte tussen main en aside */
    background-color: #f5f5f5; /* lichte achtergrond voor contrast */
    margin: 20px;
    padding: 20px;
    border-radius: 10px; /* ronde hoeken */
    flex-wrap: nowrap; /* blijf naast elkaar op grote schermen */
    align-items: flex-start; /* alles bovenaan uitlijnen */
}

/* Contactpagina  form in het midden en stapel content */
body.contact-page section {
    justify-content: center; /* horizontaal in het midden */
    align-items: center; /* verticaal centreren */
    min-height: 80vh; /* neem bijna hele schermhoogte in */
    margin: 0;
    padding: 0;
    background-color: #333333; /* donkere achtergrond voor contact */
    flex-direction: column; /* stapel onder elkaar */
}

/* Main content krijgt meer ruimte dan aside */
main {
    flex: 3; /* main 3x zo breed als aside */
    display: flex;
    flex-direction: column; /* artikelen onder elkaar */
    gap: 20px; /* ruimte tussen artikelen */
}

/* Apart blokje voor extra info */
aside {
    flex: 1; /* smaller dan main */
    background-color: #f2f2f2; /* lichtgrijs */
    padding: 15px;
    border-radius: 10px;
    margin-top: 0; /* geen extra marge boven */
}

/* ARTIEKELEN */

/* Artikelen apart in witte box met padding */
article {
    background-color: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* zachte schaduw voor diepte  */
}

/* tekststijlen */

/* Kopjes een beetje centreren */
h3,
h4 {
    text-align: center;
    margin-top: 10px; /* ruimte erboven */
}

/* Paragrafen netjes uitlijnen */
p {
    text-align: justify;
    line-height: 1.5; /* regelafstand makkelijker lezen */
}

/* Lijsten iets inspringen */
ul {
    padding-left: 20px;
}

/* AFBEELDINGEN */

/* Alle afbeeldingen */
img {
    width: 100%; /* past in container */
    height: auto; /* behoudt verhouding */
    border-radius: 10px; /* ronde hoeken */
    margin-top: 10px;
}

/* Specifieke stijl voor logo */
.logo {
    height: 400px;
    object-fit: cover; /* vervorm niet */
}

/* tabel */

/* Tabel netjes breed en randen samen */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Alle cellen */
th,
td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

/* Header van tabel iets lichter */
th {
    background-color: #dddddd;
}

/* FORMULIER */

/* Alles in het midden zetten */
form {
    text-align: center;
    margin-top: 20px;
}

/* Inputs, textareas en select boxen */
input,
textarea,
select {
    padding: 8px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid gray;
}

/* Submit knop opvallend maken */
input[type="submit"] {
    background-color: #004d98; /* blauw */
    color: white;
    cursor: pointer;
    margin-right: 5px;
}

/* Reset knop */
input[type="reset"] {
    background-color: #a50044; /* rood */
    color: white;
    cursor: pointer;
    margin-right: 5px;
}

/* Algemene buttons */
input[type="button"] {
    background-color: #555555;
    color: white;
    cursor: pointer;
}

/* Hover effect op alle knoppen */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    opacity: 0.8; /* iets doorzichtig bij hover */
}

/* contact form box*/

/* Formulier witte box met schaduw - aangepast voor div wrapper */
.content-wrapper form {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    width: 400px;
    margin: 0 auto; /* centreren */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Inputs en textarea vullen de breedte van het formulier */
.content-wrapper form input,
.content-wrapper form textarea {
    width: 100%;
    margin-bottom: 15px; /* ruimte onder elk veld */
}

/* Labels netjes boven elk veld */
.content-wrapper form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* FOOTER */

/* Footer onderaan met witte achtergrond */
footer {
    background-color: white;
    color: black;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    border-radius: 5px;
}