/* ==========================================================================
   op.gebarenschool.nl — ontwerpsysteem "Schoolbord"
   Krijtgroen bord + warm papier, met de hand getekende krijtaccenten.
   ========================================================================== */

:root {
  --bord:          #1f3d33;
  --bord-licht:    #2c5445;
  --bord-donkerder:#16302a;
  --krijt:         #f6f1e2;
  --papier:        #fbf7ee;
  --papier-kaart:  #ffffff;
  --inkt:          #202a20;
  --inkt-zacht:    #5a6459;
  --geel:          #eeb43e;
  --geel-donker:   #a97a1c;
  --koraal:        #e2694a;
  --koraal-zacht:  #fbe9e2;
  --groen-zacht:   #e9f2ea;
  --blauwkrijt:    #7fb3d5;
  --lijn:          #e7e0cf;
  --schaduw:       0 1px 2px rgba(32,42,32,.07), 0 10px 28px -14px rgba(32,42,32,.22);
  --schaduw-klein: 0 1px 2px rgba(32,42,32,.08);
  --radius:        16px;
  --radius-klein:  10px;
  --breedte:       1120px;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', var(--sans);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--inkt);
  background: var(--papier);
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--inkt-zacht); }
a { color: var(--bord); }
a:hover { color: var(--geel-donker); }
strong { color: var(--inkt); }

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

:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--geel); color: var(--bord-donkerder);
  padding: 10px 16px; z-index: 100; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- knoppen & vormen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: .96rem;
  padding: .72em 1.35em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  background: var(--bord); color: var(--krijt);
}
.knop:hover { background: var(--bord-licht); color: var(--krijt); transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop-primair { background: var(--geel); color: var(--bord-donkerder); }
.knop-primair:hover { background: #e2a52c; color: var(--bord-donkerder); }
.knop-stil { background: transparent; color: var(--bord); border-color: var(--lijn); }
.knop-stil:hover { background: var(--groen-zacht); color: var(--bord); }
.knop-groot { padding: .9em 1.7em; font-size: 1.03rem; }
.knop-volledig { width: 100%; }
.inline-form { display: inline; }

/* ---------- header ---------- */

.site-kop {
  background: var(--bord);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--krijt);
}
.site-kop-binnen { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; gap: 16px; flex-wrap: wrap; }
.merk { display: flex; align-items: center; gap: 10px; color: var(--krijt); text-decoration: none; font-family: var(--display); }
.merk-hand { color: var(--geel); display: inline-flex; }
.merk-naam { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.merk-punt { color: var(--geel); }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav a { color: var(--krijt); text-decoration: none; opacity: .9; font-weight: 500; font-size: .95rem; }
.site-nav a:hover { opacity: 1; text-decoration: underline wavy var(--geel) 2px; text-underline-offset: 4px; }
.site-nav .knop-primair { color: var(--bord-donkerder); }
.site-nav .knop-stil { color: var(--krijt); border-color: rgba(246,241,226,.35); }
.site-nav .knop-stil:hover { background: rgba(246,241,226,.12); color: var(--krijt); }

main#inhoud { padding-block: 40px 72px; min-height: 60vh; }

/* ---------- flash ---------- */

.flash { padding: 14px 18px; border-radius: var(--radius-klein); margin-bottom: 24px; font-size: .95rem; }
.flash ul { margin: 0; padding-left: 1.1em; }
.flash-goed { background: var(--groen-zacht); color: #234a30; border: 1px solid #cfe4d3; }
.flash-fout { background: var(--koraal-zacht); color: #8a3820; border: 1px solid #f2c6b4; }

/* ---------- landing: hero ---------- */

.held {
  background: var(--bord);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--krijt);
  margin: -40px -24px 56px;
  padding: 56px 24px 72px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  border-radius: 0 0 32px 32px;
}
.wenkbrauw {
  font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--geel); margin-bottom: 14px;
}
.held h1 { color: var(--krijt); position: relative; display: inline; }
.held-intro { color: rgba(246,241,226,.86); font-size: 1.08rem; max-width: 46ch; margin-top: 18px; }
.held-acties { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.held-acties .knop-stil { color: var(--krijt); border-color: rgba(246,241,226,.4); }
.held-acties .knop-stil:hover { background: rgba(246,241,226,.12); color: var(--krijt); }

.held-video {
  margin: 0; position: relative; justify-self: center;
  background: var(--krijt); padding: 10px 10px 46px; border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
  transform: rotate(2deg);
  max-width: 340px;
}
.held-video::before {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 70px; height: 26px; background: rgba(238,180,62,.55); border: 1px solid rgba(160,110,10,.2);
}
.held-video video { width: 100%; display: block; border-radius: 3px; background: #000; aspect-ratio: 4/5; object-fit: cover; }
.held-video figcaption { position: absolute; bottom: 12px; left: 10px; right: 10px; color: var(--inkt); font-size: .85rem; text-align: center; font-family: var(--display); }

@media (max-width: 860px) {
  .held { grid-template-columns: 1fr; text-align: left; padding-top: 40px; }
  .held-video { justify-self: start; transform: rotate(1deg); max-width: 260px; }
}

/* krijt-onderstreping als signature-element */
.krijt-streep { position: relative; white-space: nowrap; }
.krijt-streep::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .3em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 30 4, 60 18, 90 9 S 150 2, 198 11' stroke='%23eeb43e' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}

/* ---------- stappen ---------- */

.stappen { padding-block: 24px 56px; }
.stappen h2 { text-align: center; margin-bottom: 40px; }
.stappen-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: stap; }
.stappen-lijst li { position: relative; background: var(--papier-kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 28px 24px 24px; box-shadow: var(--schaduw-klein); }
.stappen-lijst li::before {
  counter-increment: stap; content: counter(stap);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--bord); color: var(--krijt);
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; margin-bottom: 14px;
  border: 2px dashed var(--geel);
}
.stappen-lijst h3 { margin-bottom: 6px; }
@media (max-width: 760px) { .stappen-lijst { grid-template-columns: 1fr; } }

/* ---------- niveaus vooraf (landing) ---------- */

.niveaus-vooraf { padding-block: 40px 24px; text-align: center; }
.niveaus-vooraf h2 { max-width: 34ch; margin-inline: auto; }
.niveau-strook { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 32px 0; }
.niveau-blokje {
  background: var(--papier-kaart); border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  padding: 16px 22px; min-width: 130px; box-shadow: var(--schaduw-klein);
  display: flex; flex-direction: column; gap: 4px;
}
.niveau-naam { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--bord); }
.niveau-aantal { font-size: .85rem; color: var(--inkt-zacht); }
.niveaus-uitleg { max-width: 56ch; margin: 0 auto 28px; }

/* ---------- auth kaarten ---------- */

.pagina-auth main#inhoud { display: flex; justify-content: center; }
.auth-kaart {
  background: var(--papier-kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw); padding: 40px; max-width: 440px; width: 100%; margin-top: 12px;
}
.auth-intro { margin-top: -6px; }
.auth-wissel { text-align: center; margin-top: 20px; margin-bottom: 0; font-size: .95rem; }
.account-gegevens { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-bottom: 8px; }
.account-gegevens dt { color: var(--inkt-zacht); font-size: .88rem; }
.account-gegevens dd { margin: 0; font-weight: 600; }
.account-subkop { margin-top: 32px; border-top: 1px solid var(--lijn); padding-top: 24px; }

/* ---------- formulieren ---------- */

.formulier { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.formulier label { font-weight: 600; font-size: .9rem; margin-top: 14px; }
.formulier input {
  font: inherit; padding: .7em .85em; border: 1.5px solid var(--lijn); border-radius: var(--radius-klein);
  background: var(--papier); color: var(--inkt);
}
.formulier input:focus { border-color: var(--geel); background: var(--papier-kaart); }
.formulier button { margin-top: 22px; }
.veld-hint { font-size: .8rem; margin: 2px 0 0; color: var(--inkt-zacht); }

/* ---------- dashboard ---------- */

.dash-kop { padding-block: 16px 40px; text-align: center; }
.dash-totaal { font-size: 1.05rem; }
.dash-klaar { font-size: 1.1rem; font-weight: 600; color: var(--bord); }

.niveau-pad { display: flex; flex-direction: column; gap: 0; max-width: 620px; margin: 0 auto; }
.pad-item { position: relative; padding-left: 8px; }
.pad-lijn { position: absolute; left: 0; top: 0; bottom: -28px; width: 3px; background: repeating-linear-gradient(180deg, var(--lijn) 0 8px, transparent 8px 14px); }
.pad-item:last-child .pad-lijn { display: none; }

.niveau-kaart {
  display: block; margin: 0 0 28px 20px; background: var(--papier-kaart); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--schaduw-klein); text-decoration: none;
  color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.niveau-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw); }
.pad-item.is-op-slot .niveau-kaart { cursor: default; opacity: .68; filter: grayscale(.35); pointer-events: none; }
.pad-item.is-op-slot .niveau-kaart:hover { transform: none; }
.niveau-kaart.is-af { border-color: var(--geel); }
.niveau-kaart-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.niveau-badge { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--bord); }
.niveau-vink { color: #2f7a45; font-size: 1.2rem; }
.niveau-slot { font-size: 1.1rem; }
.niveau-lessen-aantal { margin: 0 0 12px; font-size: .88rem; }
.niveau-status { margin: 8px 0 0; font-size: .88rem; font-weight: 600; color: var(--inkt); }
.niveau-status-slot { font-weight: 400; color: var(--inkt-zacht); }

.voortgangsbalk { height: 10px; border-radius: 999px; background: var(--lijn); overflow: hidden; }
.voortgangsbalk-groot { height: 12px; margin: 18px 0 6px; }
.voortgangsbalk-vulling { height: 100%; background: linear-gradient(90deg, var(--geel), #d99a2a); border-radius: 999px; transition: width .4s ease; }

/* ---------- niveau-pagina ---------- */

.broodkruimel { font-size: .88rem; margin-bottom: 20px; color: var(--inkt-zacht); }
.broodkruimel a { color: var(--inkt-zacht); }
.niveau-kop { margin-bottom: 32px; }

.niveau-op-slot { text-align: center; }
.niveau-slot-groot { font-size: 2.4rem; display: block; margin-bottom: 10px; }

.fout-kaart {
  background: var(--papier-kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  box-shadow: var(--schaduw-klein); padding: 44px; max-width: 560px; margin: 24px auto;
}

.lessen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.les-kaart {
  background: var(--papier-kaart); border: 1px solid var(--lijn); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schaduw-klein); display: flex; flex-direction: column;
  transition: box-shadow .15s ease;
  scroll-margin-top: 90px;
}
.les-kaart.is-af { box-shadow: 0 0 0 2px var(--geel), var(--schaduw-klein); }
.les-video-wrap { background: #0c1512; aspect-ratio: 4/3; }
.les-video-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; }
.les-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.les-info h2 { font-size: 1.05rem; margin: 0; }

.les-form { margin: 0; }
.knop-vink {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: .6em .8em; border-radius: var(--radius-klein); border: 1.5px solid var(--lijn); background: var(--papier);
  font: inherit; font-weight: 600; font-size: .86rem; color: var(--inkt-zacht); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knop-vink:hover { border-color: var(--geel); color: var(--inkt); }
.knop-vink-icoon {
  width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--lijn);
  display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--krijt);
}
.knop-vink.is-af { background: var(--groen-zacht); border-color: #bcdcc2; color: #234a30; }
.knop-vink.is-af .knop-vink-icoon { background: #2f7a45; border-color: #2f7a45; }

/* ---------- footer ---------- */

.site-voet { border-top: 1px solid var(--lijn); padding-block: 28px; margin-top: 40px; }
.site-voet p { margin: 0; font-size: .88rem; }
.voet-klein { color: var(--inkt-zacht); margin-top: 4px !important; }

/* ---------- responsief ---------- */

@media (max-width: 640px) {
  .site-kop-binnen { flex-direction: column; align-items: flex-start; }
  .held { border-radius: 0 0 22px 22px; padding-bottom: 56px; }
  .auth-kaart { padding: 28px 22px; }
  .fout-kaart { padding: 30px 22px; }
}