/*
	火兔工具箱 · 博客外观覆盖层
	头部与页脚对齐主站 index.html，内容区走经典资讯站排版。
	在 main.css / post-content.css 之后加载，只覆盖不修改主题原文件；
	删掉本文件 + header.php 末尾那段 qd_css_file 即可完全回退。

	设计参数：
	  主色 #7c3aed（火兔紫）｜ 正文 #262626
	  容器 1200px = 正文 860px + 侧栏 300px + 间距 20px
	  面板纯白、无圆角、无阴影；列表缩略图 246×154
	  页面底色沿用主站的 #f6f8ff + 径向渐变（见下方 #app）
*/

/* 三重 :root 提高特异性，压过 header.php 里带 !important 的主题色变量 */
:root:root:root {
    --Maincolor: #7c3aed !important;
    --MaincolorHover: #6d28d9 !important;
    --bagcolor: #f9f7ff !important;

    --qdb-brand: #7c3aed;
    --qdb-brand-dark: #6d28d9;
    --qdb-ink: #262626;
    --qdb-ink-80: rgba(38, 38, 38, .8);
    --qdb-ink-60: rgba(38, 38, 38, .6);
    --qdb-line: rgba(38, 38, 38, .07);
    --qdb-border: rgba(38, 38, 38, .2);
    --qdb-panel: #fff;
}

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

/* 字体栈与主站 index.html 完全一致 */
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);
}

/* 页面底色与主站一致：#f6f8ff + 两层径向渐变。
   头部是半透明毛玻璃，底色不一致的话头部看上去就会“不像”。 */
#app {
    background-image:
        radial-gradient(120% 55% at 82% -8%, rgba(168, 85, 247, .10), transparent 60%),
        radial-gradient(80% 45% at 0% 0%, rgba(124, 58, 237, .10), transparent 55%);
    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.php 内联（.hnf 前缀），本文件不再定义。 */

/* ================= 响应式 =================
   注意：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: 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;
    }

    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;
    }

    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;
    }
}

/* 版权字符串：main-mobile.css 在 360px 以下会 display:none 它。
   但 geekframe/options.php 只校验 footer.php 源码里字符串是否存在，不看是否可见，
   所以隐藏无害 —— 这里不干预，保持原样。 */