/* style.css */
body {
  font-family: sans-serif; /* Overweeg later een specifiekere font voor unieke branding */
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: #f9f6f0;
  background-image: url('../images/honeycomb.png'); /* Zorg voor een naadloze (seamless) textuur */
  background-repeat: repeat; /* Herhaal de textuur */
  color: #333;
}

header {
  background: #ffd700;  
  padding: 1rem 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);   
}

.header-content-wrapper {
  /* BELANGRIJK: Pas deze waarden aan zodat ze overeenkomen met je content-blokken eronder! */
  max-width: 1080px;  /* Bijvoorbeeld dezelfde max-width als je #hero, #diensten etc. */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;  /* Bijvoorbeeld dezelfde horizontale padding als je content-blokken */
  padding-right: 20px; /* Bijvoorbeeld dezelfde horizontale padding als je content-blokken */

  /* Flexbox eigenschappen komen nu op deze wrapper */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: inline-flex; /* Goed voor flex items die een link zijn */
  text-decoration: none;
}

.header-logo {
  height: 90px; /* Of je gewenste hoogte */
  width: auto;
  display: block;
}

nav {
  /* Geen speciale aanpassingen nodig, wordt door justify-content geplaatst */
}

nav a {
  margin: 0 0.75rem;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

#hero {
  padding: 2rem;
  background: #fffbe6;
  text-align: center;
}

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #ff9800;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 1rem;
  font-weight: bold;
}

.button:hover {
  background: #e68900; /* Iets donkerder bij hover voor interactie */
}

section {
  padding: 2rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px; /* Toegevoegd voor consistente ruimte */
}

#hero {
  padding: 2rem;
  background: #fffbe6; /* Of de gradient of afbeelding die je eventueel hebt ingesteld */
  text-align: center;
  /* Eventuele andere bestaande stijlen voor #hero, zoals tekstkleur, etc. */

  /* Voeg deze regels toe voor ronde hoeken aan de onderkant: */
  border-bottom-left-radius: 25px;  /* Pas de waarde naar wens aan */
  border-bottom-right-radius: 25px; /* Pas de waarde naar wens aan */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* Schaduw */
}

#hero h1 {
  font-size: 2.2em; 
  color: #333;     
  margin-bottom: 0.5em;
}

#hero p {
  /* Specifieke stijlen voor de paragraaf in de hero */
  font-size: 1.1em;
  margin-bottom: 1.5em; /* Ruimte voor de knop */
/* Als je .button een display: block; heeft en een vaste breedte:
} 
.button {
  display: block;
  width: 200px; /* voorbeeld breedte */
  margin-left: auto;
  margin-right: auto;
  /* ... overige button stijlen ... */
}


footer {
  text-align: center;
  background: #ffd700;
  padding: 1rem;
  margin-top: 2rem; /* Wat extra ruimte boven de footer */
}


section h2 {
  text-align: center;
  margin-bottom: 1.5rem; 
}

section p,
section ul {
  text-align: left; 
}

/* Nieuwe stijlen voor de tekstblok-panelen */
/* Algemene section styling (deze is al in je CSS) */
section {
  padding: 2rem; /* Basis padding voor alle secties */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px; /* Basisruimte onder elke sectie */
}

/* NIEUWE KLASSE VOOR DE CONTENT PANELEN */
.content-panel {
  background-color: #fffbe6;  /* Achtergrondkleur voor de panelen */
  padding: 25px 30px;        /* Specifieke padding voor panelen (overschrijft de 'section' padding) */
  border-radius: 12px;       /* Ronde randen */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); /* Schaduw */
  /* margin-top en margin-bottom worden al door 'section' afgehandeld,
     maar als je specifiek voor panelen een andere verticale marge wilt, kun je die hier toevoegen.
     Voor nu laten we de margin van de 'section' tag de ruimte tussen panelen bepalen. */
  /* GEEN border: ...px solid white; hier */
}

/* Styling voor koppen en tekst binnen secties/panelen (deze had je al, mogelijk kleine aanpassing) */
section h2, 
.content-panel h1, /* h1 op voorwaarden/privacy pagina binnen een .content-panel */
.content-panel h2,
.content-panel h3,
.content-panel h4,
.content-panel h5 {
  text-align: center;
  margin-bottom: 1.5rem; 
}

