/* Modernere styling en centreren */
body {
    /* Verwijder display:flex en gerelateerde flexbox eigenschappen voor verticale centrering */
    /* We centreren de main via margin: auto horizontaal en padding/margin voor verticaal */
    min-height: 100vh; /* Zorg ervoor dat de body minstens de volledige viewport hoogte heeft */
    margin: 0;
    background-color: #f4f7f6; /* Een lichte, moderne achtergrondkleur */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Een modern lettertype */
    padding: 50px 0; /* Algemene padding boven en onder de body inhoud, links/rechts 0 */
    box-sizing: border-box; /* Zorgt ervoor dat padding meetelt in de totale hoogte */
    display: block; /* Zorg ervoor dat de body zich gedraagt als een standaard blok-element */
}

main {
    width: 100%;
    max-width: 600px; /* Maximale breedte van het formulier voor betere leesbaarheid */
    margin: 0 auto; /* Horizontaal centreren van de main container */
    padding: 20px; /* Standaard padding binnen het formulier */
    box-sizing: border-box;
    background-color: #ffffff; /* Witte achtergrond voor het formulier */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Een subtiele schaduw */
    /* flex-grow: 1;  Deze is niet meer nodig als body geen flex-container is voor main in verticale richting */
    min-height: content; /* Zorgt ervoor dat de hoogte minimaal die van de inhoud is */
    /* Voeg eventueel een extra minimale hoogte toe als de inhoud soms heel kort is */
    /* min-height: 400px; bijvoorbeeld */
}

/* Zorg ervoor dat de Recras container zich uitstrekt */
#recrasContactForm {
    min-height: 100%; /* Zorgt ervoor dat de Recras form container zich uitstrekt binnen main */
    /* Dit kan helpen als Recras zelf een vaste hoogte heeft die we moeten overschrijven */
    overflow: hidden; /* Helpt bij het bevatten van floated elementen binnen Recras */
}

/* Styling voor formuliervelden */
#recrasContactForm .recras-form-field {
    margin-bottom: 15px; /* Meer ruimte tussen de velden */
}

#recrasContactForm label {
    display: block; /* Zorgt ervoor dat labels boven hun invoerveld staan */
    margin-bottom: 5px;
    font-weight: 600; /* Iets dikker lettertype voor labels */
    color: #333;
}

#recrasContactForm input[type="text"],
#recrasContactForm input[type="email"],
#recrasContactForm input[type="tel"],
#recrasContactForm textarea {
    width: calc(100% - 20px); /* Neem de volledige breedte min padding */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Zorgt ervoor dat padding en border binnen de breedte vallen */
    transition: border-color 0.3s ease; /* Vloeiende overgang bij focus */
}

#recrasContactForm input[type="text"]:focus,
#recrasContactForm input[type="email"]:focus,
#recrasContactForm input[type="tel"]:focus,
#recrasContactForm textarea:focus {
    border-color: #007bff; /* Blauwe rand bij focus */
    outline: none; /* Verwijdert de standaard focus outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtiele schaduw bij focus */
}

#recrasContactForm textarea {
    resize: vertical; /* Alleen verticaal formaat wijzigen toestaan */
    min-height: 80px; /* Minimale hoogte voor textarea */
}

/* Styling voor de submit knop */
#recrasContactForm button[type="submit"] {
    display: block; /* Maakt de knop een blok-element */
    width: 100%; /* Knop over de volledige breedte */
    padding: 12px 20px;
    background-color: #28a745; /* Groene kleur voor de submit knop */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px; /* Ruimte boven de knop */
}

#recrasContactForm button[type="submit"]:hover {
    background-color: #218838; /* Donkerdere groene kleur bij hover */
}

/* Responsiviteit */
@media (max-width: 768px) {
    main {
        max-width: 95%; /* Op kleinere schermen iets smaller */
        padding: 15px;
    }
    body {
        padding: 30px 0; /* Minder padding bovenaan en onderaan op kleinere schermen */
    }
}