/* ========================
   站内搜索页样式
   ======================== */

/* 搜索页整体容器：页面主体区域 */
.search-page {
    padding: 32px 0 40px;
    /* 上下内边距 */
}

/* 搜索框区域（Hero区域）：页面顶部的主要搜索框 */
.search-hero {
    width: 75%;
    /* 宽度占75% */
    max-width: 900px;
    /* 最大宽度限制 */
    margin: 0 auto 24px;
    /* 水平居中，底部外边距24px */
}

/* 搜索表单容器：包含输入框和搜索按钮 */
.search-hero-form {
    display: flex;
    /* 弹性布局 */
    gap: 8px;
    /* 输入框和按钮之间的间距 */
}

/* 搜索输入框样式 */
.search-hero-input {
    flex: 1;
    /* 占据剩余空间 */
    padding: 10px 12px;
    /* 内边距 */
    font-size: 16px;
    /* 字体大小 */
    border-radius: 24px;
    /* 圆角边框 */
    border: 1px solid #cccccc;
    /* 浅灰色边框 */
    outline: none;
    /* 移除默认聚焦轮廓 */
}

/* 搜索输入框聚焦状态：显示红色边框和阴影 */
.search-hero-input:focus {
    border-color: #750a20;
    /* 红色边框 */
    box-shadow: 0 0 0 2px rgba(117, 10, 32, 0.1);
    /* 红色阴影效果 */
}

/* 搜索按钮样式 */
.search-hero-button {
    padding: 0 20px;
    /* 左右内边距 */
    border-radius: 24px;
    /* 圆角边框 */
    border: none;
    /* 无边框 */
    background-color: #750a20;
    /* 红色背景 */
    color: #ffffff;
    /* 白色文字 */
    font-size: 15px;
    /* 字体大小 */
    cursor: pointer;
    /* 鼠标指针样式 */
}

/* 搜索按钮悬停状态：背景色变深 */
.search-hero-button:hover {
    background-color: #a01330;
    /* 深红色背景 */
}

/* 搜索提示文字：显示搜索关键词等信息 */
.search-hero-tip {
    margin-top: 8px;
    /* 顶部外边距 */
    font-size: 14px;
    /* 字体大小 */
    color: #666666;
    /* 中灰色文字 */
}

/* 搜索关键词高亮：在提示文字中突出显示关键词 */
.search-hero-keyword {
    font-weight: bold;
    /* 粗体 */
    color: #750a20;
    /* 红色文字 */
}

/* 搜索标签区域：显示热门标签、分类标签等 */
.search-tags {
    width: 75%;
    /* 宽度占75% */
    max-width: 900px;
    /* 最大宽度限制 */
    margin: 0 auto 24px;
    /* 水平居中，底部外边距24px */
    background-color: #ffffff;
    /* 白色背景 */
    border-radius: 0;
    /* 直角 */
    border: 1px solid #e5e5e5;
    /* 浅灰色边框 */
    padding: 16px 20px;
    /* 内边距 */
}

/* 标签组之间的分隔：多个标签组之间的分隔线 */
.search-tags-group+.search-tags-group {
    margin-top: 12px;
    /* 顶部外边距 */
    border-top: 1px dashed #eeeeee;
    /* 顶部虚线边框 */
    padding-top: 12px;
    /* 顶部内边距 */
}

/* 标签组标题：如"热门标签"、"分类"等 */
.search-tags-title {
    margin: 0 0 8px;
    /* 上下外边距：上0 下8px */
    font-size: 15px;
    /* 字体大小 */
    font-weight: bold;
    /* 粗体 */
    color: #222222;
    /* 深灰色文字 */
}

/* 标签列表容器：使用弹性布局，允许换行 */
.search-tags-list {
    display: flex;
    /* 弹性布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 8px;
    /* 标签之间的间距 */
}

/* 单个标签样式：可点击的标签按钮 */
.search-tag {
    padding: 4px 12px;
    /* 内边距 */
    border-radius: 14px;
    /* 圆角边框 */
    border: 1px solid #dddddd;
    /* 浅灰色边框 */
    font-size: 13px;
    /* 字体大小 */
    color: #555555;
    /* 中灰色文字 */
    text-decoration: none;
    /* 无下划线 */
    background-color: #ffffff;
    /* 白色背景 */
    cursor: pointer;
    /* 鼠标指针样式 */
}

/* 标签悬停状态：边框和文字变为红色 */
.search-tag:hover {
    border-color: #750a20;
    /* 红色边框 */
    color: #750a20;
    /* 红色文字 */
}

