/* ==========================================================
   全站搜索组件样式（导航搜索框 / 联想下拉 / 搜索结果页 / 分页）
   主题配色沿用全站：红 #c91f1f / #A91B2C，黑，白，暖底 #f5f0e8
   ========================================================== */

:root {
    --search-red: #c91f1f;
    --search-red-dark: #a01818;
    --search-red-deep: #A91B2C;
    --search-border: #e8e2d8;
    --search-text: #333;
    --search-text-light: #8a8a8a;
}

/* ---------- 导航栏布局修正（修复搜索框挤压导航导致的变形 / 滚动条） ----------
   各页面 CSS 中 Logo + 14 个导航链接已接近占满 1400px 容器，
   注入的搜索框会导致溢出。此处统一收紧间距并允许换行兜底。 */
.navbar .container {
    flex-wrap: wrap;
    row-gap: 8px;
}

.navbar .navbar-links {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;            /* 空间不足时优雅换行，绝不溢出 */
    justify-content: flex-start;
    gap: 4px 8px;               /* 原 15px 间距收紧 */
    margin-left: 20px;
    padding: 0;
    overflow: visible;          /* 去掉被挤压后出现的导航内横向滚动条 */
    scrollbar-width: auto;
    white-space: normal;
}

.navbar .nav-link {
    padding: 5px 5px;           /* 原左右 8px，14 个链接共省出约 84px */
}

/* ---------- 导航栏搜索框（大厂风格：圆角胶囊 + 内嵌按钮） ---------- */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;          /* 始终右对齐，即使换行兜底也靠右 */
    padding-left: 18px;
}

.nav-search-box {
    display: flex;
    align-items: center;
    width: 200px;               /* 原 232px，为导航链接让出空间 */
    height: 38px;
    background: #f6f3ee;
    border: 1px solid var(--search-border);
    border-radius: 20px;
    padding: 0 6px 0 14px;
    transition: all .25s ease;
}

.nav-search-box:focus-within {
    width: 228px;               /* 原 280px，聚焦膨胀幅度收窄，避免二次挤压 */
    background: #fff;
    border-color: var(--search-red);
    box-shadow: 0 0 0 3px rgba(201, 31, 31, .08);
}

.nav-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #9a9a9a;
    transition: color .2s;
}

.nav-search-box:focus-within .nav-search-icon {
    color: var(--search-red);
}

.nav-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--search-text);
}

.nav-search-input::placeholder {
    color: #b0aca4;
}

.nav-search-input::-webkit-search-cancel-button {
    display: none;
}

.nav-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #d8d2c8;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .2s;
}

.nav-search-clear:hover {
    background: var(--search-red);
}

.nav-search-btn {
    margin-left: 6px;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--search-red) 0%, var(--search-red-dark) 100%);
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(201, 31, 31, .22);
}

.nav-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201, 31, 31, .35);
}

/* ---------- 联想下拉面板 ---------- */
.search-suggest {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 100%;
    min-width: 300px;
    background: #fff;
    border: 1px solid #f0ebe2;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(60, 40, 20, .14);
    z-index: 2000;
    overflow: hidden;
    animation: suggestFadeIn .18s ease;
}

@keyframes suggestFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-suggest-title {
    padding: 10px 16px 6px;
    font-size: 12px;
    color: var(--search-text-light);
    letter-spacing: 1px;
}

.search-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background .15s;
}

.search-suggest-item:hover,
.search-suggest-item.active {
    background: #faf5ee;
}

.search-suggest-rank {
    width: 18px;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    color: #b5b0a6;
    flex-shrink: 0;
    font-weight: 600;
}

