/* Pagina's die zijn overgezet van de oude Wix-site (boek-QR-codes, toetsing, goodie bag, handboek).
   Bouwt voort op styles.css en v2.css van de hoofdwebsite; geen inline stijlen i.v.m. de CSP. */

.legacy-intro{padding-top:64px;padding-bottom:30px}
.legacy-intro h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}
.legacy-intro .lead{margin-top:24px;max-width:720px}
.legacy-intro .intro-meta{margin-top:18px;font-size:.92rem;color:var(--muted)}
.legacy-intro .intro-meta a,.legacy-intro .lead a{color:var(--green);font-weight:650;text-decoration:underline;text-underline-offset:3px}

/* Submenu van de boekpagina's */
.book-tabs{border-block:1px solid var(--line);background:var(--white)}
.book-tabs ul{list-style:none;margin:0;padding:10px 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.book-tabs a{display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;padding:9px 16px;border-radius:999px;font-size:.86rem;font-weight:650;color:var(--green);border:1px solid transparent;transition:background .2s,border-color .2s}
.book-tabs a:hover{background:var(--mint)}
.book-tabs a[aria-current="page"]{background:var(--green);color:#fff}

/* Boekomslag + inhoud */
.book-layout{display:grid;grid-template-columns:minmax(210px,290px) minmax(0,1fr);gap:64px;align-items:start;padding-block:56px 88px}
.book-aside{position:sticky;top:150px}
.book-aside img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px #173c321f}
.book-aside p{margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.6}
.book-aside a.text-link{margin-top:10px}
.book-content>*+*{margin-top:40px}
.book-content h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.book-content h2+p,.book-content h2+ul,.book-content h2+ol{margin-top:18px}
.book-content p{max-width:760px}
.book-content .prose a,.advice a,.toetsing-main a,.goodie-main a,.toc a{color:var(--green);font-weight:650;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.book-content .prose a:hover,.advice a:hover,.toetsing-main a:hover,.goodie-main a:hover{text-decoration-thickness:2px}

/* Vier materialen (Start) */
.material-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.material-card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;border-radius:var(--radius);border:1px solid transparent;min-height:190px;transition:transform .2s,box-shadow .2s,border-color .2s}
.material-card:hover{transform:translateY(-4px);box-shadow:0 15px 28px #173c320d;border-color:#b6c4b3}
.material-card .item-number{font-size:.78rem;font-weight:750;letter-spacing:.12em;color:#536458}
.material-card h3{font-size:1.3rem}
.material-card p{font-size:.88rem;color:var(--text)}
.material-card .text-link{margin-top:auto;padding-top:14px;border-top:1px solid #173c3221}
.material-card.green{background:var(--mint)}
.material-card.peach{background:var(--peach)}
.material-card.lilac{background:var(--lilac)}
.material-card.sand{background:#f0f0d8}

/* Lijsten met links */
.resource-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.resource-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.65}
.resource-list .resource-icon{flex:0 0 38px;height:38px;border-radius:9px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:.64rem;font-weight:800;letter-spacing:.06em}
.resource-list a{color:var(--green);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.resource-list small{display:block;color:var(--muted);font-size:.8rem}

/* Genummerde tegels (tools / posters) */
.tile-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tile-grid a{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border-radius:10px;background:var(--white);border:1px solid var(--line);font-weight:650;font-size:.92rem;color:var(--ink);line-height:1.35;transition:border-color .2s,transform .2s,box-shadow .2s}
.tile-grid a:hover{border-color:#9fb3a3;transform:translateY(-2px);box-shadow:0 8px 18px #173c320d}
.tile-grid .tile-number{flex:0 0 34px;height:34px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:.78rem;font-weight:800}
.tile-grid .tile-label{flex:1}
.tile-grid .tile-tag{font-size:.66rem;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.tile-grid svg{flex:0 0 18px;width:18px;height:18px;color:var(--green)}

.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;padding:24px 26px;border-radius:var(--radius);background:var(--green);color:#e6ede2}
.callout p{max-width:520px;font-size:.93rem}
.callout strong{color:#fff}

/* Promptbibliotheek-afbeelding */
.image-link{display:block;max-width:560px;border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 34px #173c3219;transition:transform .2s}
.image-link:hover{transform:translateY(-3px)}
.image-link img{display:block;width:100%;height:auto}

/* In de praktijk */
.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.level-card{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);transition:border-color .2s,transform .2s,box-shadow .2s}
.level-card:hover{border-color:#9fb3a3;transform:translateY(-3px);box-shadow:0 10px 22px #173c320d}
.level-card .level-name{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.level-card p{font-size:.92rem;color:var(--text)}
.level-card[aria-current="page"]{background:var(--green);border-color:var(--green)}
.level-card[aria-current="page"] p{color:#e6ede2}
.level-card[aria-current="page"] .level-name{color:#f0c9a8}
.advice{padding:32px 34px;border-radius:var(--radius);background:var(--mint)}
.advice h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.advice>p{margin-top:16px}
.advice ul{margin:18px 0 0;padding-left:22px}
.advice li{margin-top:10px;padding-left:4px}
.advice .advice-note{margin-top:20px;font-weight:650;color:var(--ink)}

/* Toetsing */
.toetsing-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding-block:48px 88px}
.toetsing-main h2{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.toetsing-main h2:not(:first-child){margin-top:52px}
.toetsing-main ol{margin:20px 0 0;padding-left:24px}
.toetsing-main li{margin-top:12px;padding-left:6px}
.toetsing-main li ul{margin-top:10px;padding-left:20px;list-style:circle}
.toetsing-main li ul li{margin-top:6px;font-size:.92rem;color:var(--muted)}
.side-card{position:sticky;top:150px;padding:26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);text-align:center}
.side-card p{font-size:.9rem}
.side-card .qr{display:block;width:210px;max-width:100%;margin:16px auto;border-radius:8px;border:1px solid var(--line)}
.side-card small{display:block;color:var(--muted);font-size:.8rem}
.business-card{padding-bottom:88px}
.business-card img{display:block;width:100%;max-width:1044px;height:auto;margin-inline:auto;border-radius:var(--radius);box-shadow:0 14px 34px #173c3214}

/* Goodie bag */
.goodie-open{display:grid;justify-items:center;text-align:center;gap:22px;padding-block:40px 110px}
.goodie-open a.gift{display:block;width:240px;transition:transform .25s}
.goodie-open a.gift:hover{transform:translateY(-6px) rotate(-3deg)}
.goodie-open a.gift img{display:block;width:100%;height:auto}
.goodie-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start;padding-block:40px 70px}
.goodie-main h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.goodie-main h2:not(:first-child){margin-top:48px}
.goodie-main ol{margin:18px 0 0;padding-left:24px}
.goodie-main li{margin-top:12px;padding-left:6px}
.goodie-main code{font-family:inherit;font-weight:800;background:var(--peach);padding:1px 7px;border-radius:5px;color:var(--ink)}
.profile-card{position:sticky;top:150px;padding:24px;border-radius:var(--radius);background:var(--green);color:#e6ede2;text-align:center}
.profile-card img{display:block;width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto 16px;border:4px solid #ffffff26}
.profile-card strong{display:block;color:#fff;font-size:1.05rem}
.profile-card p{color:#d5dfd1;font-size:.9rem;margin-top:4px}
.profile-card .button{margin-top:18px;width:100%;gap:10px}
.profile-card svg.linkedin-logo{width:20px;height:20px}

/* Inhoudsopgave handboek */
.toc{columns:2;column-gap:56px}
.toc section{break-inside:avoid;margin-bottom:30px}
.toc h3{font-size:1.05rem;margin-bottom:8px}
.toc h3 .part{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{font-size:.88rem;padding:3px 0;color:var(--text);line-height:1.5}
.toc li.chapter{font-weight:700;color:var(--ink);margin-top:8px}
.topic-cloud{display:flex;flex-wrap:wrap;gap:8px}
.topic-cloud span{padding:6px 12px;border-radius:999px;background:var(--mint);font-size:.82rem;font-weight:650;color:var(--green)}

/* Overzichtspagina (alleen backup) */
.overview-table{width:100%;border-collapse:collapse;font-size:.9rem}
.overview-table th,.overview-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.overview-table th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.overview-table a{color:var(--green);font-weight:650;text-decoration:underline;word-break:break-all}

@media(max-width:1000px){
  .book-layout{grid-template-columns:1fr;gap:34px;padding-block:36px 64px}
  .book-aside{position:static;display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center}
  .book-aside p{margin-top:0}
  .toetsing-layout,.goodie-layout{grid-template-columns:1fr;gap:40px}
  .side-card,.profile-card{position:static}
  .toc{columns:1}
}
@media(max-width:620px){
  .legacy-intro{padding-top:40px;padding-bottom:22px}
  .book-tabs ul{flex-wrap:wrap;overflow:visible;gap:6px}
  .book-tabs a{min-height:40px;padding:7px 13px;font-size:.8rem;white-space:normal}
  .material-cards,.level-grid{grid-template-columns:1fr}
  .material-card{min-height:0}
  .advice{padding:24px 20px}
  .tile-grid{grid-template-columns:1fr}
  .business-card{padding-bottom:56px}
  .overview-table th:nth-child(3),.overview-table td:nth-child(3){display:none}
}