/* public/styles/site-search.css
 *
 * 全站搜索的样式。放在 public/ 而不是组件 scoped style 里，有两个原因：
 *   1. 下拉结果项是 JS createElement 生成的，拿不到 Astro 的 data-astro-cid
 *      作用域属性，scoped 样式对它们完全失效；
 *   2. 首页首屏 / 首页顶栏 / 工具页侧栏三处共用同一套，写进任一组件都会漏。
 *
 * 类名统一 ss- 前缀：design-lab.astro 里另有一份同名的搜索样式（它自己的
 * scoped style，用的是 .search-wrap/.glass-search-input 等旧类名），
 * 这里刻意不复用那批名字，避免全局样式漏进那个内部演示页。
 */

.site-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ss-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: #536073;
  pointer-events: none;
}

.ss-input {
  width: 100%;
  height: 44px;
  padding: 0 38px 0 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(83, 96, 115, 0.06);
}
.ss-input:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: #536073;
  box-shadow: 0 0 0 3px rgba(83, 96, 115, 0.18);
}

.ss-clear {
  position: absolute;
  right: 12px;
  border: none;
  background: #cbd5e1;
  color: #475569;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.ss-clear[hidden] {
  display: none;
}

/* 下拉。宽度跟随输入框，所以侧栏里也要把搜索框放在滚动容器之外 */
.ss-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 342px;
  overflow-y: auto;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #d5dde8;
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
}
.ss-results[hidden] {
  display: none;
}

.ss-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
}
.ss-item:hover,
.ss-item.active {
  background: #eef4fb;
  color: #0050a0;
}
.ss-item-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.ss-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-item-cat {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ss-empty {
  padding: 14px 12px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* 首屏大号变体：首页主入口，唯一带 ?q= 预填的实例 */
.site-search--hero {
  max-width: 620px;
}
.site-search--hero .ss-input {
  height: 52px;
  font-size: 14.5px;
  border-radius: 16px;
  background: #f7f9fc;
  border: 1.5px solid #d5dde8;
  box-shadow: none;
}
.site-search--hero .ss-input:focus {
  background: #ffffff;
  border-color: #0050a0;
  box-shadow: 0 0 0 4px rgba(0, 80, 160, 0.12);
}
.site-search--hero .ss-icon {
  left: 16px;
  width: 18px;
  height: 18px;
  color: #7b8ba1;
}

/* 侧栏 / 顶栏紧凑变体 */
.site-search--sidebar .ss-input,
.site-search--topbar .ss-input {
  height: 38px;
  font-size: 12.5px;
  border-radius: 11px;
  padding: 0 34px 0 36px;
}
.site-search--sidebar .ss-icon,
.site-search--topbar .ss-icon {
  left: 11px;
  width: 14px;
  height: 14px;
}
.site-search--topbar {
  width: 200px;
  flex: 0 0 auto;
  transition: opacity 0.18s ease;
}
/* 首屏大搜索还在视口里时，顶栏这个淡出。
   用 opacity + visibility 而不是 display:none —— 保留 200px 占位，
   否则吸顶栏会在滚过首屏的瞬间横向抽动一下。
   visibility:hidden 同时把它移出 tab 顺序与无障碍树。 */
.site-search--topbar[data-collapsed='1'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}