/* ==========================================================================
   layout-fix.css · 布局/排版修复（在主题 CSS 之后加载，优先级最高）
   --------------------------------------------------------------------------
   本文件集中处理 2026-11-14 反馈的 9 项问题中的布局与排版部分：

   #1 页脚分组按本站实际情况重写（结构在 footer.pug，本文件只做视觉收紧）
   #6 首页排版空旷 —— Eurkon 把 #recent-posts 锁死 700px，1440 屏上左右各留
      400px 空白；卡片内部 .content 是 position:absolute + opacity:0（只在 hover
      时浮出来），导致每张卡下半部分一大片空白
   #7 归档文章列表过大 —— .post-title 被 inject-fix.css 的
      `#post-info .post-title, #article-container .post-title` 选择器误命中，
      套上了 28px（文章 H1 的字号）
   #8 导航下拉错位 —— eurkon.css 用 `div.menus_items>div:nth-child(n)>ul` 硬编码
      right: -8em/-3em 偏移，只对 Eurkon 自己的 4 个分组成立；本站是 5 个分组，
      且分组宽度不同，全部错位。改成以父级为基准居中。
   #9 文章页排版 —— #post>#post-info 是 absolute + top:4rem，而 #post 不是
      position:relative，于是标题被顶到导航栏上，与面包屑overlap
   ========================================================================== */

/* ==========================================================================
   #6 首页：放开宽度限制，卡片按内容自适应
   ========================================================================== */

/* 列表容器：700px → 跟随主栏宽度（主栏 = 100% - 310px 侧栏，最多 1400px） */
#recent-posts {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 卡片网格改 grid：Eurkon 原来用 flex+wrap+space-between，同一排两张卡
   会被最高的那张拽齐，标题短的卡下面空一大片 —— 这就是「空旷」的另一半原因。
   grid + align-items:start 让每张卡各自按内容高度排列。 */
#recent-posts .recent-post-items {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 20px !important;
  width: 100% !important;
}

@media screen and (min-width: 1500px) {
  #recent-posts .recent-post-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 768px) {
  #recent-posts .recent-post-items {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

/* 卡片：Eurkon 写死 height:20rem（320px），配合 180px 封面 + 135px info
   只剩 5px 余量，摘要一旦按文档流排就会溢出。改成由内容决定高度。
   另外 custom-index.css 给 .recent-post-item 挂了
   `padding-bottom: var(--custom-card-gap)`（56px），那是给「无边框流式列表」
   设计的，在圆角卡片里就是纯空白 —— 一并清掉。 */
#recent-posts .recent-post-items .recent-post-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border-bottom: none !important;
  background: var(--c-surface, #fff) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05) !important;
}

html[data-theme='dark'] #recent-posts .recent-post-items .recent-post-item {
  background: var(--c-surface, #1a2332) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important;
}

#recent-posts .recent-post-items .recent-post-item:hover {
  box-shadow: 0 8px 26px rgba(var(--c-primary-rgb, 22, 119, 179), .13) !important;
  transform: translateY(-3px) !important;
  background: var(--c-surface, #fff) !important;
}

html[data-theme='dark'] #recent-posts .recent-post-items .recent-post-item:hover {
  background: var(--c-surface, #1a2332) !important;
}

#recent-posts .recent-post-items .recent-post-item .post_cover {
  height: 180px !important;
  flex: 0 0 180px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* 卡片文字区：占满封面以下的剩余空间，纵向排布 */
#recent-posts .recent-post-items .recent-post-item > .recent-post-info {
  height: auto !important;
  flex: 1 1 auto !important;
  padding: .9rem 1.1rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: .4rem !important;
}

/* 摘要在 Eurkon 里是 absolute + opacity:0 + top:-6rem，只有 hover 才浮出来。
   桌面端这样设计没问题，但「空旷」的观感主要来自这里 —— 卡片 60% 区域是空的。
   改成常驻可见、正常文档流、line-clamp 3 行。 */
#recent-posts .recent-post-items .recent-post-item > .recent-post-info > .content {
  position: static !important;
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  order: 0 !important;
  padding: 0 !important;
  margin: .15rem 0 0 !important;
  font-size: .875rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--c-text-secondary, #6b7280) !important;
  text-align: left !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  transition: color .2s ease !important;
}

