/*
	火牛工具箱 博客 · 外观覆盖层
	头部与页脚对齐火牛落地页，内容区走资讯站排版。
	在 main.css / post-content.css 之后加载。
*/

:root:root:root {
    --Maincolor: #f05a24 !important;
    --MaincolorHover: #d94814 !important;
    --bagcolor: #fff7f1 !important;

    --qdb-brand: #f05a24;
    --qdb-brand-dark: #d94814;
    --qdb-ink: #1c1410;
    --qdb-ink-80: rgba(28, 20, 16, .8);
    --qdb-ink-60: rgba(28, 20, 16, .6);
    --qdb-line: #f0e6de;
    --qdb-border: rgba(28, 20, 16, .16);
    --qdb-panel: #fff;
}

/* ---------- 基础 ---------- */

/* 字体栈与火牛落地页一致 */
html, textarea {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html, body, #app {
    background-color: var(--bagcolor);
}

#app {
    background-image:
        radial-gradient(60% 60% at 50% 0%, rgba(240, 90, 36, .12), transparent 70%),
        radial-gradient(50% 50% at 80% 10%, rgba(255, 138, 61, .10), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body {
    font-size: 14px;
    color: var(--qdb-ink);
}

.container {
    max-width: 1200px;
    padding: 0 10px;
}

/* 头部是 fixed 定位（靠 .top-divider 占位），内容区不自己留白就会贴住导航栏。
   只作用于 main，以免影响头部的 .header-main.container。 */
main.container {
    padding-top: 20px;
    padding-bottom: 30px;
}

.html-main {
    align-items: flex-start;
    gap: 20px;
}

.post-main {
    flex: 1 1 auto;
    flex-basis: auto;
    margin: 0;
    border-radius: 0;
    overflow: visible;
}

.sidebar {
    flex: 0 0 300px;
    width: auto;
    margin: 0;
}

/* 吸顶位置 = 头部 67px + 内容区上留白 20px */
.sidebar-box-list {
    top: 87px;
}

/* 顶部导航沿用主站 index.html 的头部，样式在 component/nav-header.php 里，
   这里不做任何覆盖，避免两边打架。 */

/* ---------- 首页 / 分类页 文章列表 ---------- */

/* 整个列表是一块白面板，条目之间只用细线分隔 */
.post-list-page-plane {
    background: var(--qdb-panel);
    padding: 0 20px;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* 首页列表上方不要“最新文章”标题栏；分类页 / 标签页仍保留标题 */
.post-list-page-plane .list-plane-title:has(.index-tab-plane) {
    display: none;
}

.list-plane-title {
    background: transparent;
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--qdb-line);
}

.list-plane-title > div {
    padding-left: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--qdb-ink);
}

.post-item {
    background: transparent;
    border-bottom: 1px solid var(--qdb-line);
}

.post-item:hover {
    background: transparent;
}

.post-item:last-child {
    border-bottom: 0;
}

.post-item-container {
    padding: 20px 0;
    margin: 0;
    align-items: flex-start;
}

.post-item-thumbnail {
    flex: 0 0 246px;
    border-radius: 0;
    background: #f5f5f5;
}

/* 246 × 154 → 62.6% */
.post-item-thumbnail:before {
    padding-top: 62.6%;
}

.post-item-thumbnail img {
    max-width: none;
    border-radius: 0;
}

.post-item-thumbnail img:hover {
    transform: none;
}

/* 缩略图左上角分类角标 */
.post-item-tags {
    margin: 10px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 14px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 3px;
    z-index: 2;
}

.post-item-tags a {
    color: #fff;
}

.post-item-main {
    margin-left: 0;
    padding-left: 20px;
    font-weight: 400;
}

.post-item h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 10px;
}

.post-item h2 a {
    color: var(--qdb-ink);
}

.post-item h2 a:hover {
    color: var(--qdb-brand);
}

