/* ScoreStory — the user manual: the hub and the chapter pages
   (layouts/handleiding.njk). The text inside .hd-body is Markdown from the
   application repo, so it is styled by element, not by class. */

/* Hero, shared by hub and chapter */
.hd-hero{padding:40px 0 48px;background:radial-gradient(90% 70% at 100% 0%,rgba(19,163,125,.10),transparent 60%),var(--white);border-bottom:1px solid var(--line)}
.hd-hero-hub{padding-bottom:64px}
.hd-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:.86rem;color:var(--muted);margin-bottom:28px}
.hd-crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.hd-crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.hd-crumbs a:hover{color:var(--navy)}
.hd-hero .eyebrow{margin-bottom:14px}
.hd-title{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--navy);max-width:22ch}
.hd-lede{font-size:1.15rem;color:var(--muted);margin-top:18px;max-width:62ch}
.hd-intro{max-width:66ch;margin-top:20px;font-size:1.08rem;color:var(--muted)}
.hd-intro p+p{margin-top:.9em}
.hd-intro strong{color:var(--ink)}
.hd-updated{font-size:.84rem;color:var(--muted);margin-top:16px}

/* Hub hero: intro and search, with the popular topics beside them */
.hd-hub-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:end}
.hd-popular{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px 18px}
.hd-popular h2{font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);margin-bottom:10px}
.hd-popular ul{list-style:none}
.hd-popular li+li{border-top:1px solid var(--line)}
.hd-popular a{display:block;padding:11px 4px}
.hd-popular strong{display:block;font-weight:600;font-size:.95rem;color:var(--navy);line-height:1.3}
.hd-popular span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.hd-popular a:hover strong{color:var(--green-deep)}

/* Search */
.hd-search{position:relative;max-width:560px;margin-top:32px}
.hd-search-label{display:block;font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:8px}
.hd-search-field{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.hd-search-field:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(19,163,125,.14)}
.hd-search-field svg{flex:none;color:var(--muted)}
.hd-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1rem;color:var(--ink);padding:13px 0;min-height:48px}
.hd-search-results{list-style:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;max-height:min(420px,60vh);overflow-y:auto}
.hd-search-results a{display:block;padding:10px 12px;border-radius:8px}
.hd-search-results a:hover,.hd-search-results a:focus{background:var(--blue-tint);outline:0}
.hd-search-results strong{display:block;color:var(--navy);font-size:.95rem}
.hd-search-results small{display:block;color:var(--muted);font-size:.8rem;margin-top:1px}
.hd-search-results .hd-search-snippet{display:block;color:var(--muted);font-size:.84rem;line-height:1.45;margin-top:4px}
.hd-search-results mark{background:var(--green-tint);color:inherit;border-radius:3px;padding:0 1px}
.hd-search-results .hd-search-none{padding:12px;color:var(--muted);font-size:.92rem}

