/* ==========================================================================
   Site search — header disclosure, form, results.

   Tokens come from style.css and assets/css/sections.css; nothing is
   redefined here. Rules are scoped to .ensearch / .sres so the pagination and
   filter styling cannot reach the product archive or the article index.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header disclosure

   A <details> element rather than a scripted panel: keyboard operable and
   announced without JavaScript. The marker is removed because the summary
   already carries an icon and a word.
   -------------------------------------------------------------------------- */
.ensearch{position:relative;flex:0 0 auto}
.ensearch>summary{list-style:none}
.ensearch>summary::-webkit-details-marker{display:none}

.ensearch-t{display:flex;align-items:center;gap:var(--s-2);border:1px solid var(--line);
  background:transparent;padding:var(--s-2) var(--s-3);min-height:44px;cursor:pointer;
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--muted);user-select:none}
.ensearch-t:hover{color:var(--ink);border-color:var(--sage)}
.ensearch-t .en-icon{width:var(--s-4);height:var(--s-4);flex:0 0 auto}
.ensearch[open] .ensearch-t{background:var(--sage);border-color:var(--sage);color:#fff}
.ensearch-t:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

.ensearch-p{position:absolute;right:0;top:calc(100% + 11px);z-index:80;
  width:min(360px,calc(100vw - 2*var(--rail)));
  background:var(--white);border:1px solid var(--line);box-shadow:var(--e-3);
  padding:var(--s-4)}

/* --------------------------------------------------------------------------
   The form itself
   -------------------------------------------------------------------------- */
.ensearch-f label{display:block;font-family:var(--data);font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-2)}
.ensearch-row{display:flex;gap:var(--s-2);align-items:stretch}
.ensearch-f input[type="search"]{flex:1 1 auto;min-width:0;border:1px solid var(--muted);
  background:var(--white);padding:10px 12px;min-height:44px;font-family:var(--body);font-size:var(--fs-body);
  color:var(--ink);border-radius:var(--radius);-webkit-appearance:none;appearance:none}
.ensearch-f input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
.ensearch-f input[type="search"]:focus{border-color:var(--sage);outline:none;
  box-shadow:0 0 0 1px var(--sage),0 0 0 4px rgba(44,95,45,.18)}
.ensearch-f input[type="search"]:focus-visible{outline:2px solid var(--sage);outline-offset:3px;box-shadow:none}
.ensearch-f .btn{flex:0 0 auto}

.ensearch-f--page{margin:0 0 var(--s-6);max-width:560px}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.sres-wrap .filters{margin-bottom:var(--s-6)}
.fct{font-size:var(--fs-micro);color:var(--muted);margin-left:var(--s-1)}
.filters a[aria-current="page"] .fct{color:var(--on-primary)}

.sres-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sres{padding:var(--s-5) var(--s-1);border-bottom:1px solid var(--line)}
.sres-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);margin:0}
.sres-c{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--muted)}
.sres-h{font-family:var(--display);font-size:var(--fs-lede);font-weight:var(--fw-heading);letter-spacing:var(--ls-display);
  line-height:var(--lh-h3);margin:var(--s-2) 0 var(--s-2)}
.sres-h a{text-decoration:none}
.sres-h a:hover{color:var(--sage)}
.sres-x{font-size:var(--fs-small);color:var(--muted);margin:0;max-width:var(--measure)}
.sres-n{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin:var(--s-2) 0 0}

/* The marker has to survive a printout and a forced-colours mode, so it is a
   background tint plus a weight change rather than a colour swap alone.
   The tint was the pending amber, which made a search hit read as an
   unconfirmed claim. --mist is the site's neutral highlight ground. */
.sres mark{background:var(--mist);color:inherit;font-weight:var(--fw-heading);padding:0 1px}

/* The type is the first thing a procurement reader scans for, so each type
   carries a rule colour rather than only a word. Four types, four greens —
   the FAQ rule was amber, which is a fifth meaning for a colour that is
   supposed to mean "pending" and nothing else. */
.sres--produkt{border-left:2px solid var(--sage);padding-left:var(--s-3)}
.sres--post{border-left:2px solid var(--sage-2);padding-left:var(--s-3)}
.sres--page{border-left:2px solid var(--line);padding-left:var(--s-3)}
.sres--en_faq{border-left:2px solid var(--deep);padding-left:var(--s-3)}

.sres-sugg{margin-top:var(--s-6)}
.sres-sugg .filters{margin-bottom:0}

.sres-wrap .navigation.pagination{margin-top:var(--s-7)}
.sres-wrap .nav-links{display:flex;flex-wrap:wrap;gap:var(--s-1);align-items:center}
/* 44px, not 38 — pagination is a standalone control, not a link inside a
   sentence, so it carries the touch-target floor like every other one. */
.sres-wrap .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--muted);
  text-decoration:none}
.sres-wrap .page-numbers:hover{color:var(--ink);border-color:var(--sage)}
.sres-wrap .page-numbers.current{background:var(--deep);border-color:var(--deep);color:#fff}
.sres-wrap .page-numbers.dots{border-color:transparent}

@media(max-width:600px){
  /* The label is hidden from sight, not from assistive technology: the button
     keeps its accessible name while the row stops competing with the language
     switch and the burger for a 360px header. */
  .ensearch-t-label{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
    padding:0;position:absolute;width:1px}
  .ensearch-t{padding:var(--s-2) var(--s-2);gap:0}
  /* The compact header places search between the wordmark and language
     switcher, so anchoring this panel to the trigger can pull it off-screen.
     Fix it to the viewport rails directly beneath the sticky header. */
  .header-search-desktop .ensearch-p{position:fixed;left:var(--rail);right:var(--rail);
    top:calc(var(--s-8) + 1px);width:auto}
  .admin-bar .header-search-desktop .ensearch-p{top:calc(var(--s-8) + 47px)}
  .ensearch-row{flex-direction:column}
  .ensearch-f .btn{justify-content:center}
}