/* Downloads (overzicht en categoriepagina's), gemaakt door paginas/maak_downloads.py. 13 nov 2026.
   Bouwt voort op css/style.css (project-hero, block, cta-band, filter-chip, btn). Kleuren uit de webstyleguide. */

.dl-sectie{background:var(--bg-soft);}
/* Brandingfoto (tekening met Variotherm-samplebox): uitsnede bovenin, zodat de samplebox rechts van de tekst
   in beeld staat. Op 50% valt alleen de tekening met een hand in de smalle header. */
.dl-hero-branding .project-hero-bg{object-position:50% 10%;}
.dl-sectie svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------- balk met zoeken, filters en productkeuze ---------- */
.dl-balk{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:26px;
  box-shadow:0 6px 18px rgba(28,35,56,.06);
}
@media (min-width:900px){
  .dl-balk{position:sticky; top:calc(var(--kop-hoogte, 0px) + 12px); z-index:20;}
}
.dl-zoek{display:flex; align-items:center; gap:10px; flex:1 1 280px; min-width:0;
  border:1.5px solid var(--line); border-radius:6px; padding:0 12px; color:var(--ink-soft); background:var(--white);}
.dl-zoek:focus-within{border-color:var(--orange);}
.dl-zoek input{border:0; outline:0; background:transparent; width:100%; height:44px; font:inherit; font-size:15px; color:var(--ink);}
.dl-zoek-groot input{height:52px; font-size:16px;}
.dl-chips{flex:1 1 100%;}
.dl-hubbalk .dl-zoek{flex-basis:100%;}
.dl-soort{display:none;}
.dl-soort select{width:100%; height:44px; border:1.5px solid var(--line); border-radius:6px; padding:0 34px 0 12px;
  font:inherit; font-size:14px; color:var(--ink); background:var(--white);}
@media (max-width:700px){
  /* style.css staat in de bouw onder een omhulling met een sterkere selector; daarom hier dubbel geklasseerd */
  .dl-balk .filter-chips.dl-chips{display:none;}
  .dl-balk .dl-soort{display:block; flex:1 1 100%;}
}
.dl-naar-product select{height:44px; border:1.5px solid var(--line); border-radius:6px; padding:0 34px 0 12px;
  font:inherit; font-size:14px; color:var(--ink); background:var(--white); max-width:280px;}
.dl-naar-product select:focus{border-color:var(--orange); outline:0;}
@media (max-width:700px){
  .dl-naar-product{flex:1 1 100%;}
  .dl-naar-product select{width:100%; max-width:none;}
}

/* ---------- product met documenten ---------- */
.dl-product{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  margin-bottom:20px; overflow:hidden;
  scroll-margin-top:calc(var(--kop-hoogte, 0px) + 130px);
}
.dl-pkop{display:flex; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--line);}
.dl-pfoto{width:64px; height:64px; flex:none; border-radius:6px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.dl-pfoto img{width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box;}
.dl-pnaam{flex:1 1 auto; min-width:0;}
.dl-pkop h2{font-size:18px; line-height:1.3; margin:0 0 3px; color:var(--ink);}
.dl-aantal{font-size:13px; color:var(--ink-soft);}
.dl-naar{margin-left:auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--orange); text-decoration:none;
  border:1.5px solid var(--line); border-radius:6px; padding:8px 12px;}
.dl-naar:hover{border-color:var(--orange);}
.dl-naar svg{width:16px; height:16px;}
@media (max-width:600px){
  .dl-pkop{flex-wrap:wrap; gap:12px; padding:14px 16px;}
  .dl-pfoto{width:52px; height:52px;}
  .dl-pkop h2{font-size:16px;}
  .dl-pnaam{flex-basis:calc(100% - 64px);}
  .dl-naar{margin-left:64px; padding:6px 10px; font-size:13.5px;}
}

