/*
    Name: Jaydee Meeusen
    Date: 1-10-25

    Mijn CSS
*/

/* Algemene opmaak */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f7f4; /* Zacht mintgroen - past bij natuur & water */
    color: #333;
    min-height: 100vh;
}

/* Header styling */
header {
    background-color: #4CAF50;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Navigatiemenu */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #2196F3;
    overflow: hidden;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #0b7dda;
}

/* Hoofdinhoud */
main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    min-height: calc(100vh - 200px); /* Zorgt dat main altijd ruimte heeft */
    padding-bottom: 80px; /* Extra ruimte onderaan voor footer */
}

/* Afbeeldingen */
img {
    max-width: 100%;
    height: auto;
    border: 2px solid #4CAF50;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Iframe voor kaarten */
iframe {
    max-width: 100%;
    border: 2px solid #2196F3;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Specifieke stijlen per pagina */
.lunch-page main {
    background-color: #fff8e1; /* Lichtgeel voor lunch */
    font-family: 'Georgia', serif; /* Ander lettertype */
}

.tourist-page main {
    background-color: #e3f2fd; /* Lichtblauw voor toeristen */
    font-family: 'Verdana', sans-serif;
}

/* Footer */
footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px 10px;
    margin-top: 40px;     /* Extra ruimte boven footer */
}

/* Responsive design */
@media screen and (max-width: 600px) {
    nav ul li { float: none; }
    
    main {
        padding: 15px;
        padding-bottom: 100px; /* Nog meer ruimte op mobiel */
    }
    
    footer {
        font-size: 14px;
        padding: 15px 10px;
    }
}