/* ============================================================
   VORMGEVING VAN DE SITE — pas hier de "instelknoppen" aan
   ============================================================
   Alles hieronder in ":root{ }" bepaalt de look van de HELE site.
   Verander een waarde en sla op — je hoeft verder niets te snappen.

   --ink            : kleur van de gewone tekst
   --ink-soft        : kleur van de wat rustigere/grijzere tekst
   --paper           : kleur van de "kaartjes"/vakken (licht doorzichtig wit)
   --paper-solid     : kleur van knoppen en formuliervelden (effen wit)
   --line            : kleur van dunne randlijntjes
   --accent          : hoofdkleur van de site (bijv. de "Inloggen"-knop-kleur op thema-pagina's)
   --radius          : hoe rond de hoeken van vakken zijn (groter getal = ronder)
   --maxw            : maximale breedte van de inhoud (groter = bredere pagina op een groot scherm)

   Wil je een ANDERE ACHTERGRONDAFBEELDING? Zoek verderop in dit
   bestand naar "background-image" en vervang het bestandspad.

   Wil je ANDERE LETTERTYPES? Vervang de naam "Balsamiq Sans" (voor
   koppen/titels) of "Quicksand" (voor lopende tekst) hieronder, en in
   de regel "font-family:" op de plekken waar ze verderop gebruikt
   worden. Nieuwe lettertypes vind je gratis op fonts.google.com —
   kopieer daar de "@import"-regel en vervang de eerste regel van dit
   bestand ermee.

   Wil je de KLEUR VAN EEN THEMA (bijv. "Competentie" = groen)
   aanpassen? Dat staat niet hier, maar in js/data.js — zoek daar
   naar "color:" bij het betreffende thema.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Quicksand:wght@400;500;600;700&display=swap');

@font-face{
  font-family:'Antropos';
  src: url('../assets/fonts/Antropos.woff') format('woff'),
       url('../assets/fonts/Antropos.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:#33281a;
  --ink-soft:#7a6a54;
  --paper: rgba(255,255,255,0.96);
  --paper-solid:#ffffff;
  --line: rgba(60,45,25,0.16);
  --accent:#3E6E8E;
  --radius: 18px;
  --torn: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --maxw: 1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Quicksand', 'Trebuchet MS', sans-serif;
  color:var(--ink);
  /* Effen paginakleur. Het patroon van de achtergrondafbeelding komt
     nu alleen terug in de balk bovenaan (.top-band) en de hoek
     rechtsonder (.corner-accent) hieronder, niet meer over de hele pagina. */
  background-color:#fbfbf9;
  line-height:1.55;
}

.top-band{
  height:150px;
  width:100%;
  background-image:url('../assets/bg-blue-hq.jpg');
  background-size:cover;
  background-position:center 20%;
  position:relative;
}
.top-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(251,251,249,0) 55%, #fbfbf9 100%);
}

.corner-accent{
  position:fixed;
  bottom:0;
  right:0;
  width:240px;
  height:240px;
  background-image:url('../assets/bg-blue-hq.jpg');
  background-size:300%;
  background-position:-10px -150px;
  opacity:0.45;
  border-top-left-radius:100%;
  pointer-events:none;
  z-index:-1;
}

@media (max-width: 640px){
  .top-band{height:90px;}
  .corner-accent{width:140px; height:140px;}
}

h1,h2,h3,.hand{
  font-family:'Antropos', 'Balsamiq Sans', cursive;
  letter-spacing:0.3px;
}

a{color:inherit;}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:16px; flex-wrap:wrap;
}
.brand{
  font-family:'Antropos', 'Balsamiq Sans', cursive;
  font-size:1.35rem;
  text-decoration:none;
  color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);display:inline-block;}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.nav-links a{text-decoration:none; font-size:0.98rem; color:var(--ink-soft); border-bottom:2px solid transparent; padding-bottom:2px;}
.nav-links a:hover{color:var(--ink); border-color:var(--accent);}
#auth-status{font-size:0.92rem; color:var(--ink-soft);}
#auth-status button, .btn-link{
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.92rem;color:var(--ink-soft);text-decoration:underline;padding:0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:'Antropos', 'Balsamiq Sans', cursive;
  font-size:1rem;
  padding:12px 22px;
  border-radius:12px;
  border:2.5px solid var(--ink);
  background:var(--paper-solid);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:3px 3px 0 var(--ink);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(0,0); box-shadow:1px 1px 0 var(--ink);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:3px 3px 0 var(--ink); font-weight:700;}
