/* HTF Zoeken · popup in de stijl van het websiteconcept.
   Alles hangt onder #htf-zoek en zet zelf lettertype, maten en kleuren vast,
   zodat de globale stijlen van de site (Oxygen) er niet doorheen lekken. */

@font-face{font-family:'HTF Titillium';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/titillium-web-700.woff2) format('woff2')}
@font-face{font-family:'HTF Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'HTF Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'HTF Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2')}

html.htf-zoek-open,html.htf-zoek-open body{overflow:hidden!important}

#htf-zoek{
  --z-ink:#2a2622;--z-muted:#5f5a53;--z-line:#e6e2d8;--z-paper:#faf7f0;--z-donker:#33302a;
  --z-blue:#2f558f;--z-amber:#f5a623;--z-amber-soft:#fdf1da;--z-ease:cubic-bezier(.22,.61,.36,1);
  --z-label:'HTF Titillium','Titillium Web',system-ui,sans-serif;--z-body:'HTF Poppins','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  position:fixed;inset:0;z-index:2147483000;display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(1rem,9vh,7rem) 1rem 1rem;margin:0;
  font-family:var(--z-body);font-size:16px;line-height:1.5;color:var(--z-ink);text-align:left;letter-spacing:normal;text-transform:none;
  -webkit-font-smoothing:antialiased;box-sizing:border-box
}
#htf-zoek[hidden]{display:none!important}
#htf-zoek:not(.open){pointer-events:none} /* tijdens het sluiten niets blokkeren */
#htf-zoek *,#htf-zoek *::before,#htf-zoek *::after{box-sizing:border-box}

#htf-zoek .htf-zoek__scrim{position:absolute;inset:0;background:rgba(29,29,31,.26);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .22s var(--z-ease)}
#htf-zoek .htf-zoek__paneel{position:relative;width:min(660px,100%);margin:0;padding:0;background:#fff;border:1px solid var(--z-line);border-radius:18px;box-shadow:0 40px 90px -30px rgba(29,29,31,.55),0 6px 18px -10px rgba(29,29,31,.25);overflow:hidden;display:flex;flex-direction:column;max-height:min(74vh,640px);opacity:0;transform:translateY(-10px) scale(.985);transition:opacity .22s var(--z-ease),transform .22s var(--z-ease)}
#htf-zoek.open .htf-zoek__scrim{opacity:1}
#htf-zoek.open .htf-zoek__paneel{opacity:1;transform:none}

#htf-zoek .htf-zoek__balk{display:flex;align-items:center;gap:.75rem;margin:0;padding:.5rem .9rem .5rem 1.1rem;border:0;border-bottom:1px solid var(--z-line);background:#fff;flex:none;width:auto;max-width:none}
#htf-zoek .htf-zoek__ico{display:grid;place-items:center;flex:none;width:auto;height:auto}
#htf-zoek .htf-zoek__ico svg{display:block;width:19px;height:19px;fill:none;stroke:var(--z-muted);stroke-width:2;stroke-linecap:round}
#htf-zoek input.htf-zoek__veld,#htf-zoek #htf-zoekveld{
  flex:1;min-width:0;width:auto;height:auto;max-width:none;margin:0;padding:.95rem 0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none;font-family:var(--z-body);font-size:1.05rem;font-weight:400;line-height:1.4;letter-spacing:normal;text-transform:none;color:var(--z-ink)
}
#htf-zoek #htf-zoekveld::placeholder{color:#8b8d93;opacity:1}
#htf-zoek #htf-zoekveld::-webkit-search-cancel-button,#htf-zoek #htf-zoekveld::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
#htf-zoek #htf-zoekveld:focus{outline:none;box-shadow:none;border:0}
#htf-zoek .htf-zoek__sluit{flex:none;width:auto;height:auto;min-height:0;margin:0;border:1px solid var(--z-line);background:var(--z-paper);border-radius:6px;padding:.28rem .55rem;font-family:var(--z-body);font-size:.72rem;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#55575d;cursor:pointer;box-shadow:none;transition:background .15s,color .15s}
#htf-zoek .htf-zoek__x{display:none;align-items:center;gap:.35rem}
#htf-zoek .htf-zoek__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#htf-zoek .htf-zoek__sluit:hover{background:var(--z-donker);border-color:var(--z-donker);color:#fff}
#htf-zoek .htf-zoek__sluit:focus-visible,#htf-zoek a:focus-visible{outline:3px solid var(--z-amber);outline-offset:2px}

