/* ============================================
   Verwijswoord.nl — gedeelde stijl
   Thema: basisschool Janboel (vrolijk, kinderlijk)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  --geel:    #ffd23f;
  --oranje:  #ff8c42;
  --rood:    #ff5c5c;
  --groen:   #3ec46d;
  --blauw:   #2d9cdb;
  --paars:   #9b5de5;
  --inkt:    #2b2233;
  --room:    #fff8ec;
  --wit:     #ffffff;
  --zacht:   #fef3df;
  --schaduw: 0 6px 0 rgba(43,34,51,.12);
  --rond:    22px;
  --display: 'Baloo 2', system-ui, sans-serif;
  --body:    'Nunito', system-ui, sans-serif;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--body);
  color:var(--inkt);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,210,63,.25), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(45,156,219,.18), transparent 28%),
    radial-gradient(circle at 75% 92%, rgba(62,196,109,.16), transparent 30%),
    var(--room);
  background-attachment:fixed;
  line-height:1.6;
  min-height:100vh;
}

/* ---------- Skip link voor toegankelijkheid ---------- */
.skip{
  position:absolute;left:-999px;top:0;background:var(--inkt);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 12px 0;z-index:200;
}
.skip:focus{left:0;}

/* ---------- Koptekst / navigatie ---------- */
.site-header{
  background:var(--wit);
  border-bottom:4px solid var(--geel);
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 16px rgba(43,34,51,.07);
}
.bar{
  max-width:1100px;margin:0 auto;padding:.7rem 1.2rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--inkt);}
.brand .logo{width:46px;height:46px;flex:none;}
.brand b{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.5px;}
.brand b span{color:var(--oranje);}

nav.main{display:flex;flex-wrap:wrap;gap:.35rem;}
nav.main a{
  font-family:var(--display);font-weight:600;font-size:.98rem;
  text-decoration:none;color:var(--inkt);
  padding:.4rem .7rem;border-radius:14px;transition:.15s;
}
nav.main a:hover{background:var(--zacht);}
nav.main a[aria-current="page"]{background:var(--inkt);color:#fff;}

.menu-toggle{display:none;}

/* ---------- Algemene opbouw ---------- */
main{max-width:920px;margin:0 auto;padding:2rem 1.2rem 4rem;}
.wide{max-width:1100px;}

h1{
  font-family:var(--display);font-weight:800;line-height:1.1;
  font-size:clamp(2rem,5vw,3.1rem);margin:.2rem 0 .6rem;letter-spacing:-1px;
}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);margin:2.2rem 0 .6rem;}
h3{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:1.4rem 0 .4rem;}
p{margin:.5rem 0;}
a{color:var(--blauw);}

.eyebrow{
  display:inline-block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;
  color:var(--oranje);background:var(--zacht);
  padding:.3rem .8rem;border-radius:999px;margin-bottom:.4rem;
}

