/* =========================
   Thema-variabelen
   ========================= */
:root{
  --bg:#f6efe3;
  --text:#2a1f12;
  --paper:#fffdfa;
  --accent:#7a5a38;
  --muted:#6f5b49;
  --shadow:0 2px 8px rgba(0,0,0,.08);

  --script-font:'Dancing Script','Caveat',cursive;
  --ui-font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html[data-theme="classic"]{
  --bg:#f6efe3;
  --text:#2a1f12;
  --paper:#fffdfa;
  --accent:#7a5a38;
  --muted:#6f5b49;
}

html[data-theme="dark"]{
  --bg:#0f1115;
  --text:#eef2f8;
  --paper:#171a21;
  --accent:#8ab4f8;
  --muted:#a0a7b4;
}

html[data-theme="sepia"]{
  --bg:#f2eadb;
  --text:#2b2116;
  --paper:#fbf5e6;
  --accent:#8c5a2b;
  --muted:#7a6a58;
}

/* =========================
   Basis
   ========================= */
*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 var(--ui-font);
}

a{ color:var(--accent); text-decoration:none; }

.container{
  max-width:1200px;   /* breder voor 3 kolommen */
  margin:0 auto;
  padding:0 16px 64px;
}

/* =========================
   Topbar & header
   ========================= */
/* 2 rijen: titel op eigen regel, menu op eigen regel */
.topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 16px;
}

/* H1 2px kleiner en gecentreerd */
.logo{
  font-family:var(--script-font);
  font-size:40px;      /* was 42px */
  margin:6px 0 6px;
  text-align:center;
}

/* Navigatie */
.nav{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

/* Home-knop */
.btn-home{
  background:var(--paper);
  border:1px solid #ddd;
  border-radius:10px;
  padding:8px 12px;
  font-weight:600;
  color:var(--text);
  text-decoration:none;
}
.btn-home:hover{ filter:brightness(.96); }

.theme-select{
  appearance:none;
  background:var(--paper);
  border:1px solid #ddd;
  border-radius:10px;
  padding:8px 12px;
  color:var(--text);
}

/* Mobiel gedrag */
@media (max-width:640px){
  .topbar{ gap:4px; padding:10px 12px; }
  .logo{ font-size:32px; margin:2px 0 4px; }
  .nav{ flex-wrap:wrap; }
}

.header-hero{
  width:100%;
  height:250px;
  background: url('../img/header-book.png') center/cover no-repeat !important;
  border-bottom:6px solid rgba(0,0,0,.08);
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  margin:0;
  padding:0;
  line-height:0;
}



/* Minder ruimte boven eerste vraag / hoofdstukbeeld compacter */
.container{ padding-top:0; }
.chapter-hero{ margin:6px 0 10px; }

/* =========================
   Cards
   ========================= */
.card{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow);
}

/* =========================
   Hoofdstukken-grid (3 kolommen)
   ========================= */
.chapter-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
@media (max-width:1024px){
  .chapter-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .chapter-grid{ grid-template-columns:1fr; }
}

.chapter-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.chapter-card img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;      /* vierkante thumbnail */
  object-fit:cover;
  border-radius:10px;
  margin:0 0 12px;
}

.chapter-card h2{
  font-size:18px;
  text-align:center;
  margin:8px 0 0;
}

/* =========================
   Vragen/antwoorden
   ========================= */
.qa-item{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:16px;
  margin:12px 0;
  box-shadow:var(--shadow);
}

/* Vraag = script; nummer blijft 'Special Elite'; +2px groter */
.q{
  display:block;
  font-weight:600;
  font-family:var(--script-font);
  font-size:24px; /* vergroot */
  margin:0 0 8px;
}
.q .qnum{ margin-right:6px; font-family:'Special Elite', var(--ui-font); }

/* Antwoord = nette UI-font (Poppins) */
textarea{
  width:100%;
  padding:12px;
  border:1px solid #d6d0c7;
  border-radius:10px;
  min-height:120px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(#0000,#0000 27px,#eee7da 28px) border-box;
  font-family:var(--ui-font);
  font-size:16px;
  line-height:26px;
  color:var(--text);
}

.upload-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.upload-row input[type=file]{ display:block; margin-top:4px; }

.savebar{
  position:sticky;
  bottom:0;
  background:var(--bg);
  padding:12px 0;
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:16px;
}

button.btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-weight:600;
  cursor:pointer;
}

/* =========================
   Meldingen
   ========================= */
.notice{
  background:#e7f7e7;
  border:1px solid #b9e5b9;
  color:#106410;
  padding:10px 12px;
  border-radius:8px;
  margin:10px 0;
}

/* =========================
   Login pagina
   ========================= */
body.auth{ display:flex; align-items:center; justify-content:center; min-height:100vh; }

.auth-card{
  background:var(--paper);
  padding:24px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  width:380px;
  max-width:92vw;
}

