/* DKVS Lesmanuals — huisstijl De Kracht van Sport */
.dkvs-lm{
  --dkvs-blauw:#0870B0;
  --dkvs-donker:#182880;
  --dkvs-groen:#58A820;
  --dkvs-navy:#3A7A16;
  --dkvs-inkt:#22333B;
  --dkvs-grijs:#6B7A82;
  --dkvs-licht:#F2F6F8;
  --dkvs-lijn:#DCE5E9;
  color:var(--dkvs-inkt);
  font-size:16px;
  line-height:1.6;
}
.dkvs-lm *{box-sizing:border-box}
.dkvs-lm .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.dkvs-lm h2,.dkvs-lm h3,.dkvs-lm h4{margin:0;line-height:1.15}

/* ---------- hero ---------- */
.dkvs-lm__hero{
  background:var(--dkvs-donker);background-size:cover;background-position:center;
  border-radius:10px;padding:34px 38px 30px;color:#fff;
}
.dkvs-lm__logo{height:30px;width:auto;display:block;margin-bottom:26px}
.dkvs-lm__hero h2{font-size:clamp(26px,4vw,38px);font-weight:800;color:#fff;margin-bottom:10px}
.dkvs-lm__hero p{margin:0;max-width:62ch;color:#CFDCEC;font-size:16px}
.dkvs-lm__stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:26px}
.dkvs-lm__stats div{border-top:3px solid rgba(255,255,255,.35);padding-top:9px;min-width:110px}
.dkvs-lm__stats b{display:block;font-size:26px;font-weight:700;line-height:1;color:#fff}
.dkvs-lm__stats b i{font-style:normal;font-size:16px;color:#9FD7E8}
.dkvs-lm__stats span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#9FD7E8}
.dkvs-lm__strip{
  height:7px;border-radius:4px;margin:7px 0 30px;
  background:linear-gradient(to right,var(--dkvs-donker) 0 40%,var(--dkvs-blauw) 40% 70%,var(--dkvs-groen) 70% 100%);
}

/* ---------- balk ---------- */
.dkvs-lm__bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--dkvs-lijn);margin-bottom:26px;
}
.dkvs-lm__weergave{display:inline-flex;background:var(--dkvs-licht);border-radius:99px;padding:4px;gap:4px}
.dkvs-lm__seg{
  border:0;background:transparent;color:var(--dkvs-donker);font-weight:600;font-size:14px;
  padding:9px 20px;border-radius:99px;cursor:pointer;font-family:inherit;
}
.dkvs-lm__seg:hover{color:var(--dkvs-blauw)}
.dkvs-lm__seg.is-active{background:var(--dkvs-donker);color:#fff}
.dkvs-lm__tools{display:flex;gap:8px;align-items:center}
.dkvs-lm__search input,.dkvs-lm__tools select{
  border:1px solid var(--dkvs-lijn);border-radius:99px;padding:10px 16px;font-size:14px;
  background:#fff;color:var(--dkvs-inkt);min-width:150px;font-family:inherit;
}
.dkvs-lm__search input:focus,.dkvs-lm__tools select:focus{outline:2px solid var(--dkvs-blauw);outline-offset:1px}

/* ---------- taalkeuze ---------- */
.dkvs-lm__taal{display:inline-flex;background:var(--dkvs-licht);border-radius:99px;padding:4px;gap:4px;flex:none}
.dkvs-lm__taalknop{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:99px;
  font-weight:600;font-size:14px;line-height:1;white-space:nowrap;
  color:var(--dkvs-donker);text-decoration:none!important;transition:.15s;
}
.dkvs-lm__taalknop:hover{color:var(--dkvs-blauw)}
.dkvs-lm__taalknop.is-active{background:#fff;color:var(--dkvs-donker);
  box-shadow:0 1px 3px rgba(24,40,128,.16)}
.dkvs-lm__taalknop .dkvs-vlag{width:20px;height:14px;box-shadow:0 0 0 1px rgba(0,0,0,.10)}

/* ---------- weergave per sport ---------- */
.dkvs-lm__sporten{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;align-items:start}
.dkvs-lm__sport{
  border:1px solid var(--dkvs-lijn);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.18s;
}
.dkvs-lm__sport:hover{border-color:var(--dkvs-blauw);box-shadow:0 8px 22px rgba(24,40,128,.10)}
.dkvs-lm__sportfoto{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dkvs-licht)}
.dkvs-lm__sportfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dkvs-lm__plaatshouder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.32;background:
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(24,40,128,.05) 9px 18px),var(--dkvs-licht)}
.dkvs-lm__sport > header{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  background:#fff;border-bottom:1px solid var(--dkvs-lijn);
}
.dkvs-lm__sport > header h3{font-size:19px;font-weight:700;color:var(--dkvs-donker)}
.dkvs-lm__sub{display:block;font-size:11.5px;color:var(--dkvs-grijs);margin-top:2px}
.dkvs-lm__icon{display:inline-flex;line-height:0;flex:none}
.dkvs-icoon{display:block}
.dkvs-lm__leeftijden{list-style:none;margin:0;padding:0}
.dkvs-lm__rij{
  display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-bottom:1px solid var(--dkvs-lijn);
}
.dkvs-lm__rij:last-child{border-bottom:0}
.dkvs-lm__leeftijd{font-weight:700;color:var(--dkvs-donker);font-size:14px;min-width:82px}
.dkvs-lm__duur{font-size:12px;color:var(--dkvs-grijs);flex:1;white-space:nowrap}
.dkvs-lm__rij.is-leeg .dkvs-lm__leeftijd,
.dkvs-lm__rij.is-leeg .dkvs-lm__duur{opacity:.5}

