/* ============================================================
   SHERPA-LAAG  ·  optionele extra laag over de basisstijl
   Terugdraaien: verwijder op elke pagina de twee regels
     <link rel="stylesheet" href="sherpa-theme.css">
     <script src="sherpa-theme.js"></script>
   Meer niets: de pagina's werken zonder deze laag precies zoals eerst.
   ============================================================ */

/* 1 · Hoogtelijnen als sectieritme -------------------------- */
body[data-sherpa] .sec{position:relative}
body[data-sherpa] .sec.gezond::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(120% 60% at 50% 120%,transparent 60%,rgba(70,39,114,.07) 61%,transparent 62%),
                   radial-gradient(120% 60% at 50% 130%,transparent 60%,rgba(70,39,114,.06) 61%,transparent 62%);
  background-size:100% 100%}

/* 2 · Hoogtemarkering naast de sectiekop ------------------- */
body[data-sherpa] .kopreeks{display:flex;align-items:center;gap:16px;margin-bottom:15px}
body[data-sherpa] .kopreeks .kicker,body[data-sherpa] .kopreeks .eyebrow{margin-bottom:0}
body[data-sherpa] .hoogtetag{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;color:var(--grijs);opacity:.75}
body[data-sherpa] .hoogtetag .lijn{flex:1;height:2px;max-width:140px;background:repeating-linear-gradient(90deg,var(--lijn) 0 4px,transparent 4px 9px)}
body[data-sherpa] .hoogtetag .m{white-space:nowrap}
body[data-sherpa] .pagehero .hoogtetag,body[data-sherpa] .hero .hoogtetag,body[data-sherpa] .config .hoogtetag,body[data-sherpa] .summit .hoogtetag{color:#cbbfe0;opacity:.9}
body[data-sherpa] .pagehero .hoogtetag .lijn,body[data-sherpa] .hero .hoogtetag .lijn,body[data-sherpa] .config .hoogtetag .lijn,body[data-sherpa] .summit .hoogtetag .lijn{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px)}
@media(max-width:560px){body[data-sherpa] .hoogtetag .lijn{max-width:60px}}

/* 3 · Gidslabel: zijtab rechts die openklapt ---------------- */
body[data-sherpa] .gidslabel{position:fixed;right:0;top:52%;transform:translate(calc(100% - 0px),-50%);z-index:48;display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
body[data-sherpa] .gidslabel.zichtbaar{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
body[data-sherpa] .gidslabel{align-items:stretch}
body[data-sherpa] .gltab{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--paars-diep);color:#fff;border:none;border-radius:14px 0 0 14px;padding:14px 12px;cursor:pointer;box-shadow:-8px 10px 30px -14px rgba(46,26,77,.55);writing-mode:vertical-rl;font-family:inherit;font-size:.76rem;font-weight:700;letter-spacing:.06em;flex:0 0 auto}
body[data-sherpa] .gltab svg{width:17px;color:var(--geel);writing-mode:horizontal-tb;transform:rotate(90deg)}
body[data-sherpa] .gltab:hover{background:var(--paars)}
body[data-sherpa] .gidslabel.open .gltab{border-radius:14px 0 0 14px}
body[data-sherpa] .glpaneel{position:relative;width:270px;background:#fff;border:1px solid var(--lijn);border-right:none;border-radius:16px 0 0 0;padding:18px 20px 18px 18px;box-shadow:-14px 16px 40px -18px rgba(46,26,77,.4);display:flex;align-items:center}
body[data-sherpa] .gidslabel.open .gltab{border-radius:0}
body[data-sherpa] .glpaneel p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
body[data-sherpa] .glsluit{position:absolute;top:6px;right:8px;background:none;border:none;font-size:1.15rem;line-height:1;color:var(--grijs);cursor:pointer;padding:4px 6px}
body[data-sherpa] .glsluit:hover{color:var(--ink)}
html.dark body[data-sherpa] .glpaneel{background:#1F1830;border-color:var(--lijn)}
html.dark body[data-sherpa] .glpaneel p{color:var(--ink)}
@media(max-width:900px){body[data-sherpa] .gidslabel{display:none}}
/* 4 · Weerbericht: leeft en bewijst de monitoring ----------- */
body[data-sherpa] .weerstrook{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;background:linear-gradient(120deg,var(--paars),var(--paars-diep));color:#fff;border-radius:100px;padding:12px 22px;margin:0 auto;width:fit-content;max-width:100%}
body[data-sherpa] .weerstrook span{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:#e3d9f2;white-space:nowrap}
body[data-sherpa] .weerstrook b{color:#fff;font-weight:800}
body[data-sherpa] .weerstrook .stip{width:9px;height:9px;border-radius:50%;background:#28c840;box-shadow:0 0 0 4px rgba(40,200,64,.22)}
@media (prefers-reduced-motion:no-preference){body[data-sherpa] .weerstrook .stip{animation:wpuls 2.4s ease-in-out infinite}@keyframes wpuls{0%,100%{box-shadow:0 0 0 3px rgba(40,200,64,.18)}50%{box-shadow:0 0 0 7px rgba(40,200,64,.08)}}}

/* 5 · Hoogtewinst-badge op de cases ------------------------ */
body[data-sherpa] .hoogtewinst{display:inline-flex;align-items:center;gap:8px;background:var(--paars-zacht);color:var(--paars);border-radius:100px;padding:6px 13px;font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:600;margin-bottom:10px}
body[data-sherpa] .hoogtewinst b{color:var(--magenta-tekst)}

@media(max-width:760px){
  body[data-sherpa] .weerstrook{border-radius:18px;padding:12px 16px;gap:6px 14px}
  body[data-sherpa] .weerstrook span{font-size:.8rem}
}

/* gecentreerde sectiekoppen: hoogtemarkering eronder, gecentreerd */
body[data-sherpa] .kopreeks:has(.kicker[style*="center"]){flex-direction:column;gap:9px}
body[data-sherpa] .kopreeks:has(.kicker[style*="center"]) .hoogtetag{flex:0 0 auto;justify-content:center;width:100%}
body[data-sherpa] .kopreeks:has(.kicker[style*="center"]) .hoogtetag .lijn{max-width:70px}

/* gidslabel: tab en paneel sluiten naadloos aan */
body[data-sherpa] .gidslabel.open .gltab{border-radius:14px 0 0 14px;margin-right:-1px;position:relative;z-index:2}
body[data-sherpa] .gidslabel.open .glpaneel{border-radius:0;border-left:none}

/* tip klapt naar binnen open: het paneel links van de tab, sluitknop ruim in beeld */
body[data-sherpa] .gidslabel{flex-direction:row-reverse}
body[data-sherpa] .glpaneel{border-radius:16px 0 0 16px;padding-right:44px}
body[data-sherpa] .gidslabel.open .glpaneel{border-radius:16px 0 0 16px;border-left:1px solid var(--lijn)}
body[data-sherpa] .glsluit{top:8px;right:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:1.05rem;padding:0}
body[data-sherpa] .glsluit:hover{background:var(--grijs-licht);color:var(--ink)}
html.dark body[data-sherpa] .glsluit:hover{background:#2A2140}
body[data-sherpa] .glpaneel[hidden]{display:none}