/*
 * Delta Toolkit, schermweergave.
 *
 * Huisstijl van Basisschool Delta: de vier schoolkleuren (blauw, groen, oranje
 * en rood) en de geschilderde kleurvlakken uit hun banner. De oefenbladen zelf
 * staan in blad.css en blijven zwart-wit-vriendelijk voor de printer.
 */

:root {
  /* de vier kleuren van de school */
  --blauw: #01a1dc;
  --blauw-licht: #45ccfe;
  --blauw-donker: #05789f;
  --groen: #58c026;
  --groen-licht: #91e26a;
  --groen-donker: #3f8a1b;
  --oranje: #f6b83f;
  --oranje-licht: #fbdca0;
  --oranje-donker: #a97205;
  --rood: #ca3838;
  --rood-licht: #df8989;

  --inkt: #3a3f45;
  --inkt-zacht: #6b7278;
  --wit: #ffffff;
  --achtergrond: #f4f4f3;
  --rand: #e2e2df;

  --vak: var(--blauw);
  --vak-donker: var(--blauw-donker);
  /* leesbare tekstkleur bovenop de vakkleur: op oranje moet dat donker zijn */
  --op-vak: #ffffff;
  --groen-diep: #2f6a13;

  --rond: 12px;
  --rond-groot: 20px;
  --schaduw: 0 1px 2px rgba(58, 63, 69, .06), 0 12px 26px -14px rgba(58, 63, 69, .5);
}

body[data-vak="wiskunde"] { --vak: var(--blauw); --vak-donker: var(--blauw-donker); }
body[data-vak="taal"] { --vak: var(--oranje); --vak-donker: var(--oranje-donker); --op-vak: #402c00; }

* { box-sizing: border-box; }

/* hidden hoort te winnen van een display-regel in een klasse. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font: 16px/1.65 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .knop, .leerjaar-knop { font-family: 'Baloo 2', 'Nunito', sans-serif; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.01em; }

a { color: var(--blauw-donker); text-underline-offset: 3px; }

.omhulsel { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* De geschilderde kleurvlakken van de school: doorschijnende driehoeken die
   over elkaar vallen. Op de site zijn ze decor, op papier komen ze niet. */
.kleurband {
  position: relative;
  overflow: hidden;
  background: var(--wit);
  border-bottom: 1px solid var(--rand);
}
.kleurband::before,
.kleurband::after {
  content: '';
  position: absolute;
  bottom: -22%;
  aspect-ratio: 1;
  clip-path: polygon(0 100%, 100% 18%, 58% 100%);
  pointer-events: none;
}
.kleurband::before { background: var(--groen-licht); right: -6%; width: 30%; opacity: .5; }
.kleurband::after { background: var(--blauw-licht); right: 20%; width: 20%; opacity: .35; transform: scaleX(-1); }
@media (max-width: 900px) { .kleurband::before, .kleurband::after { display: none; } }
.kleurband > * { position: relative; z-index: 1; }

/* Kop en navigatie */
.plaatskop { background: var(--wit); border-bottom: 3px solid var(--blauw); position: sticky; top: 0; z-index: 20; }
.plaatskop .omhulsel { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; padding-block: 8px; }
.merknaam { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inkt); }
.merknaam img { height: 46px; width: auto; display: block; }
.merknaam .toolkit {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  padding-left: 12px;
  border-left: 2px solid var(--rand);
  color: var(--inkt);
}
.merknaam .toolkit small { display: block; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 600; color: var(--inkt-zacht); letter-spacing: .04em; }
.plaatsnav { display: flex; gap: 4px; font-size: 15px; font-weight: 700; }
.plaatsnav a { text-decoration: none; color: var(--inkt-zacht); padding: 8px 14px; border-radius: 8px; }
.plaatsnav a:hover { color: var(--inkt); background: var(--achtergrond); }
.plaatsnav a[aria-current="page"] { color: var(--op-vak); background: var(--vak); }

/* Startpagina */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 56px 0 52px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; } }

.hero .label {
  font-family: 'Caveat', cursive;
  font-size: 27px;
  color: var(--groen-donker);
  margin: 0 0 6px;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.hero h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 18px; }
