@font-face {
  font-family: 'Mogra';
  src: url('/fonts/Mogra-Regular-all.ttf');
  font-display: swap;
}

/* 仅在页面向下滚动后（nav-fixed）显示背景 */
#page-header.nav-fixed #nav {
  /* background: rgba(255, 255, 255, 0.8) !important; */
}

/* 导航栏字体放大 */
#nav {
  font-size: 1.3rem !important; /* 原始是 1.3em，这里放大到 1.6rem (约 25px)，如果直接 2 倍会太大挤爆 */
  height: 50px !important;    /* 配合字体放大增加导航栏高度 */
}

/* 导航栏标题字体样式 */
#nav .site-name {
  font-family: 'Mogra', cursive !important;
  font-size: 1.8rem !important; /* 标题可以比菜单稍微大一点 */
  letter-spacing: 1px;
}

/* 首页横幅中间标题字体样式 */
#site-info #site-title {
  font-family: 'Mogra', cursive !important;
  font-size: 5rem !important; /* 原始约为 1.5-2rem，这里大幅放大，3倍效果建议 5rem 左右 */
  margin-bottom: 20px;
}

/* 导航栏内的 Logo 大小同步放大 */
#nav #blog-info .site-icon {
  height: 48px !important;
}

/* 导航栏菜单间距调整 */
#nav .menus_items .menus_item {
  padding: 0 0 0 20px !important;
}

/* 仅针对文章页正文内容放大字体，不影响全站其他部分 */
#article-container p,
#article-container li {
  font-size: 1.4rem !important; /* 正文字体 */
  line-height: 2 !important;
}

/* 同时也放大文章内的标题，保持视觉比例 */
#article-container h1 { font-size: 2.6rem !important; }
#article-container h2 { font-size: 2.2rem !important; }
#article-container h3 { font-size: 2.0rem !important; }
#article-container h4 { font-size: 1.8rem !important; }
#article-container h5 { font-size: 1.5rem !important; }
#article-container h6 { font-size: 1.4rem !important; }

/* 去除文章页面和“关于”等页面的阴影和立体感 */
#post, #page {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  #post {
    padding: 10px 5px !important;
  }
  #article-container p,
  #article-container li {
    font-size: 1.0rem !important; 
  }
  #article-container h1 { font-size: 1.8rem !important; } 
  #article-container h2 { font-size: 1.6rem !important; } 
  #article-container h3 { font-size: 1.4rem !important; } 
  #article-container h4 { font-size: 1.3rem !important; } 

  /* 首页横幅中间标题在移动端缩小 */
  #site-info #site-title {
    font-size: 2.5rem !important; /* PC端是 5rem，手机端降为 2.5rem */
  }

  /* 移动端隐藏侧边栏小部件，但保留 TOC */
  #aside-content .card-widget:not(#card-toc) {
    display: none !important;
  }

  /* 导航栏字体在移动端缩小 */
  #nav {
    font-size: 1.1rem !important; /* PC端是 1.3rem，手机端降为 1.1rem */
    height: 50px !important;    /* 手机端导航栏高度同步调小 */
  }

  /* 文章页标题和元数据在移动端适配 */
  #post-info {
    text-align: center !important;
  }
  #post-info .post-title {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
  }
  #post-info #post-meta {
    font-size: 0.9rem !important;
    text-align: center !important;
    display: block !important;
  }
}

/* 侧边栏调整：侧边栏靠右，文章居中 */
@media screen and (min-width: 900px) {
  .layout {
    max-width: 96% !important; /* 扩大容器宽度，使其接近边界 */
    position: relative !important;
    justify-content: center !important; /* 居中 Flex 子元素 */
  }

  /* 侧边栏绝对定位到右侧边界 */
  #aside-content {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 300px !important;
    height: 100% !important; /* 确保高度占满，使 sticky 生效 */
    padding-left: 20px !important;
    pointer-events: none !important; /* 避免侧边栏空白处遮挡文章点击 */
    z-index: 100 !important; /* 确保在其他元素之上 */
  }

  /* 隐藏侧边栏时的样式（配合 Butterfly 主题的隐藏功能） */
  .layout.hide-aside {
    max-width: 100% !important; /* 隐藏侧边栏时恢复全宽 */
  }
  
  /* 当侧边栏被隐藏时（无论是通过按钮还是 front-matter 设置），确保其不显示 */
  .layout.hide-aside #aside-content {
    display: none !important; /* 彻底隐藏侧边栏 */
  }

  /* 如果页面本身没有侧边栏（例如 aside: false），这时候 aside-content 可能根本不存在，或者被父级 layout 的 hide-aside 类控制 */
  /* 我们需要确保在这种情况下内容也是居中的 */
  .layout.hide-aside > div:first-child {
    width: 100% !important;
    max-width: 1000px !important; /* 没有侧边栏时，内容可以稍微宽一点，或者保持 900px */
    margin: 0 auto !important;
  }

  /* 恢复侧边栏内部子元素的点击事件 */
  #aside-content > * {
    pointer-events: auto !important;
  }

  /* 文章内容区域居中，限制宽度 */
  .layout > div:first-child {
    width: 100% !important;
    max-width: 900px !important; /* 保持适宜的阅读宽度 */
    margin: 0 auto !important;   /* 居中显示 */
  }
}

/* 强制文章头部信息（标题、元数据等）全局居中显示 */
#post-info {
  text-align: center !important;
}

#post-info .post-title {
  text-align: center !important;
}

#post-info #post-meta {
  text-align: center !important;
  display: block !important; /* 确保容器是 block 以便 text-align 生效 */
}

/* 强制元数据行内显示并居中，解决左对齐问题 */
#post-info #post-meta > .meta-firstline,
#post-info #post-meta > .meta-secondline {
  display: inline !important;
  text-align: center !important;
}

/* 确保元数据分隔符正确显示并增加间距 */
#post-info #post-meta .post-meta-separator,
#page-header #page-site-info #post-meta .post-meta-separator {
  display: inline !important;
  margin: 0 8px !important; /* 增加分隔符左右间距，比官方默认的 5px 稍宽一点 */
}

/* 强制所有页面的头部信息（包括普通页面、标签页、分类页等）居中显示 */
#page-header #page-site-info {
  text-align: center !important;
}

#page-header #page-site-info #site-title {
  text-align: center !important;
}

#page-header #page-site-info #post-meta {
  text-align: center !important;
  display: block !important;
}

#page-header #page-site-info #post-meta .post-meta-separator {
  display: inline !important;
  margin: 0 8px !important;
}

/* 增加头部元数据颜色对比度 */
#post-info #post-meta,
#post-info #post-meta a,
#page-header #page-site-info #post-meta,
#page-header #page-site-info #post-meta a {
  color: var(--white) !important;
}