/* hub.css - styles for the new hub home blocks, category pages and the search. Uses only the CSS
   variables the live pages already define (--steel, --steel-line, --ink, --blade) so light/dark
   follow the existing theme toggle. New file, loaded with <link> in the body of the home and in
   the head of the inner pages. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hubzoek{display:flex;gap:8px;flex-wrap:wrap;max-width:620px;margin:14px auto 4px;align-items:center}
.hubzoek label{flex:0 0 100%;font-weight:700;font-size:.9rem}
.hubzoek input,.hdrzoek input{flex:1 1 220px;min-width:0;font:inherit;padding:11px 14px;border:1.5px solid var(--ink-line,#555);border-radius:10px;background:var(--paper,#fff);color:inherit}
.hubzoek button,.hdrzoek button{font:inherit;font-weight:700;padding:11px 18px;border:0;border-radius:10px;background:var(--blade,#ffd23a);color:#111;cursor:pointer}   /* fixed dark text: --ink turns light in dark mode (1.3:1 on the yellow, REVIEW2 #25) */
.hubzoek-uitleg{margin:2px auto 0;max-width:620px;font-size:.85rem;opacity:.8;text-align:center}
#toolzoek-uit{max-width:760px;margin:10px auto 0}
.zoeklijst{list-style:none;margin:6px 0 0;padding:0}
.zoeklijst li{padding:8px 0;border-top:1px solid var(--steel-line,#ddd)}
.zoeklijst span{font-size:.8rem;opacity:.75;margin-left:6px}
.zoeklijst small{display:block;opacity:.85;margin-top:2px}
.hdrzoek{display:flex;gap:8px;max-width:1120px;margin:8px auto;padding:0 20px;box-sizing:border-box}
.hubcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin:18px 0 0}
.hubcard{background:var(--steel,#f4f4ee);border:1px solid var(--steel-line,#ddd);border-radius:14px;padding:16px 18px}
.hubcard h3{margin:0 0 6px;font-size:1.05rem}
.hubcard p{margin:0 0 8px;font-size:.92rem}
.hubcard ul,.meest{list-style:none;margin:0 0 8px;padding:0}
.hubcard li,.meest li{padding:4px 0;border-top:1px solid var(--steel-line,#ddd)}
.hubcard li span,.meest li span{font-size:.78rem;opacity:.75;margin-left:6px}
.hubcard-meer{font-weight:700}
.meest-kop{margin:26px 0 6px}
.meest{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:4px 18px}
.crumbs{font-size:.85rem;margin:18px 0 6px;opacity:.85}
.catkop h1{margin:.2em 0 .5em}
.sitegroep h3{margin:22px 0 6px}
.sitegroep h3 small{font-weight:400;opacity:.75}
.toollijst{list-style:none;margin:0;padding:0}
.toollijst li{padding:8px 0;border-top:1px solid var(--steel-line,#ddd)}
.toollijst li span{display:block;font-size:.88rem;opacity:.85;margin-top:2px}
.anders{font-size:.92rem}
@media (max-width:560px){.hdrzoek{padding:0 16px}.hubzoek button,.hdrzoek button{flex:0 0 auto}}
/* REVIEW3 #13: the live pages declare the intended dark 3px ring and then override it with a 2px ring in the yellow accent (1.54:1 on the light page). Loaded after the inline CSS, this restores the intended ring. */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
footer :focus-visible,.dojo :focus-visible{outline-color:var(--blade)}
/* Codex #5: the live inline CSS hides the file input with display:none, so a keyboard user could never reach the hub's own tool.
   Visually hidden but still focusable (Tab, then Enter or Space opens the picker); the dropzone shows the focus ring. */
.drop{position:relative}
.drop input{display:block;position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
.drop:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px;border-color:var(--ink)}

/* Round 17: the "All N" list as a card grid (Max 10-10: flat list of text; competitors use icon cards + filter chips).
   The whole card is the link; the description is clamped visually to 3 lines but stays complete in the HTML. */
.kaartfilter{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.kaartfilter[hidden]{display:none}
.kaartfilter button{font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;border-radius:999px;border:1.5px solid var(--ink-line,#555);background:var(--paper,#fff);color:inherit;cursor:pointer}
.kaartfilter button small{font-weight:400;opacity:.8;margin-left:2px}
.kaartfilter button[aria-pressed="true"]{background:var(--ink);color:var(--paper,#fff);border-color:var(--ink)}
.kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.kaart[hidden]{display:none}
.kaart a{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"ico naam" "ico site" "txt txt";column-gap:12px;row-gap:2px;align-content:start;height:100%;
  box-sizing:border-box;padding:16px;background:var(--steel,#f4f4ee);border:1px solid var(--steel-line,#ddd);border-radius:16px;color:inherit;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.kaart a:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(0,0,0,.35);border-color:var(--ink-line,#555)}
.kaart-ico{grid-area:ico;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:hsl(var(--tint) 75% 88%);color:hsl(var(--tint) 60% 26%)}
.kaart-naam{grid-area:naam;font-weight:700;line-height:1.25;align-self:end}
.kaart-site{grid-area:site;font-size:.78rem;opacity:.8;align-self:start}
.kaart-txt{grid-area:txt;margin-top:10px;font-size:.9rem;line-height:1.45;max-height:4.35em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
:root[data-theme="dark"] .kaart-ico{background:hsl(var(--tint) 35% 24%);color:hsl(var(--tint) 85% 82%)}
@media (prefers-reduced-motion:reduce){.kaart a{transition:none}.kaart a:hover{transform:none}}