.hero h1 em { font-style: normal; color: var(--blauw); }
.hero p { font-size: 18px; color: var(--inkt-zacht); margin: 0 0 26px; max-width: 46ch; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Het bewijsstuk in de hero: een werkblad zoals het uit de printer komt. */
.proefblad {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 22px 22px 26px;
  box-shadow: 0 2px 0 rgba(58, 63, 69, .05), 0 18px 34px -18px rgba(58, 63, 69, .6);
  transform: rotate(-1.4deg);
  position: relative;
  font-family: 'Andika', 'Nunito', sans-serif;
}
.proefblad h3 { font-size: 20px; margin: 0 0 2px; }
.proefblad .doelregel { font-size: 11px; color: var(--inkt-zacht); margin: 0 0 12px; }
.proefblad .balk { background: #fdf1d6; border-left: 4px solid var(--inkt); padding: 6px 10px; font-size: 12px; border-radius: 0 6px 6px 0; margin-bottom: 14px; font-weight: 700; }
.proefblad .klokken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proefblad .klokken > div { text-align: center; }
.proefblad .klokken svg { width: 100%; max-width: 82px; }
.proefblad .klokken span { display: block; border-bottom: 1px solid #999; height: 16px; margin: 4px 10px 0; }
.proefblad .wijzerplaat { fill: #fff; stroke: var(--inkt); stroke-width: 2; }
.proefblad .streep-groot { stroke: var(--inkt); stroke-width: 2; }
.proefblad .streep-klein { stroke: #aaa; stroke-width: 1; }
.proefblad .klokcijfer { font-size: 11px; text-anchor: middle; fill: var(--inkt); }
.proefblad .wijzer-uur { stroke: var(--inkt); stroke-width: 5; stroke-linecap: round; }
.proefblad .wijzer-minuut { stroke: var(--inkt); stroke-width: 3; stroke-linecap: round; }
.proefblad .wijzeras { fill: var(--inkt); }

/* Het stickertje dat de juf of meester op een goed blad plakt. */
.stempel {
  position: absolute;
  right: -20px;
  top: -22px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--oranje);
  color: #4a3300;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  line-height: 1.05;
  font-size: 17px;
  transform: rotate(8deg);
  box-shadow: 0 4px 0 rgba(58, 63, 69, .12);
  border: 4px solid var(--wit);
}
.stempel b { display: block; font-size: 27px; }

.vakkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; padding: 0 0 56px; }
.vakkaart {
  background: var(--wit);
  border: 1px solid var(--rand);
  border-radius: var(--rond-groot);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--schaduw);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vakkaart::before { content: ''; position: absolute; inset: 0 0 auto; height: 9px; background: var(--vakkleur, var(--blauw)); }
.vakkaart::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -60px;
  width: 190px; aspect-ratio: 1;
  background: var(--vakkleur, var(--blauw));
  opacity: .1;
  clip-path: polygon(0 100%, 100% 20%, 70% 100%);
}
.vakkaart:hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgba(58,63,69,.06), 0 22px 36px -18px rgba(58,63,69,.7); }
.vakkaart .vakicoon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-content: center; background: var(--vakkleur, var(--blauw)); color: var(--vakkleur-tekst, var(--wit)); margin-top: 8px; }
.vakkaart .vakicoon svg { width: 27px; height: 27px; }
.vakkaart h2 { margin: 6px 0 0; font-size: 26px; }
.vakkaart p { margin: 0; color: var(--inkt-zacht); }
.vakkaart .doelen { font-size: 13.5px; color: var(--inkt-zacht); border-top: 1px solid var(--rand); padding-top: 12px; margin-top: 6px; font-weight: 700; }
.vakkaart .ga { color: var(--vakkleur-donker, var(--blauw-donker)); font-weight: 700; font-family: 'Baloo 2', sans-serif; }

.uitleg { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; padding-bottom: 60px; }
.uitleg h3 { margin: 10px 0 6px; font-size: 19px; }
.uitleg p { margin: 0; color: var(--inkt-zacht); font-size: 15px; }
.uitleg .stap {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-content: center; color: var(--staptekst, var(--wit));
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px;
  background: var(--stapkleur, var(--blauw));
}
.blokkop { font-family: 'Caveat', cursive; font-size: 30px; color: var(--groen-donker); margin: 0 0 4px; }

/* De generator */
.generator { display: grid; grid-template-columns: minmax(340px, 400px) 1fr; gap: 34px; align-items: start; padding: 28px 0 64px; }
@media (max-width: 980px) { .generator { grid-template-columns: 1fr; } }

.instelpaneel { position: sticky; top: 100px; max-height: calc(100vh - 124px); overflow-y: auto; padding-right: 4px; }
@media (max-width: 980px) { .instelpaneel { position: static; max-height: none; } }

