/* =========================================================
   搜索：导航内联搜索框（补充 31）+ 柔光与描影 + 包裹层（补充 32）+ /search/ 独立页与暗色适配。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   补充 31：导航栏「内联搜索框」+ /search/ 独立搜索页
   
     本站原本是主题的「点一下弹全屏浮层」，这里改成前者。
   - 结构由 /js/nav-search.js 注入（保留 .search 这个 class，主题的
     querySelector('#search-button > .search') 才不会拿到 null 抛错）。
   - 图标与输入框都在 .site-page 里，文字色自动继承导航的四种状态配色。
   ========================================================= */

/* --- 导航栏内联搜索框 --- */
#nav #search-button {
    padding-left: 14px;
}

#nav #search-button .nav-search-form {
    /* 用 inline（而不是 inline-flex）+ baseline，才能和旁边的菜单项严格同一基线。
       
    */
    display: inline;
    margin: 0;
    vertical-align: baseline;
}

#nav #search-button .nav-search-input {
    /*
       见下面的「补充 31b」）。原因是 <input> 会把内部文字的 text-shadow 裁成直角色块。
       所以输入框**休息态宽度为 0、不占位**；占位的宽度由 label 提供，两者叠加后
       与改动前的布局逐像素一致（下面有「布局不变」的说明）。
       聚焦展开的宽度在 :focus 里。 */
    width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: inherit; /* 跟随 .site-page 的导航态配色（透明/吸顶/无封面/夜间） */
    font: inherit;
    line-height: 1.4;
    vertical-align: baseline;
    -webkit-appearance: none;
    appearance: none;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                margin-left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

#nav #search-button .nav-search-input::placeholder {
    /* 占位符必须**完全透明**：真实文字由 label 画。
       保留它（而不是删掉 placeholder 属性）有两个用处：
         · 输入框仍有可读的默认提示（对读屏器而言无障碍名称另有 aria-label 兜着）
         · 万一以后要用 `:placeholder-shown` 判断空/非空，它还在 */
    color: transparent;
    opacity: 0;
}

#nav #search-button .nav-search-input:focus {
    width: 148px;
    margin-left: 6px; /* 展开时才让出「图标 ↔ 输入框」的间距（休息态由 label 的 margin 提供） */
}

/* =========================================================
   
   ------------------------------------------------------------------
   需求：让「搜索」和旁边一级菜单拿到**一模一样的柔光**。
   做法：文字从 <input> 搬进 <label>。label 是普通元素，text-shadow 正常继承
        （来源就是给一级菜单上色/描影的那条 `.site-page` 规则），14px 模糊不会被裁。
       对比：写在同一行会看到「搜索」后面是**直角色块**（input 的 UA overflow:clip 把模糊切了）。

   · display: inline-block 是为了能吃 width —— 它的基线仍是内部文字的基线，
     所以和旁边菜单项同一基线（ 别改成 inline-flex，那条路踩过：图标会高 3.28px）。
   · width: 34px 是为了**保持布局逐像素不变**：原来是「图标 20 + 间距 6 + 输入框 34」= 60，
     现在是「图标 20 + label(间距 6 + 宽 34)」= 60，输入框休息态宽度 0 不占位。
   · opacity 与一级菜单一致。
   · cursor: text 让它看起来像输入框；点它聚焦靠 label 的 for= 原生行为。
   ========================================================= */
#nav #search-button .nav-search-ph {
    display: inline-block;
    width: 34px;
    margin-left: 6px;
    white-space: nowrap;
    cursor: text;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 聚焦 / 已有内容时藏起来（JS 打 .off；下面那条 :focus-within 是纯 CSS 兜底） */
#nav #search-button .nav-search-ph.off {
    display: none;
}

#nav #search-button .nav-search-form:focus-within .nav-search-ph {
    display: none;
}

/* 去掉 WebKit 搜索框自带的清除按钮，免得挤占宽度 */
#nav #search-button .nav-search-input::-webkit-search-cancel-button,
#nav #search-button .nav-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