#htf-zoek .htf-zoek__uitkomst{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;margin:0;padding:0}
#htf-zoek .htf-zoek__kop{margin:0;padding:.85rem 1.1rem .35rem;font-family:var(--z-body);font-size:.68rem;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#7c7e84}
#htf-zoek a.htf-zoek__item{display:block;margin:0;padding:.7rem 1.1rem;border:0;border-top:1px solid var(--z-line);background:#fff;color:var(--z-ink);text-decoration:none;box-shadow:none;transition:background .14s}
#htf-zoek a.htf-zoek__item:first-child,#htf-zoek .htf-zoek__kop+a.htf-zoek__item{border-top:0}
#htf-zoek a.htf-zoek__item:hover,#htf-zoek a.htf-zoek__item.is-actief{background:var(--z-paper);color:var(--z-ink)}
#htf-zoek a.htf-zoek__item.is-actief{box-shadow:inset 3px 0 0 var(--z-amber)}
#htf-zoek .htf-zoek__soort{display:block;margin:0 0 .1rem;font-family:var(--z-label);font-size:.8rem;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--z-blue)}
#htf-zoek .htf-zoek__titel{display:block;margin:0;font-family:var(--z-body);font-size:.98rem;font-weight:700;line-height:1.35;letter-spacing:normal;text-transform:none;color:var(--z-ink)}
#htf-zoek .htf-zoek__frag{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.15rem 0 0;font-family:var(--z-body);font-size:.85rem;font-weight:400;line-height:1.45;text-transform:none;color:#63656b}
#htf-zoek mark{background:rgba(245,166,35,.4);color:inherit;padding:0 .12em;border-radius:2px;font:inherit}
#htf-zoek .htf-zoek__bezig{padding:1.2rem;color:#63656b;font-size:.94rem}
#htf-zoek .htf-zoek__leeg{padding:1.2rem;font-size:1rem;color:var(--z-ink)}
#htf-zoek .htf-zoek__leeg strong{font-weight:700}
#htf-zoek .htf-zoek__leeg p{margin:.4rem 0 0;padding:0;color:#63656b;font-size:.92rem;line-height:1.55}
#htf-zoek .htf-zoek__leeg a{color:var(--z-blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

#htf-zoek .htf-zoek__voet{flex:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0;padding:.6rem 1.1rem;border-top:1px solid var(--z-line);background:var(--z-paper);font-family:var(--z-body);font-size:.78rem;line-height:1.4;color:#55575d}
#htf-zoek .htf-zoek__voet a{font-weight:700;color:var(--z-blue);text-decoration:none;white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
#htf-zoek .htf-zoek__voet a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--z-blue)}
#htf-zoek kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .3rem;margin:0 .2rem 0 0;border:1px solid var(--z-line);border-bottom-width:2px;border-radius:4px;background:#fff;box-shadow:none;font-family:var(--z-body);font-size:.72rem;line-height:1;color:var(--z-ink)}
#htf-zoek .htf-zoek__sep{display:inline-block;width:1px;height:11px;background:var(--z-line);margin:0 .7rem;vertical-align:-1px}

@media (max-width:680px){
  #htf-zoek{padding:0}
  #htf-zoek .htf-zoek__paneel{max-height:100%;height:100%;width:100%;border-radius:0;border:0}
  #htf-zoek .htf-zoek__toetsen{display:none}
  #htf-zoek .htf-zoek__voet{justify-content:center}
  #htf-zoek .htf-zoek__voet a{max-width:none}
  #htf-zoek .htf-zoek__balk{padding-top:.7rem;padding-bottom:.7rem}
  #htf-zoek .htf-zoek__sluit{padding:.5rem .75rem;font-size:.78rem;letter-spacing:.04em;text-transform:none;border-radius:8px}
  #htf-zoek .htf-zoek__esc{display:none}
  #htf-zoek .htf-zoek__x{display:inline-flex}
  #htf-zoek #htf-zoekveld{font-size:16px} /* geen inzoomen op iOS */
}
@media (prefers-reduced-motion:reduce){
  #htf-zoek .htf-zoek__scrim,#htf-zoek .htf-zoek__paneel{transition:none}
}