/* ============================================================
   ReStory site-wide search — ported from the new build into the
   old-site mirror. Self-contained: tokens are defined on .search-ov
   so nothing depends on the new design system.
   ============================================================ */

.search-ov {
  --sx-primary: #00909B;
  --sx-primary-hover: #007D87;
  --sx-teal-50: #EAF5F5;
  --sx-ink: #383F48;
  --sx-text: #383F48;
  --sx-muted: #898680;
  --sx-border: #DDE2E4;
  --sx-border-subtle: #E9EDEE;
  --sx-card: #FFFFFF;
  --sx-sunken: #F4F6F6;
  --sx-font-display: dense-web, "Fira Sans", sans-serif;
  --sx-font-sans: "Fira Sans", sans-serif;
  position: fixed; inset: 0; z-index: 9999;
  font-family: var(--sx-font-sans);
}
.search-ov[hidden] { display: none; }
.search-ov__backdrop { position: absolute; inset: 0; background: rgba(18,30,32,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.search-ov__panel { position: relative; width: min(700px, 94vw); margin: min(9vh, 84px) auto 0; max-height: 82vh; display: flex; flex-direction: column; background: var(--sx-card); border-radius: 8px; box-shadow: 0 24px 64px rgba(18,30,32,0.35); overflow: hidden; }
.search-ov__bar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--sx-border-subtle); }
.search-ov__bar > svg { width: 20px; height: 20px; color: var(--sx-muted); flex: none; }
.search-ov__input { flex: 1; min-width: 0; border: none; outline: none; background: none; box-shadow: none; font-family: var(--sx-font-sans); font-size: 18px; color: var(--sx-text); margin: 0; height: auto; }
.search-ov__input:focus { border: none; box-shadow: none; background: none; }
.search-ov__esc { flex: none; border: 1px solid var(--sx-border); border-radius: 4px; background: var(--sx-sunken); color: var(--sx-muted); font-size: 11px; font-weight: 700; padding: 5px 9px; cursor: pointer; letter-spacing: 0.05em; }
.search-ov__results { overflow-y: auto; padding: 6px 10px 14px; }
.search-ov__hint, .search-ov__empty { padding: 34px 22px; text-align: center; color: var(--sx-muted); font-size: 15px; line-height: 1.6; }
.search-ov__count { padding: 12px 12px 2px; font-size: 12px; color: var(--sx-muted); }
.search-grp { margin-top: 6px; }
.search-grp__head { display: flex; align-items: center; gap: 8px; padding: 9px 12px 6px; font-family: var(--sx-font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: 600; color: var(--sx-primary); }
.search-grp__head span { color: var(--sx-muted); font-family: var(--sx-font-sans); letter-spacing: 0; font-weight: 600; font-size: 12px; }
.search-res { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
.search-res:hover, .search-res:focus-visible { background: var(--sx-teal-50); }
.search-res.is-active, .search-grp__more.is-active { background: var(--sx-teal-50); box-shadow: inset 3px 0 0 var(--sx-primary); }
.search-res.is-active .search-res__tag { background: #fff; }
.search-res__title { color: var(--sx-text); font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow-wrap: break-word; line-height: 1.35; }
.search-res__by { color: var(--sx-muted); font-size: 13px; white-space: nowrap; flex: none; }
.search-res__tag { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; color: var(--sx-primary-hover); background: var(--sx-teal-50); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.search-res:hover .search-res__tag { background: #fff; }
.search-grp__more { display: inline-block; margin: 2px 0 4px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--sx-primary); text-decoration: none; }
@media (max-width: 560px) {
  .search-res__by, .search-res__tag { display: none; }
  .search-ov__panel { margin-top: 0; max-height: 100%; height: 100%; width: 100%; border-radius: 0; }
  .search-ov__results { overflow-x: hidden; }
}

/* Retire the old WP search dropdown: the magnifier now opens the overlay. */
.floating-search .search-wrapper, .floating-search .search-toggle { display: none !important; }
.floating-search .search-icon { cursor: pointer; }