.post-item-content {
    margin: 0 0 15px;
    max-height: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    line-height: 26px;
    color: var(--qdb-ink-80);
}

.post-item-info {
    font-size: 12px;
}

.post-item-meta {
    margin-top: 0;
    font-size: 12px;
    line-height: 24px;
    color: var(--qdb-ink-60);
}

.post-item-time {
    color: var(--qdb-ink-60);
}

/* 列表只显示时间：隐掉作者头像、阅读数、评论数和 New 角标。
   想恢复的话删掉下面这条即可。 */
.post-item-meta-author,
.item-post-meta-other,
.post-item-new:before {
    display: none;
}

.post-item-sticky {
    background: var(--qdb-brand);
    border-radius: 2px;
    margin-right: 8px;
}

/* 大图模式（postshow=1）保持同一套扁平风格 */
.post-item-type1 {
    padding: 0;
}

.post-item-thumbnail-type1 img {
    border-radius: 0;
}

/* ---------- 分页 ---------- */

.pages {
    background: transparent;
    padding: 24px 0 30px;
}

.fenye a,
.pagedbox,
.page-numbers {
    padding: 9px 16px;
    margin-left: 6px;
    border: 1px solid var(--qdb-brand);
    border-radius: 4px;
    background: #fff;
    color: var(--qdb-brand);
    font-size: 14px;
}

.fenye a:hover,
.page-numbers:hover {
    background: var(--qdb-brand) !important;
    color: #fff !important;
}

.current {
    background: var(--qdb-brand) !important;
    border-color: var(--qdb-brand);
    color: #fff !important;
}

.dots {
    border-color: transparent;
    color: var(--qdb-ink-60);
}

/* ---------- 侧边栏 ---------- */

.aside-box {
    background: var(--qdb-panel);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0;
    box-shadow: none;
}

.aside-box a {
    color: var(--qdb-ink);
    font-size: 14px;
}

.aside-box a:hover {
    color: var(--qdb-brand);
}

.aside-box li {
    margin-bottom: 8px;
}

.aside-box img {
    border-radius: 0;
}

/* 小工具标题：左侧一根蓝竖条。
   同时覆盖主题 widget 标题、区块小工具的 h2、以及搜索区块的 label */
.widget-title,
.sidebar .aside-box > h2,
.sidebar .aside-box .wp-block-heading,
.sidebar .wp-block-search__label {
    position: relative;
    display: block;
    margin: 0 0 15px;
    padding: 0 0 0 12px;
    border-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--qdb-ink);
}

.widget-title:before,
.sidebar .aside-box > h2:before,
.sidebar .aside-box .wp-block-heading:before,
.sidebar .wp-block-search__label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    width: 4px;
    height: 16px;
    transform: none;
    border-radius: 0;
    background: var(--qdb-brand);
}

.widget-title:after {
    display: none;
}

/* 不显示「近期评论」小工具（区块版和经典版都盖到）。
   评论功能本身已关，彻底移除请到后台 外观 → 小工具 删掉这个小工具。 */
.sidebar .aside-box:has(.wp-block-latest-comments),
.sidebar .widget_recent_comments {
    display: none;
}

/* 区块小工具的列表项 */
.sidebar .wp-block-latest-posts__list li,
.sidebar .wp-block-archives li,
.sidebar .wp-block-categories li {
    line-height: 24px;
    margin-bottom: 10px;
}

/* 搜索小工具 */
.search-form-input-plane {
    margin-right: 0;
}

.search-keyword,
.sidebar .wp-block-search__input {
    height: 34px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--qdb-border);
    border-radius: 2px 0 0 2px;
    font-size: 14px;
}

.search-keyword:focus,
.sidebar .wp-block-search__input:focus {
    border-color: var(--qdb-brand);
    outline: 0;
}