.auth-card h1{ font-family:var(--script-font); font-size:36px; margin-top:0; }
.auth-card label{ display:block; margin:10px 0; }
.auth-card input{ width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
.auth-card .error{
  background:#ffe6e6;
  border:1px solid #ffb3b3;
  color:#a40000;
  padding:8px;
  border-radius:8px;
}

/* =========================
   Intro / index
   ========================= */
.intro{
  max-width:800px;
  margin:8vh auto;
  background:var(--paper);
  padding:50px;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  text-align:center;
}

.intro h1{
  font-family:var(--script-font);
  font-size:3rem;
  color:var(--text);
  margin:0 0 .5em;
}

.intro p{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:1.8em;
}

.btn-primary{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:14px 32px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.btn-primary:hover{ filter:brightness(.95); }

footer{
  margin:60px 0 40px;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}

/* =========================
   Thumbnails & Galerij
   ========================= */
.thumb{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  border:1px solid rgba(0,0,0,.08);
}
.thumb-wrap{ margin:8px 0; }
.thumb-row{ display:flex; align-items:center; gap:12px; margin:8px 0 6px; }

.btn-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--accent); text-decoration:underline;
}
.btn-link.danger{ color:#b00020; }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px;
}
.gallery-item{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:8px;
  box-shadow:var(--shadow);
}
.gallery-item img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
/* --- NAV boven titel --- */
.topbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 12px;
}
.nav{ order:1; width:100%; display:flex; justify-content:center; align-items:center; gap:12px; }
.logo{ order:2; font-family:var(--script-font); font-size:40px; margin:2px 0 6px; text-align:center; }

/* --- Hoofdstukbeeld compacter (of geen ruimte) --- */
.chapter-hero{ margin:4px 0 6px !important; padding:0; line-height:0; }
.chapter-hero img{ width:96px; height:96px; object-fit:cover; border-radius:10px; display:block; }

/* Minder ruimte boven eerste vraag */
.container{ padding-top:0; }

@media (max-width:640px){
  .logo{ font-size:32px; margin:2px 0 4px; }
  .nav{ flex-wrap:wrap; }
}
/* ===== Leesbare invoer velden in DONKER thema ===== */
html[data-theme="dark"] textarea{
  color: var(--text);
  caret-color: var(--text);
  border: 1px solid #303744;
  /* papierkleur + subtiele lijntjes */
  background:
    linear-gradient(#171a21,#171a21) padding-box,
    repeating-linear-gradient(#0000,#0000 27px,#222a35 28px) border-box;
}
html[data-theme="dark"] textarea::placeholder{ color:#aab3c1; }

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .theme-select,
html[data-theme="dark"] .btn-home{
  background:#1c212b;
  color:var(--text);
  border:1px solid #303744;
}
html[data-theme="dark"] .btn-home:hover{ filter:brightness(1.06); }

/* optioneel: donkere kaarten wat lichter afsteken */
html[data-theme="dark"] .qa-item,
html[data-theme="dark"] .card{
  background:#171a21;
  border-color:#2a3140;
}
/* --- Autosave indicator --- */
.autosave-line{ display:flex; align-items:center; gap:8px; margin:6px 0 4px; }
.autosave-status{ font-size:.85rem; color:var(--muted); }
.autosave-status.ok{ color:#0b8a0b; }
.autosave-status.err{ color:#b00020; }
.autosave-status.spin{ color:var(--accent); }
/* ==== Icon-only upload & delete ==== */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sr-only{position:absolute!important;left:-9999px;}

.thumb-row{display:flex;align-items:center;gap:12px;margin:8px 0 6px;}

.icon-btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid rgba(0,0,0,.12);background:var(--paper);
  color:var(--accent);cursor:pointer;transition:filter .15s ease, background .15s ease;
}
.icon-btn:hover{filter:brightness(.96);}
.icon-btn svg{width:22px;height:22px;display:block;}

.icon-btn.danger{color:#d23;border-color:#d23;background:transparent;}
.icon-btn.danger:hover{background:rgba(210,35,35,.08);}

/* Donker thema */
html[data-theme="dark"] .icon-btn{background:#1c212b;border-color:#303744;color:var(--text);}
html[data-theme="dark"] .icon-btn.danger{color:#ff6b6b;border-color:#ff6b6b;}

/* --- Verwijderknop: alleen kruisje --- */
.icon-x{
  appearance:none;
  background:none;
  border:none;
  padding:0;
  margin:0;
  width:24px;
  height:24px;
  line-height:0;
  cursor:pointer;
  color:#414141; /* grijs kruisje*/
}
.icon-x:hover{ transform:scale(1.06); }
.icon-x svg{ width:20px; height:20px; display:block; }

/* donker thema tint */
html[data-theme="dark"] .icon-x{ color:#ff6b6b; }

/* ? help-knop in de topbar */
.help-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:var(--paper);border:1px solid #ddd;color:var(--text);
  font-weight:700;text-decoration:none;line-height:1;font-family:var(--ui-font);
}
.help-btn:hover{ filter:brightness(.96); }
html[data-theme="dark"] .help-btn{ background:#1c212b;border-color:#303744;color:var(--text); }

/* Titel in 2 regels op de hoofdstuk-tegels */
.chapter-card h3.chapter-label{
  font-size:14px;
  font-weight:500;
  margin:6px 0 2px;
  text-align:center;
  color:var(--muted);
}
.chapter-card .chapter-sub{
  font-size:16px;
  font-weight:600;
  text-align:center;
  margin:0;
}
/* Vragen en antwoorden: zelfde typografie (geen handschrift) */
.qa-item .q{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  font-style: normal !important;
  letter-spacing: 0;
}
.qa-item .q .qnum{
  font-family: inherit !important;
  font-weight: 700;
  font-style: normal !important;
}

/* Zorg dat invoervelden dezelfde fontstack gebruiken */
textarea,
input[type="text"],
input[type="password"],
select{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px;
  font-style: normal !important;
}
/* Nummering bij vragen verbergen */
.qa-item .q .qnum{
  display: none !important;
  margin: 0 !important;
}

/* Zorg dat er geen extra inspringing overblijft */
.qa-item .q{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* H1 bovenaan verbergen op start- en loginpagina */
.home .logo,
body.auth .logo{
  display: none !important;
}