@charset "UTF-8";

/* ============================================================
   站内搜索框（全站通用）
   用法：页面 <head> 中引入本文件：
     <link rel="stylesheet" href="/css/search.css">
   搜索框 HTML 片段见 search-box-header.html，
   脚本见 /js/search.js。
   不修改任何既有元素样式，仅作用于新增的搜索框。
   ============================================================ */

/* 顶部黑条作为搜索框下拉面板的定位上下文（零视觉变化） */
.global-header {
  position: relative;
}

/* 搜索框容器：PC 下靠右对齐 */
.header-search {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 输入框：黑条上的白色下划线风格，延续全站黑白极简体系 */
.header-search .search-input {
  box-sizing: border-box;
  width: 220px;
  padding: 6px 30px 6px 4px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  background: transparent;
  color: #fff;
  font-size: .875rem;
  font-weight: 400;
  font-family: "Noto Sans SC", "SST W55 Regular", sans-serif;
  outline: none;
}

.header-search .search-input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.header-search .search-input:focus {
  border-bottom-color: #fff;
}

/* 放大镜图标 */
.header-search .search-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* 下拉结果面板：白底黑字、直角、细边框，与页面风格一致 */
.site-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 320px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  z-index: 9999;
  overflow: hidden;
}

.site-search-results a {
  display: block;
  padding: 11px 14px;
  color: #000;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
  text-decoration: none;
}

.site-search-results a:last-child {
  border-bottom: 0;
}

.site-search-results a .hit-name {
  display: block;
  font-weight: 700;
  font-size: .9375rem;
}

.site-search-results a .hit-desc {
  display: block;
  color: #737373;
}

.site-search-results a:hover,
.site-search-results a:focus {
  background: #000;
  color: #fff;
}

.site-search-results a:hover .hit-desc,
.site-search-results a:focus .hit-desc {
  color: #fff;
}

.site-search-results .no-result {
  padding: 14px;
  color: #737373;
  font-size: .8125rem;
  font-weight: 400;
}

/* 移动端：搜索框绝对定位右上角，不参与 logo 居中布局 */
@media (max-width: 1023px) {
  .header-search {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }

  .header-search .search-input {
    width: 108px;
  }

  .site-search-results {
    width: 280px;
    right: 14px;
  }
}