/* Hub: chapter cards */
.hd-cards-section{padding:64px 0 32px}
.hd-cards-title{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--navy);margin-bottom:28px}
.hd-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hd-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.hd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.hd-card-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--green-tint);color:var(--green-deeper);font-weight:700;font-size:.9rem;margin-bottom:14px}
.hd-card h3{font-size:1.3rem;color:var(--navy);line-height:1.2}
.hd-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hd-card p{color:var(--muted);font-size:.93rem;margin-top:10px}
.hd-card ul{list-style:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.hd-card ul a{position:relative;z-index:1;font-size:.86rem;color:var(--green-deep);font-weight:500;display:inline-block;padding:5px 0}
.hd-card ul a:hover{text-decoration:underline;text-underline-offset:3px}

/* Chapter: three columns, then two, then one */
.hd-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;grid-template-areas:"side body toc";gap:48px;padding-top:48px;padding-bottom:40px;align-items:start}
.hd-layout.hd-no-toc{grid-template-columns:230px minmax(0,1fr);grid-template-areas:"side body"}
.hd-side{grid-area:side;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto;padding-bottom:12px}
.hd-side .hd-search{margin-top:0;margin-bottom:28px}
.hd-side .hd-search-results{min-width:320px}
.hd-toc{grid-area:toc;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto}
.hd-body{grid-area:body;min-width:0}
.hd-side-title{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hd-side-title a:hover{color:var(--navy)}
.hd-chapters ol,.hd-toc ol{list-style:none}
.hd-chapters a{display:flex;gap:10px;padding:7px 10px;border-radius:8px;font-size:.9rem;color:var(--muted);line-height:1.35}
.hd-chapters a span{flex:none;width:1.4em;color:var(--line-blue);font-weight:600;font-variant-numeric:tabular-nums}
.hd-chapters a:hover{color:var(--navy);background:var(--blue-tint)}
.hd-chapters a.active{color:var(--green-deeper);background:var(--green-tint);font-weight:600}
.hd-chapters a.active span{color:var(--green-deep)}
.hd-toc{border-left:1px solid var(--line);padding-left:18px}
.hd-toc a{display:block;padding:5px 0;font-size:.86rem;color:var(--muted);line-height:1.35}
.hd-toc a:hover,.hd-toc a.active{color:var(--green-deep)}
.hd-toc a.active{font-weight:600}

/* Chapter text (rendered Markdown) */
.hd-body{font-size:1.04rem;line-height:1.72;color:var(--ink)}
.hd-body>*:first-child{margin-top:0}
.hd-body p,.hd-body ul,.hd-body ol{margin-bottom:1.1em}
.hd-body ul,.hd-body ol{padding-left:1.4em}
.hd-body li{margin-bottom:.4em}
.hd-body li>ul,.hd-body li>ol{margin:.4em 0 0}
.hd-body h2{font-size:clamp(1.55rem,2.4vw,1.9rem);color:var(--navy);margin:2.2em 0 .6em;scroll-margin-top:96px}
.hd-body h3{font-size:1.25rem;color:var(--navy);margin:1.8em 0 .5em;scroll-margin-top:96px}
.hd-body h4{font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin:1.5em 0 .4em;scroll-margin-top:96px}
.hd-body a{color:var(--green-deep);text-decoration:underline;text-decoration-color:var(--line-green);text-underline-offset:3px}
.hd-body a:hover{text-decoration-color:currentColor}
.hd-body strong{color:var(--navy);font-weight:600}
.hd-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--blue-tint);color:var(--navy);border-radius:5px;padding:.1em .35em;overflow-wrap:anywhere}
.hd-body pre{background:var(--navy);color:#fff;border-radius:12px;padding:18px 20px;overflow-x:auto;margin-bottom:1.2em;font-size:.88rem;line-height:1.55}
.hd-body pre code{background:none;color:inherit;padding:0}
.hd-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.hd-note{margin:1.6em 0;padding:16px 20px;border-left:4px solid var(--green);border-radius:0 12px 12px 0;background:var(--green-tint)}
.hd-note p:last-child{margin-bottom:0}
.hd-shot{margin:1.6em 0 2em}
.hd-shot a{display:block}
.hd-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.hd-shots-note{font-size:.88rem;color:var(--muted);background:var(--blue-tint);border-radius:10px;padding:10px 14px;margin-bottom:1.6em}
.hd-table{overflow-x:auto;margin:1.4em 0 1.8em;border:1px solid var(--line);border-radius:12px}
.hd-table table{width:100%;border-collapse:collapse;font-size:.94rem;line-height:1.5}
.hd-table th{text-align:left;background:#F5F7FB;color:var(--navy);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)}
.hd-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.hd-table tr:last-child td{border-bottom:0}

/* Previous / next */
.hd-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.hd-pager a{display:block;border:1px solid var(--line);border-radius:14px;padding:16px 20px;color:var(--navy);font-weight:600;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.hd-pager a:hover{border-color:var(--green);box-shadow:var(--shadow)}
.hd-pager span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.hd-pager-prev span::before{content:"← "}
.hd-pager-next{grid-column:2;text-align:right}
.hd-pager-next span::after{content:" →"}

/* Questions + call to action */
.hd-help{padding:40px 0 96px}
.hd-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hd-help-box{border:1px solid var(--line);border-radius:22px;padding:36px 36px 38px;background:#F5F7FB}
.hd-help-box h2{font-size:1.6rem;color:var(--navy)}
.hd-help-box p{color:var(--muted);margin:12px 0 0}
.hd-help-box a:not(.btn){color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.hd-help-cta{background:linear-gradient(155deg,var(--navy) 0%,var(--green) 100%);border:0;color:#fff;box-shadow:var(--shadow-lg)}
.hd-help-cta h2{color:#fff}
.hd-help-cta p{color:rgba(255,255,255,.86);margin-bottom:24px}

@media(max-width:1139px){
  .hd-layout,.hd-layout.hd-no-toc{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"side toc" "side body";gap:0 40px}
  .hd-layout.hd-no-toc{grid-template-areas:"side body"}
  .hd-toc{position:static;max-height:none;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:32px}
  .hd-toc ol{columns:2;column-gap:24px}
  .hd-toc li{break-inside:avoid}
  .hd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-hub-grid{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
}
@media(max-width:900px){
  .hd-layout,.hd-layout.hd-no-toc{grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "body" "side";padding-top:32px}
  .hd-layout.hd-no-toc{grid-template-areas:"body" "side"}
  .hd-side{position:static;max-height:none;overflow:visible;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
  .hd-side .hd-search{display:none}
  .hd-help-grid{grid-template-columns:minmax(0,1fr)}
  .hd-hub-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .hd-hero{padding:28px 0 36px}
  .hd-cards{grid-template-columns:minmax(0,1fr)}
  .hd-toc ol{columns:1}
  .hd-body{font-size:1rem}
  .hd-pager{grid-template-columns:minmax(0,1fr)}
  .hd-pager-next{grid-column:1}
  .hd-help-box{padding:28px 24px 30px}
  .hd-search-results .hd-search-snippet{display:none}
}