html[data-theme='dark'] #recent-posts .recent-post-items .recent-post-item > .recent-post-info > .content {
  color: var(--c-text-secondary, #8b9db5) !important;
}

/* 分类/标签胶囊移出 absolute 定位，回到文档流 */
#recent-posts .recent-post-items .recent-post-item > .recent-post-info > .article-meta-wrap {
  order: 2 !important;
  margin: 0 !important;
  white-space: normal !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .4rem !important;
  font-size: .75rem !important;
}

#recent-posts .recent-post-items .recent-post-item > .recent-post-info > .article-meta-wrap > .article-meta.category {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
}

#recent-posts .recent-post-items .recent-post-item > .recent-post-info > .article-meta-wrap > .article-meta.sticky {
  position: static !important;
  top: auto !important;
  right: auto !important;
  border-radius: 4px !important;
  padding: 0 .4em !important;
}

/* 标题：常驻一行半，clamp 2 行 */
#recent-posts .recent-post-items .recent-post-item > .recent-post-info > .article-title {
  order: -1 !important;
  font-size: 1.15rem !important;
  line-height: 1.45 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  -webkit-line-clamp: 2 !important;
}

/* hover 时摘要不再位移，只改色 */
#recent-posts .recent-post-items .recent-post-item:hover > .recent-post-info > .content {
  top: auto !important;
  color: var(--c-text, #374151) !important;
}

html[data-theme='dark'] #recent-posts .recent-post-items .recent-post-item:hover > .recent-post-info > .content {
  color: var(--c-text, #e8eef4) !important;
}

/* 封面 hover 遮罩保留，但不要把标题区也压暗 */
#recent-posts .recent-post-items .recent-post-item:hover .post_cover::after {
  opacity: .55 !important;
}

#recent-posts .recent-post-items .recent-post-item:hover img.post_bg {
  filter: none !important;
}

/* 移动端：单列 + 封面收紧 */
@media screen and (max-width: 768px) {
  #recent-posts .recent-post-items .recent-post-item .post_cover {
    height: 170px !important;
  }

  #recent-posts .recent-post-items .recent-post-item > .recent-post-info {
    padding: .9rem 1rem 1rem !important;
  }

  #recent-posts .recent-post-items .recent-post-item > .recent-post-info > .article-title {
    font-size: 1.05rem !important;
  }
}

/* 首页副标题条：原来 60px 上下内边距 + 700px 居中，现在跟主栏同宽 */
#home-banner {
  max-width: none !important;
  padding: 28px 4px 20px !important;
  text-align: left !important;
}

/* ==========================================================================
   #8 导航下拉：以父级为基准居中，不再依赖 nth-child 硬编码
   ========================================================================== */

#nav .menus_items .menus_item {
  position: relative !important;
}

#nav .menus_items .menus_item .menus_item_child {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin-top: .5em !important;
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease,
              transform .18s ease, border-color .2s ease, box-shadow .2s ease !important;
}

#nav .menus_items .menus_item:hover .menus_item_child {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 第一组 / 最后一组：贴边对齐，防止溢出视口 */
#nav .menus_items > .menus_item:first-child .menus_item_child {
  left: 0 !important;
  transform: none !important;
}

#nav .menus_items > .menus_item:last-child .menus_item_child {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* 干掉 Eurkon 的 nth-child 硬编码偏移 */
div.menus_items > div:nth-child(1) > ul,
div.menus_items > div:nth-child(2) > ul,
div.menus_items > div:nth-child(3) > ul,
div.menus_items > div:nth-child(4) > ul,
div.menus_items > div:nth-child(5) > ul,
div.menus_items > div:nth-child(6) > ul {
  right: auto !important;
}

/* ==========================================================================
   #9 文章页：#post-info 归位
   --------------------------------------------------------------------------
   #post>#post-info 是 position:absolute; top:4rem，但 #post 是 static，
   绝对定位以 body 为参照 —— 标题直接压到导航栏上，跟面包屑重叠。
   改成静态文档流，正常排在正文上方。
   ========================================================================== */

