/* --- BASIS (typografie en container) --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  background: #ffffff; /* witte achtergrond */
  line-height: 1.5;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px; /* kleine padding op mobiel */
}

/* --- Toegankelijkheid: 'skip link' (geen aanpassen nodig) --- */
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 16px; top: 16px; background: #000; color: #fff; padding: 8px; }

/* --- HEADER (merk en menu) --- */
.site-header { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.brand a { font-weight: bold; text-decoration: none; color: #111; }
.brand small { display: block; font-size: 13px; color: #666; }

/* --- Hamburger menu (zeer eenvoudig) --- */
.menu-toggle { background: none; border: none; padding: 8px; }
.menu-toggle:focus { outline: 2px solid #2b6cb0; }
.hamburger { display: block; width: 24px; height: 2px; background: #222; position: relative; }
.hamburger::before, .hamburger::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: #222; }
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* --- Navigatie (mobiel: verborgen, open met class .open) --- */
.site-nav { display: none; background: #fff; padding: 16px; }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; padding: 0; margin: 0; }
.site-nav li { margin: 8px 0; }
.site-nav a { color: #111; text-decoration: none; font-weight: 600; }

/* --- Hero / intro (eenvoudig) --- */
.hero { padding: 32px 0; }
.hero h1 { margin: 0 0 8px 0; font-size: 20px; }
.lead { color: #666; margin: 0 0 12px 0; }
.btn { display: inline-block; background: #2b6cb0; color: #fff; padding: 8px 12px; border-radius: 6px; text-decoration: none; }

/* --- About page photo (responsive, centered, en niet te groot) --- */
.about-photo {
  display: block;
  width: 100%;
  max-width: 360px; /* niet te groot op grote schermen */
  height: auto;
  margin: 16px auto; /* center op kleine schermen */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  object-fit: cover;
}

/* Op grotere schermen naast tekst plaatsen */
@media (min-width: 700px) {
  /* Meer ruimte rechts zodat de tekst niet te dicht op de foto staat */
  .about-photo { float: left; margin: 0 40px 24px 0; width: 320px; }
}

/* Extra ruimte op zeer brede schermen */
@media (min-width: 1100px) {
  .about-photo { margin-right: 56px; width: 360px; }
}

/* --- Lijsten en kaarten (eenvoudig en duidelijk) --- */
.skills { padding: 16px 0; }
.skill-list { display: flex; gap: 12px; overflow: auto; padding: 0; margin: 0; list-style: none; }
.card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.card h3 { margin: 8px 0; }
.card p { color: #666; }

/* --- Contact formulier --- */
.contact-cta { padding: 16px 0; }
form label { display: block; margin-top: 8px; }
input, textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
input:focus, textarea:focus { outline: 2px solid rgba(43,108,176,0.15); }
.sr-only { position: absolute; left: -9999px; }

/* --- Simpele responsive regels (uitleg: bij 700px willen we het menu laten zien en meer kolommen) --- */
@media (min-width: 700px) {
  /* meer padding op groter scherm */
  .container { padding: 16px; }
  /* Toon navigatie en verberg hamburger op groter scherm */
  .site-nav { display: block; }
  .menu-toggle { display: none; }
  .site-nav ul { display: flex; gap: 16px; }
  .hero h1 { font-size: 24px; }
  /* Gebruik eenvoudige kolommen voor kaarten: drie naast elkaar */
  .card { display: inline-block; width: 30%; vertical-align: top; margin-right: 3.333%; }
  .card:last-child { margin-right: 0; }
}

/* --- Eenvoudige tips voor beginners ---
   - Verander de kleur van '.btn' om snel andere kleuren te testen
   - Pas padding in '.container' aan als alles te smal of breed is
   - Als je vragen hebt over één regel: stuur welke regel en ik leg het uit
*/