/* kleur per leeftijdsgroep, gelijk aan de PDF's */
.dkvs-lm__rij[data-groep="5-7"]   .dkvs-lm__leeftijd{border-left:4px solid var(--dkvs-groen);padding-left:9px}
.dkvs-lm__rij[data-groep="7-10"]  .dkvs-lm__leeftijd{border-left:4px solid var(--dkvs-blauw);padding-left:9px}
.dkvs-lm__rij[data-groep="10-12"] .dkvs-lm__leeftijd{border-left:4px solid var(--dkvs-donker);padding-left:9px}
.dkvs-lm__rij[data-groep="12-16"] .dkvs-lm__leeftijd{border-left:4px solid var(--dkvs-navy);padding-left:9px}

/* ---------- weergave per leeftijd ---------- */
.dkvs-lm__groep{margin:0 0 38px}
.dkvs-lm__groephead{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:14px}
.dkvs-lm__groephead h3{
  font-size:22px;font-weight:700;color:var(--dkvs-donker);
  padding-left:12px;border-left:4px solid var(--dkvs-groen);
}
.dkvs-lm__groep[data-groep="7-10"] .dkvs-lm__groephead h3{border-left-color:var(--dkvs-blauw)}
.dkvs-lm__groep[data-groep="10-12"] .dkvs-lm__groephead h3{border-left-color:var(--dkvs-donker)}
.dkvs-lm__groep[data-groep="12-16"] .dkvs-lm__groephead h3{border-left-color:var(--dkvs-navy)}
.dkvs-lm__groephead span{font-size:13px;color:var(--dkvs-grijs)}
.dkvs-lm__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.dkvs-lm__card{
  position:relative;background:#fff;border:1px solid var(--dkvs-lijn);border-radius:10px;
  padding:20px 16px 16px;text-align:center;transition:.18s;
}
.dkvs-lm__card:hover{border-color:var(--dkvs-blauw);box-shadow:0 8px 22px rgba(24,40,128,.10);transform:translateY(-2px)}
.dkvs-lm__card .dkvs-lm__icon{display:flex;justify-content:center;margin-bottom:9px}
.dkvs-lm__card h4{font-size:16px;font-weight:700;color:var(--dkvs-donker);margin-bottom:3px}
.dkvs-lm__meta{margin:0 0 13px;font-size:12px;color:var(--dkvs-grijs)}
.dkvs-lm__card.is-leeg{background:var(--dkvs-licht);border-style:dashed}
.dkvs-lm__card.is-leeg:hover{transform:none;box-shadow:none;border-color:var(--dkvs-lijn)}
.dkvs-lm__card.is-leeg .dkvs-lm__icon,.dkvs-lm__card.is-leeg h4{opacity:.45}

/* ---------- knoppen ---------- */
.dkvs-lm__btn{
  display:inline-block;background:var(--dkvs-groen);color:#fff!important;text-decoration:none!important;
  font-weight:700;font-size:13px;line-height:1;padding:10px 16px;border-radius:99px;transition:.15s;
}
.dkvs-lm__btn:hover{background:var(--dkvs-donker)}
.dkvs-lm__soon{font-size:12px;color:var(--dkvs-grijs);font-style:italic;padding:10px 0;display:inline-block}