/* 标签激活状态：选中状态的标签 */
.search-tag.active {
    border-color: #750a20;
    /* 红色边框 */
    background-color: #750a20;
    /* 红色背景 */
    color: #ffffff;
    /* 白色文字 */
}

/* 标签复选框：隐藏的复选框元素 */
.search-tag-checkbox {
    display: none;
    /* 隐藏显示 */
}

/* 搜索结果区域容器 */
.search-results {
    width: 75%;
    /* 宽度占75% */
    max-width: 900px;
    /* 最大宽度限制 */
    margin: 8px auto 0;
    /* 水平居中，顶部外边距8px */
}

/* 搜索结果区域（单一结果模式）：与普通结果区域样式相同 */
.search-results.search-results-single {
    width: 75%;
    /* 宽度占75% */
    max-width: 900px;
    /* 最大宽度限制 */
    margin: 8px auto 0;
    /* 水平居中，顶部外边距8px */
}

/* 搜索结果列表容器：包含所有搜索结果项 */
.search-results-list {
    list-style: none;
    /* 移除列表样式 */
    margin: 0;
    /* 无外边距 */
    padding: 0;
    /* 无内边距（后面会重新设置） */
    background-color: #ffffff;
    /* 白色背景 */
    border-radius: 0;
    /* 直角 */
    border: 1px solid #e5e5e5;
    /* 浅灰色边框 */
    padding: 16px 20px;
    /* 内边距 */
}

/* 单个搜索结果项：包含分类标签、标题链接和元信息 */
.search-result-item {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 8px;
    /* 元素之间的间距 */
}

/* 搜索结果项之间的分隔：除第一项外的其他项 */
.search-result-item+.search-result-item {
    margin-top: 12px;
    /* 顶部外边距 */
    padding-top: 12px;
    /* 顶部内边距 */
    border-top: 1px solid #f0f0f0;
    /* 顶部浅灰色边框 */
}

/* 搜索结果分类标签：显示"新闻"或"文章"等分类 */
.search-result-category {
    display: inline-block;
    /* 行内块元素 */
    padding: 3px 10px;
    /* 内边距 */
    border-radius: 12px;
    /* 圆角边框 */
    font-size: 12px;
    /* 字体大小 */
    font-weight: 500;
    /* 中等粗细 */
    white-space: nowrap;
    /* 不换行 */
    flex-shrink: 0;
    /* 不允许收缩 */
}

/* 新闻分类标签样式：蓝色系 */
.search-result-category-news {
    background-color: #e8f4f8;
    /* 浅蓝色背景 */
    color: #0066cc;
    /* 蓝色文字 */
    border: 1px solid #b3d9e6;
    /* 浅蓝色边框 */
}

/* 文章分类标签样式：紫色系 */
.search-result-category-article {
    background-color: #f0e8f5;
    /* 浅紫色背景 */
    color: #7b1fa2;
    /* 紫色文字 */
    border: 1px solid #d1b3e6;
    /* 浅紫色边框 */
}

/* 搜索结果链接：包含标题和元信息的链接容器 */
.search-result-link {
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 12px;
    /* 元素之间的间距 */
    font-size: 14px;
    /* 字体大小 */
    color: #333333;
    /* 深灰色文字 */
    text-decoration: none;
    /* 无下划线 */
    flex: 1;
    /* 占据剩余空间 */
}

/* 搜索结果链接悬停状态：标题显示下划线 */
.search-result-link:hover .search-result-title {
    text-decoration: underline;
    /* 下划线 */
}

/* 搜索结果标题：文章或新闻的标题 */
.search-result-title {
    flex: 1;
    /* 占据剩余空间 */
}

/* 搜索结果元信息：显示日期、阅读量等信息 */
.search-result-meta {
    white-space: nowrap;
    /* 不换行 */
    color: #999999;
    /* 浅灰色文字 */
    font-size: 13px;
    /* 字体大小 */
}

/* 搜索结果为空时的提示文字 */
.search-results-empty {
    margin: 0;
    /* 无外边距 */
    font-size: 14px;
    /* 字体大小 */
    color: #888888;
    /* 中灰色文字 */
}

/* 搜索结果为空时的全局提示：居中显示的空结果提示 */
.search-results-empty-global {
    width: 75%;
    /* 宽度占75% */
    max-width: 900px;
    /* 最大宽度限制 */
    margin: 12px auto 0;
    /* 水平居中，顶部外边距12px */
    text-align: center;
    /* 文字居中 */
}