.search-suggest-item:nth-child(2) .search-suggest-rank { color: var(--search-red); }
.search-suggest-item:nth-child(3) .search-suggest-rank { color: #e06b3d; }
.search-suggest-item:nth-child(4) .search-suggest-rank { color: #d9a441; }

.search-suggest-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--search-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-suggest-item:hover .search-suggest-text,
.search-suggest-item.active .search-suggest-text {
    color: var(--search-red);
}

.search-suggest-tag {
    flex-shrink: 0;
    font-size: 11px;
    color: #8a8a8a;
    border: 1px solid #e5e0d6;
    border-radius: 9px;
    padding: 1px 8px;
    background: #faf8f4;
}

.search-suggest-footer {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid #f2ede4;
    font-size: 13px;
    color: var(--search-red);
    text-align: center;
    cursor: pointer;
    transition: background .15s;
    background: #fdfbf8;
}

.search-suggest-footer:hover {
    background: #faf3ec;
    font-weight: 600;
}

/* ---------- 首页 Hero 大搜索框 ---------- */
.hero-search {
    width: 620px;
    max-width: 92%;
    margin: 34px auto 0;
    position: relative;
    z-index: 3;
}

.hero-search-box {
    display: flex;
    align-items: center;
    height: 54px;
    background: rgba(255, 255, 255, .96);
    border-radius: 28px;
    padding: 5px 5px 5px 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .6);
    transition: box-shadow .25s ease, background .25s ease;
}

.hero-search-box:focus-within {
    background: #fff;
    box-shadow: 0 10px 36px rgba(160, 24, 24, .28);
}

.hero-search-box .nav-search-icon {
    width: 19px;
    height: 19px;
}

.hero-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    color: var(--search-text);
    padding: 0 12px;
}

.hero-search-input::placeholder {
    color: #a8a29a;
}

.hero-search-input::-webkit-search-cancel-button {
    display: none;
}

.hero-search-btn {
    height: 44px;
    padding: 0 34px;
    border: none;
    border-radius: 23px;
    background: linear-gradient(135deg, var(--search-red) 0%, var(--search-red-dark) 100%);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: 4px;
    text-indent: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .25s ease;
    box-shadow: 0 3px 10px rgba(201, 31, 31, .3);
}

.hero-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(201, 31, 31, .42);
}

.hero-search .search-suggest {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
}

/* Hero 热搜词 */
.hero-search-hot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.hero-search-hot-label {
    opacity: .9;
}

.hero-hot-chip {
    padding: 3px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s ease;
    backdrop-filter: blur(2px);
}

.hero-hot-chip:hover {
    background: rgba(255, 255, 255, .95);
    color: var(--search-red);
    border-color: #fff;
    transform: translateY(-1px);
}

/* ==========================================================
   搜索结果页
   ========================================================== */
.search-page {
    min-height: 60vh;
    padding: 30px 0 60px;
}

/* 页内大搜索框区域 */
.search-page-head {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    padding: 34px 0 22px;
    border-bottom: 1px solid #ece5d8;
}

.search-page-head .hero-search {
    margin: 0 auto;
}

.search-page-head .hero-search-box {
    box-shadow: 0 4px 18px rgba(60, 40, 20, .10);
    border: 1px solid var(--search-border);
}

/* 县筛选 Chips */
.search-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
    justify-content: center;
}

.search-filter-chip {
    padding: 5px 16px;
    border-radius: 16px;
    border: 1px solid #e2dcd0;
    background: #fff;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.search-filter-chip:hover {
    border-color: var(--search-red);
    color: var(--search-red);
}

.search-filter-chip.active {
    background: linear-gradient(135deg, var(--search-red) 0%, var(--search-red-dark) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(201, 31, 31, .28);
}

/* 结果概要 */
.search-summary {
    font-size: 14px;
    color: var(--search-text-light);
    margin: 26px 0 16px;
}

.search-summary b {
    color: var(--search-red);
    font-weight: 600;
}

/* 主体布局 */
.search-body {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.search-main {
    flex: 1;
    min-width: 0;
}

.search-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 结果条目 */
.search-result-item {
    display: block;
    background: #fff;
    border: 1px solid #efe9dd;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
    transition: all .25s ease;
    animation: resultFadeIn .4s ease both;
}

.search-result-item:nth-child(1) { animation-delay: .02s; }
.search-result-item:nth-child(2) { animation-delay: .06s; }
.search-result-item:nth-child(3) { animation-delay: .10s; }
.search-result-item:nth-child(4) { animation-delay: .14s; }
.search-result-item:nth-child(5) { animation-delay: .18s; }

@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-result-item:hover {
    border-color: rgba(201, 31, 31, .45);
    box-shadow: 0 8px 24px rgba(120, 60, 40, .10);
    transform: translateY(-2px);
}

.search-result-title {
    font-size: 18px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 1.5;
    margin-bottom: 8px;
    transition: color .2s;
}

.search-result-item:hover .search-result-title {
    color: var(--search-red);
}

.search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--search-text-light);
}

.search-result-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
}

.search-result-tag-county {
    color: var(--search-red);
    background: rgba(201, 31, 31, .07);
    border: 1px solid rgba(201, 31, 31, .25);
}

.search-result-tag-topic {
    color: #6b6252;
    background: #f7f3ea;
    border: 1px solid #eae2d2;
}