section p,
section ul,
.content-panel p, /* Zorgt voor linkse uitlijning van p in panelen */
.content-panel ul,
.content-panel li {
  text-align: left; 
}

    .service-item figure.image-in-service {
      margin-top: 25px;
      margin-bottom: 25px;
      padding: 0;
      text-align: center;
    }

    .service-item figure.image-in-service img {
      max-width: 100%;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .service-item figure.image-in-service figcaption {
      font-size: 0.9em;
      font-style: italic;
      color: #555;
      margin-top: 8px;
      padding: 0 10px;
    }

    .video-responsive-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 700px; /* Of een andere gewenste maximale breedte */
      padding-top: 56.25%; /* Voor 16:9 video's */
      margin: 25px auto;
      background: #eee;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .video-responsive-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

.about-container {
  display: flow-root; /* Modernere manier om floats te bevatten */
  margin-bottom: 20px; 
}

.profile-photo {
  float: right;        /* Laat de afbeelding RECHTS zweven */
  margin-left: 25px;  /* Ruimte tussen de afbeelding en de tekst links ervan (was margin-right) */
  margin-right: 0; /* Zet de rechter marge op 0, anders heb je mogelijk onnodige ruimte aan de rechterkant van de afbeelding */
  margin-bottom: 10px; /* Ruimte onder de afbeelding als de tekst korter is */
  width: 100%;         
  max-width: 200px;    /* Maximale breedte van de foto, pas naar wens aan */
}

.profile-photo img {
  width: 100%;         /* Zorgt dat de afbeelding de breedte van de <figure> vult */
  height: auto;        /* Behoudt de beeldverhouding */
  border-radius: 8px;  /* Optioneel: licht afgeronde hoeken voor de foto */
  /* border-radius: 50%; */ /* Gebruik dit voor een ronde foto */
}

/* De .about-text div is niet strikt nodig voor de float, maar kan handig zijn
   als je de tekstkolom apart wilt stylen of ervoor wilt zorgen dat de float goed wordt 'gecleared' 
   als er elementen na de .about-container komen.
   Met overflow: hidden op .about-container is het vaak al goed.
*/

.download-link-container {
  text-align: center; /* Centreert de knop/link */
  margin-top: 30px;   /* Extra ruimte boven de downloadknop */
  margin-bottom: 10px; /* Ruimte onder de downloadknop, voor de onderkant van het paneel */
}

/* == Contact Formulier Stijlen == */

/* Zorgt ervoor dat tekst IN de invulvelden rechts uitgelijnd wordt */
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
    text-align: left;
}

/* Voor de rijen met een label en een korter invulveld (niet de textareas die al breed zijn) */
/* We selecteren divs binnen .contact-form die GEEN textarea als direct kind hebben */
.contact-form div:not(:has(textarea)) {
    display: flex;
    justify-content: space-between; /* Plaatst label links en input rechts */
    align-items: center; /* Lijnt label en input verticaal uit in het midden */
    margin-bottom: 10px; /* Ruimte tussen de velden */
}

/* Zorg ervoor dat labels niet te veel krimpen en de inputs de resterende ruimte kunnen nemen */
.contact-form div:not(:has(textarea)) label {
    flex-shrink: 0; /* Voorkomt dat het label krimpt */
    margin-right: 10px; /* Ruimte tussen label en input */
    /* Optioneel: als je wilt dat alle labels een vaste minimumbreedte hebben */
    /* min-width: 150px; */ 
}

.contact-form div:not(:has(textarea)) input[type="text"],
.contact-form div:not(:has(textarea)) input[type="tel"],
.contact-form div:not(:has(textarea)) input[type="email"] {
    flex-grow: 1; /* Laat het input veld de beschikbare ruimte opvullen */
    max-width: 450px; /* Optioneel: stel een maximale breedte in voor de input velden, pas aan naar wens */
     /* Als je een vaste breedte wilt i.p.v. flex-grow: */
    /* width: 300px; */
}

/* Zorg ervoor dat textareas en hun labels correct worden weergegeven (label erboven) */
/* We selecteren divs binnen .contact-form die WEL een textarea als direct kind hebben */
.contact-form div:has(textarea) {
    display: flex;
    flex-direction: column; /* Label boven de textarea */
    align-items: stretch; /* Laat de textarea de volle breedte nemen van zijn parent div */
    margin-bottom: 10px;
}

.contact-form div:has(textarea) label {
    margin-bottom: 5px; /* Ruimte tussen label en textarea */
    text-align: left; /* Labels boven textareas links uitlijnen, wat gebruikelijker is */
}

.contact-form div:has(textarea) textarea {
    width: 100%; /* Zorgt dat de textarea de volledige breedte van zijn container inneemt */
    box-sizing: border-box; /* Zorgt dat padding en border binnen de width vallen */
    /* text-align: right; is al hierboven globaal ingesteld, maar kan hier overschreven worden indien nodig */
}

/* Optioneel: styling voor de verplichte velden indicatie */
.contact-form p small {
    display: block; /* Zorgt dat het op een eigen regel komt */
    text-align: left; /* Of 'right' als je dat mooier vindt */
    margin-top: 15px;
    margin-bottom: 10px;
}

/* Zorg ervoor dat de submit knop van het formulier ook de .button styling krijgt als dat nog niet via HTML class is gebeurd */
/* .contact-form button[type="submit"] { */
    /* Je hebt al een .button klasse, dus zorg dat je knop in HTML <button type="submit" class="button"> is */
    /* Anders kun je hier de styling van .button kopiëren of uitbreiden */
/* } */

/* == Contact Formulier Mobiele Weergave Aanpassingen == */