.search-submit,
.sidebar .wp-block-search__button {
    width: 68px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 2px 2px 0;
    background: var(--qdb-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

.search-submit:hover,
.sidebar .wp-block-search__button:hover {
    background: var(--qdb-brand-dark);
}

/* 热门文章排行 */
.hot-post-widget-item {
    padding: 10px 10px 10px 22px;
}

.hot-post-widget-item-title a {
    color: var(--qdb-ink);
    line-height: 22px;
}

.hot-post-widget-item-title a:hover {
    color: var(--qdb-brand);
}

.hot-post-widget-item-num {
    border-radius: 2px !important;
    left: -8px;
}

.tagcloud {
    gap: 6px;
}

.tag-cloud-link,
.tag-cloud-link:nth-child(2n+1),
.tag-cloud-link:nth-child(2n+2),
.tag-cloud-link:nth-child(2n+3),
.tag-cloud-link:nth-child(2n+4) {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 10px;
    border-radius: 2px;
    background: #f5f5f5;
    color: var(--qdb-ink-80) !important;
}

.tag-cloud-link:hover {
    background: var(--qdb-brand);
    color: #fff !important;
}

/* ---------- 文章页 ---------- */

.post-content-body,
.relevant-plane {
    background: var(--qdb-panel);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 20px;
    overflow: visible;
}

.post-content {
    padding: 30px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--qdb-ink-80);
}

.crumbs-plane {
    border-bottom: 1px solid var(--qdb-line);
    color: var(--qdb-ink-60);
}

.post-title {
    text-align: left;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--qdb-ink);
    padding-bottom: 0;
    margin-bottom: 14px;
}

.post-info {
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--qdb-line);
    font-size: 12px;
    color: var(--qdb-ink-60);
}

.post-info a {
    color: var(--qdb-ink-60);
}

.post-info a:hover {
    color: var(--qdb-brand);
}

.post-content p {
    margin-bottom: 16px;
    line-height: 1.8;
}

/* 正文标题：黑色文字 + 底部细线，不用大面积蓝字 */
.post-content h2 {
    padding: 0 0 12px;
    margin: 30px 0 16px;
    font-size: 22px;
    font-weight: 600;
    color: var(--qdb-ink);
    border-bottom: 1px solid var(--qdb-line);
}

.post-content h2:before {
    display: none;
}

.post-content h3 {
    padding: 0 0 0 12px;
    margin: 24px 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--qdb-ink);
}

.post-content h3:before {
    width: 4px;
    height: 18px;
    top: 50%;
    bottom: auto;
    left: 0;
    transform: translateY(-50%);
    border-radius: 0;
    background: var(--qdb-brand);
}

.post-content h3:hover:before {
    width: 4px;
}

.post-content blockquote {
    padding: 24px 24px 24px 70px;
    background: #f5f5f5;
    border-left: 0;
    border-radius: 2px;
    color: var(--qdb-ink-80);
}

.post-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-content-post img {
    border-radius: 0;
}

.post-content a {
    color: var(--qdb-brand);
}

pre {
    padding: 14px 16px;
    border-radius: 2px;
    background-color: #f5f5f5;
}

code {
    border-radius: 2px;
}

table {
    margin: 16px 0;
    border: 1px solid var(--qdb-line);
}

th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--qdb-ink);
    background: #f5f5f5;
    border-bottom: 1px solid var(--qdb-line);
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--qdb-line);
}

tr:nth-child(2n+1) td {
    background: transparent;
}

tr:hover td {
    background: #fafafa;
}

/* 不显示文末「版权声明」。
   也可到后台 CorePress 设置 → 文章 → 关闭版权声明。 */
.post-copyright {
    display: none;
}

/* 不显示评论区（评论列表 + 发表回复表单）。
   要彻底关掉评论、避免垃圾评论入库，请到后台 设置 → 讨论，
   取消勾选「允许人们发表新评论」。 */
#comments,
#respond {
    display: none;
}

.post-end-dividing:before,
.post-end-dividing:after {
    background: var(--qdb-line);
}

