/* Algemene opmaak */
html, body {
    height: 100%; /* Zorgt ervoor dat html en body de volledige hoogte gebruiken */
}

body {
    background-color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Richting op kolom ingesteld */
    align-items: center;    /* Centreer de kolom */
    min-height: 100vh; /* Gebruik minimale hoogte om de pagina uit te rekken */
}

header {
    width: 60%;
    height: 150px;
    background-color: #444444; /* Donkere achtergrondkleur */
    margin-bottom: 3px;
    box-sizing: border-box;
    position: relative; /* Nodig voor positionering van de absolute tekst */
    overflow: hidden; /* Zorg ervoor dat alles binnen de header blijft */
    flex-shrink: 0; /* Zorg ervoor dat de header zijn hoogte behoudt */
}

.logo {
    width: 100%; /* Laat de afbeelding de volledige breedte van de header gebruiken */
    height: 100%; /* Laat de afbeelding de volledige hoogte van de header gebruiken */
    object-fit: cover; /* Zorg ervoor dat de afbeelding goed past zonder te vervormen */
    object-position: 50% 70%; /* Verschuift de uitsnede handmatig zodat het gras en de huizen perfect binnen het kader vallen */
    position: absolute; /* Maak de afbeelding absoluut ten opzichte van de header */
    top: 0; /* Zet de afbeelding bovenaan */
    left: 0; /* Zet de afbeelding links */
    z-index: 1; /* Zorg ervoor dat de afbeelding onder de tekst staat */
}

.logotekst {
    position: absolute;
    top: 10px;
    right: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(24px, 5.5vw, 54px); /* Schaalt dynamisch tussen 24px en 54px */
    font-weight: bold;
    color: #eeeeee;
    text-shadow: 3px 5px 10px #ff0000;
    text-decoration: none; /* Onderstreping verwijderen */
    z-index: 2; /* Zorg ervoor dat de tekst boven de afbeelding staat */
    white-space: nowrap; /* Voorkomt dat de tekst hard wordt afgebroken over twee regels */
}

.menu {
    --menu-knop-breedte: 135px; /* Definieer de breedte van de knoppen */
    width: 60%;
    height: 30px; /* Hoogte van het menu-blok */
    background-color: #b9121b;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    margin-bottom: 3px;
    box-sizing: border-box;
}

.nav {
    list-style: none; /* Verwijder de standaard lijststijl */
    padding: 0; /* Geen padding */
    margin: 0; /* Geen marge */
    display: flex; /* Gebruik flexbox voor de knoppen naast elkaar */
    padding-left: 100px;
}

.nav li {
    position: relative; /* Nodig voor de positionering van dropdowns */
}

.menu-knop {
    display: inline-block; /* Zorg ervoor dat de knoppen inline worden weergegeven */
    width: var(--menu-knop-breedte); /* Gebruik de gedefinieerde variabele */
    height: 28px; /* Hoogte van de knoppen */
    background-color: #b9121b; /* Zelfde kleur als het menu-blok */
    color: #ffffff; /* Wit voor de tekst */
    border: 1px solid #ffffff; /* Witte rand rondom de knoppen */
    text-align: left; /* Tekst links uitlijnen */
    line-height: 28px; /* Verticaal centreren van de tekst */
    margin: 0; /* Geen marges */
    padding-left: 5px; /* Ruimte vanaf de linker kantlijn */
    position: relative; /* Nodig voor absolute positionering */
    top: -1px; /* Verplaats de knop 1px omhoog */
    cursor: pointer; /* Cursor verandert in pointer bij hover */
    text-decoration: none; /* Geen onderstreping voor de tekst */
}

.menu-knop:hover {
    background-color: #6f0b10; /* Achtergrondkleur bij hover */
}

.menu-dropdown-content {
    display: none; /* Verberg de dropdown-inhoud standaard */
    position: absolute; /* Positioneer absoluut */
    background-color: #b9121b; /* Zelfde kleur als het menu-blok */
    border: 1px solid #ffffff; /* Witte rand rondom */
    z-index: 99; /* Zorg dat het dropdown-menu boven de andere inhoud ligt */
}

.menu-dropdown:hover .menu-dropdown-content {
    display: block; /* Toon dropdown-inhoud bij hover */
    margin-top: -2px;
}