@media (max-width: 768px) { /* Dit geldt voor schermen tot 768px breed */

    /* Voor de rijen met een label en een korter invulveld */
    .contact-form div:not(:has(textarea)) {
        flex-direction: column; /* Zet label en input onder elkaar */
        align-items: flex-start; /* Lijn items links uit in de kolom-opstelling */
    }

    .contact-form div:not(:has(textarea)) label {
        margin-right: 0; /* Verwijder de marge rechts die voor side-by-side layout was */
        margin-bottom: 8px; /* Voeg wat ruimte toe onder het label */
        /* Als je wilt dat het label de volledige breedte inneemt: */
        /* width: 100%; */
    }

    .contact-form div:not(:has(textarea)) input[type="text"],
    .contact-form div:not(:has(textarea)) input[type="tel"],
    .contact-form div:not(:has(textarea)) input[type="email"] {
        width: 100%; /* Laat het input veld de volledige breedte nemen */
        max-width: none; /* Verwijder eventuele max-width die voor desktop was ingesteld */
        /* flex-grow: 0;  Als je width: 100% gebruikt, is flex-grow minder relevant hier */
    }

    /* Textareas en hun labels (stonden al onder elkaar, maar je kunt hier specifieke mobiele aanpassingen doen indien nodig) */
    .contact-form div:has(textarea) label {
        /* Eventuele extra mobiel-specifieke aanpassingen voor textarea labels */
        /* margin-bottom is al ingesteld in de desktopversie en werkt hier ook prima */
    }

    .contact-form div:has(textarea) textarea {
        /* Eventuele extra mobiel-specifieke aanpassingen voor textareas */
        /* width: 100% en box-sizing: border-box zijn al goed ingesteld */
    }

    /* Als je de submit knop op mobiel anders wilt, bijv. volledige breedte */
    /*
    .contact-form button[type="submit"].button {
        width: 100%;
        box-sizing: border-box; 
    }
    */
}
/* Stijl voor de custom WhatsApp knop */
.whatsapp-knop {
  display: inline-flex; /* Maakt het mogelijk om de afbeelding en tekst netjes naast elkaar te zetten en te centreren */
  align-items: center; /* Verticaal centreren van de afbeelding en tekst in de knop */
  padding: 8px 15px; /* Ruimte binnenin de knop (boven/onder, links/rechts) - pas naar wens aan */
  background-color: #ffffff; /* Witte achtergrond */
  border: 2px solid #25D366; /* Groene rand (officiële WhatsApp groen, of kies een andere tint) */
  border-radius: 8px; /* Afgeronde hoeken voor de knop */
  text-decoration: none; /* Geen onderstreping voor de link */
  color: #111b21; /* Donkere tekstkleur, goed contrast op wit (of #25D366 voor groene tekst) */
  font-weight: bold; /* Maakt de tekst "WhatsApp" vet */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Vloeiende overgang voor hover */
  vertical-align: middle; 
}

/* Afbeelding (logo) binnen de WhatsApp knop */
.whatsapp-knop img {
  height: 1.3em; /* Hoogte van het logo, relatief aan de tekstgrootte (of bijv. 20px) */
  width: auto; /* Automatische breedte om de verhoudingen te bewaren */
  margin-right: 8px; /* Ruimte tussen het logo en de tekst "WhatsApp" */
  /* vertical-align is niet nodig vanwege display: inline-flex en align-items: center op de parent */
}

/* Optioneel: Hover effect voor de knop */
.whatsapp-knop:hover,
.whatsapp-knop:focus { /* :focus voor toegankelijkheid */
  background-color: #f0f0f0; /* Iets donkerdere achtergrond bij hover/focus */
  border-color: #1DAF53; /* Iets donkerder groen voor de rand */
  color: #000000; /* Eventueel tekstkleur aanpassen bij hover */
  outline: none; /* Verwijder standaard focus outline als je custom styling hebt */
}

/* Aanpassingen voor mobiele weergave */
@media (max-width: 767px) { /* Regels voor schermen smaller dan 768px */

  /* Verminder de padding van de content panelen op mobiel */
  .content-panel {
    padding-top: 20px;    /* Optioneel: pas boven-padding aan */
    padding-bottom: 20px; /* Optioneel: pas onder-padding aan */
    padding-left: 15px;   /* VERMINDERD: was bijv. 30px */
    padding-right: 15px;  /* VERMINDERD: was bijv. 30px */
  }

  /* Je bestaande regels voor .profile-photo op mobiel */
  .profile-photo {
    max-width: 170px; /* Of de waarde die je goed vond, bijv. 120px */
    margin-right: 15px; 
    /* margin-left wordt hier niet ingesteld, de float zorgt voor de linker positionering */
  }

  /* Andere mobiele stijlen die je hier al had... */
}

/* Eventueel een aparte media query voor nog kleinere aanpassingen als nodig */
@media (max-width: 419px) {
  .content-panel {
    padding-left: 10px;   /* Nog minder padding voor hele smalle schermen */
    padding-right: 10px;  /* Nog minder padding voor hele smalle schermen */
  }

  .profile-photo {
    max-width: 150px; /* Nog iets kleiner als nodig */
    margin-right: 10px;
  }
  
  /* Andere mobiele stijlen die je hier al had... */
}