/* Site search.
   Search has one surface: the WaTo dropdown. Typing swaps the browse columns
   for results inside the same panel. There is no modal — it was deleted along
   with its backdrop, scroll lock and focus-restore logic, because it existed
   only so the panel could launch a second interface on top of itself.

   Everything here is built from the tokens in styles.css :root. An earlier
   version used a Tailwind slate/sky palette with a yellow highlight, on a site
   whose palette is navy, cyan and blue — it read as a component borrowed from
   somewhere else. 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}

/* ── The panel becomes the search ────────────────────────────────────────
   Only the logo tab searches, so only it gets the single-column shell; every
   other mega tab keeps the original 4-column grid untouched. */
.logo-tab .mega{display:block}
.logo-tab .mega-browse{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2.125rem}
/* An explicit display beats the UA stylesheet's [hidden]{display:none}, so
   without this the columns stay on screen when JS hides them and the results
   simply stack underneath — the panel jumped 282px to 646px. */
.logo-tab .mega-browse[hidden]{display:none}

/* The field spans the panel and sits above a rule, so it reads as the panel's
   own header rather than a fifth thing dropped in beside the four columns. */
.mega-find{display:flex;align-items:center;gap:.6rem;
  margin:-.25rem 0 1.15rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line)}
.mega-find:focus-within{border-bottom-color:var(--cyan)}
.mega-find-icon{flex:0 0 auto;width:1.15rem;height:1.15rem;color:var(--muted)}
.mega-find:focus-within .mega-find-icon{color:var(--cyan-dark)}
.mega-find-input{flex:1 1 auto;min-width:0;border:0;background:transparent;
  font-family:var(--font);font-size:1.02rem;color:var(--text);padding:.15rem 0}
.mega-find-input::placeholder{color:var(--muted)}
/* type="search" draws its own clear affordance, which would sit beside ours. */
.mega-find-input::-webkit-search-cancel-button,
.mega-find-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.mega-find-clear{flex:0 0 auto;display:grid;place-items:center;
  width:1.6rem;height:1.6rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--soft);color:var(--muted);font-size:1.1rem;line-height:1;
  transition:background .15s ease,color .15s ease}
.mega-find-clear:hover{background:var(--soft-2);color:var(--navy)}

/* Height is driven from search.js: the panel opens at exactly the height the
   menu was, then animates up to a comfortable search height and holds there.
   Two rejected alternatives, both measured:
     - letting it size to its results grew it 282px -> 474px mid-keystroke and
       resized again on every query, which is the jitter worth avoiding;
     - pinning it to the menu height was perfectly still but left roughly one
       and a half results visible, a worse menu AND a worse search.
   One deliberate morph is the thing that reads as the panel becoming search. */
.mega-find-panel{display:flex;flex-direction:column;transition:height .24s ease}
/* Same trap as .mega-browse above, and it bit twice: an explicit display beats
   [hidden]{display:none}, so the empty results panel was still occupying its
   height underneath the columns — 128px of invisible dead space in the default
   menu, which also made the panel measure 410px when its contents were 281px. */
.mega-find-panel[hidden]{display:none}
.mega-find-status{margin:0 0 .5rem;font-size:.8rem;color:var(--muted);
  font-family:var(--head);font-weight:600;letter-spacing:.02em}
.mega-find-status a{color:var(--cyan-dark)}
.mega-results{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 1.5rem),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 1.5rem),transparent)}

/* The swap. Results fade up as they replace the columns; the panel itself is
   absolutely positioned, so nothing on the page reflows behind it. */
.mega-find-panel:not([hidden]){animation:megaFindIn .16s ease both}
@keyframes megaFindIn{from{opacity:0;transform:translateY(-.25rem)}
  to{opacity:1;transform:none}}

/* ── 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}

/* ── Mobile: the drawer accordion does the same swap ─────────────────── */
@media(max-width:980px){
  /* The WaTo tab is last in the drawer; lift it so search is the first thing
     the menu shows rather than three taps down. */
  .nav .logo-tab{order:-1}
  .logo-tab .mega-browse{grid-template-columns:1fr;gap:.5rem}
  .mega-find{margin:.5rem 0 .9rem}
  /* In the drawer the panel is already inside a scrolling column, so a fixed
     height would trap the list in a second scroller. Let it size naturally. */
  .mega-find-panel{height:auto}
  .mega-results{max-height:60vh}
}

/* ── /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 ───────────────────────────────────────────────────── */
.search-status{margin:.7rem 0 0;font-size:.9rem;color:var(--muted)}
.search-status a{color:var(--cyan-text)}
.search-results{margin-top:.5rem}
.search-foot{margin:.75rem 0 0;padding-top:.75rem;
  border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.search-foot a{color:var(--cyan-text);font-weight:600}
.search-page-form{display:flex;gap:.65rem;align-items:center;max-width:35rem;margin-top:.9rem}
.search-page-form .search-input{flex:1 1 auto;min-width:0;
  border:1px solid var(--line);border-radius:999px;
  padding:.65rem 1.1rem;background:var(--white);
  font-family:var(--font);font-size:1rem;color:var(--text)}
.search-page-form .search-input:focus{border-color:var(--cyan)}

@media(prefers-reduced-motion:reduce){
  .mega-find-clear,.search-hit,.mega-find-panel{transition:none}
  .mega-find-panel:not([hidden]){animation:none}
}