.menu-dropdown-content a {
    display: block; /* Maak de links block-elementen */
    width: calc(var(--menu-knop-breedte) - 7px); /* Gebruik de variabele minus 7px */
    color: #ffffff; /* Witte tekstkleur */
    text-decoration: none; /* Geen onderstreping */
    padding: 5px; /* Ruimte rondom de tekst */
    background-color: #b9121b; /* Zelfde kleur als het menu-blok */
    border: 1px solid #ffffff; /* Witte rand rondom de dropdown-items */
}

.menu-dropdown-content a:hover {
    background-color: #eb333c; /* Kleur bij hover */
}

.hoofdinhoud {
    flex: 1; /* Zorgt ervoor dat de hoofdinhoud de resterende ruimte opvult */
    width: 60%;
    background-color: #9be2dd;
    margin-bottom: 3px;
    box-sizing: border-box;
    padding: 60px;
}

.tussenkop {
    padding: 10px 0;
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: bold;
}

.icoon {
//	margin: 0px 10px;
	padding: 3px 5px;
	background-color: #b9121b;
	color: #9be2dd;
	font-weight: bold;
}


/**** Weertabel ****/
.weertabel {
    width: 80%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.weertabel th {
}

.weertabel tr {
    height: 30px;
}

.weertabel tr.scheiding {
    border-bottom: solid 2px #5d8885;
}

.weertabel tr:nth-child(even) {
    background-color: #afe8e4;
}

.weertabel tr:nth-child(odd) {
    background-color: #7cb5b1;
}

.weertabel td {
    padding: 1px 10px 1px 5px;
}

.weertabel td.linkerkolom {
    padding: 1px 5px 1px 10px;
    text-align: right;
}






/* Maantabel */
.maantabel {
    width: 70%;
    margin: 0 auto; /* Centreert de tabel */
    border-collapse: collapse; /* Voorkomt dubbele randen tussen cellen */
}

.maantabel td {
    border: none; /* Geen randen tussen de cellen */
    padding: 10px; /* Voeg ruimte toe aan de cellen */
}

.maantabel tr:nth-child(odd) {
    background-color: #7cb5b1; /* Oneven rijen */
}

.maantabel tr:nth-child(even) {
    background-color: #afe8e4; /* Even rijen */
}

.maantabel td:last-child {
    text-align: right; /* Rechts uitlijnen voor de laatste kolom */
}

.maantabel td[rowspan="11"] {
    background-color: #5d8885; /* Achtergrondkleur instellen */
    color: white; /* Tekstkleur instellen */
    text-align: center; /* Horizontaal centreren */
    vertical-align: middle; /* Verticaal centreren */
}














/* Stijl voor de vooruitzichtentabelKNMI */
.vooruitzichtentabelKNMI {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9em; /* Maak het lettertype iets kleiner */
}

.vooruitzichtentabelKNMI th {
    background-color: #5d8885;
    color: white;
    padding: 8px;
}

.vooruitzichtentabelKNMI td {
    padding: 8px;
    line-height: 1.5; /* Vergroot de regelafstand */
}

/* Stijl voor de even kolommen */
.vooruitzichtentabelKNMI td:nth-child(even) {
    background-color: #afe8e4;
}

/* Stijl voor de oneven kolommen */
.vooruitzichtentabelKNMI td:nth-child(odd) {
    background-color: #7cb5b1;
}






/**** Waarnemingtabel KNMI ****/
.waarnemingtabelKNMI {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Voeg een marge van 20px boven de tabel toe */
    font-size: 0.9em; /* Maak het lettertype iets kleiner */
}

/* Tijdelijke border voor de cellen */
.waarnemingtabelKNMI th, 
.waarnemingtabelKNMI td {
    padding: 4px; /* Verminder de padding naar 4px */
}

/* Header achtergrondkleur en uitlijning */
.waarnemingtabelKNMI th {
    background-color: #5d8885;
    color: white; /* Witte tekstkleur voor de header */
    text-align: center; /* Centreren van de headerinhoud */
}

/* Standaard uitlijning voor cellen */
.waarnemingtabelKNMI td {
    text-align: center;
}

/* Specifieke uitlijning voor de eerste en tweede kolom */
.waarnemingtabelKNMI td:first-child,
.waarnemingtabelKNMI td:nth-child(2),
.waarnemingtabelKNMI th:first-child,
.waarnemingtabelKNMI th:nth-child(2) {
    text-align: left; /* Links uitlijnen voor de eerste en tweede kolom in header en cellen */
}

/* Achtergrondkleuren voor rijen */
.waarnemingtabelKNMI tr:nth-child(odd) {
    background-color: #7cb5b1; /* Oneven rijen */
}

.waarnemingtabelKNMI tr:nth-child(even) {
    background-color: #afe8e4; /* Even rijen */
}

/* Achtergrondkleur voor de linkerkolom, behalve de header */
.waarnemingtabelKNMI tr td:first-child {
    /* Voeg hier een achtergrondkleur toe indien nodig, anders commentaar verwijderen */
}












/* Opmaak voor de tabel normale waarden KNMI */
.normalentabelKNMI {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Stijl voor de header van de tabel */
.normalentabelKNMI thead th {
    background-color: #5d8885;
    color: white;
    text-align: center;
    padding: 8px;
}

/* Specifieke stijl voor de meest linkse headercel */
.normalentabelKNMI thead th:first-child {
    text-align: left;
}

/* Stijl voor de linkerkolom */
.normalentabelKNMI tbody td:first-child {
    width: 180px;
    background-color: #5ca39e;
    text-align: left;
    padding: 8px;
}

/* Stijl voor de overige kolommen */
.normalentabelKNMI tbody td {
    width: 90px;
    text-align: center;
    padding: 8px;
}

/* Achtergrondkleur voor de even kolommen */
.normalentabelKNMI tbody td:nth-child(even):not(:first-child) {
    background-color: #afe8e4;
}

/* Achtergrondkleur voor de oneven kolommen */
.normalentabelKNMI tbody td:nth-child(odd):not(:first-child) {
    background-color: #7cb5b1;
}






.onderschrift {
    font-size: 10px;
}

.afsluiter {
    width: 60%;
    background-color: #b9121b;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    text-align: center;
    box-sizing: border-box;
    margin-top: auto; /* Duwt de footer naar de onderkant als er weinig inhoud is */
    color: #ffffff; /* Wit voor de tekst */
    font-size: 10px; /* Lettergrootte 10px */
    height: auto; /* Automatische hoogte gebaseerd op inhoud */
    padding: 5px 0; /* Ruimte boven en onder de tekst */
    line-height: 1.5; /* Ruimte tussen de regels */
}

.afsluiter a {
    color: #ffffff; /* Wit voor de links */
    text-decoration: none; /* Verwijdert de standaard onderstreping */
}

.afsluiter a:hover {
    color: #eb333c; /* Kleur bij hover */
}


/* Mobiele weergave - Media Queries */
@media screen and (max-width: 1024px) {
    header, .menu, .hoofdinhoud, .afsluiter {
        width: 100%; /* Maak de volledige lay-out schermvullend op kleinere schermen */
    }

    header {
        height: 100px; /* Iets compacter op mobiel */
    }

    .logotekst {
        right: 50%;
        transform: translateX(50%); /* Centreert de titel op kleine schermen */
        top: 25px;
    }

    .menu {
        height: auto; /* Sta flexibele hoogte toe voor gestapelde knoppen */
    }

    .nav {
        padding-left: 0; /* Reset desktop padding */
        flex-direction: column; /* Zet knoppen onder elkaar */
    }

    .nav li {
        width: 100%;
    }

    .menu-knop {
        width: 100%; /* Knoppen vullen de breedte van het scherm */
        box-sizing: border-box;
        border-bottom: none;
        top: 0;
    }

    .menu-dropdown-content {
        position: relative; /* Niet meer zweven, maar invoegen in de stroom */
        width: 100%;
        top: 0;
    }

    .menu-dropdown-content a {
        width: 100%;
        box-sizing: border-box;
        padding-left: 20px; /* Extra inspringing voor dropdown sub-items */
    }

    .hoofdinhoud {
        padding: 30px 15px; /* Minder extreme padding aan de zijkanten */
    }

    .weertabel, .maantabel {
        width: 100%; /* Voorkom dat tabellen buiten het scherm lopen */
    }
}