/* --- Basis / reset --- */
* { 
  box-sizing: border-box;
}
html, body { 
  height: 100%; /* html en body altijd 100% van de schermhoogte innemen. */
  margin: 0; /* Haalt de standaard witte rand weg die browsers toevoegen. */
  padding: 0; /* Haalt de standaard binnenruimte weg. */
}

body {
  font-family: "Poppins", sans-serif; 
  background-color: #333; 
  color: #fff; 
  display: flex; /* maakt dit element een flex-container*/
  flex-direction: column; /*bepaalt de richting waarin de items binnen een flex-container worden geplaatst. (column = verticaal) */
  height: 100vh; /* Stelt de hoogte van de body in op 100% van de 'viewport height' (de hoogte van het browservenster). */
  overflow-x: hidden; /* ← alleen horizontale scroll blokkeren */
}

  /* ====================INDEX + STANDAARD INSTELLINGEN ========================= */

/* --- Header --- */
header {
  flex-shrink: 0; /*zorgt er voor dat de header zijn groote behoudt in de flex container*/
  padding: 0.3rem 2rem; /* Binnenruimte: 0.3rem boven/onder, 2rem links/rechts. */
  display: flex;  /* Maakt de header een flex-container */
  justify-content: space-between;/* verdeelt items met gelijke ruimte ertussen; logo links, nav rechts */
  align-items: center; /*alle flex items in het midden van de container uitgelijnd (verticaal)*/
  background-color: #333; 
  color: #FFDDEE; 
}
header .logo { 
  max-height: 150px; 
  width: auto; 
}
nav li { 
  display: inline; /* Zet de lijstitems (die standaard 'block' zijn) naast elkaar. */
  margin: 0 1.4rem; 
} 
nav a {
  color: #FFDDEE !important; /* Stelt de tekstkleur van de link in. `!important` forceert deze stijl. */
  text-decoration: none; /* Haalt de standaard blauwe onderstreping van links weg. */
  font-weight: 600; 
  transition: transform 0.2s ease; /* Zorgt voor een soepele animatie (0.2s) als de 'transform' eigenschap verandert (zie :hover). */
  display: inline-block;  /*Zorg dat de link zich als een blok gedraagt voor transformaties, zodat 'transform' werkt. */
}
nav a:hover {
  border-radius: 4px; /* Voegt lichte afronding toe (wordt zichtbaar door de box-shadow). */
  box-shadow: 0 0 20px rgba(255, 221, 238, 0.3); /* Zachte roze gloed rond de container */
  transform: scale(1.05); /* Maak de link 5% groter */
}
/* Styling voor de actieve link (de pagina waar je nu bent) */
nav a.active {
  border-bottom: 3px solid #FFDDEE; /* een duidelijke, doorlopende rand toe om de status te versterken */
  padding-bottom: 3px; /* Zorgt voor wat ruimte tussen de tekst en de rand */
  padding-left: 4px; 
  padding-right: 4px; 
}



main {
  flex: 1; /* main neemt de resterende ruimte tussen header en footer */
  display: flex; /* Maakt de main een flex-container. */
  flex-direction: column; /* zorgt dat de inhoud (de container) verticaal groeit */
  min-height: 0; /* voorkomt dat main te groot wordt in een flexbox, helpt bij scrollen */
}

/* --- Container --- */
.container, 
.projecten-container,
.contact-container {
  flex: 1; /* Zorgt dat de container alle beschikbare ruimte in 'main' inneemt. */
  overflow-y: auto; /*Maakt de container scrollbaar als er te veel inhoud is (verticaal).*/
  min-height: 0; /*laat de container kleiner worden dan de inhoud, zodat overflow-y: auto (scrollen) goed werkt in een flexbox */ 
  padding: 2rem; 
  background-color: #333; 
  border-top: 1px solid #FFDDEE; /* Een dunne roze lijn aan de bovenkant. */
  display: flex; /* Maakt de container zelf een flex-container. */
  flex-direction: column; 
  align-items: center; /* Centreert de items horizontaal in de container. */
  gap: 3rem; /* Voegt 3rem ruimte toe *tussen* de flex-items (de secties). */
  border: 2px solid #FFDDEE; /* roze kader */
  border-radius: 4px;         /* zachte hoekjes */
  margin: -3rem 2rem 1rem; /* Negatieve bovenmarge (-3rem) trekt de container omhoog. 2rem links/rechts, 1rem onder. */
}