/* ---------- Kaarten ---------- */
.card{
  background:var(--wit);border-radius:var(--rond);
  padding:1.4rem 1.5rem;box-shadow:var(--schaduw);
  border:2px solid rgba(43,34,51,.06);margin:1rem 0;
}
.note{
  background:var(--zacht);border-left:6px solid var(--geel);
  border-radius:12px;padding:.9rem 1.1rem;margin:1rem 0;
}
.example{
  background:var(--wit);border:2px dashed var(--blauw);
  border-radius:16px;padding:1rem 1.2rem;margin:.8rem 0;
}
.example .vw{
  background:var(--geel);font-weight:800;border-radius:8px;
  padding:.05em .4em;color:var(--inkt);
}
.example .uitleg{margin:.5rem 0 0;font-style:italic;color:#5b5168;}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:1.05rem;
  text-decoration:none;cursor:pointer;border:none;
  background:var(--groen);color:#fff;padding:.75rem 1.4rem;border-radius:999px;
  box-shadow:0 5px 0 #2c9b53;transition:transform .08s, box-shadow .08s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #2c9b53;}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 #2c9b53;}
.btn.alt{background:var(--blauw);box-shadow:0 5px 0 #1f7bb0;}
.btn.alt:hover{box-shadow:0 3px 0 #1f7bb0;}
.btn.warm{background:var(--oranje);box-shadow:0 5px 0 #d96f2a;}
.btn:focus-visible{outline:3px solid var(--paars);outline-offset:3px;}

/* ---------- Hero homepage ---------- */
.hero{
  text-align:center;padding:1rem 0 .5rem;position:relative;
}
.hero .doel-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;margin:1.6rem 0;
}
.doel{
  text-decoration:none;color:var(--inkt);background:var(--wit);
  border-radius:var(--rond);padding:1.4rem 1.2rem;box-shadow:var(--schaduw);
  border:3px solid transparent;transition:.15s;text-align:left;
  display:flex;flex-direction:column;gap:.3rem;
}
.doel:hover{transform:translateY(-4px);}
.doel .num{font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;}
.doel b{font-family:var(--display);font-size:1.2rem;}
.doel small{color:#5b5168;font-size:.95rem;}
.doel.c1{border-color:var(--oranje);} .doel.c1 .num{color:var(--oranje);}
.doel.c2{border-color:var(--blauw);}  .doel.c2 .num{color:var(--blauw);}
.doel.c3{border-color:var(--groen);}  .doel.c3 .num{color:var(--groen);}
.doel.c4{border-color:var(--paars);}  .doel.c4 .num{color:var(--paars);}

.emoji-rij{font-size:2rem;letter-spacing:.4rem;margin:.4rem 0;}

/* ---------- Oefeningen ---------- */
.oefen-intro{background:var(--wit);border-radius:var(--rond);padding:1.2rem 1.4rem;
  box-shadow:var(--schaduw);margin-bottom:1.2rem;}
.voortgang{
  font-family:var(--display);font-weight:700;color:var(--inkt);
  background:var(--zacht);display:inline-block;padding:.35rem .9rem;border-radius:999px;
}
.vraag{
  background:var(--wit);border-radius:18px;padding:1.1rem 1.2rem;margin:.9rem 0;
  box-shadow:var(--schaduw);border:2px solid rgba(43,34,51,.06);
}
.vraag .zin{font-size:1.15rem;margin:.2rem 0 .8rem;}
.vraag .zin .vw{background:var(--geel);font-weight:800;border-radius:7px;padding:.05em .35em;}
.vraag .prompt{font-weight:700;margin-bottom:.5rem;}
.antwoord-rij{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
.vraag input[type=text]{
  font-family:var(--body);font-size:1.05rem;padding:.6rem .9rem;border-radius:12px;
  border:2px solid #d8cfc0;background:#fffdf8;min-width:200px;flex:1;
}
.vraag input[type=text]:focus{outline:none;border-color:var(--blauw);}
.check{
  font-family:var(--display);font-weight:700;border:none;cursor:pointer;
  background:var(--blauw);color:#fff;padding:.6rem 1.1rem;border-radius:12px;
  box-shadow:0 4px 0 #1f7bb0;
}
.check:hover{transform:translateY(2px);box-shadow:0 2px 0 #1f7bb0;}
.feedback{margin-top:.7rem;font-weight:600;border-radius:12px;padding:.5rem .8rem;display:none;}
.feedback.goed{display:block;background:#e3f8ea;color:#1f7a43;border:2px solid var(--groen);}
.feedback.fout{display:block;background:#ffeaea;color:#c43b3b;border:2px solid var(--rood);}
.vraag.opgelost{border-color:var(--groen);}

.scorebalk{
  position:sticky;bottom:0;background:var(--wit);border-top:3px solid var(--geel);
  padding:.7rem 1rem;text-align:center;font-family:var(--display);font-weight:700;
  border-radius:16px 16px 0 0;box-shadow:0 -4px 14px rgba(43,34,51,.08);margin-top:1.2rem;
}
.knoprij{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:1.6rem 0 .5rem;}

/* ---------- FAQ ---------- */
details.faq{
  background:var(--wit);border-radius:16px;margin:.7rem 0;padding:.2rem 1.2rem;
  box-shadow:var(--schaduw);border:2px solid rgba(43,34,51,.06);
}
details.faq summary{
  font-family:var(--display);font-weight:700;font-size:1.15rem;cursor:pointer;
  padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-size:1.6rem;color:var(--oranje);transition:.2s;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq .inhoud{padding-bottom:1rem;}

table.ordening{width:100%;border-collapse:collapse;margin:1rem 0;background:var(--wit);
  border-radius:14px;overflow:hidden;box-shadow:var(--schaduw);}
table.ordening th,table.ordening td{padding:.7rem .8rem;text-align:left;border-bottom:1px solid #eee;}
table.ordening th{background:var(--inkt);color:#fff;font-family:var(--display);}
table.ordening tr:last-child td{border-bottom:none;}

/* ---------- Links pagina ---------- */
.linklijst{list-style:none;padding:0;}
.linklijst li{
  background:var(--wit);border-radius:14px;padding:1rem 1.2rem;margin:.6rem 0;
  box-shadow:var(--schaduw);display:flex;align-items:center;gap:.8rem;
}
.linklijst li::before{content:"🔗";font-size:1.3rem;}

/* ---------- Voettekst ---------- */
.site-footer{
  background:var(--inkt);color:#f3eee8;margin-top:3rem;padding:2rem 1.2rem;
}
.foot{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;}
.site-footer a{color:var(--geel);}
.site-footer h4{font-family:var(--display);margin:0 0 .4rem;}
.site-footer small{color:#b5aec5;}

/* ---------- Responsief ---------- */
@media (max-width:680px){
  .menu-toggle{
    display:block;font-family:var(--display);font-weight:700;background:var(--inkt);
    color:#fff;border:none;border-radius:12px;padding:.5rem .9rem;cursor:pointer;
  }
  nav.main{display:none;width:100%;flex-direction:column;}
  nav.main.open{display:flex;}
  nav.main a{padding:.6rem .7rem;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important;}
}