.search-result-meta .meta-dot {
    color: #d5cfc3;
}

.search-result-summary {
    font-size: 14px;
    color: #6d6d6d;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 关键词高亮 */
mark.hl {
    background: rgba(201, 31, 31, .10);
    color: var(--search-red);
    font-weight: 600;
    padding: 0 1px;
    border-radius: 2px;
}

/* 空结果状态 */
.search-empty {
    background: #fff;
    border: 1px solid #efe9dd;
    border-radius: 12px;
    padding: 60px 24px;
    text-align: center;
}

.search-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #faf6ef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9c2b4;
}

.search-empty-title {
    font-size: 17px;
    color: #444;
    margin-bottom: 8px;
}

.search-empty-title b {
    color: var(--search-red);
}

.search-empty-desc {
    font-size: 13px;
    color: var(--search-text-light);
    margin-bottom: 22px;
}

.search-empty-hot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.search-empty-hot .hero-hot-chip {
    color: #666;
    border-color: #e2dcd0;
    background: #faf7f1;
    text-shadow: none;
}

.search-empty-hot .hero-hot-chip:hover {
    color: #fff;
    background: var(--search-red);
    border-color: var(--search-red);
}

/* ---------- 分页（大厂风格：数字页码 + 首尾页 + 省略号） ---------- */
.search-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    user-select: none;
}

.search-pagination .page-item {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid #e5dfd2;
    background: #fff;
    color: #444;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

.search-pagination a.page-item:hover {
    border-color: var(--search-red);
    color: var(--search-red);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(201, 31, 31, .12);
}

.search-pagination .page-item.active {
    background: linear-gradient(135deg, var(--search-red) 0%, var(--search-red-dark) 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(201, 31, 31, .30);
    cursor: default;
}

.search-pagination .page-item.disabled {
    color: #c5c0b5;
    border-color: #ece7db;
    cursor: not-allowed;
    background: #faf8f3;
}

.search-pagination .page-ellipsis {
    min-width: 26px;
    text-align: center;
    color: #b5b0a4;
    letter-spacing: 1px;
}

.search-pagination-info {
    width: 100%;
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--search-text-light);
}

/* ---------- 侧边栏 ---------- */
.search-side-box {
    background: #fff;
    border: 1px solid #efe9dd;
    border-radius: 12px;
    padding: 18px 20px;
}

.search-side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 14px;
}

.search-side-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--search-red) 0%, var(--search-red-dark) 100%);
}

.search-hot-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-hot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #f0ebe0;
}

.search-hot-item:last-child {
    border-bottom: none;
}

.search-hot-rank {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #f1ece1;
    color: #9a948a;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-hot-item:nth-child(1) .search-hot-rank { background: var(--search-red); color: #fff; }
.search-hot-item:nth-child(2) .search-hot-rank { background: #e06b3d; color: #fff; }
.search-hot-item:nth-child(3) .search-hot-rank { background: #d9a441; color: #fff; }

.search-hot-link {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.search-hot-link:hover {
    color: var(--search-red);
}

.search-hot-views {
    flex-shrink: 0;
    font-size: 12px;
    color: #b3aea2;
}

.search-side-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-side-chips .hero-hot-chip {
    color: #666;
    border-color: #e5dfd2;
    background: #faf7f1;
    text-shadow: none;
}

.search-side-chips .hero-hot-chip:hover {
    color: #fff;
    background: var(--search-red);
    border-color: var(--search-red);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
    .search-sidebar {
        width: 260px;
    }
}

@media (max-width: 992px) {
    .search-body {
        flex-direction: column;
    }
    .search-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .search-side-box {
        flex: 1 1 300px;
    }

    /* 导航变纵向后，搜索框独占一行、拉满宽度 */
    .nav-search {
        width: 100%;
        margin: 10px 0 2px;
        padding-left: 0;
    }
    .nav-search-box {
        flex: 1;
        width: auto;
    }
    .nav-search-box:focus-within {
        width: auto;
    }
    .search-suggest {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .nav-search-btn {
        padding: 0 16px;
        letter-spacing: 0;
    }
    .hero-search {
        max-width: 100%;
    }
    .hero-search-box {
        height: 48px;
    }
    .hero-search-btn {
        padding: 0 20px;
        letter-spacing: 2px;
    }
    .search-result-item {
        padding: 16px 18px;
    }
    .search-result-title {
        font-size: 16px;
    }
    .search-pagination .page-item {
        min-width: 34px;
        height: 34px;
    }
}