#post > #post-info {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  text-align: left !important;
  padding: 1.4rem 2rem 1rem !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
}

#post > #post-info .post-title {
  font-size: 1.6rem !important;
  line-height: 1.35 !important;
  color: var(--c-text, #374151) !important;
  margin: 0 0 .55rem !important;
  padding: 0 !important;
  border-bottom: none !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

html[data-theme='dark'] #post > #post-info .post-title {
  color: var(--c-text, #e8eef4) !important;
}

#post > #post-info #post-meta {
  font-size: .8rem !important;
  color: var(--c-text-secondary, #6b7280) !important;
  /* 关键：Eurkon 把 #post-meta 设成 flex row，标题 h1 是它的兄弟节点之一，
     于是「分类标签 · 标题 · 日期」被横向排成一行。改成纵向列，标题回到最上面。 */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: .4rem !important;
  line-height: 1.5 !important;
  width: 100% !important;
}

#post > #post-info #post-meta > .post-title {
  order: -1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

#post > #post-info #post-meta .meta-firstline {
  order: 0 !important;
}

#post > #post-info #post-meta .meta-secondline {
  order: 1 !important;
}

#post > #post-info #post-meta .meta-firstline,
#post > #post-info #post-meta .meta-secondline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .35rem .9rem !important;
}

#post > #post-info #post-meta a {
  color: var(--c-primary, #1677B3) !important;
}

/* Eurkon 用 .post-meta-categories 胶囊 + 透明分隔符；这里保留胶囊但缩小 */
#post > #post-info #post-meta .post-meta-categories a,
#post > #post-info #post-meta a.post-meta-categories {
  background: rgba(var(--c-primary-rgb, 22, 119, 179), .08) !important;
  color: var(--c-primary, #1677B3) !important;
  border-radius: 4px !important;
  padding: .12rem .45rem !important;
  margin-right: .35rem !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
}

#post > #post-info #post-meta .post-meta-separator {
  display: none !important;
}

#post > #post-info #post-meta .post-meta-icon {
  display: inline-block !important;
  margin-right: .3rem !important;
  opacity: .75;
}

/* #post 容器：去掉 Eurkon 的绝对定位依赖，padding 归位 */
#post {
  position: relative !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* 正文容器内边距：post-info 已经有 pad 了，这里只留左右 */
#post > article#article-container {
  padding: 1.6rem 2rem 2rem !important;
}

/* 正文标题层级收一下：帖子内 H1 不该跟页面标题一样大 */
#article-container.post-content h1 {
  font-size: 1.55rem !important;
  line-height: 1.35 !important;
  margin: 1.6rem 0 .8rem !important;
}

#article-container.post-content h2 {
  font-size: 1.3rem !important;
  margin: 1.7rem 0 .7rem !important;
}

#article-container.post-content h3 {
  font-size: 1.1rem !important;
  margin: 1.4rem 0 .6rem !important;
}

#article-container.post-content h4 {
  font-size: 1rem !important;
  margin: 1.2rem 0 .5rem !important;
}

#article-container.post-content h1:first-child,
#article-container.post-content h2:first-child {
  margin-top: 0 !important;
}

/* 文章页分页导航图：原来 320px 高挤成两半，改成等比 */
#pagination.pagination-post .prev-post,
#pagination.pagination-post .next-post {
  height: 130px !important;
}

/* 相关推荐：原来 1 张 300px 大图独占一行，改成小卡横排 */
.relatedPosts > .relatedPosts-list > div {
  height: 110px !important;
}

.relatedPosts > .relatedPosts-list > div .cover {
  height: 100% !important;
}

.relatedPosts > .relatedPosts-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.relatedPosts > .relatedPosts-list > div {
  width: calc(33.333% - 7px) !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  #post > #post-info {
    padding: 1rem 1rem .8rem !important;
  }

  #post > #post-info .post-title {
    font-size: 1.25rem !important;
  }

  #post > article#article-container {
    padding: 1.1rem 1rem 1.6rem !important;
  }

  .relatedPosts > .relatedPosts-list > div {
    width: 100% !important;
  }
}

