/**
 * 子主题自定义样式 - 标签页 & 分类页美化
 */

/* ==============================
 * 1. 标签页 & 分类页 信息卡片（共用）
 * ============================== */
.tag-info-card,
.taxonomy-info-card {
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.io-black-mode .tag-info-card,
.io-black-mode .taxonomy-info-card {
    background: linear-gradient(135deg, #1e2030 0%, #252840 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tag-info-card .tag-desc,
.taxonomy-info-card .taxonomy-desc {
    line-height: 1.8;
    color: #555;
}

.io-black-mode .tag-info-card .tag-desc,
.io-black-mode .taxonomy-info-card .taxonomy-desc {
    color: #a0a4b8;
}

.tag-info-card .tag-stats,
.taxonomy-info-card .taxonomy-stats {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 12px;
}

.io-black-mode .tag-info-card .tag-stats,
.io-black-mode .taxonomy-info-card .taxonomy-stats {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.bg-primary-soft {
    background-color: rgba(13, 110, 253, 0.08) !important;
    color: #0d6efd !important;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
}

.io-black-mode .bg-primary-soft {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}


/* ==============================
 * 2. 标签页头部标题优化
 * ============================== */
.taxonomy-head-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.taxonomy-head-desc {
    max-width: 720px;
    opacity: 0.85;
}

/* 头部背景叠加优化 */
.taxonomy-head-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
}

.taxonomy-head-content {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* ==============================
 * 3. 相关标签云样式
 * ============================== */
.related-tags-section {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.related-tags-section .card-header {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px 18px;
}

.io-black-mode .related-tags-section .card-header {
    background: #1e2030;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.related-tags-cloud {
    gap: 8px;
}

.related-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    line-height: 1.4;
}

.related-tag-item:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 标签权重大小 */
.tag-weight-lg {
    font-size: 15px;
    background: linear-gradient(135deg, #e8f0fe, #d4e4fd);
    color: #1a56db;
    padding: 8px 18px;
    font-weight: 600;
}

.tag-weight-lg:hover {
    background: linear-gradient(135deg, #d4e4fd, #bcd0fb);
    color: #1040b0;
    border-color: #a3bffa;
}

.tag-weight-md {
    font-size: 13px;
    background: #f0f4ff;
    color: #3b5998;
    padding: 6px 14px;
    font-weight: 500;
}

.tag-weight-md:hover {
    background: #e0e8fd;
    color: #2a4688;
    border-color: #c0cdf5;
}

.tag-weight-sm {
    font-size: 12px;
    background: #f8f9fc;
    color: #5a6d8a;
    padding: 4px 12px;
    font-weight: 400;
}

.tag-weight-sm:hover {
    background: #edf0f7;
    color: #3a4d6a;
    border-color: #d0d6e3;
}

/* 暗色模式 */
.io-black-mode .tag-weight-lg {
    background: linear-gradient(135deg, #1e3a5f, #1a3460);
    color: #8bb8f5;
}

.io-black-mode .tag-weight-lg:hover {
    background: linear-gradient(135deg, #1e4070, #1d3c6e);
    color: #a0c8ff;
    border-color: #2a5080;
}

.io-black-mode .tag-weight-md {
    background: #252840;
    color: #8899bb;
}

.io-black-mode .tag-weight-md:hover {
    background: #2a2e48;
    color: #a0b0cc;
    border-color: #3a4060;
}

.io-black-mode .tag-weight-sm {
    background: #1e2030;
    color: #6a7a90;
}

.io-black-mode .tag-weight-sm:hover {
    background: #252840;
    color: #8090a8;
    border-color: #353a50;
}

.related-tag-item .tag-count {
    font-size: 0.75em;
    opacity: 0.7;
    margin-left: 2px;
}


/* ==============================
 * 4. 标签页 & 分类页 文章列表优化（共用）
 * ============================== */
.is_tag .posts-row,
.is_taxonomy .posts-row {
    --bs-gutter-y: 16px;
}

.is_tag .posts-row .posts-item,
.is_taxonomy .posts-row .posts-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is_tag .posts-row .posts-item:hover,
.is_taxonomy .posts-row .posts-item:hover {
    transform: translateY(-2px);
}

/* ==============================
 * 5. 标签页 & 分类页 筛选栏美化（共用）
 * ============================== */
.is_tag .taxonomy-selects,
.is_taxonomy .taxonomy-selects {
    border-radius: 12px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    padding: 10px 14px;
}

.is_tag .list-selects .is-tab-btn,
.is_taxonomy .list-selects .is-tab-btn {
    border-radius: 20px;
    padding: 5px 16px;
    transition: all 0.2s ease;
}

.is_tag .list-selects .is-tab-btn.active,
.is_tag .list-selects .is-tab-btn:hover,
.is_taxonomy .list-selects .is-tab-btn.active,
.is_taxonomy .list-selects .is-tab-btn:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.io-black-mode .is_tag .list-selects .is-tab-btn.active,
.io-black-mode .is_tag .list-selects .is-tab-btn:hover,
.io-black-mode .is_taxonomy .list-selects .is-tab-btn.active,
.io-black-mode .is_taxonomy .list-selects .is-tab-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}


/* ==============================
 * 6. 分类标签左右滑动箭头（绝对定位在卡片内侧）
 * ============================== */
.taxonomy-selects-outer {
    position: relative;
    margin-bottom: 20px;
}

/* 给卡片左右留出箭头空间 */
.taxonomy-selects-outer > .taxonomy-selects {
    padding-left: 32px;
    padding-right: 32px;
}

/* 箭头基础样式 */
.cat-scroll-btn {
    position: absolute;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #444;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
    z-index: 10;
    padding: 0;
    line-height: 1;
}

.cat-scroll-btn-l {
    left: 4px;
}

.cat-scroll-btn-r {
    right: 4px;
}

/* hover 态 */
.cat-scroll-btn:hover {
    background: #fff;
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.3);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.15), 0 0 0 2px rgba(13, 110, 253, 0.06);
    transform: translateY(-1px);
}

/* 按下态 */
.cat-scroll-btn:active {
    transform: scale(0.93);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* SVG 图标大小 */
.cat-scroll-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 暗色模式 */
.io-black-mode .cat-scroll-btn {
    background: rgba(30, 32, 48, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.06);
    color: #99aabb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.io-black-mode .cat-scroll-btn:hover {
    background: rgba(40, 44, 60, 0.95);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.12), 0 0 0 2px rgba(96, 165, 250, 0.08);
}

/* 移动端优化 */
@media (max-width: 767.98px) {
    .taxonomy-selects-outer > .taxonomy-selects {
        padding-left: 28px;
        padding-right: 28px;
    }

    .cat-scroll-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        top: 10px;
    }

    .cat-scroll-btn-l { left: 2px; }
    .cat-scroll-btn-r { right: 2px; }

    .cat-scroll-btn svg {
        width: 14px;
        height: 14px;
    }
}


/* ==============================
 * 7. 分类标签按钮美化
 * ============================== */
.cat-selects .cat-select {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    margin-right: 6px;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    color: #555;
    background: transparent;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.cat-selects .cat-select:hover {
    background: rgba(13, 110, 253, 0.06);
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.15);
}

.cat-selects .cat-select.active {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-weight: 600;
    border-color: rgba(13, 110, 253, 0.25);
}

.io-black-mode .cat-selects .cat-select {
    color: #8899bb;
}

.io-black-mode .cat-selects .cat-select:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.2);
}

.io-black-mode .cat-selects .cat-select.active {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}


/* ==============================
 * 8. 分类页 子分类行
 * ============================== */
.cat-selects-sub {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.io-black-mode .cat-selects-sub {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.cat-selects-sub .cat-select {
    font-size: 12px;
    padding: 4px 12px;
}


/* ==============================
 * 9. 网址卡片列表优化（favorites + sitetag 共用）
 * ============================== */
.is_taxonomy_favorites .posts-row,
.is_taxonomy_sitetag .posts-row {
    --bs-gutter-y: 16px;
}

.is_taxonomy_favorites .posts-row .posts-item,
.is_taxonomy_sitetag .posts-row .posts-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.is_taxonomy_favorites .posts-row .posts-item:hover,
.is_taxonomy_sitetag .posts-row .posts-item:hover {
    transform: translateY(-2px);
}


/* ==============================
 * 9a. 网址标签(sitetag)页面 信息卡片标题
 * ============================== */
.taxonomy-card-label {
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a2e;
    margin: 0;
}

.io-black-mode .taxonomy-card-label {
    color: #d0d4e8;
}

.taxonomy-card-label .iconfont {
    font-size: 1.1em;
    vertical-align: -1px;
}


/* ==============================
 * 10. 标签页 & 分类页 分页美化（共用）
 * ============================== */
.is_tag .posts-nav,
.is_taxonomy .posts-nav {
    margin-top: 24px;
}


/* ==============================
 * 11. 面包屑导航优化（共用）
 * ============================== */
.is_tag nav[aria-label="breadcrumb"],
.is_taxonomy nav[aria-label="breadcrumb"] {
    font-size: 13px;
    padding: 8px 0;
}

.is_tag nav[aria-label="breadcrumb"] .crumbs,
.is_taxonomy nav[aria-label="breadcrumb"] .crumbs {
    color: #0d6efd;
}

.is_tag nav[aria-label="breadcrumb"] .crumbs:hover,
.is_taxonomy nav[aria-label="breadcrumb"] .crumbs:hover {
    color: #0a58ca;
    text-decoration: underline;
}


/* ==============================
 * 12. 响应式优化
 * ============================== */
@media (max-width: 767.98px) {
    .tag-info-card .tag-desc,
    .taxonomy-info-card .taxonomy-desc {
        font-size: 12px;
        line-height: 1.6;
    }

    .related-tags-cloud {
        gap: 6px;
    }

    .related-tag-item {
        padding: 4px 10px;
    }

    .tag-weight-lg {
        font-size: 13px;
        padding: 6px 14px;
    }

    .tag-weight-md {
        font-size: 12px;
        padding: 5px 10px;
    }

    .tag-weight-sm {
        font-size: 11px;
        padding: 3px 8px;
    }

    .tag-info-card .tag-stats,
    .taxonomy-info-card .taxonomy-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* 移动端箭头缩小 */
    .cat-scroll-btn {
        width: 28px;
        height: 28px;
    }

    .cat-selects .cat-select {
        padding: 4px 12px;
        font-size: 12px;
    }
}


/* ==============================
 * 13. 空内容状态优化（共用）
 * ============================== */
.is_tag .none-html,
.is_taxonomy .none-html {
    text-align: center;
    padding: 60px 20px;
}

.is_tag .none-html .no-icon,
.is_taxonomy .none-html .no-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.io-black-mode .is_tag .none-html .no-icon,
.io-black-mode .is_taxonomy .none-html .no-icon {
    color: #444;
}

.is_tag .none-html .no-text,
.is_taxonomy .none-html .no-text {
    font-size: 15px;
    color: #999;
}

.io-black-mode .is_tag .none-html .no-text,
.io-black-mode .is_taxonomy .none-html .no-text {
    color: #666;
}


/* ==============================
 * 14. 过渡动画（共用）
 * ============================== */
.tag-info-card,
.taxonomy-info-card,
.related-tags-section,
.taxonomy-selects {
    animation: tagFadeIn 0.4s ease-out;
}

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


/* ==============================
 * 15. 打印样式
 * ============================== */
@media print {
    .related-tags-section,
    .taxonomy-selects,
    .taxonomy-selects-outer,
    .tag-info-card .tag-stats,
    .taxonomy-info-card .taxonomy-stats {
        display: none !important;
    }
}


/* 隐藏预览图上的"打开网站"按钮 */
.single-sites .sites-preview .preview-btn {
    display: none !important;
}


/* ==============================
 * 16. 网址详情页 相关答疑模块（折叠手风琴）
 * ============================== */
.site-faq-section {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    animation: tagFadeIn 0.4s ease-out;
}

.io-black-mode .site-faq-section {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 头部（恢复父主题白色底） */
.site-faq-section .card-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 16px 20px;
}

.io-black-mode .site-faq-section .card-header {
    border-bottom-color: rgba(255,255,255,0.05);
}

.faq-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}
.faq-header-icon img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
}

.faq-subtitle {
    opacity: 0.65;
}

/* Q&A 列表 */
.faq-list {
    padding: 4px 0;
}

.faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.faq-item:last-child { border-bottom: none; }
.io-black-mode .faq-item { border-bottom-color: rgba(255,255,255,0.04); }

/* 问题行 */
.faq-question {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    outline: none;
}
.faq-question:hover { background: rgba(13,110,253,0.03); }
.io-black-mode .faq-question:hover { background: rgba(59,130,246,0.05); }

.faq-q-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: #1a1a2e;
    padding-top: 1px;
}
.io-black-mode .faq-q-text { color: #d0d4e8; }

/* 折叠箭头 */
.faq-chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #aaa;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    padding: 3px;
    margin-top: 1px;
}
.faq-item.faq-open .faq-chevron { transform: rotate(180deg); color: #0d6efd; }
.io-black-mode .faq-chevron { color: #667; }
.io-black-mode .faq-item.faq-open .faq-chevron { color: #60a5fa; }

/* 答案区 */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.faq-open .faq-answer { grid-template-rows: 1fr; }

.faq-answer-inner {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 20px;
}

.faq-item.faq-open .faq-answer-inner {
    padding: 0 20px 16px 20px;
}

.faq-answer-inner p {
    font-size: 13px;
    line-height: 1.75;
    color: #666;
    margin: 0;
}
.io-black-mode .faq-answer-inner p { color: #99aabb; }

/* 焦点态 */
.faq-question:focus-visible {
    background: rgba(13,110,253,0.06);
    border-radius: 8px;
}

/* 响应式 */
@media (max-width: 767.98px) {
    .site-faq-section .card-header { padding: 14px 16px; }
    .faq-header-icon { width: 36px; height: 36px; }
    .faq-header-icon img { width: 24px; height: 24px; }
    .faq-question { padding: 12px 16px; gap: 8px; }
    .faq-q-text { font-size: 13px; }
    .faq-answer-inner { padding: 0 16px; }
    .faq-item.faq-open .faq-answer-inner { padding: 0 16px 12px 16px; }
}


/* ==============================
 * 17. 网址详情页：头部隐藏 sitetag + 标签按钮
 * ============================== */
/* 头部 terms 区域只留分类 */
.single-sites .terms-list a[href*="/sitetag/"] {
    display: none;
}

/* 标签面板：恢复父主题白色底 */

.tags-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(13,110,253,0.08);
    color: #0d6efd;
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.io-black-mode .tags-header-icon {
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
}

/* 标签按钮 */
.site-tag-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: #f0f4ff;
    color: #3b5998;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.site-tag-item:hover {
    background: #e0e8fd;
    color: #2a4688;
    border-color: #c0cdf5;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13,110,253,0.08);
}

.io-black-mode .site-tag-item {
    background: #252840;
    color: #8899bb;
}

.io-black-mode .site-tag-item:hover {
    background: #2a2e48;
    color: #a0b0cc;
    border-color: #3a4060;
}

@media (max-width: 767.98px) {
    .site-tag-item { padding: 4px 10px; font-size: 12px; }
}