.post-tags a {
    margin-right: 10px;
    padding: 4px 10px;
    border-radius: 2px;
    background: #f5f5f5;
    color: var(--qdb-ink-80);
    font-size: 12px;
    opacity: 1;
}

.post-tags a:hover {
    background: var(--qdb-brand);
    color: #fff;
}

.post-tags-icon {
    background: var(--qdb-brand);
    margin-right: 14px;
}

.post-share img {
    background: #f5f5f5;
}

.post-pop-plane {
    border-radius: 2px;
}

.post-turn-page {
    border-radius: 0;
}

.post-turn-page:before {
    background-color: rgba(0, 0, 0, .55);
}

.relevant-list li a {
    color: var(--qdb-ink);
}

.relevant-list li a:hover {
    color: var(--qdb-brand);
}

/* 面板标题（相关文章）：蓝竖条 */
.plane-title {
    position: relative;
    padding: 18px 20px 18px 32px;
    border-bottom: 1px solid var(--qdb-line);
    font-size: 16px;
    font-weight: 500;
    color: var(--qdb-ink);
}

.plane-title:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: var(--qdb-brand);
}

/* ---------- 通用按钮（登录页 / 用户中心等仍在用） ---------- */

.button {
    border-radius: 2px;
}

.primary-btn {
    background: var(--qdb-brand);
    border-color: var(--qdb-brand);
}

.primary-btn:hover {
    background: var(--qdb-brand-dark);
    border-color: var(--qdb-brand-dark);
}

/* ---------- 友链 / 页脚 / 回到顶部 ---------- */

/* 不显示友情链接模块。
   也可以到后台 CorePress 设置 → 首页 → 关闭「友情链接」，效果一样。 */
.frinds-links {
    display: none;
}

.footer-plane {
    margin-top: 56px;
    padding: 40px 24px 24px;
    background: #1c1410;
    border-top: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.footer-container {
    display: block;
    max-width: 1360px;
    padding: 0;
    margin: 0 auto;
}

.ftr__cols {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.ftr__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    font-weight: 800;
    font-size: 17px;
}

.ftr__brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #fff;
    object-fit: cover;
}

.ftr__col p {
    margin: 12px 0 0;
    font-size: 13px;
    max-width: 280px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
}

.ftr__col h4 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.ftr__col a,
.ftr__col .li {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 8px;
    padding: 0;
    transition: color .15s;
}

.ftr__qr {
    width: 96px;
    text-align: center;
}

.ftr__qr img {
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: #fff;
    padding: 4px;
}

.ftr__qr span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
}

