/* ==========================
   Algemene Stijlen
   ========================== */
body {
    background-color: #00591D;
    background-image: url('images/background1-groen.jpg');
    background-attachment: fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Hoofdcontainer */
.site-header,
.main-nav,
.content-container,
.site-footer {
    max-width: 1076px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================
   Header & Navigatie
   ========================== */
.site-header {
    border: 1px solid #FFFFFF;
}

.site-header-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    background-color: #C60000;
    color: #FFFFFF;
}

.header-info p {
    margin: 0;
    font-size: 14px;
}

.main-nav {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    background-color: #00591D;
}

.main-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.main-nav li {
    flex-grow: 1; 
}

.main-nav a {
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #F3C949;
    font-weight: bold;
    border: 1px solid #C60000;
}

.main-nav a:hover {
    background-color: #C60000;
    color: white;
}

/* ==========================
   Contentsectie
   ========================== */
.main-content {
    background-color: #FDF7E3;
    padding: 20px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}

/* Algemene content boxen */
.welcome-box,
.message-box,
.info-box,
.forms-section,
.programma-intro-box,
.lokaliteit-card,
.contact-card,
.honorary-members {
    border: 1px solid #336600;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

/* ==========================
   Specifieke Stijlen
   ========================== */

/* Styling voor de formulieren en downloadlinks op de welkomspagina */
.form-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}

.form-link:last-child {
    border-bottom: none;
}

.form-link p {
    margin: 0;
    font-size: 1rem;
}

.download-button {
    background-color: #00591d; /* Donkergroene kleur */
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #004600; /* Een iets donkerder groen bij hover */
}

/* Styling voor de bestuurspagina */
.contact-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.contact-card h4 {
    margin-top: 0;
    color: #004600;
}

.contact-card p {
    margin: 5px 0;
}

.honorary-members ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.honorary-members li {
    margin-bottom: 5px;
}

/* Styling voor de lokaliteitenpagina */
.lokaliteiten-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.lokaliteit-card h4 {
    margin-top: 0;
    color: #004600;
}

.lokaliteit-card p {
    margin: 5px 0;
}

.lokaliteiten-downloads {
    margin-top: 40px;
    text-align: center;
}

/* Styling voor de programmapagina */
.programma-intro-box {
    text-align: center;
    margin-bottom: 30px;
}

.programma-intro-box h2,
.programma-intro-box h3 {
    color: #004600;
}

.programma-downloads {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.download-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.download-item h4 {
    margin-top: 0;
    color: #004600;
}

/* Alle downloadlinks worden nu groen */
.download-link {
    display: inline-block;
    padding: 10px 15px;
    background-color: #00591d; /* Groen */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.download-link:hover {
    background-color: #004600; /* Donkergroen bij hover */
}

.download-link-small {
    display: inline-block;
    padding: 5px 10px;
    background-color: #00591d; /* Groen */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-link-small:hover {
    background-color: #004600; /* Donkergroen bij hover */
}

/* ==========================
   Footer
   ========================== */
.site-footer {
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    color: #FFFFFF;
    background-color: #00591D;
    border-top: 1px solid white;
}
/* ==========================
   Responsieve aanpassingen
   ========================== */
@media (max-width: 768px) {
    /* De menu-items worden onder elkaar gestapeld */
    .main-nav ul {
        flex-direction: column;
    }
    
    /* De links vullen de volledige breedte van het menu */
    .main-nav a {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #C60000;
    }
    
    /* De bovenste rand op het eerste menu-item en de onderste rand op de rest */
    .main-nav li:first-child a {
        border-top: 1px solid #C60000;
    }
}