/* --- Profielfoto sectie --- */
.profielfoto {
  display: grid; /* maakt element een grid-container*/
  grid-template-columns: 1fr 2fr; /* Verdeelt de grid in 2 kolommen. De 2e kolom is 2x zo breed als de 1e. */
  align-items: start; /*Lijnt alle items verticaal aan de bovenkant uit binnen hun grid-vak*/
  gap: 3rem; 
  padding: 0.1rem; 
  width: 100%; /* Zorgt dat de sectie de volledige breedte van zijn ouder (.container) inneemt. */
}

.foto-en-button {
  display: flex; /* flex-container */
  flex-direction: column; 
  align-items: center; 
  gap: 2rem; 
  transform: translateY(-3rem); /*verplaatst een element langs de verticale as (Y-as) (trekt het omhoog)*/
  margin-right: 10rem; 
}

.foto-wrapper {
  width: 280px; 
  height: 280px; 
  border-radius: 50%; /* Maakt de vierkante wrapper een perfecte cirkel. */
  background-color: #FFDDEE; 
  display: flex; /* Maakt de wrapper een flex-container. */
  align-items: center; /* Centreert de inhoud (de <img>) verticaal. */
  justify-content: center; /* Centreert de inhoud (de <img>) horizontaal. */
  overflow: hidden; /* Verbergt alles van de <img> dat buiten de ronde wrapper valt. */
  box-shadow: 0 0 20px rgba(255, 221, 238, 0.3); /* Voegt een zachte roze gloed (schaduw) toe. */
  margin-top: 3rem; 
  margin-left: 3rem; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie voor 'transform' en 'box-shadow' bij :hover. */
  cursor: default; /* Zorgt dat de muis de standaard pijl blijft. */
}
.foto-wrapper:hover {
  transform: scale(1.03); /* Maakt de wrapper 3% groter bij hover. */
  box-shadow: 0 0 30px rgba(255, 221, 238, 0.6); /* Maakt de gloed intenser bij hover. */
}
.foto-wrapper img {
  width: 240px; 
  height: auto; 
  object-fit: cover; /* Zorgt dat de foto de ruimte vult zonder vervormd te raken. */
  transform: translateY(20px); /* Verplaatst de foto 20px naar beneden binnen de wrapper. */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie. */
}

.info-button,
.aside-button{
  background-color: #FFDDEE; 
  color: #000; 
  border: 2px solid #FFDDEE; 
  box-shadow: 0 0 10px rgba(255, 221, 238, 0.2);
  display: inline-block;
  padding: 0.5rem 1rem; /* Binnenruimte (0.5rem boven/onder, 1rem links/rechts). */
  font-weight: 600; /* Maakt de tekst 'semibold'. */
  border-radius: 4px; 
  cursor: pointer; /* Verandert de muis in een handje bij hover. */
  margin-left: 3rem; 
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Soepele animatie voor meerdere eigenschappen. */
}
.info-button:hover,
.aside-button:hover {
  color: #000 !important; 
text-decoration: none !important;
  transform: scale(1.05); /*vergroot als je erover zweeft (hover)*/
  box-shadow: none; /* Haalt de gloed weg bij hover. */
  background-color: #ffb9d9; /* Verandert de achtergrondkleur naar een donkerdere roze tint. */
}

/* --- Tekstblok naast foto --- */
.intro-tekst {
  display: flex; /* Maakt dit een flex-container. */
  flex-direction: column; /* Plaatst de items (h2, p) onder elkaar. */
  align-items: flex-start; /* Lijnt de items links uit. */
  justify-content: flex-start; /* Plaatst de items bovenaan de container. */
  color: #fff; 
  width: 100%; /* Neemt de volledige breedte van zijn grid-kolom in. */
  margin-bottom: 5rem; 
}
/*-- opmaak van de elementen --*/
.intro-tekst h2 {
  color: #FFDDEE; 
  margin-bottom: 3rem; 
  text-align: left; 
  max-width: 500px; /* Beperkt de maximale breedte, voorkomt te lange regels. */
  margin-left: 4rem;
}
.intro-tekst p {
  color: #fff; 
  line-height: 1.6; /*meer ruimte tussen regels tekst (1.6x de lettergrootte)*/
  max-width: 500px; /* Beperkt de breedte, zorgt voor betere leesbaarheid. */
  text-align: left; 
  margin-left: 3.9rem; 
}