.dl-groep{padding:4px 22px 12px;}
.dl-groep h3{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin:14px 0 4px;}
.dl-groep ul{list-style:none; margin:0; padding:0;}
.dl-rij + .dl-rij{border-top:1px solid var(--line);}
.dl-rij a{
  display:grid; grid-template-columns:34px 1fr auto 30px; align-items:center; gap:12px;
  padding:9px 10px; margin:0 -10px; border-radius:6px;
  color:var(--ink); text-decoration:none; font-size:15px; line-height:1.4;
}
.dl-rij a:hover{background:#FDF1E4;}
.dl-rij a:hover .dl-titel{color:var(--ink);}
.dl-rij a:focus-visible{outline:2px solid var(--orange); outline-offset:-2px;}
.dl-icoon{position:relative; width:30px; height:34px; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;}
.dl-icoon svg{width:30px; height:30px; stroke-width:1.4;}
.dl-icoon b{position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  font-size:8.5px; font-weight:800; line-height:1; letter-spacing:.02em;
  color:var(--white); background:var(--navy); border-radius:3px; padding:2px 3px;}
.dl-icoon.dl-pdf b{background:var(--orange);}
.dl-meta{font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.dl-laad{width:30px; height:30px; border-radius:999px; background:var(--orange); color:var(--white);
  display:flex; align-items:center; justify-content:center;}
.dl-laad svg{width:16px; height:16px; stroke-width:2.2;}
.dl-rij a:hover .dl-laad{background:var(--orange-deep);}
@media (max-width:600px){
  .dl-groep{padding:2px 16px 10px;}
  .dl-rij a{grid-template-columns:30px 1fr 30px; gap:10px;}
  .dl-meta{grid-column:2; grid-row:2; margin-top:-4px;}
  .dl-laad{grid-column:3; grid-row:1 / span 2;}
}

.dl-product[hidden], .dl-groep[hidden], .dl-rij[hidden]{display:none;}
.dl-geen{background:var(--white); border:1px dashed var(--line); border-radius:10px; padding:22px; color:var(--ink-soft); text-align:center;}
.dl-terug{margin:26px 0 0;}
.dl-terug a{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--orange); text-decoration:none;}
.dl-terug svg{transform:rotate(180deg);}

/* ---------- overzicht: categorieën ---------- */
.dl-cathead{margin-top:10px;}
.dl-cats{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px;}
.dl-cat{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  color:var(--ink); text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dl-cat:hover{border-color:var(--orange); transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,35,56,.08);}
.dl-cat:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.dl-cfoto{display:block; aspect-ratio:3 / 2; overflow:hidden; background:var(--bg-soft);}
.dl-cfoto img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
.dl-cfoto.is-product img{object-fit:contain; padding:16px; box-sizing:border-box;}
.dl-cat:hover .dl-cfoto img{transform:scale(1.04);}
.dl-cnaam{font-size:16px; font-weight:700; padding:14px 46px 0 18px;}
.dl-caantal{font-size:13px; color:var(--ink-soft); padding:4px 18px 16px;}
.dl-cat .pijl{position:absolute; right:16px; bottom:18px; color:var(--orange);}

/* ---------- overzicht: zoekresultaten ---------- */
.dl-resultaten{background:var(--white); border:1px solid var(--line); border-radius:10px; padding:8px 22px 18px; margin-bottom:34px;}
.dl-teller{font-size:14px; color:var(--ink-soft); margin:12px 0 4px;}
.dl-resultaten ul{list-style:none; margin:0; padding:0;}
.dl-res{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 16px; padding:6px 0;}
.dl-res + .dl-res{border-top:1px solid var(--line);}
.dl-res .dl-rij{border:0;}
.dl-res-sub{font-size:13px; color:var(--ink-soft); margin:-2px 0 0 46px;}
.dl-res-sub a{color:var(--orange); text-decoration:none; font-weight:600;}
.dl-res-sub a:hover{text-decoration:underline;}
.dl-res > .dl-rij{grid-column:1 / -1;}
.dl-meer{margin-top:12px;}
.dl-meer[hidden], .dl-resultaten[hidden], .dl-geen[hidden]{display:none;}
@media (max-width:600px){
  .dl-cats{grid-template-columns:1fr 1fr; gap:12px;}
  .dl-cnaam{font-size:14.5px; padding:10px 12px 0; line-height:1.3;}
  .dl-caantal{font-size:12px; padding:3px 12px 12px;}
  .dl-cat .pijl{display:none;}
  .dl-cfoto.is-product img{padding:10px;}
}
@media (max-width:600px){ .dl-res-sub{margin-left:40px;} }