/* Algemene reset en basis styling */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Kies een modern lettertype */
    margin: 0;
    padding: 0;
    color: #333; /* Donkergrijze tekstkleur */
    line-height: 1.6;
}

h1, h2, h3 {
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #555; /* Iets lichtere kleur voor titels */
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }

p {
    margin-bottom: 1em;
}

a {
    color: #007bff; /* Blauwe linkkleur, aanpasbaar */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul, ol {
    margin-bottom: 1em;
    padding-left: 20px;
}

/* Header en Navigatie */
header {
    background-color: #f8f9fa; /* Lichtgrijze achtergrond header */
    padding: 1em 0;
    border-bottom: 1px solid #eee; /* Subtiele border onder header */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center; /* Navigatie links centreren */
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #333;
    padding: 0.5em 1em;
    border-radius: 5px; /* Afgeronde hoeken voor nav links */
    transition: background-color 0.3s ease; /* Zachte hover animatie */
}

nav ul li a:hover {
    background-color: #e9ecef; /* Lichtere achtergrond bij hover */
    text-decoration: none; /* Geen underline bij hover */
}


/* Main content algemeen */
main {
    padding: 2em;
    max-width: 1200px; /* Max breedte content voor grotere schermen */
    margin: 0 auto; /* Centraal op de pagina */
}

section {
    margin-bottom: 2em;
    padding: 1.5em;
    background-color: #fff; /* Witte achtergrond voor secties */
    border-radius: 8px; /* Afgeronde hoeken voor secties */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtiele schaduw */
}

.page-header {
    text-align: center;
    margin-bottom: 2em;
}

.page-header h1 {
    color: #343a40; /* Donkerder grijs voor page header titels */
}


/* Hero sectie (Homepage) */
.hero {
    background-color: #e0f7fa; /* Lichte turquoise achtergrond hero */
    text-align: center;
    padding: 4em 2em;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3em;
    color: #2c3e50; /* Donkerblauwe titel in hero */
    margin-bottom: 0.5em;
}

.hero .subheadline {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 1.5em;
}


/* Buttons */
.button {
    display: inline-block;
    padding: 1em 2em;
    background-color: #007bff; /* Blauwe button kleur */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Zorg dat buttons geen underline hebben */
}

.button:hover {
    background-color: #0056b3; /* Donkerder blauw bij hover */
    text-decoration: none; /* Zorg dat buttons geen underline hebben bij hover */
}


/* Voordelen sectie (Homepage) */
.voordelen-psych-k .voordelen-lijst {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Zorg dat ze onder elkaar komen op kleinere schermen */
}

.voordelen-psych-k .voordelen-lijst > div {
    flex: 1;
    min-width: 300px;
    padding: 1em;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 10px;
}


/* Klantgetuigenissen sectie (Homepage en Over Petra) */
.klantgetuigenissen .testimonial, .testimonials-petra .testimonial {
    background-color: #f9f9f9; /* Lichtgrijze achtergrond testimonials */
    padding: 1.5em;
    border-left: 5px solid #007bff; /* Blauwe lijn aan de linkerkant */
    margin-bottom: 1em;
    border-radius: 0 5px 5px 0; /* Afgeronde hoeken rechts */
}

.klantgetuigenissen .testimonial-naam, .testimonials-petra .testimonial-naam {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    color: #777;
}


/* Over Petra sectie op Homepage */
.over-petra-kort .petra-intro {
    display: flex;
    align-items: center; /* Verticale centrering */
    gap: 20px; /* Ruimte tussen foto en tekst */
}

.over-petra-kort .petra-intro img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Cirkelvormige foto */
    object-fit: cover; /* Zorg dat de foto goed past in de cirkel */
}


/* Email Opt-in sectie (Homepage) */
.email-optin {
    background-color: #fff3cd; /* Lichte gele achtergrond opt-in */
    text-align: center;
    padding: 2em;
}

.email-optin .optin-form {
    display: flex;
    max-width: 500px;
    margin: 1em auto;
    justify-content: center; /* Centreer formulier elementen */
}

.email-optin .optin-form input[type="email"] {
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; /* Afgeronde hoeken links */
    flex-grow: 1; /* Input vult beschikbare ruimte */
}

.email-optin .optin-form button {
    padding: 0.8em 1.5em;
    border-radius: 0 5px 5px 0; /* Afgeronde hoeken rechts */
    background-color: #28a745; /* Groene button voor opt-in */
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.email-optin .optin-form button:hover {
    background-color: #218838; /* Donkerder groen bij hover */
}


/* Footer */
footer {
    background-color: #f8f9fa; /* Lichtgrijze achtergrond footer */
    padding: 1em 0;
    text-align: center;
    border-top: 1px solid #eee; /* Subtiele border boven footer */
    color: #777;
    font-size: 0.9em;
}

footer .social-media {
    margin-bottom: 1em;
}

footer .social-media a {
    display: inline-block;
    margin: 0 10px;
}

footer .social-media img {
    width: 25px; /* Afmeting social media icons */
    height: 25px;
    opacity: 0.7; /* Ietwat transparant */
    transition: opacity 0.3s ease;
}

footer .social-media img:hover {
    opacity: 1; /* Volledig zichtbaar bij hover */
}

footer a {
    color: #777; /* Linkkleur in footer */
}

footer a:hover {
    color: #007bff; /* Blauwe hover kleur voor links in footer */
}


/* Diensten Pagina */
.diensten-overzicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
}