/* --- Onderste section (coming soon artikel) --- */
.onder-sectie {
  display: flex; /* Maakt flex-container. */
  justify-content: center; /* Centreert de items (artikel en svg) horizontaal. */
  align-items: center; /* Centreert de items verticaal. */
  gap: 3rem; 
  color: #FFDDEE; 
  border-top: 2px solid rgba(255, 221, 238, 0.08); 
}

.OnderArtikel {
  flex: 1; /* Laat het artikel meegroeien om beschikbare ruimte te vullen. */
  min-width: 250px; 
  max-width: 500px; 
  text-align: left; 
  padding: 1rem; 
  margin-right: 1.8rem; 
}
.OnderArtikel h2 {
  margin-top: -12rem; /* Trekt de titel ver omhoog. */
  margin-bottom: 3rem; 
}
.OnderArtikel p {
  line-height: 1.6; /* Vergroot de regelafstand. */
  color: #fff; /* Witte tekstkleur. */
}

.hero-svg {
  flex: 1; /* Laat de svg meegroeien om ruimte te vullen. */
  max-width: 400px; 
  width: 100%; /* Maakt de svg zo breed als zijn container (tot max-width). */
  height: auto; 
  margin: 1rem 0 1rem 3rem; /* Ruimte: 1rem boven/onder, 0 rechts, 3rem links. */
}

/* --- Footer --- */
footer {
  flex-shrink: 0; /*zorgt er voor dat de footer zijn groote behoudt in de flex container.*/
  background-color: #000; 
  color: #FFDDEE; 
  display: grid; /* Gebruikt CSS Grid voor layout. */
  grid-template-columns: auto 1fr auto; /* 3 kolommen: 1e/3e (auto) zo breed als nodig, 2e (1fr) vult de rest. */
  align-items: end; /* Lijnt alle items verticaal aan de *onderkant* van hun grid-cel uit. */
  padding: 0.5rem 1.5rem 0.3rem; /* Binnenruimte (boven, links/rechts, onder). */
  width: 100%; 
  gap: 0.5rem; 
  box-sizing: border-box; /* Zorgt dat padding binnen de 100% breedte valt. */
  border-radius: 4px; 
}

.footerLogo {
  max-height: 85px; 
  width: auto; 
  margin-right: 0.75rem; 
  justify-self: end; /* Lijnt dit item rechts uit *binnen* zijn grid-kolom. */
  align-self: end; /* Lijnt dit item onderaan uit *binnen* zijn grid-kolom. */
  padding-bottom: 1rem; /* Extra ruimte aan de onderkant. */
}
.footer-left { 
  margin-left: 0.75rem; /* Ruimte links van de tekst. */
  padding-bottom: 1rem; /* Extra ruimte onder de tekst. */
}

/* ==================== OVER MIJ & PROJECTEN ========================= */
.about-grid, .projecten-grid {
  display: grid; /* Maakt dit een grid-container. */
  gap: 6rem; /* Grote ruimte *tussen* de grid-items (de projecten/about-secties). */
  margin: 1.5rem auto 4rem; /* Ruimte buiten de grid: 1.5rem boven, auto links/rechts (centreren), 4rem onder. */
  width: 100%; /* Volledige breedte. */
  max-width: 1100px; /* Maximale breedte, houdt de layout gecentreerd en leesbaar. */
}
.about-item, .project-item {
  display: grid; /* Elk item is *ook* een grid-container. */
  grid-template-columns: 1fr 1fr; /* Twee gelijke kolommen (voor tekst en foto). */
  align-items: center; /* Centreert de tekst en foto verticaal. */
  gap: 3rem; 
  border-bottom: 2px solid rgba(255, 221, 238, 0.2); 
  padding-bottom: 3rem; 
}
.about-item:last-child,.project-item:last-child  { 
  border-bottom: none; /* Haalt de lijn weg bij het allerlaatste item op de pagina. */
}
.about-text h2,
.project-text h2 {
  color: #FFDDEE; 
  margin-top: 0; /* geen extra witruimte boven titels */
  margin-bottom: 1.5rem; /* Ruimte onder de titel. */
  font-size: 1.8rem; 
}

