@charset "UTF-8";
/**
 * Kids Digitaal - Lessenpad (kd-lessenpad.css)
 *
 * Duolingo-stijl slingerpad op de oefenpagina's (single kd_oefening).
 * Vervangt visueel de oefeningen-lijst in #tab-oefeningen: alle groepen in
 * een doorlopend pad met sectie-scheidingen, een sticky groepskop met
 * wissel-menu, sfeersymbooltjes langs het pad en mascotte-figuranten in de
 * buitenbocht. De oude lijst en de niveau-dropdown worden alleen verborgen
 * wanneer kd-lessenpad.js succesvol heeft gerenderd (body-class
 * kd-lessenpad-actief); faalt het script, dan blijft alles bij het oude.
 *
 * Schakelaar: KD_LESSENPAD_LIVE in leer-engine/init.php.
 * Goedgekeurde demo: oefeningoverzichten/lessenpad-demo.html.
 */

/* Oude lijst + dropdown verbergen zodra het pad er staat (alleen binnen het
   oefeningen-tabblad; werkbladen en meer-zoals-dit blijven onaangeroerd) */
body.kd-lessenpad-actief #tab-oefeningen .filter-bar,
body.kd-lessenpad-actief #tab-oefeningen #exerciseList { display: none; }

.kd-lessenpad {
  --klp-amp: 56px;            /* slinger-uitwijking */
  --klp-node: 68px;           /* diameter knooppunt */
  --klp-node-eind: 78px;      /* diameter eindles (trofee) */
  --klp-label-font: .84rem;
  --klp-label-max: 180px;
  --klp-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --klp-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
}

@media (max-width: 600px) {
  .kd-lessenpad {
    --klp-amp: 34px;
    --klp-node: 56px;
    --klp-node-eind: 64px;
    --klp-label-font: .74rem;
    --klp-label-max: 168px;
  }
}

