/* assets/css/zoeken.css — zoekvenster (menubalk) + zoekpagina */

/* ---------- Zoekvenster ---------- */
.sx-dialog{width:min(680px,calc(100% - 32px));max-height:min(78vh,720px);margin:clamp(16px,9vh,110px) auto auto;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:0 40px 90px -30px rgba(0,0,0,.55);overflow:hidden}
.sx-dialog[open]{display:flex;flex-direction:column;animation:sx-in .22s var(--ease,ease) both}
.sx-dialog::backdrop{background:rgba(12,6,24,.55);backdrop-filter:blur(6px)}
@keyframes sx-in{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
html.sx-open{overflow:hidden}

.sx-bar{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line)}
.sx-bar-ico{width:22px;height:22px;flex-shrink:0;color:var(--accent-text-2,var(--magenta))}
.sx-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;font-size:1.15rem;padding:8px 0}
.sx-bar input:focus{outline:none}
.sx-bar input::-webkit-search-cancel-button{display:none}
.sx-close{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.sx-close:hover,.sx-close:focus-visible{border-color:var(--magenta)}

.sx-body{overflow-y:auto;padding:8px 10px 14px;overscroll-behavior:contain}
.sx-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 8px}
.sx-suggest[hidden]{display:none}
.sx-suggest span{font-weight:700;font-size:.85rem;color:var(--muted)}
.sx-chip{padding:.4em .9em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.sx-chip:hover,.sx-chip:focus-visible{border-color:var(--magenta);outline:none}

.sx-results{list-style:none;margin:0;padding:0}
.sx-head{padding:12px 10px 6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sx-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;color:var(--text);text-decoration:none}
.sx-results [role=option].is-active .sx-row,.sx-row:hover,.sx-row:focus-visible{background:var(--bg);outline:none;box-shadow:inset 0 0 0 2px var(--lime)}
.sx-row img,.sx-row .sx-ph{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.sx-row img.is-round{border-radius:50%}
.sx-ph{display:grid;place-items:center;background:var(--bg);color:var(--accent-text-2,var(--magenta));font-weight:900}
.sx-txt{display:grid;min-width:0}
.sx-txt b{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-txt small{color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-dialog mark,.sx-page mark{background:var(--lime);color:#1a0b2e;border-radius:3px;padding:0 1px}
.sx-status{margin:10px;color:var(--muted);font-weight:600}
.sx-status:empty{display:none}
.sx-all{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 6px 0;padding:12px;border-radius:14px;background:var(--bg);color:var(--text);font-weight:800;text-decoration:none}
.sx-all[hidden]{display:none}
.sx-all:hover{box-shadow:inset 0 0 0 2px var(--magenta)}

@media (max-width:600px){
  .sx-dialog{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0;border:0}
  .header-actions .search-btn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.sx-dialog[open]{animation:none}}

/* ---------- Zoekpagina ---------- */
.sx-title{margin-bottom:18px}
.sx-form{display:flex;align-items:center;gap:10px;max-width:720px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--surface);border:2px solid var(--line)}
.sx-form:focus-within{border-color:var(--magenta)}
.sx-form-ico{width:22px;height:22px;color:var(--accent-text-2,var(--magenta));flex-shrink:0}
.sx-form input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;font-size:1.1rem;padding:8px 0}
.sx-form input:focus{outline:none}
.sx-empty,.sx-count{margin-top:18px;color:var(--text-2);font-weight:600}
.sx-none{margin-top:24px;padding:22px;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--line);max-width:720px}
.sx-none p + p{margin-top:6px;color:var(--text-2)}
.sx-group{margin-top:32px}
.sx-group-title{display:flex;align-items:center;gap:8px;font-weight:900;font-style:italic;font-size:1.3rem;margin-bottom:12px;text-transform:uppercase}
.sx-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:860px}
.sx-list.sx-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));max-width:none}
.sx-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s,transform .2s}
.sx-item:hover{border-color:var(--magenta);transform:translateY(-2px)}
.sx-item img,.sx-item .sx-ph{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0}
.sx-item img.is-round{border-radius:50%}
.sx-item .sx-txt b{white-space:normal}
.sx-snip{margin-top:4px;color:var(--text-2);font-size:.88rem;line-height:1.45}
@media (prefers-reduced-motion:reduce){.sx-item{transition:none}.sx-item:hover{transform:none}}

/* Menubalk iets compacter zodat het vergrootglas past (1251–1440 px) */
@media (min-width:1251px) and (max-width:1440px){
  .site-header .wrap{gap:12px}
  .main-nav{gap:0}
  .main-nav a{padding:10px 9px;font-size:.88rem}
  .main-nav a[aria-current="page"]::after{left:9px;right:9px}
  .header-actions{gap:6px}
  .header-actions .icon-btn{width:40px;height:40px}
}