.btn-secondary{background:#6FA3C2; color:#12313f; border-color:#6FA3C2; box-shadow:3px 3px 0 var(--ink); font-weight:700;}
.btn-tertiary{background:#F1F7FA; color:#12313f; border-color:#cfe1ea; box-shadow:3px 3px 0 var(--ink); font-weight:700;}
.btn-ghost{background:transparent;}
.btn-sm{padding:8px 14px; font-size:0.88rem;}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;}
.hero .tagline{
  font-family:'Antropos', 'Balsamiq Sans', cursive;
  font-size:clamp(1.3rem, 3vw, 2.1rem);
  margin:0 0 6px;
  max-width:900px;
}
.hero .tagline .circled{
  display:inline-block;
  position:relative;
  padding:8px 20px;
}
.hero .tagline .circled::after{
  content:"";
  position:absolute;
  inset:-4px -6px;
  border:3px solid var(--accent);
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;
  z-index:-1;
  pointer-events:none;
}
.hero p.lead{font-size:1.3rem; font-weight:600; color:var(--ink); max-width:720px; line-height:1.5;}
.hero p.lead .highlight{color:color-mix(in srgb, var(--accent) 80%, black); font-weight:700;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;}

/* ---------- Panels / cards ---------- */
.panel{
  background:var(--paper);
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:32px;
  box-shadow:0 12px 30px rgba(30,40,60,0.08);
}
section{margin:44px 0;}

/* ---------- Theme grid ---------- */
.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:18px;
}
.theme-card{
  --tc: #2F5A73;
  display:block;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper-solid);
  border-radius:10px;
  padding:22px 20px;
  min-height:130px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-left:5px solid var(--tc);
  transition:transform .18s ease, box-shadow .18s ease;
}
.theme-card:hover{transform:translateY(-4px); box-shadow:0 10px 20px rgba(30,20,10,0.12);}
.theme-card h3{margin:0 0 8px; font-size:1.2rem; color:color-mix(in srgb, var(--tc) 75%, black);}
.theme-card p{margin:0; font-size:0.88rem; color:var(--ink-soft);}
.theme-card .arrow{position:absolute; right:16px; bottom:14px; font-size:1.3rem; color:var(--tc); opacity:0.9;}

/* ---------- Theme detail ---------- */
.theme-header{
  padding:36px 32px;
  border-radius:var(--radius);
  color:#fff;
  margin-bottom:30px;
}
.theme-header .eyebrow{opacity:0.85; font-size:0.95rem; margin-bottom:6px;}
.theme-header h1{margin:0 0 10px; font-size:2.1rem;}
.theme-header p{margin:0; max-width:700px; opacity:0.95;}

.meer-info-vast{margin-bottom:20px;}
.meer-info-vast h2{margin-top:0; font-size:1.2rem;}
.meer-info-vast p{color:var(--ink); line-height:1.55; margin:0 0 14px;}
.meer-info-vast p:last-child{margin-bottom:0;}