/* ===== sticky groepskop met wissel-menu ===== */
.klp-kop {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0 0 18px 18px;
  color: #fff;
  background-color: #00E676;
  box-shadow: 0 8px 22px rgba(20, 40, 70, 0.16);
  transition: background-color .45s;
}
body.admin-bar .klp-kop { top: 32px; }
.klp-kop-kicker {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .85;
  text-transform: uppercase;
}
.klp-kop-titel { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.klp-wissel {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: .85rem;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
}
.klp-wissel svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.klp-wissel-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 10px;
  background: #fff;
  border: 1px solid #e6eef4;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(20, 40, 70, 0.18);
  padding: 8px;
  min-width: 230px;
  display: none;
  z-index: 45;
}
.klp-wissel-menu.open { display: block; }
.klp-wissel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.klp-wissel-item:hover { background: #F3F7FB; }
.klp-wissel-item .klp-bol { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.klp-wissel-item .klp-naam { font-weight: 700; font-size: .95rem; color: #1e2933; }
.klp-wissel-item .klp-stand { margin-left: auto; font-size: .78rem; font-weight: 600; color: #5b7084; }

/* ===== pad ===== */
.klp-pad { position: relative; padding: 8px 0 30px; }
.klp-svg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.klp-svg .klp-lijn-grijs { fill: none; stroke: #dbe7f0; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 16; }
.klp-svg .klp-lijn-kleur { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 16; }

/* sectie-scheiding: lijn - naam - lijn */
.klp-divider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px auto 30px;
  max-width: 520px;
}
.klp-divider .klp-streep { flex: 1; height: 2px; background: #e6eef4; border-radius: 2px; }
.klp-divider .klp-divider-naam { font-weight: 800; font-size: 1rem; color: var(--klp-divider-kleur, #009E52); white-space: nowrap; }

/* knooppunt */
.klp-node {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 0 auto 74px;
  width: var(--klp-node);
  transform: translateX(var(--klp-off, 0px));
  animation: klpNodeIn .6s var(--klp-ease-back) backwards;
}
.klp-node.is-eind { width: var(--klp-node-eind); }
@keyframes klpNodeIn {
  from { opacity: 0; transform: translateX(var(--klp-off, 0px)) translateY(22px) scale(0.85); }
  to   { opacity: 1; transform: translateX(var(--klp-off, 0px)) translateY(0) scale(1); }
}

.klp-knop {
  position: relative;
  z-index: 2;
  width: var(--klp-node);
  height: var(--klp-node);
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: block;
  padding: 0;
}
.klp-node.is-eind .klp-knop { width: var(--klp-node-eind); height: var(--klp-node-eind); }

.klp-knop .klp-edge { position: absolute; inset: 0; border-radius: 50%; background: var(--klp-edge, #00B050); }
.klp-knop .klp-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--klp-front, #00E676);
  color: #fff;
  transform: translateY(-5px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
.klp-knop .klp-front svg { width: 60%; height: 60%; display: block; }
.klp-knop:hover .klp-front { transform: translateY(-7px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.klp-knop:hover .klp-schaduw { transform: translateY(4px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.klp-knop:active .klp-front { transform: translateY(-3px); transition: transform 34ms; }
.klp-knop:active .klp-schaduw { transform: translateY(1px); transition: transform 34ms; }

/* komende lessen: groepskleur blijft, icoon in lichte variant (JS zet
   --klp-icoon-licht) */
.klp-node.is-todo .klp-front { color: var(--klp-icoon-licht, #cfd8e0); }

/* voortgangsring (zelfde oranje-gele gradient als de bestaande ringen) */
.klp-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -53%) scaleX(0.95); pointer-events: none; overflow: visible; z-index: -1; }
@media (max-width: 600px) { .klp-ring { transform: translate(-50%, -53%) scaleX(0.93) scale(0.85); } }
.klp-ring .klp-ring-bg { fill: none; stroke: #e3e3e3; stroke-width: 5; }
.klp-ring .klp-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s var(--klp-ease-expo); }

/* titel-label gecentreerd onder de knop; knop ligt er met z-index bovenop */
.klp-label {
  position: absolute;
  z-index: 1;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--klp-label-bg, #F3F6F9);
  color: var(--klp-label-kleur, #1e2933);
  border-radius: 12px;
  padding: 8px 13px 6px;
  font-size: var(--klp-label-font);
  font-weight: 500;
  line-height: 1.25;
  width: max-content;
  max-width: var(--klp-label-max);
  text-align: center;
  pointer-events: none;
}

/* huidige les: zachte halo + start-wolkje */
.klp-node.is-huidig .klp-knop::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 4px solid var(--klp-halo, rgba(0, 230, 118, 0.35));
  animation: klpHalo 2.4s ease-in-out infinite;
}
@keyframes klpHalo {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.12); opacity: .35; }
}
.klp-pill {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 3px solid var(--klp-pill, #00B050);
  color: var(--klp-pill-tekst, #009E52);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 12px;
  white-space: nowrap;
  z-index: 7;
  animation: klpPillBob 2.6s ease-in-out infinite;
}
.klp-pill::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--klp-pill, #00B050);
}
@keyframes klpPillBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}

/* vinkje-badge op een afgeronde eindles (trofee houdt zijn icoon) */
.klp-mini-check {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--klp-edge, #00B050);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}
.klp-mini-check svg { width: 11px; height: 11px; stroke: var(--klp-edge, #00B050); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ===== popup (Duolingo-kaart) ===== */
.klp-popup {
  position: absolute;
  z-index: 30;
  width: min(330px, calc(100% - 20px));
  border-radius: 18px;
  padding: 16px;
  background: var(--klp-pp, #00E676);
  color: #fff;
  box-shadow: 0 18px 44px rgba(20, 40, 70, 0.28);
  animation: klpPopupIn .45s var(--klp-ease-back) backwards;
}
@keyframes klpPopupIn {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
.klp-popup::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--klp-pijl, 50%);
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: var(--klp-pp, #00E676);
}
.klp-popup .klp-pp-kicker {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .85;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.klp-popup h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 6px; line-height: 1.2; color: #fff; }
.klp-popup p { font-size: .9rem; line-height: 1.45; opacity: .95; margin: 0 0 14px; color: #fff; }
.klp-popup .klp-pp-knop {
  display: block;
  width: 100%;
  border: none;
  border-radius: 13px;
  padding: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: #fff;
  color: var(--klp-pp-tekst, #009E52);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}
.klp-popup .klp-pp-knop:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.klp-popup.is-grijs { background: #7E909F; }
.klp-popup.is-grijs::before { border-bottom-color: #7E909F; }
.klp-popup.is-grijs .klp-pp-knop { color: #5b7084; }

/* ===== sfeersymbooltjes langs het pad (scrollen mee) ===== */
.klp-deco {
  position: absolute;
  display: block;
  z-index: 0;
  pointer-events: none;
  animation: klpTwinkle var(--klp-d-dur, 8s) ease-in-out var(--klp-d-del, 0s) infinite;
}
.klp-deco svg { display: block; width: 100%; height: 100%; }
.klp-d-ster { width: 26px; height: 26px; }
.klp-d-bol1 { width: 14px; height: 14px; border-radius: 50%; background: #2EC4B6; }
.klp-d-ring { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #FFA8B8; }
.klp-d-bol2 { width: 12px; height: 12px; border-radius: 50%; background: #4BADFF; }
.klp-d-driehoek { width: 18px; height: 18px; }
@keyframes klpTwinkle {
  0%, 100% { opacity: .1; transform: scale(0.75); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* ===== mascotte-figuranten (alleen breed scherm, buitenbocht) ===== */
.klp-figurant {
  position: absolute;
  z-index: 1;
  width: 200px;
  pointer-events: none;
  display: none;
  animation: klpFigFloat 6.5s ease-in-out infinite;
}
.klp-figurant img { width: 100%; display: block; mix-blend-mode: multiply; }
@keyframes klpFigFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (min-width: 761px) { .klp-figurant { display: block; } }

/* ===== toegankelijkheid ===== */
@media (prefers-reduced-motion: reduce) {
  .klp-node,
  .klp-pill,
  .klp-popup,
  .klp-deco,
  .klp-figurant,
  .klp-node.is-huidig .klp-knop::before { animation: none !important; }
  .klp-ring .klp-ring-fill,
  .klp-kop { transition: none !important; }
}