/* =========================================================
   zinsontleden.nl — stylesheet
   Thema: "taalpad" — een speels, positief pad langs de
   onderdelen van de Nederlandse zinsontleding.
   ========================================================= */

:root{
  /* --- kleuren --- */
  --groen-fris:   #2F9E68;   /* primaire kleur: groei, correct */
  --groen-donker: #1F3A34;   /* tekstkleur */
  --blauw-hemel:  #2C7FC1;   /* links, persoonsvorm-accent */
  --geel-zon:     #FFC94D;   /* markering, aandacht */
  --koraal:       #E8583F;   /* fout / let-op, spaarzaam */
  --achtergrond:  #F3FBF5;   /* lichte, frisse achtergrond */
  --kaart:        #FFFFFF;
  --rand:         #DCEFE2;
  --schaduw: 0 6px 18px rgba(31,58,52,0.08);

  --lettertype-kop: "Baloo 2", "Nunito", system-ui, sans-serif;
  --lettertype-body: "Nunito", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--lettertype-body);
  color:var(--groen-donker);
  background:var(--achtergrond);
  line-height:1.6;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--lettertype-kop);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .6em 0;
}
h1{ font-size:clamp(1.8rem,4vw,2.6rem); }
h2{ font-size:clamp(1.4rem,3vw,1.9rem); color:var(--groen-fris); }
h3{ font-size:1.25rem; }

a{ color:var(--blauw-hemel); text-decoration-thickness:1px; }
a:hover{ color:var(--groen-fris); }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--geel-zon);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 1.25rem;
}

/* --- header / nav --- */
.site-header{
  background:var(--kaart);
  border-bottom:1px solid var(--rand);
  position:sticky; top:0; z-index:20;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  padding-top:.75rem; padding-bottom:.75rem;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--lettertype-kop);
  font-size:1.25rem; font-weight:700;
  color:var(--groen-donker); text-decoration:none;
}
.logo:hover{ color:var(--groen-fris); }
.logo svg{ width:38px; height:38px; flex:none; }

nav.hoofdmenu ul{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:.25rem 1rem; margin:0; padding:0;
}
nav.hoofdmenu a{
  display:inline-block; padding:.4rem .5rem;
  text-decoration:none; color:var(--groen-donker); font-weight:700;
  border-radius:8px;
}
nav.hoofdmenu a:hover, nav.hoofdmenu a[aria-current="page"]{
  background:var(--achtergrond); color:var(--groen-fris);
}

/* --- hero --- */
.hero{
  padding:2.5rem 0 1.5rem;
}
.hero .kicker{
  display:inline-block; font-weight:800; letter-spacing:.03em;
  color:var(--groen-fris); background:#E4F7EC;
  padding:.25rem .7rem; border-radius:999px; font-size:.85rem;
  margin-bottom:.75rem;
}
.hero p.intro{ font-size:1.1rem; max-width:60ch; }

/* --- taalpad kaarten (homepage overzicht) --- */
.taalpad{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:2rem 0;
  counter-reset:pad;
}
.pad-kaart{
  counter-increment:pad;
  background:var(--kaart); border:1px solid var(--rand); border-radius:16px;
  padding:1.1rem 1.2rem; text-decoration:none; color:var(--groen-donker);
  box-shadow:var(--schaduw); position:relative; transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:.4rem;
}
.pad-kaart:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(31,58,52,0.14); }
.pad-kaart .stapnummer{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--groen-fris); color:#fff; font-family:var(--lettertype-kop);
  font-weight:700; font-size:.95rem;
}
.pad-kaart h3{ margin:.2rem 0 0; color:var(--groen-donker); }
.pad-kaart p{ margin:0; font-size:.95rem; color:#3D5C54; }
.pad-kaart .categorie{
  font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--blauw-hemel);
}

/* --- algemene secties --- */
main{ padding-bottom:3rem; }
section.blok{ margin:2rem 0; }
.kernuitleg{
  background:var(--kaart); border:1px solid var(--rand); border-radius:16px;
  padding:1.3rem 1.5rem; box-shadow:var(--schaduw);
}
.kernuitleg ul{ padding-left:1.2rem; }
.voorbeeldzin{
  display:inline-block; background:#EAF6EF; border:1px dashed var(--groen-fris);
  border-radius:10px; padding:.15rem .55rem; font-weight:700; margin:.15rem 0;
}
.markering{
  background:var(--geel-zon); padding:.05em .3em; border-radius:5px;
}

