/* Site search.
   Search lives on /search/ (reached from the top bar's Search button) and on
   the 404 page's "did you mean". The WaTo dropdown used to carry a search field
   too; Wato dropped it on 2026-10-19 once the top bar got its own button.

   Everything here is built from the tokens in styles.css :root. No raw hex
   below: if a value is not a var(), it is an alpha of one. */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── A result ────────────────────────────────────────────────────────── */
.search-hit{display:block;padding:.55rem .6rem;border-radius:.55rem;
  text-decoration:none;color:inherit}
.search-hit:hover,.search-hit:focus-visible{background:var(--soft)}
.search-hit-title{display:block;font-family:var(--head);font-weight:700;
  font-size:.95rem;color:var(--navy);line-height:1.3}

/* The section chip does real work, not decoration. Pages are deliberately
   cross-listed (backup-disaster-recovery lives under both IT and Cyber), so
   results legitimately repeat with identical titles and excerpts and read as a
   bug. The chip is the only thing that distinguishes them, so it is styled to
   be noticed — borrowing the site's pill language rather than inventing one. */
.search-hit-section{display:inline-block;margin-top:.25rem;
  padding:.1rem .5rem;border-radius:999px;
  background:var(--soft-2);color:var(--cyan-text);
  font-family:var(--head);font-weight:700;
  font-size:.64rem;letter-spacing:.04em;text-transform:uppercase}
.search-hit-excerpt{display:block;font-size:.85rem;color:var(--body);
  margin-top:.3rem;line-height:1.5}
.search-hit-excerpt mark{background:rgba(55,189,242,.3);color:var(--text);
  padding:0 .15rem;border-radius:.15rem}


/* ── /sitemap/ directory listing ─────────────────────────────────────── */
.sitemap-list{list-style:none;padding:0;margin:0 0 1.25rem;columns:2;column-gap:2rem}
.sitemap-list li{margin:0 0 .4rem;break-inside:avoid}
@media(max-width:700px){.sitemap-list{columns:1}}


/* ── /search/ page ───────────────────────────────────────────────────
   One job: get someone to the right page in a couple of keystrokes. The hero
   is the search field itself (a wide white pill with the button inside), then
   popular searches as the site's chips, then a results card whose top bar
   holds the count and section pills in the portfolio's filter language. The
   statement/FAQ/compare bands are off (hideBottom) and the characters hidden:
   it is a tool, not a landing page. */
.sp-hero{padding-block:var(--space-lg) var(--space-md)}
.sp-hero h1{margin:.5rem 0 .5rem}
.sp-lead{margin:0 0 1.25rem;max-width:60ch;font-size:1.05rem;line-height:1.6;color:var(--muted)}
.sp-form{position:relative;display:flex;align-items:center;gap:.5rem;max-width:46rem;
  padding:.4rem .4rem .4rem 1.1rem;border-radius:999px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:border-color var(--t-2) var(--e-out),box-shadow var(--t-2) var(--e-out)}
.sp-form:focus-within{border-color:var(--cyan);box-shadow:var(--shadow-cyan)}
.sp-icon{flex:none;width:1.25rem;height:1.25rem;color:var(--muted)}
.sp-form:focus-within .sp-icon{color:var(--cyan-dark)}
.sp-input{flex:1 1 auto;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--font);font-size:1.15rem;color:var(--text);padding:.55rem 0}
.sp-input::placeholder{color:var(--muted)}
/* the pill shows focus (border + glow); the field itself must not draw a second, square ring inside it */
.sp-input:focus,.sp-input:focus-visible{outline:none;box-shadow:none;border:0}
.sp-input::-webkit-search-cancel-button,.sp-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.sp-clear{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:999px;
  cursor:pointer;background:var(--soft);color:var(--muted);font-size:1.25rem;line-height:1;
  transition:background var(--t-1) var(--e-out),color var(--t-1) var(--e-out)}
.sp-clear:hover{background:var(--soft-2);color:var(--navy)}
.sp-clear[hidden]{display:none}
.sp-go{flex:none;border-radius:999px}
.sp-go svg{display:none;width:1.25rem;height:1.25rem}
.sp-popular{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem .5rem}
.sp-popular li{display:flex}
/* the chip is an inline link: without a block box its padding never reaches the row, so wrapped rows overlapped on phones */
.sp-popular .chip-work{display:inline-block;font-size:.82rem}
.sp-popular .chip-work[aria-current="true"]{background:var(--blue);color:var(--white);border-color:var(--blue)}

.sp-body{padding-block:0 var(--space-xl)}
.sp-results{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:1rem 1.25rem 1.25rem;margin-top:var(--space-lg)}
.sp-results[hidden]{display:none}
.sp-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.sp-status{margin:0;font:600 .9rem/1.3 var(--head);color:var(--muted)}
.sp-status b{color:var(--navy)}
.sp-status a{color:var(--cyan-text)}
.sp-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.sp-filters:empty{display:none}
.sp-filters .pill-work{padding:.5rem .9rem;font-size:.8rem}
.sp-filters .pill-work b{font-weight:600;color:inherit;opacity:.7;margin-left:.3rem;font-size:.72rem}
.sp-list{margin:0}
.sp-list .search-hit{padding:.9rem .6rem;border-radius:var(--radius);border-bottom:1px solid var(--line)}
.sp-list .search-hit:last-child{border-bottom:0}
.sp-list .search-hit-title{font-size:1.05rem}
.sp-list .search-hit-excerpt{font-size:.92rem}
.sp-list .search-hit--pin{margin:.6rem 0 .35rem;border-bottom:1px solid var(--cyan)}
.sp-none{padding:1.25rem .25rem .25rem}
.sp-none[hidden]{display:none}
.sp-none p{margin:0 0 .35rem;color:var(--muted)}
.sp-none-lead{font:700 1.15rem/1.3 var(--head);color:var(--navy)}
.sp-none-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1rem}
.sp-none-all{color:var(--cyan-text);font-weight:600}
.sp-browse{margin-top:var(--space-lg)}
.sp-browse .eyebrow{display:block;margin-bottom:.75rem}
.sp-browse[hidden]{display:none}
@media(max-width:600px){
  /* phones: one row, the button becomes a round icon inside the pill (the full-width blue bar read as a card) */
  .sp-form{padding:.3rem .3rem .3rem .85rem;gap:.35rem}
  .sp-icon{display:none}
  .sp-input{font-size:1rem;padding:.6rem 0}
  .sp-clear{width:1.75rem;height:1.75rem}
  .sp-go{width:2.75rem;height:2.75rem;padding:0;display:grid;place-items:center;border-radius:50%}
  .sp-go span{display:none}
  .sp-go svg{display:block}
  .sp-popular{margin-top:.85rem}
  .sp-popular .chip-work{padding:.55rem .8rem;font-size:.78rem}
  .sp-results{padding:.9rem .85rem 1rem}
  .sp-bar{flex-direction:column;align-items:flex-start}
}

/* Quick answers pinned above results (search.js PINS) */
.search-hit--pin{background:var(--soft-2);border:1px solid var(--cyan);margin-bottom:.35rem}
.search-hit--pin .search-hit-title::after{content:" \2192";color:var(--cyan-text)}