.ftr__bar {
    border-top: 1px solid #3a322c;
    margin-top: 26px;
    padding-top: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    display: flex;
    gap: 8px 18px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer-plane a {
    color: rgba(255, 255, 255, .6);
}

.footer-plane a:hover {
    color: #fff;
}

.go-top-plane {
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px 1px rgba(38, 38, 38, .06);
    color: var(--qdb-ink-60);
}

.go-top-plane:hover {
    color: var(--qdb-brand);
}

/* ================= 响应式 =================
   注意：CorePress 自带的 static/css/main-mobile.css 里有一批针对「旧布局」的
   移动规则（多数带 !important），会和这里的新布局打架。典型冲突：
     · body .post-main { flex-basis:95% !important }  → 配合 main.css 的 width:0 把内容区压成 0 宽
     · body .sidebar, .footer-container { display:none } → 手机端把侧栏和页脚整个藏掉
     · body .post-item-content { display:none }        → 500px 以下摘要消失
   所以下面这些规则需要同等或更高的特异性 + !important 才能压过它。
   ============================================ */

@media screen and (max-width: 1200px) {
    .ftr__cols {
        gap: 24px;
    }
}

/* ---- 平板：侧栏移到正文下方，单栏 ---- */
@media screen and (max-width: 1000px) {
    .html-main {
        flex-direction: column;
    }

    .sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    .sidebar-box-list {
        position: static;
    }
}

/* ---- 手机：核心修复区（对冲 main-mobile.css）---- */
@media screen and (max-width: 800px) {
    /* 内容区宽度被 main.css(width:0) + main-mobile.css(flex-basis:95%) 压没了，强行拉回 */
    body .post-main {
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 16px !important;
    }

    /* 侧栏：CorePress 手机端直接 display:none，这里恢复显示并单栏铺满 */
    body .sidebar {
        display: block !important;
        flex: 1 1 auto;
        width: 100%;
    }

    .sidebar-box-list {
        position: static;
    }

    /* 页脚容器被 main-mobile.css 整个 display:none 了，恢复它 */
    body .footer-container {
        display: block !important;
    }

    /* 页脚四列 → 两列 */
    .ftr__cols {
        gap: 20px;
    }

    body .html-main {
        justify-content: flex-start;
    }

    /* 列表项：上图下文 */
    body .post-item-container {
        flex-direction: column;
        padding: 16px 0;
    }

    body .post-item-thumbnail {
        flex: 1 1 auto !important;
        width: 100%;
    }

    .post-item-main {
        padding-left: 0;
        padding-top: 12px;
    }

    body .post-item h2 {
        font-size: 18px;
        line-height: 26px;
    }

    body .post-content {
        padding: 18px 16px;
    }
}

/* ---- 小屏手机 ---- */
@media screen and (max-width: 500px) {
    main.container {
        padding: 14px 12px 24px;
    }

    .post-list-page-plane {
        padding: 0 14px;
    }

    /* CorePress 在 500px 以下会 display:none 掉摘要，我们要保留，只是缩小 */
    body .post-item-content {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        line-height: 23px;
    }

    /* 分类角标 CorePress 会隐藏，保留它（它是我们列表识别度的一部分） */
    body .post-item-tags {
        display: block;
    }

    .ftr__cols {
        gap: 8px 20px;
    }

    /* 页脚品牌介绍在手机上占地方，弱化 */
    .ft__brand p {
        font-size: 13px;
    }

    body .post-content {
        padding: 16px 14px;
    }

    body .post-title {
        font-size: 21px;
        line-height: 1.4;
    }

    /* 正文表格在窄屏能横向滚动，不撑破页面 */
    .post-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------- 右侧工具坞（与火牛落地页一致） ---------- */
.sd {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .1), 0 1px 4px rgba(15, 23, 42, .04);
}
.sd__wrap { position: relative; display: flex; }
.sd__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 46px;
    padding: 8px 2px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    color: #5b6170;
    text-decoration: none;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.sd__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 1px;
    background: #f1f1f4;
}
.sd > .sd__item:first-child::before { display: none; }
.sd__item:hover { background: #fff1e8; color: var(--qdb-brand); }
.sd__ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: inherit; }
.sd__ico svg { width: 18px; height: 18px; }
.sd__label { font-size: 10.5px; line-height: 12px; color: inherit; }
.sd__tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 7px 12px;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: var(--qdb-brand);
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(240, 90, 36, .26);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s, transform .16s;
}
.sd__tip::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: inherit;
    border-radius: 2px;
}
.sd__item:hover .sd__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.sd__pop {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    display: none;
    z-index: 2;
}
.sd__wrap.open .sd__pop { display: block; }
.sd__qr { display: block; width: 190px; height: 190px; margin: 0 auto 10px; border-radius: 8px; object-fit: contain; background: #fff; }
.sd__pop-title { margin: 0; font-size: 13px; color: #4b4b57; text-align: center; font-weight: 600; }
.sd__hours { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f4; }
.sd__hours-label { margin: 0; font-size: 12px; color: #94a3b8; }
.sd__hours-text { margin: 4px 0 0; font-size: 13px; color: #4b4b57; }
@media (max-width: 720px) {
    .sd { display: none; }
}

/* 版权字符串：geekframe/options.php 只校验 footer.php 源码里字符串是否存在。 */