/* @font-face {
  font-family: Candyhome;
  src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/Candyhome.ttf);
  font-display: swap;
  font-weight: lighter;
} */
/* 站点标题/菜单/文章标题：恢复原竹子手写体 ZhuZiAYuanJWD（用户要求沿用改版前样式） */
@font-face {
    font-family: ZhuZiAYuanJWD;
    src: url(/fonts/ZhuZiAWan.woff2);
    font-display: swap;
    font-weight: lighter;
}

div#menus {
    font-family: "ZhuZiAYuanJWD";
}
h1#site-title {
    font-family: ZhuZiAYuanJWD;
    font-size: 3em !important;
}
a.article-title,
a.blog-slider__title,
a.categoryBar-list-link,
h1.post-title {
    font-family: ZhuZiAYuanJWD;
}

/* 文章标题字号锁回改版前大小（主题按 2.5em 相对全站字号计算，全站字号已从 14px 调至 16px） */
#post-info .post-title {
    font-size: 35px;
}

@media screen and (max-width: 768px) {
    #post-info .post-title {
        font-size: 29px;
    }
}

/* 时间轴生肖icon */
svg.icon {
    /* 这里定义svg.icon，避免和Butterfly自带的note标签冲突 */
    width: 1em;
    height: 1em;
    /* width和height定义图标的默认宽度和高度*/
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
#page-header:not(.not-top-img):before {
    background-color: transparent !important;
}

/* 卡片恢复半透明，透出全屏背景图（2026-09 Typora 改版时曾改为实底白，现按用户要求还原） */
/* 首页文章卡片（Butterfly 5.5 在 #recent-posts 与卡片之间有一层 .recent-post-items 包装，须用后代选择器） */
#recent-posts .recent-post-item {
    background: rgba(255, 255, 255, 0.9);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
    background: rgba(255, 255, 255, 0.9);
}

/* 文章页面正文背景 */
div#post {
    background: rgba(255, 255, 255, 0.9);
}

/* 分页页面 */
div#page {
    background: rgba(255, 255, 255, 0.9);
}

/* 归档页面 */
div#archive {
    background: rgba(255, 255, 255, 0.9);
}

/* 标签页面 */
div#tag {
    background: rgba(255, 255, 255, 0.9);
}

/* 分类页面 */
div#category {
    background: rgba(255, 255, 255, 0.9);
}

/*夜间模式：Typora Night 适配，卡片深灰 + 细边框*/
[data-theme="dark"] #recent-posts .recent-post-item {
    background: #282828;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .card-widget {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div#post {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div#tag {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div#archive {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div#page {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] div#category {
    background: #282828 !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 页脚透明（原配背景图/蓝色底时文字为白色，纸面风格下改为灰色保证可读） */
#footer {
    background: transparent !important;
    color: #8590a6;
}

#footer a,
#footer div,
#footer span {
    color: #8590a6;
}

[data-theme="dark"] #footer,
[data-theme="dark"] #footer a,
[data-theme="dark"] #footer div,
[data-theme="dark"] #footer span {
    color: #8b949e;
}

/* 移除页面底部多余空间 */
#footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#body-wrap {
    padding-bottom: 0 !important;
}

/* 头图：恢复主题默认（横幅显示文章封面图）。
   原来这里的 background:transparent 是配合已移除的全屏背景图（一图流）用的，已删除 */

/* 禁止横向滚动条 */
html {
    overflow-x: hidden;
}

body {
    margin-bottom: 0 !important;
    overflow-x: hidden;
    /* Typora 行距（原主题为 2） */
    line-height: 1.6;
}

/* 背景图 */
#web_bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

#web_bg:before {
    display: none !important;
}

#web_bg:after {
    display: none !important;
}

/* 确保内容在粒子之上 */
#body-wrap {
    position: relative;
    z-index: 1;
}

#footer {
    position: relative;
    z-index: 1;
}

#rightside {
    position: fixed;
    z-index: 99999;
}

/* 右侧工具栏 — 固定在右侧，隐藏时贴边，鼠标靠近或移动时弹出 */
#rightside {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 90px !important;
    bottom: auto !important;
    opacity: 0 !important;
    transform: translateX(45px) !important;
    z-index: 99999 !important;
    transition: top 0.25s ease, transform 0.3s ease, opacity 0.3s ease !important;
    pointer-events: none !important;
}

#rightside-config-hide,
#rightside-config-show {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
}

#rightside > div > button {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rightside > div > button {
    border-radius: 5px;
}