.about-text p,
.project-text p {
  color: #fff; 
  line-height: 1.6; 
}

/* 🔁 Afwisselende layout */
.about-item:nth-child(odd) .about-foto-wrapper, .project-item:nth-child(odd) .project-foto-wrapper { 
  grid-column: 2; /* Plaatst de foto in oneven items (1e, 3e...) in de 2e kolom. */
  margin-right: -10rem; /* Trekt de foto 10rem naar rechts, voorbij de rand van zijn kolom. */
}
.about-item:nth-child(even) .about-foto-wrapper, .project-item:nth-child(even) .project-foto-wrapper { 
  grid-column: 1; /* Plaatst de foto in even items (2e, 4e...) in de 1e kolom. */
  margin-left: -10rem; /* Trekt de foto 10rem naar links. */
}
.about-item:nth-child(odd) .about-text, .project-item:nth-child(odd) .project-text { 
  grid-column: 1; /* Plaatst de tekst in oneven items in de 1e kolom. */
}


.about-item:nth-child(even) .about-text, .project-item:nth-child(even) .project-text { 
  grid-column: 2; /* Plaatst de tekst in even items in de 2e kolom. */
}

/* Foto styling */
.about-foto-wrapper, .project-foto-wrapper {
  width: 280px; 
  height: 280px; 
  border-radius: 50%; /* Maakt de wrapper een cirkel. */
  background-color: #FFDDEE; 
  display: flex; /* Maakt het een flex-container. */
  align-items: center; /* Centreert inhoud (foto) verticaal. */
  justify-content: center; /* Centreert inhoud (foto) horizontaal. */
  overflow: hidden; /* Verbergt alles buiten de cirkel. */
  box-shadow: 0 0 20px rgba(255, 221, 238, 0.3); 
  justify-self: center; /* Centreert de wrapper *zelf* horizontaal in zijn grid-kolom. */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie voor hover. */
}
.about-foto-wrapper img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* Zorgt dat de foto de cirkel vult zonder te vervormen (snijdt bij). */
}
.project-foto-wrapper img {
  width: 240px;  
  height: auto; 
  object-fit: cover;
}
.about-foto-wrapper:hover, .project-foto-wrapper:hover  {
  transform: scale(1.03); /* Maakt de wrapper 5% groter bij hover. */
  box-shadow: 0 0 30px rgba(255, 221, 238, 0.6); /* Maakt de gloed intenser. */
}

/* --- Algemene linkkleuren (voor tekstlinks op pagina's) --- */
a {
  color: #FFDDEE; /* Standaardkleur voor alle links (die niet in de nav zitten). */
  text-decoration: none; /* Haalt onderstreping weg. */
  transition: color 0.3s ease; /* Soepele animatie als de kleur verandert (bij hover). */
}

a:hover {
  color: #ffb9d9; /* Donkerdere roze kleur bij hover. */
  text-decoration: underline; /* Voegt onderstreping toe bij hover. */
}

/* ==================== Detail pagina portfolio ========================= */

/* --- fotos --- */
.project-gallery,
.project-screenshots {
  display: flex; /* Maakt dit een flex-container. */
  justify-content: center; /* Centreert de afbeeldingen horizontaal. */
  flex-wrap: wrap; /* Zorgt dat afbeeldingen naar de volgende regel springen als er geen ruimte is. */
  gap: 1.5rem; 
  margin: 1.5rem 0 2rem; /* Ruimte boven (1.5rem) en onder (2rem) de galerij. */
}
.project-gallery img,
.project-screenshots img {
  width: 400px; 
  height: 250px; 
  border-radius: 4px; 
  background-color: #fff; 
  padding: 0.3rem; /* Kleine binnenruimte, creëert een wit randje. */
  border: 1px solid #ffddee; /* Dunne roze rand. */
  box-shadow: 0 0 10px rgba(255, 185, 217, 0.3); /* Zachte roze gloed. */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Soepele animatie voor hover. */
}
.project-gallery img:hover,
.project-screenshots img:hover {
  transform: scale(1.03); /* Maakt de afbeelding 3% groter bij hover. */
  box-shadow: 0 0 20px rgba(255, 185, 217, 0.4); /* Maakt de gloed intenser bij hover. */
}
/* --- tekst --- */
.project-detail {
  color: #FFDDEE; 
  text-align: left; 
  max-width: 1000px; /* Maximale breedte voor de tekstcontainer. */
  width: 100%; /* Neemt 100% breedte in (tot de max-width). */
}