.meerinfo-uitklap-list{display:flex; flex-direction:column; gap:10px; margin-bottom:34px;}
.meerinfo-uitklap-item{
  background:var(--tc-light, var(--paper)); border:1px solid var(--tc-line, var(--line)); border-radius:10px; overflow:hidden;
}
.meerinfo-uitklap-item summary{
  cursor:pointer; font-family:'Antropos','Balsamiq Sans',cursive; font-size:1rem;
  padding:12px 18px; list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.meerinfo-uitklap-item summary::after{content:"+"; font-size:1.2rem; opacity:0.7;}
.meerinfo-uitklap-item[open] summary::after{content:"\2212";}
.meerinfo-uitklap-item summary::-webkit-details-marker{display:none;}
.meerinfo-uitklap-body{padding:0 18px 16px; color:var(--ink);}
.meerinfo-uitklap-body p{line-height:1.55; margin:0 0 14px;}
.meerinfo-uitklap-body p:last-child{margin-bottom:0;}
.uitklap-accent{
  background:color-mix(in srgb, var(--accent) 18%, white);
  padding:1px 4px; border-radius:4px;
}

.subtopic{margin-bottom:50px;}
.subtopic > h2{font-size:1.5rem; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.subtopic > h2 .swatch{width:14px;height:14px;border-radius:50%; display:inline-block;}

.levels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.level-card{
  background:linear-gradient(175deg, #fffdf8 0%, color-mix(in srgb, var(--tc, var(--accent)) 65%, white) 100%);
  border-radius:var(--radius);
  border:1px solid var(--line);
  padding:20px;
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  font-family:'Balsamiq Sans', cursive;
}
.level-card .level-num{
  font-family:'Balsamiq Sans', cursive;
  font-size:0.95rem;
  color:var(--ink-soft);
}
.level-card blockquote{
  margin:0; padding:14px 16px;
  border-radius:var(--torn);
  border:2.5px solid var(--tc, var(--accent));
  font-style:normal;
  font-size:0.98rem;
  background:rgba(255,255,255,0.55);
}
.level-card .body-text{
  margin:0; padding:14px 16px;
  border-radius:var(--torn);
  border:2.5px solid var(--tc, var(--accent));
  background:rgba(255,255,255,0.55);
  font-size:0.98rem; color:var(--ink); font-family:'Balsamiq Sans', cursive;
}
.level-card ul{margin:0; padding-left:18px; font-size:0.9rem; color:var(--ink); font-family:'Balsamiq Sans', cursive;}
.level-card ul li{margin-bottom:6px;}
.level-card .level-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.locked-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px 10px;
  min-height:120px;
  border-radius:var(--torn);
  border:2.5px dashed var(--tc, var(--accent));
  background:rgba(255,255,255,0.4);
  text-align:center;
}
.locked-icon{font-size:1.6rem; opacity:0.7;}
.locked-text{margin:0; font-size:0.85rem; color:var(--ink-soft); font-family:'Balsamiq Sans', cursive;}
.level-card .label{
  font-family:'Balsamiq Sans', cursive;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--tc, var(--accent));
  white-space:nowrap;
}
.level-card .mark-btn{
  font-size:0.8rem;
  padding:6px 12px;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:transparent;
  cursor:pointer;
  font-family:'Literata', serif;
}
.level-card.done{outline:2.5px solid #2f7a3d;}
.level-card .mark-btn.done{background:#2f7a3d; color:#fff; border-color:#2f7a3d;}

/* ---------- Forms / auth ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,25,35,0.55); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.modal{
  background:var(--paper-solid); border-radius:var(--radius); padding:32px;
  max-width:400px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.3);
  max-height:calc(100vh - 40px); overflow-y:auto;
  margin:auto;
}
.modal h2{margin-top:0;}
.field{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.88rem; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  padding:10px 12px; border-radius:8px; border:1.5px solid var(--line); font-family:inherit; font-size:0.98rem;
}
.modal-actions{display:flex; justify-content:space-between; align-items:center; margin-top:18px;}
.form-msg{font-size:0.88rem; margin-top:10px;}
.form-msg.error{color:#a33;}
.form-msg.success{color:#2f7a3d;}
.modal-close{position:absolute; top:14px; right:18px; background:none;border:none;font-size:1.3rem;cursor:pointer;}
.modal{position:relative;}

.auth-tabs{display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid var(--line);}
.auth-tab{
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:0.9rem;
  padding:8px 4px; color:var(--ink-soft); border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.auth-tab.active{color:var(--ink); border-bottom-color:var(--accent); font-weight:600;}
.auth-uitleg{
  background:#f7f5ef; border-radius:8px; padding:12px 14px; margin:6px 0 14px; font-size:0.82rem; color:var(--ink-soft);
}
.auth-uitleg b{color:var(--ink);}
.auth-uitleg p{margin:6px 0 0;}
.vakken-dropdown{
  border:1.5px solid var(--line); border-radius:8px; background:#f7f5ef; overflow:hidden;
}
.vakken-dropdown summary{
  cursor:pointer; padding:10px 12px; font-size:0.95rem; list-style:none;
  display:flex; align-items:center; justify-content:space-between;
}
.vakken-dropdown summary::after{content:"\25BC"; font-size:0.7rem; color:var(--ink-soft); margin-left:8px;}
.vakken-dropdown[open] summary::after{content:"\25B2";}
.vakken-dropdown summary::-webkit-details-marker{display:none;}
.vakken-lijst{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;
  padding:4px 12px 14px;
}
.vak-optie{
  display:flex; align-items:center; gap:6px; font-size:0.88rem; font-weight:400; cursor:pointer;
}

/* ---------- Opdrachten ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.filter-chip{
  padding:8px 16px; border-radius:20px; border:1.5px solid var(--line);
  background:var(--paper); cursor:pointer; font-size:0.9rem;
}
.filter-chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.opdracht-list{display:grid; gap:16px;}
.opdracht-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px;
}
.opdracht-card h3{margin:0 0 6px;}
.opdracht-meta{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; font-size:0.8rem;}
.pill{padding:3px 10px; border-radius:20px; background:var(--ink); color:#fff;}
.pill.klas{background:var(--accent);}
.empty-state{color:var(--ink-soft); font-style:italic; padding:30px 0; text-align:center;}

/* ---------- Footer ---------- */
footer{padding:50px 0 60px; text-align:center; color:var(--ink-soft); font-size:0.9rem;}
footer a{text-decoration:underline;}

/* ---------- Voortgangswidget (rechtsonder) ---------- */
.progress-widget{
  position:fixed; bottom:18px; right:18px; z-index:60;
  background:var(--paper-solid); border:1.5px solid var(--line); border-radius:12px;
  padding:10px 14px; box-shadow:0 6px 18px rgba(30,20,10,0.14);
  min-width:180px;
}
.progress-widget-label{font-size:0.78rem; color:var(--ink-soft); margin-bottom:6px; font-family:'Antropos','Balsamiq Sans',cursive;}
.progress-widget-bar{height:8px; border-radius:6px; background:#eee; overflow:hidden;}
.progress-widget-fill{height:100%; background:var(--accent); border-radius:6px; transition:width .4s ease;}
@media (max-width:640px){ .progress-widget{bottom:10px; right:10px; min-width:140px; padding:8px 12px;} }

/* ---------- Beloning in de ontgrendelde kaart (compliment + bonus) ---------- */
.beloning-body{
  flex:1;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:20px 6px;
  min-height:140px;
  border-radius:var(--torn);
  border:2.5px solid var(--tc, var(--accent));
  background:rgba(255,255,255,0.55);
  text-align:center;
}
.beloning-compliment-card{
  margin:0; font-family:'Antropos','Balsamiq Sans',cursive; font-size:1.05rem; color:var(--ink);
}
.beloning-extra-card{margin:0; font-size:0.9rem; color:var(--ink-soft);}
.beloning-extra-card strong{display:block; color:var(--tc, var(--accent)); margin-bottom:4px; font-family:'Antropos','Balsamiq Sans',cursive;}

/* ---------- Periodeonderwijs-pagina ---------- */
.po-subkop{
  font-family:'Antropos','Balsamiq Sans',cursive; font-size:1.15rem;
  margin:26px 0 8px; color:var(--ink);
}
.po-subkop:first-of-type{margin-top:20px;}
.po-pijltje{
  position:relative;
  margin:22px 0 0;
  padding-left:26px;
  color:var(--ink-soft);
  font-size:0.95rem;
}
.po-pijltje::before{
  content:"\2192";
  position:absolute; left:0; top:0;
  color:var(--accent);
}

/* ---------- Reflectie-modal ---------- */
.reflectie-vraag{font-size:1.05rem; font-family:'Antropos','Balsamiq Sans',cursive; margin-bottom:14px;}
.reflectie-textarea{width:100%; min-height:120px; padding:12px; border-radius:8px; border:1.5px solid var(--line); font-family:inherit; font-size:0.95rem; resize:vertical;}
.reflectie-count{font-size:0.82rem; color:var(--ink-soft); margin-top:6px;}
.reflectie-count.ok{color:#2f7a3d;}
.reflectie-readonly{white-space:pre-wrap; background:#f7f5ef; border-radius:8px; padding:14px; font-size:0.95rem; line-height:1.55;}
.reflectie-vervolg{
  margin-top:14px; padding:14px 16px; border-radius:10px;
  background:#fff7e8; border:1.5px solid #f0d99a;
}
.reflectie-vervolg-tekst{margin:0 0 10px; font-size:0.9rem; color:#5c4a1e;}
.reflectie-vervolg-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

@media (max-width: 640px){
  .theme-header{padding:26px 22px;}
  .panel{padding:22px;}
}