/* 搜索框的下划线：沿用主题 `#nav .site-page:after`
   （3px、#80c8f8、hover 时从 0 展开到 100%），
   这里只补一条「聚焦时也展开」——点进输入框就能看到那条线 */
#nav #search-button .nav-search-box:focus-within::after,
#nav #search-button .nav-search-box:focus-within:after {
    width: 100%;
}

/* 窄屏：留出余地，避免展开时挤压站点标题 */
@media (max-width: 1200px) {
    #nav #search-button .nav-search-ph {
        width: 28px; /* 与改动前的窄屏休息态宽度一致；文字比盒子宽 3px 也不会被裁（overflow 可见） */
    }
    #nav #search-button .nav-search-input:focus {
        width: 96px;
    }
}

@media (max-width: 768px) {
    #nav #search-button {
        padding-left: 0 !important;
        margin-right: 10px; /* 与右侧汉堡菜单保持间距，避免贴边误触 */
    }
    #nav #search-button .nav-search-box {
        left: 0 !important;
    }
    #nav #search-button .nav-search-ph {
        display: none !important;
        width: 0 !important;
    }
}

/* --- /search/ 独立搜索页 --- */
#search-page .search-page-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e3e8f7;
    border-radius: 6px;
    background: #f7f9fc;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#search-page .search-page-box:focus-within {
    border-color: var(--zx-accent);
    background: #fff;
}

/* 暗色：上面的容器配色写死了浅色值，这里整块覆盖成主题暗色卡，
   输入文字用主题的 --search-input-color，避免深底配深字 */
html[data-theme="dark"] #search-page .search-page-box {
    border-color: #2c2c2c;
    background: var(--card-bg);
}
html[data-theme="dark"] #search-page .search-page-box:focus-within {
    border-color: var(--zx-accent);
    background: #1e1e1e;
}
html[data-theme="dark"] #search-page .search-page-box i,
html[data-theme="dark"] #search-page .search-page-input {
    color: var(--search-input-color);
}
html[data-theme="dark"] #search-page .search-page-status {
    color: var(--search-a-color);
}

#search-page .search-page-box i {
    color: var(--zx-text-4);
}

#search-page .search-page-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--zx-text-2);
    -webkit-appearance: none;
    appearance: none;
}

#search-page .search-page-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

#search-page .search-page-status {
    margin: 18px 2px 4px;
    font-size: 13.5px;
    color: #8a94a6;
}

#search-page .search-page-status b {
    color: var(--zx-accent);
    font-weight: 600;
}

#search-page .search-page-hint {
    padding: 28px 2px;
    font-size: 14px;
    color: var(--zx-text-4);
    text-align: center;
}

#search-page .search-result-item {
    display: block;
    padding: 16px 2px;
    border-bottom: 1px solid #eef1f6;
    text-decoration: none !important;
}

#search-page .search-result-item:last-child {
    border-bottom: 0;
}

#search-page .search-result-title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zx-text-1);
    transition: color 0.2s ease;
}

#search-page .search-result-item:hover .search-result-title {
    color: var(--zx-accent);
}

#search-page .search-result-excerpt {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.8;
    color: #6f7b8a;
}

#search-page mark {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(93, 128, 254, 0.2);
    color: inherit;
}

/* =========================================================
   补充 32：导航搜索框的「包裹层」样式
   - 包裹层故意用 <div>：主题有 `#nav.hide-menu #search-button span { display:none }`，
     窄屏折叠菜单时会把 <span> 一起隐藏掉，搜索框会莫名消失
   - 输入框宽度/展开动画/hover 下划线抑制都在「补充 31」里
   ========================================================= */
#nav #search-button .nav-search-box {
    /* inline + baseline（不是 inline-flex + middle）：后者图标中心比菜单项高 3.28px */
    display: inline;
    vertical-align: baseline;
}

/* =========================================================
   
   ========================================================= */