.project-detail h2, 
.project-detail h3 {
  color: #ffb9d9; /* Donkerdere roze kleur voor titels. */
  margin-bottom: 1rem; 
}

.project-detail p {
  color: #FFDDEE; /* Lichtroze kleur voor paragrafen. */
  line-height: 1.6; /* Grotere regelafstand. */
  margin-bottom: 1.5rem; /* Ruimte onder elke paragraaf. */
}

.project-detail a {
  color: #ffb9d9; /* Donkerroze kleur voor links in de tekst. */
  text-decoration: underline; /* Standaard onderstreept. */
}

.project-detail a:hover {
  color: #ffb9d9; /* Kleur blijft hetzelfde bij hover. */
}


  .terug a {
  color: #000 !important; /* Forceert de tekstkleur van de 'terug'-link naar zwart (voor de button). */
}

 /* ==================== CONTACT PAGINA ========================= */
 
.contact-container { /* overlay + achtergrondafbeelding */
  background: /* Stelt een gelaagde achtergrond in (meerdere lagen): */
    linear-gradient(rgba(51,51,51,0.45), rgba(51,51,51,0.45)), /* Laag 1: Een donkergrijze, deels transparante waas. */
    url("../images/fotos/zand.jpg") center / cover no-repeat; /* Laag 2: De afbeelding, gecentreerd (center), vullend (cover), en niet herhalend (no-repeat). */
}


.contact-section {
  background-color: transparent; /* Maakt de achtergrond van deze sectie doorzichtig (zodat de container-achtergrond zichtbaar is). */
  max-width: 600px; /* Maximale breedte voor het formuliergedeelte. */
  padding: 2rem; /* Binnenruimte. */
  box-sizing: border-box; /* Zorgt dat padding binnen de max-width valt. */
  overflow: visible; /* Zorgt dat er niets wordt afgesneden (anders dan de andere containers die scrollen). */
}

.contact-section h2 {
  color: #ffb9d9; 
  font-size: 2rem; /* Groter lettertype. */
  margin-bottom: 1rem; /* Ruimte onder de titel. */
  text-align: center; /* Centreert de titel. */
}

.contact-section p {
  color: #ffddee; 
  margin-bottom: 2rem; /* Ruimte onder de paragraaf. */
  line-height: 1.6; 
  text-align: center; 
}

.contact-form {
  display: flex; /* Maakt het formulier een flex-container. */
  flex-direction: column; /* Plaatst de formuliervelden (input, textarea, button) onder elkaar. */
  gap: 1rem; /* Ruimte *tussen* de formuliervelden. */
  text-align: left; 
  width: 100%; /* Volledige breedte (van de .contact-section). */
}



.contact-form input,
.contact-form textarea {
  padding: 0.8rem; 
  border: 1px solid #ffddee; /* Dunne roze rand. */
  border-radius: 6px; /* Iets meer afgeronde hoeken dan standaard. */
  font-family: 'Poppins', sans-serif; /* Zorgt dat de velden hetzelfde lettertype gebruiken als de rest. */
  font-size: 1rem; /* Standaard lettergrootte. */
  background-color: #fff; /* Witte achtergrond voor de velden. */
  box-shadow: 0 0 6px rgba(255, 185, 217, 0.2); /* Zeer zachte roze gloed. */
  transition: box-shadow 0.3s ease; /* Soepele animatie voor de gloed (zie :focus). */
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none; /* Haalt de standaard blauwe rand van de browser weg als je erin klikt. */
  box-shadow: 0 0 10px rgba(255, 185, 217, 0.5); /* Maakt de roze gloed intenser bij focus (als je erin typt). */
}

.contact-form button {
  align-self: center; /* Centreert de knop horizontaal (omdat de parent 'flex-direction: column' heeft). */
  margin-top: 1rem; /* Ruimte boven de knop. */
}