/* Hadj-begeleiding (publieke pagina + embed). Bewust zonder Tailwind: geen CSS-build nodig bij deploy. */
:root{
  --cream:#faf6f1; --card:#fff; --ink:#3b2a17; --brown:#5a3d1f; --gold:#a6794a; --gold-2:#c39a66;
  --muted:#8a7762; --line:#eadfd2; --soft:#f4ece2; --green:#3f9b4b; --green-bg:#eaf6ec;
  --amber:#9a6a12; --amber-bg:#fdf3dc; --blue:#2f5f8f; --blue-bg:#e9f1f9;
  --shadow:0 4px 24px 0 rgba(180,140,100,.20); --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.55 Gabarito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* kop */
.hero{padding-top:28px;padding-bottom:8px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
h1{font-size:clamp(26px,4.4vw,38px);line-height:1.12;margin:6px 0 8px;font-weight:800;color:var(--brown)}
.lead{max-width:62ch;color:var(--muted);margin:0}

/* voortgang */
.progress{position:sticky;top:0;z-index:20;background:rgba(250,246,241,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:18px}
.progress .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.phasebar{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.phase{min-width:0}
.phase .name{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase.active .name{color:var(--brown)}
.phase .track{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.phase .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:99px;transition:width .35s}
.count{font-weight:700;font-size:14px;color:var(--brown);white-space:nowrap}
.listbtn{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600}

/* indeling */
.layout{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:22px 0 60px;align-items:start}
.rail{position:sticky;top:74px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;max-height:calc(100vh - 96px);overflow:auto}
.rail h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:14px 8px 6px}
.rail h3:first-child{margin-top:4px}
.rail button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:8px;border-radius:10px;font-size:15px;line-height:1.25}
.rail button:hover{background:var(--soft)}
.rail button[aria-current=step]{background:var(--soft);font-weight:700;color:var(--brown)}
.dot{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--soft);color:var(--muted);border:1.5px solid var(--line)}
[aria-current=step] .dot{background:var(--brown);border-color:var(--brown);color:#fff}
.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.rail .wait .dot{border-style:dashed}

/* stapkaart */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(18px,3vw,30px)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--brown)}
.tag.nusuk{background:var(--blue-bg);color:var(--blue)}
.tag.wait{background:var(--amber-bg);color:var(--amber)}
.tag.time{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:600}
h2{font-size:clamp(23px,3.4vw,30px);line-height:1.15;margin:0 0 8px;color:var(--brown);font-weight:800}
.intro{margin:0 0 20px;color:#5d4b38;max-width:64ch}
.onnusuk{display:flex;gap:10px;align-items:flex-start;background:var(--blue-bg);color:#234a70;border-radius:12px;padding:10px 12px;font-size:15px;margin:0 0 20px}
.onnusuk b{font-weight:700}
section.block{margin:22px 0 0}
section.block>h4{font-size:15px;margin:0 0 10px;font-weight:700;color:var(--brown);display:flex;align-items:center;gap:8px}
.needs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.needs label{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}
.needs input{appearance:none;flex:none;width:22px;height:22px;border:2px solid var(--gold-2);border-radius:6px;margin:2px 0 0;display:grid;place-items:center;background:#fff}
.needs input:checked{background:var(--green);border-color:var(--green)}
.needs input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.needs label:has(input:checked){background:var(--green-bg);border-color:#bfe2c4}
.needs small{display:block;color:var(--muted);font-size:14px}
ol.how{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
ol.how li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px}
ol.how li::before{content:counter(s);width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--brown);font-weight:700;font-size:14px;display:grid;place-items:center}
.ui{display:inline-block;font-size:.88em;font-weight:700;background:#16181d;color:#fff;border-radius:6px;padding:1px 8px;white-space:nowrap}
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.spec div{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.spec b{display:block;color:var(--brown)}
.spec span{font-size:14.5px;color:var(--muted)}
.examples{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px;align-items:stretch}
.examples figure{margin:0;border:1.5px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:#fff}
.examples img{width:100%;height:210px;object-fit:contain}
.examples figcaption{font-size:14.5px;color:var(--muted)}
.examples figcaption b{display:block;color:var(--brown);font-size:15.5px;margin-bottom:2px}
.tool{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#fbf3e6,#f6e7d2);border:1.5px solid #ecd8bb;border-radius:14px;padding:16px}
.tool .ic{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--gold)}
.tool p{margin:2px 0 10px;font-size:15px;color:#5d4b38}
.tool b{color:var(--brown)}
.warn{background:var(--amber-bg);border-radius:12px;padding:12px 14px;color:#6d4a0a;font-size:15.5px}
.warn ul{margin:6px 0 0;padding-left:20px}
.warn li+li{margin-top:4px}
video{width:100%;max-width:560px;border-radius:12px;background:#1d1711;aspect-ratio:16/9;display:block}
.waitbox{display:flex;gap:16px;align-items:center;background:var(--amber-bg);border-radius:14px;padding:18px;margin-bottom:6px}
.waitbox .big{flex:none;width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--amber)}
.waitbox p{margin:0;color:#6d4a0a}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:30px;padding:13px 22px;font-weight:800;font-size:16px;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 6px 16px rgba(166,121,74,.35)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--brown)}
.btn.small{padding:9px 16px;font-size:15px}
.btn.wa{background:#e8f7ee;color:#11703a;border:1.5px solid #bfe6cd}
.nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.help{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px;background:var(--soft);border-radius:14px;padding:14px 16px}
.help p{margin:0;font-size:15.5px}
.help b{color:var(--brown)}

/* instap + slot */
.entry{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.entry button{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 2px 10px rgba(180,140,100,.10)}
.entry button:hover{border-color:var(--gold-2)}
.entry b{display:block;color:var(--brown)}
.entry span{font-size:14.5px;color:var(--muted)}
.finish{text-align:center;padding:10px 0}
.finish .ok{width:72px;height:72px;border-radius:50%;background:var(--green-bg);color:var(--green);display:grid;place-items:center;margin:0 auto 14px}
.finish ul{text-align:left;max-width:520px;margin:18px auto}


.sheet-backdrop{display:none}
@media (max-width:860px){
  body{font-size:16.5px}
  .layout{grid-template-columns:1fr;padding-top:16px}
  .listbtn{display:inline-flex}
  .rail{display:none;position:fixed;inset:auto 0 0 0;top:auto;z-index:40;border-radius:20px 20px 0 0;max-height:78vh;padding:18px 14px 26px}
  .rail.open{display:block}
  .sheet-backdrop.open{display:block;position:fixed;inset:0;background:rgba(40,26,10,.45);z-index:30}
  .entry{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .examples{grid-template-columns:1fr}
  .nav{flex-direction:column-reverse;align-items:stretch}
  .phase .name{display:none}
  .phase .track{margin-top:0;height:8px}
  .entry button{padding:10px 14px}
  .entry span{display:none}
  .tool{flex-direction:column;align-items:flex-start}
}

/* In een iframe groeit de pagina mee met de inhoud: 'sticky' en 'fixed' werken dan
   tegen de hele iframe-hoogte. De stappenlijst klapt daarom gewoon in de pagina open. */
body.embed{background:transparent}
body.embed .progress{position:static;background:transparent;backdrop-filter:none}
@media (max-width:860px){
  body.embed .rail{position:static;border-radius:var(--r);max-height:none;margin-bottom:14px}
  body.embed .sheet-backdrop.open{display:none}
}

/* Stap met hulpmiddel: uitleg ↔ foto's klaarmaken binnen de stap (ontwerp Tarik, 26-09). */
.nr{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 18px 65px #55401d09}
.nr-switch{display:flex;padding:5px;background:#f3f0eb;border-radius:13px;position:relative;margin-bottom:18px}
.nr-switch:before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/2);border-radius:9px;background:#fff;box-shadow:0 2px 7px #392c2110;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.nr-switch[data-tool=true]:before{transform:translateX(100%)}
.nr-switch button{position:relative;z-index:1;flex:1;border:0;padding:10px 8px;background:none;font-size:15px;color:var(--muted)}
.nr-switch button[aria-selected=true]{color:var(--ink);font-weight:700}
.nr-view{animation:nr-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes nr-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nr-overview{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.nr-overview h3{font-size:26px;line-height:1.25;margin:0 0 10px;color:var(--brown)}
.nr-copy{color:var(--muted);margin:0 0 16px}
.nr-benefit{display:flex;gap:10px;align-items:center;font-size:15px;margin:9px 0}
.nr-tick{color:#386858;background:#edf2ed;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;flex:none;font-size:13px}
.nr-start{margin-top:16px}
.nr-small{font-size:13px;color:var(--muted);margin:10px 0 0}
.nr-docs{position:relative;background:#f6f2eb;border:1px solid #ede5da;border-radius:17px;min-height:260px;display:flex;align-items:center;justify-content:center;gap:19px;overflow:hidden}
.nr-docs:before{content:'';width:260px;height:260px;position:absolute;border:1px solid #e5d8c3;border-radius:50%;box-shadow:0 0 0 30px #eee5d74d,0 0 0 60px #eee5d726}
.nr-doc{position:relative;background:#fff;border-radius:11px;padding:16px 12px 10px;text-align:center;box-shadow:0 12px 26px #62482316;border:1px solid #e9dfd2;transform:rotate(-7deg);width:124px}
.nr-doc.photo{transform:rotate(8deg) translateY(18px);width:108px}
.nr-doc svg{width:70px;height:92px;color:#aa8a5f}
.nr-doc.photo svg{height:74px}
.nr-doc strong{display:block;font-size:13px}
.nr-doc small{font-size:11px;color:var(--muted)}
.nr-note{color:var(--muted);font-size:13px;margin:18px 0 0}
.nr-intro{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-bottom:8px}
.nr-intro strong{color:#386858;font-weight:600}
.nr-intro a{color:var(--muted);text-decoration:none;white-space:nowrap}
.nr-loading{padding:14px;background:var(--cream);border-radius:9px;font-size:14px;color:var(--muted)}
.nr iframe{display:block;width:100%;height:600px;border:0;border-radius:10px;margin-bottom:12px}
@media (max-width:720px){
  .nr{padding:12px}
  .nr-overview{grid-template-columns:1fr;gap:20px}
  .nr-docs{min-height:200px;grid-row:1}
  .nr-doc{width:104px}.nr-doc svg{height:74px}.nr-doc.photo{width:92px}.nr-doc.photo svg{height:60px}
  .nr-start{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.nr-view,.nr-switch:before{animation:none;transition:none}}