/* ---------- voet ---------- */
.dkvs-lm__foot{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--dkvs-lijn);
  display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;
}
.dkvs-lm__footlabel{
  display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dkvs-grijs);margin-bottom:12px;
}
.dkvs-lm__vlaggen{display:flex;flex-wrap:wrap;gap:9px 18px}
.dkvs-lm__vlaggen span{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.dkvs-vlag{border-radius:2px;flex:none}
.dkvs-lm__foot-contact{max-width:34ch;font-size:13px;color:var(--dkvs-grijs)}
.dkvs-lm__foot-contact p{margin:0}
.dkvs-lm__leeg-melding{color:var(--dkvs-grijs);font-style:italic}

.dkvs-lm__view[hidden],.dkvs-lm__groep[hidden],.dkvs-lm__card[hidden],
.dkvs-lm__sport[hidden],.dkvs-lm__leeg-melding[hidden]{display:none!important}

@media (max-width:640px){
  .dkvs-lm__hero{padding:24px 22px}
  .dkvs-lm__bar{flex-direction:column;align-items:stretch}
  .dkvs-lm__weergave,.dkvs-lm__tools{width:100%}
  .dkvs-lm__seg{flex:1}
  .dkvs-lm__tools{flex-direction:column}
  .dkvs-lm__search,.dkvs-lm__search input,.dkvs-lm__tools select{width:100%}
  .dkvs-lm__taal{width:100%}
  .dkvs-lm__taalknop{flex:1;justify-content:center}
  .dkvs-lm__sporten{grid-template-columns:1fr}
  .dkvs-lm__grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
  .dkvs-lm__stats{gap:18px}
}

/* ---------- compacte variant: binnen Mijn Account ---------- */
.dkvs-lm.is-compact{font-size:15px}
.dkvs-lm.is-compact .dkvs-lm__hero{padding:24px 26px 22px}
.dkvs-lm.is-compact .dkvs-lm__logo{height:24px;margin-bottom:18px}
.dkvs-lm.is-compact .dkvs-lm__hero h2{font-size:clamp(23px,3vw,30px);margin-bottom:8px}
.dkvs-lm.is-compact .dkvs-lm__hero p{font-size:15px}
.dkvs-lm.is-compact .dkvs-lm__stats{gap:22px;margin-top:20px}
.dkvs-lm.is-compact .dkvs-lm__stats div{min-width:96px}
.dkvs-lm.is-compact .dkvs-lm__stats b{font-size:22px}
.dkvs-lm.is-compact .dkvs-lm__strip{margin:7px 0 22px;height:5px}
.dkvs-lm.is-compact .dkvs-lm__sporten{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.dkvs-lm.is-compact .dkvs-lm__foot{margin-top:32px}

/* ---------- menu-item en tegel in Mijn Account ----------
   Het thema heeft geen icoontje voor ons eigen tabblad; zonder deze regels
   verschijnt daar een leeg vierkantje. We tekenen het icoon zelf.
   Het masker staat hier voluit, zodat het ook werkt als de inline stijl
   van de plugin om wat voor reden dan ook niet wordt meegeladen. */
html:not(.dkvs-lm-js) .woocommerce-MyAccount-navigation-link--lesmanuals > a::before,
html:not(.dkvs-lm-js) li[class*="--lesmanuals"] > a::before{
  content:"" !important;
  display:inline-block;width:1em;height:1em;margin-right:.5em;
  vertical-align:-.12em;background-color:currentColor;
  font-family:inherit !important;
  -webkit-mask:var(--dkvs-menu-icoon, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%2011c-2-1.5-5.2-1.9-8.2-1.3v10.9c3-.6%206.2-.2%208.2%201.3%202-1.5%205.2-1.9%208.2-1.3V9.7c-3-.6-6.2-.2-8.2%201.3z%22%2F%3E%3Cpath%20d%3D%22M12%2011v10.9%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225.1%22%20r%3D%223.3%22%2F%3E%3Cpath%20d%3D%22M12%201.8v6.6M8.7%205.1h6.6%22%20stroke-width%3D%22.9%22%2F%3E%3C%2Fsvg%3E")) no-repeat center/contain;
          mask:var(--dkvs-menu-icoon, url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%2011c-2-1.5-5.2-1.9-8.2-1.3v10.9c3-.6%206.2-.2%208.2%201.3%202-1.5%205.2-1.9%208.2-1.3V9.7c-3-.6-6.2-.2-8.2%201.3z%22%2F%3E%3Cpath%20d%3D%22M12%2011v10.9%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225.1%22%20r%3D%223.3%22%2F%3E%3Cpath%20d%3D%22M12%201.8v6.6M8.7%205.1h6.6%22%20stroke-width%3D%22.9%22%2F%3E%3C%2Fsvg%3E")) no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url("#a")) or (mask-image:url("#a"))){
  html:not(.dkvs-lm-js) .woocommerce-MyAccount-navigation-link--lesmanuals > a::before,
  html:not(.dkvs-lm-js) li[class*="--lesmanuals"] > a::before{ display:none !important; }
}

/* De tekening die het script in het menu en op de dashboardtegel zet. */
.dkvs-lm-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;
  box-sizing:border-box;color:inherit;line-height:0}
.dkvs-lm-ico svg{display:block;width:100%;height:100%}
.dkvs-lm-ico.is-tegel{position:relative;border-radius:50%}
.dkvs-lm-ico.is-tegel::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:.12}
.dkvs-lm-ico.is-tegel svg{position:relative;width:52%;height:52%}
.dkvs-lm-ico.is-vlak svg{width:56%;height:56%}
.dkvs-lm-ico.is-menu{width:1em;height:1em;margin-right:.5em;vertical-align:-.12em}
.dkvs-lm-verborgen{display:none !important}