/* Sitezoeker DuurzaamThuisLab — overlay + inline (/zoeken/).
   Geladen via de partial search-overlay.html. Gebruikt de thematokens uit baseof
   (--cream, --ink, --terracotta, --ink-line, --mono, --display): geen eigen kleuren. */

/* Knop in de header */
.hs-bar{flex:1 1 auto;min-width:0;max-width:380px;display:flex;align-items:center;gap:.55rem;background:var(--paper,#fff);border:1px solid var(--ink-line);border-radius:2px;padding:.5rem .55rem .5rem .8rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);cursor:text;text-align:left}
.hs-bar:hover,.hs-bar:focus-visible{border-color:var(--terracotta);color:var(--ink)}
.hs-bar svg{flex:none;color:var(--terracotta)}
.hs-bar-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-bar kbd{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-soft);border:1px solid var(--ink-line);border-radius:2px;padding:.05rem .35rem;background:var(--cream-soft);flex:none}
@media(max-width:1100px){.hs-bar kbd{display:none}}
@media(max-width:900px){.hs-bar{max-width:none;margin-left:auto;margin-right:.5rem}}
@media(max-width:560px){.hs-bar{flex:0 0 auto;padding:.5rem}.hs-bar-text{display:none}}

/* Overlay */
.hs-overlay{position:fixed;inset:0;background:rgba(26,43,31,.55);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:6vh 1rem}
.hs-overlay.open{display:flex}
.hs-panel{background:var(--cream);width:100%;max-width:720px;border:1px solid var(--ink-line);border-top:3px solid var(--terracotta);border-radius:2px;box-shadow:0 24px 60px -12px rgba(26,43,31,.35);overflow:hidden;max-height:86vh;display:flex;flex-direction:column}
.hs-inputwrap{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--ink-line);background:var(--paper,#fff)}
.hs-inputwrap svg{flex:none;color:var(--terracotta)}
.hs-input{flex:1;border:0;outline:0;font-family:var(--display);font-size:1.15rem;font-weight:400;color:var(--ink);padding:.2rem 0;background:transparent}
.hs-input::placeholder{color:var(--ink-soft);opacity:.8}
.hs-close{border:1px solid var(--ink-line);background:var(--cream-soft);border-radius:2px;padding:.3rem .55rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-soft);cursor:pointer}
.hs-close:hover{border-color:var(--ink);color:var(--ink)}
.hs-body{overflow:auto;padding:.3rem 0 .6rem;background:var(--cream)}
.hs-group{padding:.7rem 1.1rem .25rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.hs-item{display:block;padding:.6rem 1.1rem;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.hs-item:hover,.hs-item.active{background:var(--cream-soft);border-left-color:var(--terracotta);text-decoration:none}
.hs-item .t{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.3}
.hs-item .t mark,.hs-item .x mark{background:rgba(198,110,63,.18);color:inherit;padding:0 .05em;border-radius:2px}
.hs-item .m{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.15rem}
.hs-item .x{font-size:.86rem;color:var(--ink-soft);margin-top:.25rem;line-height:1.5}
.hs-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;padding:.1rem .4rem;border:1px solid var(--ink-line);border-radius:2px;background:var(--cream-soft);color:var(--terracotta-tekst);margin-right:.45rem;vertical-align:middle;text-transform:uppercase;letter-spacing:.1em}
.hs-empty{padding:1.2rem 1.1rem;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.hs-empty a{color:var(--terracotta)}
.hs-foot{border-top:1px solid var(--ink-line);padding:.55rem 1.1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-soft);display:flex;gap:1.1rem;flex-wrap:wrap;background:var(--cream-soft)}
.hs-foot kbd{border:1px solid var(--ink-line);border-radius:2px;padding:0 .3rem;font:inherit;background:var(--paper,#fff)}
@media(max-width:560px){.hs-overlay{padding:0}.hs-panel{max-height:100vh;max-height:100dvh;height:100%;border:0;border-top:3px solid var(--terracotta)}.hs-foot{display:none}}

/* Inline modus op /zoeken/ */
.hs-overlay.hs-inline{display:block;position:static;background:none;padding:0;z-index:auto}
.hs-inline .hs-panel{box-shadow:none;max-height:none;background:var(--cream)}
.hs-inline .hs-body{min-height:40vh}