.paneelkop { font-size: 30px; margin: 0 0 4px; }
.paneelintro { margin: 0 0 20px; color: var(--inkt-zacht); font-size: 14.5px; }

.stap-blok { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--rond); padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(58,63,69,.05); }
.stap-blok > h2 { font-size: 17px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.stap-blok > h2 .nr {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--vak); color: var(--op-vak);
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: 'Baloo 2', sans-serif;
}
.stap-blok > p.hint { margin: 0 0 14px 37px; font-size: 13px; color: var(--inkt-zacht); }

.leerjaren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.leerjaar-knop {
  background: var(--wit); border: 2px solid var(--rand); border-radius: 10px;
  padding: 9px 6px; cursor: pointer; font: inherit; font-family: 'Baloo 2', sans-serif;
  font-weight: 500; text-align: center; line-height: 1.2; color: inherit;
}
.leerjaar-knop small { display: block; font-size: 11px; color: var(--inkt-zacht); font-family: 'Nunito', sans-serif; }
.leerjaar-knop:hover { border-color: var(--vak); }
.leerjaar-knop[aria-pressed="true"] { background: var(--vak); color: var(--op-vak); border-color: var(--vak); }
.leerjaar-knop[aria-pressed="true"] small { color: color-mix(in srgb, var(--op-vak) 75%, transparent); }

.doellijst { display: flex; flex-direction: column; gap: 8px; }
.doelkaart { border: 2px solid var(--rand); border-radius: 10px; padding: 12px 14px 13px; cursor: pointer; display: block; background: var(--wit); }
.doelkaart:hover { border-color: var(--vak); }
.doelkaart.aan { border-color: var(--vak); background: color-mix(in srgb, var(--vak) 9%, var(--wit)); }
.doelkaart .titel { font-weight: 700; font-size: 15px; display: flex; gap: 9px; align-items: center; font-family: 'Baloo 2', sans-serif; }
.doelkaart input { margin: 0; accent-color: var(--vak); flex: none; width: 17px; height: 17px; }
.doelkaart .icoon { width: 21px; height: 21px; color: var(--vak-donker); flex: none; }
.doelkaart .ik { display: block; font-size: 13px; color: var(--inkt-zacht); margin: 5px 0 6px 26px; }
.doelkaart .meta { display: block; font-size: 12px; color: var(--inkt-zacht); margin-left: 26px; }
.doelkaart .buurjaar { color: var(--rood); font-weight: 700; }

.snelkoppelingen { display: flex; gap: 14px; font-size: 13px; margin: 10px 0 12px; }
.snelkoppelingen button { background: none; border: none; padding: 0; color: var(--blauw-donker); cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline; }
.buurjaren { font-size: 13px; color: var(--inkt-zacht); display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.buurjaren input { accent-color: var(--vak); }

.veld { margin-bottom: 15px; }
.veld label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.veld select, .veld input[type="text"] {
  width: 100%; padding: 10px; border: 2px solid var(--rand); border-radius: 9px;
  font: inherit; background: var(--wit); color: inherit;
}
.veld select:focus-visible, .veld input:focus-visible { outline: 3px solid color-mix(in srgb, var(--vak) 45%, transparent); outline-offset: 1px; border-color: var(--vak); }
.veld .uitleg-klein { font-size: 12px; color: var(--inkt-zacht); margin-top: 5px; }
.keuzerij { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 9px; }
.keuzerij input { margin-top: 3px; accent-color: var(--vak); }
.keuzerij span small { display: block; color: var(--inkt-zacht); font-size: 12px; }

.klaslijst { margin-top: 12px; border-top: 1px solid var(--rand); padding-top: 12px; }
.leerlingrij { display: grid; grid-template-columns: 1fr 120px 34px; gap: 6px; margin-bottom: 6px; }
.leerlingrij input, .leerlingrij select { padding: 8px; border: 2px solid var(--rand); border-radius: 8px; font: inherit; font-size: 14px; background: var(--wit); color: inherit; }
.leerlingrij button { border: 2px solid var(--rand); background: var(--wit); border-radius: 8px; cursor: pointer; color: var(--inkt-zacht); font-size: 16px; }
.leerlingrij button:hover { color: var(--rood); border-color: var(--rood); }

.knop {
  font: inherit; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  border-radius: 999px; padding: 11px 20px; cursor: pointer; border: 2px solid transparent;
  text-decoration: none; display: inline-block; text-align: center;
}
.knop.hoofd { background: var(--groen-donker); color: var(--wit); width: 100%; font-size: 18px; padding: 14px; box-shadow: 0 4px 0 var(--groen-diep); }
.knop.hoofd:hover { background: var(--groen-diep); }
.knop.hoofd:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--groen-diep); }
.knop.rustig { background: var(--wit); border-color: var(--rand); color: var(--inkt); box-shadow: 0 2px 0 rgba(58, 63, 69, .1); }
.knop.rustig:hover { border-color: var(--vak); color: var(--vak-donker); }
.knop.rustig:active { transform: translateY(2px); box-shadow: none; }
.knop.groot { font-size: 18px; padding: 13px 26px; }
.knop.vak { background: var(--vakkleur, var(--blauw)); color: var(--vakkleur-tekst, var(--wit)); box-shadow: 0 4px 0 var(--vakkleur-donker, var(--blauw-donker)); }
.knop.vak:hover { background: var(--vakkleur-donker, var(--blauw-donker)); color: var(--wit); }
.knop.vak:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--vakkleur-donker, var(--blauw-donker)); }
.knop:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knop:focus-visible, .leerjaar-knop:focus-visible, .plaatsnav a:focus-visible, .doelkaart:focus-within { outline: 3px solid var(--inkt); outline-offset: 2px; }