#local-search,
#algolia-search {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
    z-index: 1000 !important;
}

.search-dialog,
#local-search .search-dialog,
#algolia-search .search-dialog {
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    bottom: auto !important;
    margin-left: -300px !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    transform-origin: center top !important;
}

@media screen and (max-width: 768px) {
    .search-dialog,
    #local-search .search-dialog,
    #algolia-search .search-dialog {
        top: 0 !important;
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* 滚动条 */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #c4c6cc;
    border-radius: 2em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: inherit;
    background-color: rgba(9, 105, 218, 0.25);
}

/* md网站下划线 */
#article-container a:hover {
    text-decoration: none !important;
}

#article-container #hpp_talk p img {
    display: inline;
}

/* 404页面 */
#error-wrap {
    position: absolute;
    top: 40%;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 1000px;
    transform: translate(0, -50%);
}

#error-wrap .error-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 1rem;
    height: 18rem;
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: var(--card-box-shadow);
    transition: all 0.3s;
}

#error-wrap .error-content .error-img {
    box-flex: 1;
    flex: 1;
    height: 100%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #3b70fc;
    background-position: center;
    background-size: cover;
}

#error-wrap .error-content .error-info {
    box-flex: 1;
    flex: 1;
    padding: 0.5rem;
    text-align: center;
    font-size: 14px;
    font-family: Titillium Web, "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
#error-wrap .error-content .error-info .error_title {
    margin-top: -4rem;
    font-size: 9em;
}
#error-wrap .error-content .error-info .error_subtitle {
    margin-top: -3.5rem;
    word-break: break-word;
    font-size: 1.6em;
}
#error-wrap .error-content .error-info a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-color);
}

#body-wrap.error .aside-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    bottom: 0px;
    position: absolute;
    padding: 1rem;
    width: 100%;
    overflow: scroll;
}

#body-wrap.error .aside-list .aside-list-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
}

#body-wrap.error .aside-list .aside-list-item {
    padding: 0.5rem;
}

#body-wrap.error .aside-list .aside-list-item img {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

#body-wrap.error .aside-list .aside-list-item .thumbnail {
    overflow: hidden;
    width: 230px;
    height: 143px;
    background: var(--anzhiyu-card-bg);
    display: flex;
}

#body-wrap.error .aside-list .aside-list-item .content .title {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
    padding-top: 0.5rem;
    color: white;
}

#body-wrap.error .aside-list .aside-list-item .content time {
    display: none;
}

/* 代码框主题：Typora 小圆角 */
#article-container figure.highlight {
    border-radius: 4px;
}

/* 头图：完全透明，让全屏固定背景图自然透出（一图流效果，和主页背景无缝相连） */
#page-header {
    background: transparent !important;
}

/* 文章页信息块（标题+meta）：改用文档流贴顶显示（复刻原站视觉：标题在横幅顶部而非底部）。
   原理：原站粒子特效的 * { position: relative } 意外覆盖了主题的绝对定位，此为该效果的等效还原 */
#page-header #nav,
#page-header #post-info {
    position: relative;
}

/* 窄屏目录面板：贴近右侧边缘（原 55px），给左侧正文多留空间 */
@media screen and (max-width: 900px) {
    #aside-content #card-toc {
        right: 15px;
    }
    /* 窄屏取消信息块相对定位的 bottom 上移，避免标题与导航栏重叠 */
    #page-header #post-info {
        top: 0;
    }
}

/* Typora 风格 ==高亮== ：过滤器将其转为 <mark>，此处补足样式 */
#article-container mark {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(255, 212, 0, 0.4);
    color: inherit;
}

/* 热门页统计条：透明融入卡片（原站页面底色与统计条同色故隐形，现页面底色改浅需显式透明） */
#page #hot-summary {
    background: transparent;
    box-shadow: none;
}

/* 文章页目录：JS 控制 position:fixed，此处仅限制高度 */
#aside-content > #card-toc.card-widget {
    z-index: 100 !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
}

/* 文章信息行（发表于/更新于/分类/阅读量）：保持原有小字样式 */
#post-info #post-meta {
    font-size: 14px;
}

/* 分类/归档页面文章列表日期颜色：灰色（原白色是配合背景图的，白底上会看不见） */
.article-sort-item-time time {
    color: #8590a6 !important;
}

/* 文章内视频自适应宽度，防止撑大页面 */
#article-container video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 20px;
    border-radius: 8px;
    background: #000;
}