.diensten-overzicht .dienst {
    padding: 1.5em;
    border: 1px solid #eee;
    border-radius: 8px;
}

.diensten-overzicht .dienst h3 {
    margin-top: 0; /* Geen extra marge boven dienst titel */
}

.diensten-overzicht .dienst ul {
    list-style: disc;
    margin-left: 20px;
}


/* Over Petra Detail sectie */
.petra-detail {
    display: flex;
    gap: 30px;
    align-items: flex-start; /* Uitlijning bovenaan */
}

.petra-detail img {
    width: 250px;
    border-radius: 8px;
    object-fit: cover;
    height: auto; /* Hoogte automatisch aanpassen aan breedte */
}

.petra-detail .petra-info {
    flex: 1; /* Laat info sectie de rest van de ruimte vullen */
}


/* Contact Pagina - Formulier */
.contact-form-section .contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-section .form-group {
    margin-bottom: 1.5em;
}

.contact-form-section label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.contact-form-section input[type="text"],
.contact-form-section input[type="email"],
.contact-form-section input[type="tel"],
.contact-form-section textarea {
    width: 100%;
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.contact-form-section textarea {
    resize: vertical; /* Alleen verticale resize toestaan */
}


/* Contact Info sectie */
.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info li {
    margin-bottom: 0.8em;
}

.contact-info strong {
    font-weight: bold;
    display: inline-block;
    width: 100px; /* Zorg voor consistente breedte labels */
}


/* Blog Pagina */
.blog-overzicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.blog-post {
    padding: 1.5em;
    border: 1px solid #eee;
    border-radius: 8px;
}

.blog-post h2 a {
    color: #343a40;
    text-decoration: none;
}

.blog-post h2 a:hover {
    text-decoration: underline;
}

.blog-excerpt {
    margin-bottom: 1em;
    color: #555;
}

.blog-nieuwsbrief {
    text-align: center;
    padding: 2em;
    background-color: #f0f0f0; /* Lichtgrijze achtergrond nieuwsbrief sectie */
    border-radius: 8px;
    margin-top: 2em;
}

.blog-nieuwsbrief .nieuwsbrief-form {
    max-width: 500px;
    margin: 1em auto;
    display: flex;
    justify-content: center;
}

.blog-nieuwsbrief .nieuwsbrief-form input[type="email"] {
    padding: 0.8em;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    flex-grow: 1;
}

.blog-nieuwsbrief .nieuwsbrief-form button {
    padding: 0.8em 1.5em;
    border-radius: 0 5px 5px 0;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.blog-nieuwsbrief .nieuwsbrief-form button:hover {
    background-color: #0056b3;
}


/* Responsive Design (Mobile-First) */
@media (max-width: 768px) {
    /* Aanpassingen voor kleinere schermen (mobiel/tablet) */

    h1 { font-size: 2em; }
    h2 { font-size: 1.7em; }
    h3 { font-size: 1.4em; }

    nav ul li {
        display: block; /* Nav links onder elkaar op mobiel */
        margin: 10px 0;
    }

    .hero {
        padding: 3em 1em; /* Minder padding op mobiel */
    }

    .hero h1 {
        font-size: 2.2em;
    }

    .voordelen-psych-k .voordelen-lijst {
        flex-direction: column; /* Voordelen onder elkaar op mobiel */
    }

    .over-petra-kort .petra-intro {
        flex-direction: column; /* Petra intro onder elkaar op mobiel */
        text-align: center; /* Tekst centreren */
    }

    .over-petra-kort .petra-intro img {
        margin-bottom: 1em; /* Marge onder foto op mobiel */
    }

    .petra-detail {
        flex-direction: column; /* Petra detail sectie onder elkaar op mobiel */
        text-align: center; /* Tekst centreren */
    }

    .petra-detail img {
        width: 200px; /* Kleinere foto op mobiel */
        margin-bottom: 1em;
    }

    .diensten-overzicht {
        grid-template-columns: 1fr; /* Diensten onder elkaar op mobiel */
    }

    .blog-overzicht {
        grid-template-columns: 1fr; /* Blog posts onder elkaar op mobiel */
    }

    .email-optin .optin-form {
        flex-direction: column; /* Formulier elementen onder elkaar op mobiel */
        align-items: stretch; /* Strek formulier elementen over volledige breedte */
    }

    .email-optin .optin-form input[type="email"],
    .email-optin .optin-form button {
        border-radius: 5px; /* Alle hoeken afgerond op mobiel */
        margin-bottom: 0.5em; /* Marge tussen input en button */
    }

    .blog-nieuwsbrief .nieuwsbrief-form {
        flex-direction: column; /* Nieuwsbrief formulier elementen onder elkaar op mobiel */
        align-items: stretch;
    }

    .blog-nieuwsbrief .nieuwsbrief-form input[type="email"],
    .blog-nieuwsbrief .nieuwsbrief-form button {
        border-radius: 5px;
        margin-bottom: 0.5em;
    }

    .contact-kaart {
        /* Verberg kaart eventueel op kleine schermen om performance te verbeteren */
        display: none; /* Of pas de grootte aan */
    }
}