/* --- oefeningen --- */
.oefening-blok{
  background:var(--kaart); border:1px solid var(--rand); border-radius:16px;
  padding:1.2rem 1.4rem; margin:1.5rem 0; box-shadow:var(--schaduw);
}
.oefening-blok{ scroll-margin-top:5.5rem; }
.niveau-badge{
  display:inline-block; font-weight:800; font-size:.75rem; letter-spacing:.03em;
  text-transform:uppercase; color:#fff; background:var(--blauw-hemel);
  padding:.2rem .6rem; border-radius:999px; margin-bottom:.5rem;
}
.oefening-blok h3{ margin-bottom:.2rem; }
.instructie{ color:#3D5C54; margin-top:0; }
ol.zinnenlijst{ padding-left:1.1rem; margin:1rem 0; }
li.zin{ margin:.55rem 0; line-height:2.1; }

button.woord{
  font:inherit; font-weight:700; font-size:.98rem;
  background:#F1F8F3; border:2px solid var(--rand); color:var(--groen-donker);
  border-radius:8px; padding:.15rem .5rem; margin:0 .12rem 0 0;
  cursor:pointer; transition:all .12s ease;
}
button.woord:hover{ border-color:var(--blauw-hemel); }
button.woord.geselecteerd{
  background:var(--blauw-hemel); border-color:var(--blauw-hemel); color:#fff;
}
button.woord.juist-antwoord{
  background:var(--groen-fris); border-color:var(--groen-fris); color:#fff;
}
button.woord.fout-antwoord{
  background:var(--koraal); border-color:var(--koraal); color:#fff;
}
button.woord.gemist-antwoord{
  background:#FFF3D6; border-color:var(--geel-zon); color:var(--groen-donker);
}
.feedback{ margin-left:.4rem; font-weight:800; }
.feedback-goed{ color:var(--groen-fris); }
.feedback-fout{ color:var(--koraal); }

button.controleer-btn{
  font:inherit; font-weight:800; font-family:var(--lettertype-kop);
  background:var(--groen-fris); color:#fff; border:none; border-radius:999px;
  padding:.65rem 1.4rem; cursor:pointer; margin-top:.5rem; margin-right:.6rem; font-size:1rem;
}
button.controleer-btn:hover{ background:#25835A; }
button.toon-antwoorden-btn{
  font:inherit; font-weight:800; font-family:var(--lettertype-kop);
  background:#fff; color:var(--blauw-hemel); border:2px solid var(--blauw-hemel); border-radius:999px;
  padding:.6rem 1.35rem; cursor:pointer; margin-top:.5rem; font-size:1rem;
}
button.toon-antwoorden-btn:hover{ background:var(--blauw-hemel); color:#fff; }
button.woord.toon-antwoord{
  background:#FFF3D6; border-color:var(--geel-zon); color:var(--groen-donker);
}
p.score{ font-weight:800; margin:.5rem 0 0; }

.legenda{
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; font-size:.9rem; margin:1rem 0 2rem;
}
.legenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.legenda i{
  width:14px; height:14px; border-radius:4px; display:inline-block; border:2px solid var(--rand);
}
.legenda i.b-select{ background:var(--blauw-hemel); border-color:var(--blauw-hemel); }
.legenda i.b-goed{ background:var(--groen-fris); border-color:var(--groen-fris); }
.legenda i.b-fout{ background:var(--koraal); border-color:var(--koraal); }
.legenda i.b-gemist{ background:#FFF3D6; border-color:var(--geel-zon); }

/* --- links & FAQ pagina --- */
.linklijst{ list-style:none; padding:0; display:grid; gap:1rem; }
.linklijst li{
  background:var(--kaart); border:1px solid var(--rand); border-radius:14px;
  padding:1rem 1.2rem; box-shadow:var(--schaduw);
}
.linklijst h3{ margin:0 0 .2rem; }
.linklijst p{ margin:0; }

.faq details{
  background:var(--kaart); border:1px solid var(--rand); border-radius:14px;
  padding:.9rem 1.2rem; margin:.8rem 0; box-shadow:var(--schaduw);
}
.faq summary{
  cursor:pointer; font-weight:800; font-family:var(--lettertype-kop); font-size:1.05rem;
}
.faq p{ margin:.6rem 0 .1rem; }

/* --- footer --- */
footer.site-footer{
  background:#EAF6EF; border-top:1px solid var(--rand);
  padding:2.5rem 0 2rem; margin-top:3rem; font-size:.95rem;
}
footer.site-footer .footer-grid{
  display:grid; gap:2rem;
  grid-template-columns:1.3fr 1fr 1fr;
}
footer.site-footer h4{
  font-family:var(--lettertype-kop); color:var(--groen-fris);
  font-size:1rem; margin:0 0 .6rem;
}
footer.site-footer a{ color:var(--groen-donker); font-weight:400; text-decoration-color:var(--groen-fris); }
footer.site-footer a:hover{ color:var(--groen-fris); }
footer.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
footer.site-footer .footer-onder{
  border-top:1px solid var(--rand); margin-top:2rem; padding-top:1rem;
  font-size:.85rem; color:#3D5C54;
}
@media (max-width:720px){
  footer.site-footer .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  footer.site-footer .footer-grid{ grid-template-columns:1fr; }
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--groen-fris); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }

@media (max-width:640px){
  nav.hoofdmenu ul{ gap:.15rem .6rem; }
  .oefening-blok{ padding:1rem; }
}