/* ==========================================================================
   #1 页脚：多列分组在窄屏下的可读性
   ========================================================================== */

#footer #footer-group-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1.4rem 2.4rem !important;
  padding: 1.6rem 1rem 1rem !important;
}

#footer #footer-group-container .footer-group {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: .45rem !important;
  min-width: 86px !important;
}

#footer #footer-group-container .footer-group .footer-group-title {
  margin-bottom: .35rem !important;
  font-weight: 600 !important;
}

#footer #footer-group-container .footer-group .footer-group-item {
  display: block !important;
  min-width: 0 !important;
  text-align: left !important;
  font-size: .82rem !important;
  line-height: 1.5 !important;
  opacity: .82;
  transition: opacity .2s ease, color .2s ease;
}

#footer #footer-group-container .footer-group .footer-group-item:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  #footer #footer-group-container {
    gap: 1rem 1.4rem !important;
    padding: 1.2rem .8rem .6rem !important;
  }

  #footer #footer-group-container .footer-group {
    min-width: 72px !important;
  }

  #footer #footer-group-container .footer-group .footer-group-item {
    font-size: .78rem !important;
  }
}

/* ==========================================================================
   #4 附加：移动端抽屉箭头方向要反映「折叠 / 展开」
   --------------------------------------------------------------------------
   sidebar.styl 里是：
     .site-page.group > i:last-child  → 默认（未折叠）0deg，即 chevron-down
     .site-page.group.hide > i:last-child → rotate(90deg)
   但 chevron-down 转 90° 会变成指向左，看起来像「已展开、可收起」，
   和实际状态正好相反。改成：折叠时 -90deg（指向右 = 可展开），
   展开时 0deg（指向下 = 可收起）。
   ========================================================================== */

#sidebar-menus .menus_items .site-page.group > i:last-child {
  transform: rotate(0deg) !important;
}

#sidebar-menus .menus_items .site-page.group.hide > i:last-child {
  transform: rotate(-90deg) !important;
}

#sidebar-menus .menus_items .site-page.group {
  user-select: none;
}

/* ==========================================================================
   #7 归档页：文章标题被误套 28px
   --------------------------------------------------------------------------
   inject-fix.css 里有一条
     #post-info .post-title, #article-container .post-title { font-size: var(--c-text-2xl) }
   本意是给「文章页 H1」定 28px，但归档页的每条文章标题也叫 .post-title，
   且它就在 #article-container 里 —— 于是 23 条文章标题全变成 28px，
   比页面标题「归档」还大，列表显得极笨重。
   这里把归档列表的标题压回 14px，并把条目高度收紧。
   ========================================================================== */

#article-container .archive-wrap .post-title,
.archive-wrap .post-item .post-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  color: var(--c-text, #374151) !important;
}

html[data-theme='dark'] .archive-wrap .post-item .post-title {
  color: var(--c-text, #e8eef4) !important;
}

/* 归档页整体：宽度跟随主栏，条目紧凑 */
.archive-wrap {
  max-width: 100% !important;
  padding: 0 0 40px !important;
}

.archive-wrap .post-item {
  padding: 9px 14px !important;
  border-radius: 10px !important;
  gap: 10px !important;
}

.archive-wrap .post-date {
  font-size: 12px !important;
  min-width: 38px !important;
  opacity: .75;
}

.archive-wrap .post-tag {
  font-size: 10px !important;
  padding: 1px 7px !important;
  max-width: 72px !important;
}

.archive-wrap .month-label {
  font-size: 12px !important;
  margin: 10px 0 6px !important;
  opacity: .7;
}

.archive-wrap .month-section {
  padding: 0 !important;
}

.archive-wrap .year-card {
  margin-bottom: 14px !important;
}

.archive-wrap .year-card-header {
  padding: 12px 16px !important;
}

.archive-wrap .year-card-title {
  font-size: 14px !important;
  gap: 8px !important;
}

.archive-wrap .year-count {
  font-size: 11px !important;
}

/* 归档页里的 .article-sort（主题原生结构，若被启用）也一并收紧 */
#archive .article-sort-item-title {
  font-size: 14px !important;
}