.privacynoot { font-size: 12px; color: var(--inkt-zacht); margin-top: 12px; line-height: 1.55; }

/* Werkbalk en voorvertoning */
.werkbalk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; position: sticky; top: 92px; z-index: 10; background: var(--achtergrond); padding: 8px 0; }
.werkbalk .rek { flex: 1; }
.werkbalk .bundelcode { font-size: 13px; color: var(--inkt-zacht); }
.werkbalk .bundelcode strong { font-family: 'Baloo 2', sans-serif; color: var(--inkt); letter-spacing: .04em; }

.leegstand { border: 3px dashed var(--blauw-licht); border-radius: var(--rond-groot); padding: 60px 32px; text-align: center; color: var(--inkt-zacht); background: var(--wit); }
.leegstand h2 { color: var(--inkt); font-size: 23px; margin: 0 0 8px; }
.leegstand p { margin: 0 auto; max-width: 46ch; }

.voorvertoning { display: flex; flex-direction: column; align-items: center; gap: 22px; overflow-x: auto; }

/* Fout melden */
dialog.melding { border: 3px solid var(--blauw); border-radius: var(--rond-groot); padding: 26px; max-width: 560px; width: calc(100% - 32px); color: var(--inkt); background: var(--wit); }
dialog.melding::backdrop { background: rgba(58, 63, 69, .45); }
dialog.melding h2 { margin: 0 0 8px; font-size: 22px; }
dialog.melding p { color: var(--inkt-zacht); font-size: 14px; }
dialog.melding textarea { width: 100%; min-height: 190px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px; border: 2px solid var(--rand); border-radius: 9px; background: var(--achtergrond); color: inherit; }
dialog.melding .knoppen { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* Verantwoording */
.tekstpagina { max-width: 760px; padding: 44px 0 80px; }
.tekstpagina h1 { font-size: 42px; margin-bottom: 10px; }
.tekstpagina h2 { font-size: 24px; margin-top: 44px; }
.tekstpagina p, .tekstpagina li { color: var(--inkt-zacht); }
.tekstpagina li { margin-bottom: 6px; }
.bronkaart { background: var(--wit); border: 1px solid var(--rand); border-left: 5px solid var(--blauw); border-radius: var(--rond); padding: 20px 24px; }
.bronkaart dl { display: grid; grid-template-columns: 210px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.bronkaart dt { color: var(--inkt-zacht); }
.bronkaart dd { margin: 0; font-weight: 700; }
.typetabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.typetabel th, .typetabel td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.typetabel th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); }
.typetabel td.code { white-space: nowrap; }
.typetabel .icoon { width: 20px; height: 20px; color: var(--blauw); vertical-align: -4px; margin-right: 6px; }

.plaatsvoet { border-top: 3px solid var(--groen); padding: 26px 0 40px; font-size: 13px; color: var(--inkt-zacht); background: var(--wit); }
.plaatsvoet .omhulsel { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .vakkaart:hover { transform: none; }
}

@media print {
  .plaatskop, .plaatsvoet, .instelpaneel, .werkbalk, .leegstand, dialog { display: none !important; }
  .generator { display: block; padding: 0; }
  .omhulsel { max-width: none; padding: 0; }
  .voorvertoning { display: block; }
  body { background: #fff; }
}