/* ============================================================
   mbs — overlays.css
   Zoekoverlay + skip-link + z-index-schaal.
   Het paneel schuift ONDER de sticky kop uit: --search-top wordt
   live door global.js gezet (getBoundingClientRect().bottom),
   nooit hardcoded — de kop is hoger met announce-balk dan zonder.
   ============================================================ */

:root{
  --z-header:100;
  --z-dropdown:500;
  --z-modal:2000;
  --z-search-bg:9998;
  --z-search:10000;
  --z-header-search:10001;
  --z-scart:10100;
  --z-toast:11000;
  --search-top:78px;
}

/* ── skip-link ──────────────────────────────────────────── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-toast);
  padding:14px 22px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px;position:fixed}

.hdr__name{
  font-size:15px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:inherit;
}

/* ── zoekoverlay ────────────────────────────────────────── */
/* [hidden] moet display:none afdwingen: het element heeft display:block. */
.search-overlay[hidden]{display:none}

.search-overlay{
  position:fixed;inset:0;z-index:var(--z-search-bg);
}
.search-overlay__bg{
  position:absolute;inset:0;background:rgba(36,24,5,.42);
  opacity:0;transition:opacity .4s var(--ease-s);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.search-overlay__panel{
  position:absolute;left:0;right:0;top:var(--search-top);
  z-index:var(--z-search);
  background:var(--white);border-bottom:1px solid var(--line);
  padding:34px 0 30px;
  transform:translateY(-14px);opacity:0;
  transition:transform .5s var(--ease),opacity .35s var(--ease-s);
}
.search-overlay.is-open .search-overlay__bg{opacity:1}
.search-overlay.is-open .search-overlay__panel{transform:none;opacity:1}

/* Zolang de overlay open is moet de kop erboven blijven staan. */
body.is-searching .site-top{z-index:var(--z-header-search)}

.search-overlay__form{
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--ink);padding-bottom:14px;
}
.search-overlay__ico{display:flex;color:var(--mocha);flex:none}
.search-overlay__form input[type=search]{
  flex:1;min-width:0;border:0;padding:6px 0;background:transparent;
  font-size:clamp(18px,2.6vw,30px);font-weight:200;letter-spacing:-.02em;line-height:1.2;
}
.search-overlay__form input[type=search]:focus{outline:0;border:0}
.search-overlay__form input[type=search]::-webkit-search-cancel-button{display:none}
.search-overlay__form input[type=search]::placeholder{color:var(--mocha);opacity:.55;font-weight:200}
.search-overlay__form .btn{flex:none}
.search-overlay__x{flex:none}

.search-overlay__sug{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
}
.search-overlay__sug > span{
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--cocoa);margin-right:4px;
}
.search-overlay__sug a{
  display:inline-flex;align-items:center;padding:8px 16px;
  border:1px solid var(--line);font-size:12.5px;font-weight:300;color:var(--ink);
  transition:border-color .3s var(--ease-s),background .3s var(--ease-s);
}
.search-overlay__sug a:hover{border-color:var(--ink);background:var(--cream)}

@media (max-width:720px){
  .search-overlay__panel{padding:22px 0 24px}
  .search-overlay__form{gap:10px}
  .search-overlay__form .btn{display:none}
  .search-overlay__sug{margin-top:16px}
  .search-overlay__sug > span{width:100%;margin:0 0 4px}
}