/* ==========================================================================
   #9 附加：文章页里 Eurkon 遗留的其它绝对定位元素
   ========================================================================== */

/* 面包屑 / 页面标题在 not-top-img 模式下不该再撑 400px 高 */
#page-header.not-top-img {
  height: 60px !important;
  margin-bottom: 12px !important;
}

/* 文章页正文上下不要出现过大的空白 */
#post {
  padding-bottom: 0 !important;
}

#post > #article-container > :last-child {
  margin-bottom: 0 !important;
}

/* 相关推荐 / 上下篇导航容器的间距收敛 */
#post #pagination.pagination-post,
#post .relatedPosts {
  margin-top: 18px !important;
}

/* 空卡片清理：`card-posts` 在没有内容时会渲染一个 42px 的空白块 */
#aside-content .card-widget:empty,
#aside-content .card-posts:not(:has(*)) {
  display: none !important;
}

/* ==========================================================================
   #7 附加：NEW / UPD 徽章的对比
   --------------------------------------------------------------------------
   eurkon.css 里 `a.article-title-new::after { background: var(--light-text);
   color: var(--white) }`。浅色主题下 --light-text 是 #FFB449（橙），白字勉强；
   深色主题下 --main 变成 #5C5C5C，但 --light-text 仍是橙 → 橙底白字，对比不足。
   统一改成「主色底 + 高对比字」。
   ========================================================================== */

a.article-title-new::after,
a.article-title-update::after {
  font-style: normal !important;
  letter-spacing: .02em !important;
  background: rgba(var(--c-primary-rgb, 22, 119, 179), .14) !important;
  color: var(--c-primary, #1677B3) !important;
  border: 1px solid rgba(var(--c-primary-rgb, 22, 119, 179), .32) !important;
  border-radius: 4px !important;
  padding: 0 .35em !important;
}

a.article-title-new::after {
  background: var(--c-primary, #1677B3) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html[data-theme='dark'] a.article-title-new::after {
  background: var(--c-primary, #64b5f6) !important;
  color: #0f1419 !important;
  border-color: transparent !important;
}

html[data-theme='dark'] a.article-title-update::after {
  background: rgba(var(--c-primary-rgb, 100, 181, 246), .18) !important;
  color: var(--c-primary, #64b5f6) !important;
  border-color: rgba(var(--c-primary-rgb, 100, 181, 246), .38) !important;
}

/* 同一张卡可能同时挂 article-title-update 和 article-title-new（既更新过又是新的），
   indexPostUI.pug 里两个 class 是拼在一起的。上面的 dark 规则按顺序后者覆盖前者，
   导致 NEW 徽章被画成 UPD 的浅色。这里用组合选择器把 NEW 提回来。 */
html[data-theme='dark'] a.article-title-update.article-title-new::after,
a.article-title-update.article-title-new::after {
  background: var(--c-primary, #1677B3) !important;
  color: #fff !important;
  border-color: transparent !important;
}

html[data-theme='dark'] a.article-title-update.article-title-new::after {
  background: var(--c-primary, #64b5f6) !important;
  color: #0f1419 !important;
}

/* ==========================================================================
   #3 收尾：返回顶部图标的字形被 attr() 顶掉
   --------------------------------------------------------------------------
   eurkon.css 里有
     #nav #hotkey #top-button i::before { content: attr(data-percent); }
   它期待欧几里得原版结构「<span class="scroll-percent"></span><i>」配合滚动百分比，
   但本模板没那段 span，`i::before` 只剩一个空字符串 —— 于是图标整颗消失。
   这里把 content 还原成 Font Awesome 的箭头字形，并把百分比显示逻辑摘掉。
   ========================================================================== */

#nav #hotkey #top-button i::before {
  content: var(--fa) / "" !important;
  position: static !important;
  line-height: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

#nav #hotkey #top-button i.fa-arrow-up::before {
  content: "\f062" / "" !important;
}

/* 兜底：不支持 content 二值的旧引擎 */
@supports not (content: "" / "") {
  #nav #hotkey #top-button i.fa-arrow-up::before {
    content: "\f062" !important;
  }
}