/* =============================================================
   知妆汇知识库（/faq/）页面样式
   作用范围：index.php 列表页 + detail.php 详情页
   主题色：#fe6496（主）/ #348aff（辅）
   说明：
     - 顶部导航与页脚由根目录 header.php / footer.php 提供
     - 本文件同时定义 beautynews.css（bn- 组件）所需的 --color-* 变量
   ============================================================= */

/* ===== 站点级颜色变量（供 beautynews.css 的 bn- 组件使用） ===== */
:root {
    --color-primary: #fe6496;
    --color-primary-hover: #e74e82;
    --color-primary-deep: #d63e6f;
    --color-primary-dark: #b8315f;
    --color-primary-light: #ff9cba;
    --color-secondary: #348aff;
    --color-danger: #e53935;
    --color-border: #e8eaed;
    --color-bg-soft: #fdeef4;
    --color-bg-muted: #f5f7fa;
    --color-text: #1a1a2e;
    --color-text-secondary: #6b7280;
    --color-text-on-dark: rgba(255, 255, 255, .78);
}

/* ===== 页面基础 =====
   注意：以下规则仅作用于 .site-main 内容区，
   不影响 header.php 顶部导航与 footer.php 页脚的任何样式 */
body.page-faq {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5f7fa;
    color: #333;
    line-height: 1.8;
}
.page-faq .site-main, .page-faq .site-main * { box-sizing: border-box; }
.page-faq .site-main a { text-decoration: none; transition: color .25s ease; }

/* 固定顶栏占位：header.php 的行高已锁定为 1.6，桌面端 header 实高约 62px（含 1px 下边框）。
   按断点精确占位，保证 hero 渐变紧贴 header 下缘：不露灰底缝隙、不被导航遮挡。 */
.page-faq .site-main { padding-top: 62px; }
@media (max-width: 1024px) {
    /* 顶栏换行：搜索框落到第二行（inner 上下 padding 10px） */
    .page-faq .site-main { padding-top: 82px; }
}
@media (max-width: 960px) {
    /* 导航 ul 换行成第二排 */
    .page-faq .site-main { padding-top: 144px; }
}
@media (max-width: 768px) {
    /* 移动端：导航与搜索隐藏，仅 logo + 菜单按钮单排 */
    .page-faq .site-main { padding-top: 60px; }
}

.container { max-width: 1200px; margin: 0 auto; }

/* ===== 页面横幅 ===== */
.page-hero {
    position: relative;
    background: linear-gradient(135deg, #fe6496 0%, #348aff 100%);
    color: #fff;
    padding: 54px 0 50px;
    text-align: center;
    overflow: hidden;
}
.page-hero__glow {
    position: absolute;
    top: -60%; left: -25%;
    width: 150%; height: 220%;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .12) 0%, transparent 55%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }

.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .82);
}
.breadcrumb a { color: rgba(255, 255, 255, .88); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb__sep { opacity: .6; }
.breadcrumb__current { color: #fff; font-weight: 500; }

.page-hero__title {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.3;
}
.page-hero__desc {
    margin: 0 auto;
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
}
.page-hero > .container > p {
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
}

/* 详情页横幅内关键词/时间徽标 */
.page-hero .faq-hero-title { font-size: clamp(1.25rem, 3vw, 1.9rem); line-height: 1.45; }
.page-hero__keywords {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.page-hero__keyword {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 12.5px;
    color: #fff;
}

/* ===== 搜索框 ===== */
.faq-search {
    display: flex;
    max-width: 620px;
    margin: 26px auto 0;
    background: #fff;
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
}
.faq-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 20px;
    font-size: 15px;
    font-family: inherit;
    color: #333;
}
.faq-search__input::placeholder { color: #b3b9c5; }
.faq-search__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    padding: 10px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fe6496, #348aff);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    transition: opacity .2s;
}
.faq-search__btn:hover { opacity: .88; }

/* 热门搜索 */
.faq-hotwords {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
}
.faq-hotwords__label { color: rgba(255, 255, 255, .85); }
.faq-hotwords__tag {
    padding: 4px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff;
    font-size: 12.5px;
}
.faq-hotwords__tag:hover { background: rgba(255, 255, 255, .3); }

.faq-stat {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 18px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
}

/* ===== 侧栏分类导航（一级/二级折叠树） ===== */
.faq-tree { display: flex; flex-direction: column; gap: 2px; }
.faq-tree__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #4a5568;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.faq-tree__all:hover { color: #fe6496; }
.faq-tree__all.is-active {
    background: linear-gradient(135deg, #fe6496, #348aff);
    color: #fff;
    font-weight: 600;
}
.faq-tree__all.is-active:hover { color: #fff; }
.faq-tree__group { border-radius: 8px; }
.faq-tree__group[open] { background: #f8f9fc; }
.faq-tree__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    list-style: none;
    transition: background .2s;
}
.faq-tree__cat::-webkit-details-marker { display: none; }
.faq-tree__cat:hover { background: #f1f4f9; }
.faq-tree__cat > a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4a5568;
    text-decoration: none;
    transition: color .2s;
}
.faq-tree__cat:hover > a { color: #fe6496; }
.faq-tree__cat.is-active > a { color: #fe6496; font-weight: 600; }
.faq-tree__count {
    flex-shrink: 0;
    font-size: 11.5px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f1f3f7;
    color: #8a94a6;
    line-height: 18px;
}
.faq-tree__all.is-active .faq-tree__count {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}
.faq-tree__cat.is-active .faq-tree__count,
.faq-tree__sub.is-active .faq-tree__count {
    background: rgba(254, 100, 150, .12);
    color: #fe6496;
}
.faq-tree__arrow {
    flex-shrink: 0;
    display: inline-flex;
    color: #a0aec0;
    transition: transform .25s;
}
.faq-tree__group[open] .faq-tree__arrow { transform: rotate(180deg); }
.faq-tree__subs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 8px 20px;
}
.faq-tree__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #6b7585;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.faq-tree__sub:hover { background: #eef2f8; color: #fe6496; }
.faq-tree__sub.is-active { background: rgba(254, 100, 150, .08); color: #fe6496; font-weight: 600; }
@media (max-width: 992px) {
    /* 移动端侧栏堆叠在列表下方，分类导航不展示（筛选入口保留 hero 区搜索框与热门关键词） */
    .sidebar-widget--cats { display: none; }
}

/* ===== 列表 + 侧栏布局 ===== */
.news-layout { padding: 34px 0 10px; }
.news-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: start;
}
@media (max-width: 992px) {
    .news-layout-grid { grid-template-columns: 1fr; }
}

/* 列表头 */
.faq-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.faq-list-head__title { margin: 0; font-size: 21px; color: #1a1a2e; }
.faq-list-head__count { font-size: 13px; color: #8a94a6; }

/* 问答卡片 */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 20px 22px;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.faq-item:hover {
    box-shadow: 0 10px 26px rgba(52, 138, 255, .10);
    border-color: rgba(254, 100, 150, .35);
    transform: translateY(-2px);
}
.faq-item__q {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.55;
}
.faq-item__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fe6496, #348aff);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}
.faq-item__title { color: #1a1a2e; }
.faq-item__title:hover { color: #fe6496; }
.faq-item__excerpt {
    margin: 10px 0 0 38px;
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.75;
}
.faq-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0 38px;
}
.faq-item__tag {
    padding: 2px 10px;
    border-radius: 999px;
    background: #fdeef4;
    color: #e74e82;
    font-size: 12px;
}
.faq-item__tag:hover { background: #fe6496; color: #fff; }
.faq-item__tag--sub { background: #eaf3ff; color: #2974e0; }
.faq-item__tag--sub:hover { background: #348aff; color: #fff; }
.faq-item__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #9aa3b2;
    margin-left: auto;
}

/* ===== 分页 ===== */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e8eaed;
    color: #4a5568;
    font-size: 14px;
}
.page-link:hover { border-color: #fe6496; color: #fe6496; }
.page-link.is-active {
    background: linear-gradient(135deg, #fe6496, #348aff);
    color: #fff;
    font-weight: 600;
}
.page-link.is-disabled { opacity: .45; pointer-events: none; }

/* ===== 空状态 ===== */
.empty-state {
    background: #fff;
    border: 1px dashed #dfe4ec;
    border-radius: 14px;
    text-align: center;
    padding: 60px 20px;
    color: #8a94a6;
    font-size: 14px;
}
.empty-state__title {
    margin: 14px 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #4a5568;
}
.empty-state a { color: #348aff; }
.empty-state a:hover { color: #fe6496; }

/* ===== 侧栏 ===== */
.news-sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-widget {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 20px;
}
.sidebar-widget__title {
    margin: 0 0 14px;
    font-size: 16px;
    color: #1a1a2e;
    padding-bottom: 10px;
    border-bottom: 2px solid #fe6496;
}
.sidebar-empty { font-size: 13px; color: #9aa3b2; margin: 0; }
.sidebar-recent { list-style: none; margin: 0; padding: 0; }
.sidebar-recent__item { padding: 9px 0; border-bottom: 1px dashed #eef1f5; }
.sidebar-recent__item:last-child { border-bottom: none; }
.sidebar-recent__link { display: block; }
.sidebar-recent__title {
    display: block;
    font-size: 13.5px;
    color: #4a5568;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sidebar-recent__link:hover .sidebar-recent__title { color: #fe6496; }
.sidebar-recent__cat {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2974e0;
    font-size: 11.5px;
}
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-tag {
    padding: 4px 12px;
    border-radius: 999px;
    background: #f5f7fa;
    border: 1px solid #e8eaed;
    color: #6b7280;
    font-size: 12.5px;
}
.sidebar-tag:hover {
    background: linear-gradient(135deg, #fe6496, #348aff);
    border-color: transparent;
    color: #fff;
}

/* ===== 详情页 ===== */
.news-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: start;
}
@media (max-width: 992px) {
    .news-detail-layout { grid-template-columns: 1fr; }
}
.news-detail-main { min-width: 0; }

.faq-detail-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 14px;
    padding: 30px 32px;
}
@media (max-width: 768px) {
    .faq-detail-card { padding: 22px 18px; }
}

/* 问题头 */
.faq-qhead {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eef1f5;
}
.faq-qhead__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fe6496, #348aff);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}
.faq-qhead__title { margin: 4px 0 0; font-size: 21px; line-height: 1.5; color: #1a1a2e; }

/* 答案区 */
.faq-answer { padding-top: 22px; }
.faq-answer__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
}
.faq-answer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #eaf3ff;
    color: #2974e0;
    font-size: 13px;
    font-weight: 800;
}
.faq-answer__meta { font-size: 12px; color: #8a93a6; line-height: 1.6; }

/* 关键词 */
.faq-kw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #eef1f5;
}
.faq-kw__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #8a94a6;
}
.faq-kw__tag {
    padding: 3px 12px;
    border-radius: 999px;
    background: #f5f7fa;
    border: 1px solid #e8eaed;
    color: #6b7280;
    font-size: 12.5px;
}
.faq-kw__tag:hover {
    background: linear-gradient(135deg, #fe6496, #348aff);
    border-color: transparent;
    color: #fff;
}

/* 上一篇 / 下一篇 */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
}
@media (max-width: 640px) {
    .article-nav { grid-template-columns: 1fr; }
}
.article-nav__item {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 14px 18px;
}
.article-nav__item--next { text-align: right; }
.article-nav__label { font-size: 12px; color: #9aa3b2; }
.article-nav__title { margin-top: 5px; font-size: 14px; line-height: 1.6; }
.article-nav__title a { color: #1a1a2e; }
.article-nav__title a:hover { color: #fe6496; }

/* 相关问答 */
.related { margin-top: 26px; }
.related__title { margin: 0 0 14px; font-size: 19px; color: #1a1a2e; }
.faq-rel { display: flex; flex-direction: column; gap: 10px; }
.faq-rel__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 13px 18px;
    transition: border-color .2s, box-shadow .2s;
}
.faq-rel__item:hover {
    border-color: rgba(254, 100, 150, .4);
    box-shadow: 0 6px 18px rgba(52, 138, 255, .08);
}
.faq-rel__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #fdeef4;
    color: #e74e82;
    font-size: 12.5px;
    font-weight: 800;
}
.faq-rel__text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.faq-rel__item:hover .faq-rel__text { color: #fe6496; }
.faq-rel__tag {
    flex-shrink: 0;
    padding: 1px 9px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2974e0;
    font-size: 11.5px;
}
.faq-rel__arrow { flex-shrink: 0; color: #c2c9d4; }
.faq-rel__item:hover .faq-rel__arrow { color: #fe6496; }

/* ===== 侧栏「加入知妆汇」CTA（与 news/article.php 同款） ===== */
.side-cta {
    background: linear-gradient(135deg, #e55080, #fe6496);
    border-radius: 12px;
    padding: 28px 24px;
    color: #fff;
    text-align: center;
}
.side-cta-title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.side-cta-desc { font-size: 13px; opacity: .9; margin: 0 0 20px; line-height: 1.6; }
.side-cta-btn {
    display: inline-block;
    padding: 10px 28px;
    background: #fff;
    color: #e55080;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: opacity .2s;
}
.side-cta-btn:hover { opacity: .92; }

/* ===== 加入知妆汇 二维码弹窗（与 news/article.php 同款） ===== */
.qr-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.qr-modal.show { display: flex; }
.qr-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .5);
}
.qr-dialog {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 380px;
    text-align: center;
    padding: 36px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: qrIn .28s ease;
}
@keyframes qrIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qr-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    color: #999; font-size: 24px;
    cursor: pointer; line-height: 1;
    padding: 0;
    transition: color .2s;
}
.qr-close:hover { color: #333; }
.qr-dialog h3 { font-size: 18px; color: #1a1a2e; margin: 0 0 6px; font-weight: 700; }
.qr-dialog .qr-subtitle { font-size: 13px; color: #888; margin: 0 0 20px; }
.qr-img {
    width: 200px; height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}
.qr-tip { margin: 14px 0 0; font-size: 12px; color: #aaa; }

/* ===== 移动端：问答详情微调 ===== */
@media (max-width: 768px) {
    /* 隐藏问题头 Q 徽标（移动端问题标题占满整行） */
    .page-faq .faq-qhead__badge { display: none; }

    /* 答案正文表格：字号缩小、内边距收紧，避免窄屏溢出 */
    .page-faq .bn-body table { font-size: 13px; }
    .page-faq .bn-body table th,
    .page-faq .bn-body table td { padding: 6px 8px; }
}