/* 首页文章卡片：悬浮时调整边框颜色（浅色模式加深，深色模式变浅） */
.recent-post-item {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  /* 确保有边框基线（若主题已有可被覆盖） */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  background-clip: padding-box;
}

html[data-theme='dark'] .recent-post-item {
  border: 1px solid rgba(255,255,255,0.04);
}

/* 站点宽度变量（用于同步页面容器与导航，便于统一调整） */
:root {
  --site-max-width: 1600px;
  --site-max-width-hide-aside: 1800px;
  --layout-padding-x: 15px;
}

/* 增加页面宽度，减少两边空白 */
.layout {
  max-width: var(--site-max-width) !important;
}

/* 隐藏侧边栏时进一步增加宽度 */
.layout.hide-aside {
  max-width: var(--site-max-width-hide-aside) !important;
}

/* 确保在大屏幕上也有足够的宽度 */
@media (min-width: 2000px) {
  .layout {
    max-width: 75% !important;
  }
  
  .layout.hide-aside {
    max-width: 85% !important;
  }
}

/* 确保页头和导航栏占满全宽 */
body,
html,
#page,
#body-wrap,
#page-header,
header#page-header,
header.not-top-img#page-header,
header.not-top-img.fixed#page-header,
header.fixed#page-header {
  width: 100% !important;
  max-width: none !important;
}

/* 固定导航栏在顶部，滚动时不隐藏 */
#page-header,
header#page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* 给页面主体内容添加上边距，避免被固定导航栏遮挡 */
#body-wrap {
  padding-top: 48px !important;
}

/* 移除页面容器的宽度限制 */
#page-header > *,
header#page-header > * {
  max-width: none !important;
}

/* 顶部导航栏居中显示 */
/* 站点信息固定在左侧，菜单居中显示 */
#nav {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 8px 0 !important;
  background-color: #e0e0e0 !important;
  align-items: center !important;
  overflow-x: visible !important; /* 允许下拉菜单横向溢出而不被裁剪 */
  overflow-y: visible !important; /* 保持下拉菜单可见 */
  contain: none !important; /* 避免 containment 导致的裁剪 */
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  position: relative !important; /* 便于将菜单绝对居中 */
}

#nav .nav-inner {
  max-width: var(--site-max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0px var(--layout-padding-x) !important; /* 减小上下内边距 */
  display: flex !important;
  align-items: center !important;
}

/* 若页面在不显示侧边栏（hide-aside）模式，导航也同步扩大 */
html.hide-aside #nav .nav-inner {
  max-width: var(--site-max-width-hide-aside) !important;
}

@media screen and (max-width: 768px) {
  #nav .nav-inner {
    padding: 6px var(--layout-padding-x) !important; /* 与桌面一致，减小上下内边距 */
  }
}

/* 将站点信息固定到左侧 */
#nav #blog-info {
  display: flex !important;
  align-items: center !important;
  margin-right: 20px !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 菜单区域 */
#nav #menus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  padding: 0 5px !important; /* 上下0，左右5px */
  border-radius: 0 !important; /* 移除圆角避免边缘对比线 */
  flex: 0 0 auto !important;
  width: fit-content !important; /* 宽度随内容 */
  max-width: calc(100% - 40px) !important; /* 不超过导航栏可视宽度 */
  overflow-x: visible !important; /* 允许子菜单横向溢出显示完整 */
  overflow-y: visible !important;
  z-index: 20 !important; /* 置于其他元素之上，避免遮挡点击 */
  pointer-events: auto !important;
  border: none !important; /* 移除容器边框 */
  box-shadow: none !important; /* 移除可能的阴影 */
}

/* 深色模式下的导航背景 */
[data-theme='dark'] #nav {
  background-color: rgba(34, 34, 34, 0.9) !important;
}

[data-theme='dark'] #nav #menus {
  background-color: transparent !important;
}

/* #menus 的定位交给 JS：JS 会在能显示时绝对定位并保证不覆盖 blog-info */

#nav .menus_items {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 20px !important; /* 左右留白一致，确保首尾间距对称 */
  margin: 0 !important;
  flex-wrap: nowrap !important; /* 子菜单保持一行显示 */
  width: auto !important; /* 宽度随内容，避免撑满导致误判 */
  max-width: none !important;
  pointer-events: auto !important;
  flex: 1 1 auto !important; /* 使菜单占据中间可用空间 */
}

/* 让搜索按钮靠右 */
#nav #menus #search-button {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* 强制确保#menus在没有折叠类时可见 - 最高优先级 */
html body div#page-header nav#nav:not(.nav-responsive-hide) div#menus,
html body #page-header #nav:not(.nav-responsive-hide) #menus,
#page-header #nav:not(.nav-responsive-hide) #menus,
header#page-header nav#nav:not(.nav-responsive-hide) div#menus,
#nav:not(.nav-responsive-hide) #menus {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 菜单项间距（垂直居中） */
#nav .menus_items > .menus_item {
  margin: 0 !important;
  padding: 6px 16px !important; /* 上下内边距用于垂直居中 */
  font-weight: 600 !important;
  font-size: 1.1em !important;
  border: none !important; /* 移除所有边框 */
  border-left: none !important;
  border-right: none !important;
  height: auto !important; /* 允许内容自然撑高以垂直居中 */
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
}

/* 确保站点菜单链接自身也垂直居中 */
#nav .menus_items > .menus_item > .site-page,
#nav .menus_items > .menus_item > a.site-page {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: normal !important;
}

/* 使用左边 border 作为分割线，确保每个菜单项左右间距一致 */
:root {
  --menu-divider-color: rgba(0, 0, 0, 0.15);
  --menu-dropdown-bg: #ffffff;
  --menu-dropdown-border: rgba(0, 0, 0, 0.1);
  --menu-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --menu-dropdown-hover: rgba(0, 0, 0, 0.05);
}
[data-theme='dark'] {
  --menu-divider-color: rgba(255, 255, 255, 0.15);
  --menu-dropdown-bg: rgba(24, 24, 24, 0.95);
  --menu-dropdown-border: rgba(255, 255, 255, 0.06);
  --menu-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  --menu-dropdown-hover: rgba(255, 255, 255, 0.02);
}

#nav .menus_items > .menus_item {
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

/* 在菜单项之间添加分隔线（除了第一个）——改为短竖线（通过伪元素绘制，便于控制高度） */
html body #page-header #nav .menus_items > .menus_item + .menus_item,
html body #nav .menus_items > .menus_item + .menus_item,
#nav .menus_items > .menus_item + .menus_item {
  /* 移除整栏边框，使用伪元素绘制短分隔线 */
  border-left: none !important;
}

/* 短分隔线：伪元素方式，便于设置高度和垂直居中 */
html body #nav .menus_items > .menus_item {
  position: relative !important; /* 伪元素定位基点 */
}
html body #nav .menus_items > .menus_item + .menus_item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 18px !important; /* 调小高度，按需可改为 14px/16px */
  background-color: var(--menu-divider-color) !important;
  display: block !important;
}


/* 强制移除右侧、顶部、底部边框 */
html body #page-header #nav .menus_items > .menus_item,
html body #nav .menus_items > .menus_item {
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 菜单项内部图标 */
#nav .menus_items > .menus_item i,
#nav #menus > * i {
  flex-shrink: 0 !important;
  margin-right: 4px !important;
  display: inline-block !important;
  color: var(--font-color) !important;
  font-style: normal !important;
}

/* 搜索按钮：放入主菜单、仅显示图标、主题与移动端样式微调 */
#nav #menus #search-button { display: flex !important; align-items: center !important; margin-right: 8px !important; margin-left: 12px !important; }
#nav #menus #search-button .search { display: flex !important; align-items: center !important; padding: 6px 8px !important; padding-left: 4px !important; color: var(--font-color) !important; transition: color .12s ease, background .12s ease; border-radius: 6px !important; transform: translateY(3px) !important; }
#nav #menus #search-button .search i { font-size: 1.05em !important; }
#nav #menus #search-button .search span { display: none !important; /* 隐藏文字，仅显示图标以节省空间 */ }

/* 悬停高亮 */
[data-theme='light'] #nav #menus #search-button .search:hover { color: #49b1f5 !important; background: rgba(73,177,245,0.06) !important; }
[data-theme='dark']  #nav #menus #search-button .search:hover { color: #49b1f5 !important; background: rgba(73,177,245,0.12) !important; }

/* 移动端优化：加大点击区域 */
@media screen and (max-width: 768px) {
  #nav #menus #search-button { margin-left: 8px !important; }
  #nav #menus #search-button .search { padding: 8px !important; transform: translateY(1px) !important; padding-left: 6px !important; }
  #nav #menus #search-button .search i { font-size: 1.2em !important; }

  /* Fix: 确保移动端打开搜索对话框时不被固定导航栏遮挡 */
  .search-dialog {
    top: 64px !important; /* 导航栏高度（与 #body-wrap padding-top 保持一致） */
    height: calc(100% - 48px) !important; /* 从导航栏下方开始，避免遮挡 */
    z-index: 10000 !important; /* 高于固定页头 */
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom); /* 适配刘海屏 */
  }
}

/* 确保 FontAwesome 的伪元素图标能显示 */
#nav .menus_items > .menus_item [class*="fa"]::before {
  display: inline-block !important;
  font-family: var(--fa-font-family, "Font Awesome 5 Free") !important;
  font-weight: 900 !important;
  speak: none !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* 移除最后一个菜单项的分隔符和右侧多余内边距 - 使用极高优先级覆盖主题样式 */
html[data-theme] body #page-header #nav .menus_items > .menus_item:last-child,
html[data-theme='dark'] body #page-header #nav .menus_items > .menus_item:last-child,
html[data-theme='light'] body #page-header #nav .menus_items > .menus_item:last-child,
html body #page-header #nav .menus_items > .menus_item:last-child,
html body #nav .menus_items > .menus_item:last-child,
#page-header #nav .menus_items > .menus_item:last-child,
#nav .menus_items > .menus_item:last-child {
  border-right: 0px solid transparent !important;
  border-right-width: 0 !important;
  border-right-style: none !important;
  border-right-color: transparent !important;
  padding-right: 12px !important;
}
/* 提升特异性,确保最后一个菜单项绝不显示竖直分隔线 */
html body #nav .menus_items > .menus_item:last-child {
  border-right: none !important;
}

/* 兜底移除伪元素/内部元素的分隔线/内容（保留 last-child 的左侧伪元素以显示分隔线） */
html body #nav .menus_items > .menus_item:last-child::after,
html body #nav .menus_items > .menus_item:last-child *:not([class*="fa"])::after,
html body #nav .menus_items > .menus_item:last-child *:not([class*="fa"])::before {
  border-right: none !important;
  content: none !important;
}

/* 恢复最后一项图标显示（FontAwesome 的 ::before 绘制图标） */
html body #nav .menus_items > .menus_item:last-child [class*="fa"]::before {
  display: inline-block !important;
  color: inherit !important;
}

/* 进一步兜底:仅清理最后一项可能遗留的右侧分隔或伪元素背景 */
html body #nav .menus_items > .menus_item:last-child {
  border-right: none !important;
  padding-right: 12px !important;
  /* 移除所有边框 */
  border-left: none !important;
}
html body #nav .menus_items > .menus_item:last-child *:not([class*="fa"]) {
  background-image: none !important;
}

/* 终极兜底：仅清理菜单项的伪元素或背景可能留下的线条（不要影响正常边框）
   但要排除 FontAwesome 等通过 ::before 注入图标的元素 */
html body #nav .menus_items > .menus_item::before,
html body #nav .menus_items > .menus_item::after,
html body #nav .menus_items > .menus_item *:not([class*="fa"])::before,
html body #nav .menus_items > .menus_item *:not([class*="fa"])::after {
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  content: none !important;
}

/* 如果仍然存在，请在浏览器里选中那条竖线并运行：
   getComputedStyle($0) 并把结果粘贴给我，我会精准定位来源 */

/* 终极兜底修复:彻底移除最后一项及其所有子元素的右侧视觉线条 */
html body #nav .menus_items > .menus_item:last-child,
html body #nav .menus_items > .menus_item:last-child *,
html body #nav .menus_items > .menus_item:last-child a,
html body #nav .menus_items > .menus_item:last-child::before,
html body #nav .menus_items > .menus_item:last-child::after,
html body #nav .menus_items > .menus_item:last-child *::before,
html body #nav .menus_items > .menus_item:last-child *::after {
  border-right: none !important;
  border-right-width: 0 !important;
  border-right-style: none !important;
  border-right-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  outline-width: 0 !important;
  background-image: none !important;
}

/* 清除最后一项所有非图标伪元素的内容 */
html body #nav .menus_items > .menus_item:last-child *:not([class*="fa"])::before,
html body #nav .menus_items > .menus_item:last-child *:not([class*="fa"])::after {
  content: none !important;
  display: none !important;
}

/* 保留 FontAwesome 图标显示 */
html body #nav .menus_items > .menus_item:last-child [class*="fa"]::before,
html body #nav .menus_items > .menus_item:last-child [class*="fa"]::after {
  display: inline-block !important;
  color: inherit !important;
}

/* 只给容器做布局，不显示分隔符 */
html body #page-header #nav #menus > .menus_items,
html body #nav #menus > .menus_items,
#nav #menus > .menus_items,
#nav .menus_items {
  padding: 0 !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 折叠按钮独立布局 - 默认隐藏 */
#nav #toggle-menu {
  display: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 100 !important;
}

/* 当视口宽度不足时，隐藏菜单显示折叠按钮 */
/* JavaScript会根据实际宽度动态添加 nav-responsive-hide 类 */
#nav.nav-responsive-hide #menus,
html body #page-header #nav.nav-responsive-hide #menus,
html body #page-header nav#nav.nav-responsive-hide div#menus,
.page-header #nav.nav-responsive-hide #menus {
  display: flex !important;
  position: absolute !important;
  right: 36px !important; /* 与 #nav 的右侧 padding 对齐 */
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  padding: 0 !important;
}

/* nav-responsive-hide 时仅隐藏菜单项本身 */
#nav.nav-responsive-hide .menus_items,
html body #page-header #nav.nav-responsive-hide .menus_items,
html body #page-header nav#nav.nav-responsive-hide .menus_items,
.page-header #nav.nav-responsive-hide .menus_items {
  display: none !important;
}

/* 给 nav 添加 nav-responsive-hide 类时显示折叠按钮 */
#nav.nav-responsive-hide #toggle-menu,
html body #page-header #nav.nav-responsive-hide #toggle-menu,
html body #page-header nav#nav.nav-responsive-hide div#toggle-menu,
.page-header #nav.nav-responsive-hide #toggle-menu,
header.not-top-img.fixed#page-header nav#nav.nav-responsive-hide div#toggle-menu {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 兜底：如果主题脚本错误地给 #nav 加了 hide-menu，但我们并未折叠，则强制显示菜单、隐藏折叠按钮 */
#nav.hide-menu:not(.nav-responsive-hide) .menus_items {
  display: flex !important;
}

#nav.hide-menu:not(.nav-responsive-hide) #toggle-menu {
  display: none !important;
}



/* 强制覆盖：提高优先级，确保导航布局（处理可能的 JS 或主题覆盖） */
html body #page-header {
  width: 100% !important;
}

html body #nav,
#page-header #nav,
.page-header #nav {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding-left: 0 !important;
  background-color: #f0f0f0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

html body #nav #blog-info,
#page-header #nav #blog-info,
.page-header #nav #blog-info {
  display: flex !important;
  align-items: center !important;
  margin-right: 20px !important;
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  position: relative !important;
  z-index: 10 !important;
}

html body #nav .menus_items,
html body #nav #menus {
  margin: 0 auto !important;
  justify-content: center !important;
}

/* 如果仍被其他样式覆盖，请在浏览器开发者工具中查看 #nav 的 matched CSS */

/* 网站标题和图标之间的间距 */
#nav .site-icon {
  margin-left: 10px !important;
  margin-right: 0 !important;
  font-size: 1.4em !important; /* 增大图标尺寸 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--nav-title-color, var(--font-color)) !important;
  transition: color .12s ease, transform .12s ease;
}

#nav .nav-site-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 1.15em !important; /* 字体稍大 */
  font-weight: 600 !important;
  color: var(--nav-title-color, var(--font-color)) !important;
  text-decoration: none !important;
  transition: color .12s ease, transform .12s ease;
}

/* 保证站点名继承父元素颜色 */
#nav .nav-site-title .site-name { color: inherit !important; }

/* 悬停/聚焦时变为主题蓝色 */
#nav .nav-site-title:hover,
#nav .nav-site-title:focus {
  color: #49b1f5 !important;
  cursor: pointer;
}
#nav .nav-site-title:hover .site-icon,
#nav .nav-site-title:focus .site-icon {
  color: #49b1f5 !important;
}

/* 子菜单样式 */
#nav .menus_item {
  position: relative !important;
}

#nav .menus_item_child {
  position: absolute !important;
  top: calc(100% + 0px) !important; /* 缩小垂直间距，避免无法点击 */
  left: 16px !important;
  display: none !important;
  flex-direction: column !important;
  width: max-content !important;
  min-width: calc(100% - 32px) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.9em !important;
  list-style: none !important;
  background-color: var(--menu-dropdown-bg) !important;
  border: 1px solid var(--menu-dropdown-border) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: var(--menu-dropdown-shadow) !important;
  z-index: 1000 !important;
  overflow: visible !important;
  min-width: max-content !important; /* 确保子菜单至少能包裹内容 */
  contain: none !important; /* 避免 containment 导致子菜单被裁剪 */
}

#nav .menus_item:hover .menus_item_child {
  display: flex !important;
}

/* 仅针对第一个菜单项的子菜单适配主题色 */
#nav .menus_items > .menus_item:first-child .menus_item_child {
  background-color: var(--menu-dropdown-bg) !important;
  border-color: var(--menu-dropdown-border) !important;
  box-shadow: var(--menu-dropdown-shadow) !important;
  color: var(--font-color) !important;
}

/* 浅色模式：主菜单悬停字体变为主题蓝 */
[data-theme='light'] #nav .menus_items > .menus_item > .site-page:hover,
[data-theme='light'] #nav .menus_items > .menus_item > a.site-page:hover {
  color: #49b1f5 !important;
}

/* 平滑过渡（可选） */
#nav .menus_items > .menus_item > .site-page,
#nav .menus_items > .menus_item > a.site-page {
  transition: color .12s ease;
}

/* 使一级子菜单宽度与父菜单项一致（左对齐，包含 padding） */
#nav .menus_items > .menus_item > .menus_item_child {
  left: 0 !important;
  width: 100% !important;
  min-width: auto !important;
  box-sizing: border-box !important;
}

/* 对于第二级及以上子菜单保持原有行为 */
#nav .menus_item > .menus_item_child .menus_item_child {
  left: 100% !important;
  top: 0 !important;
  width: max-content !important;
}

#nav .menus_item_child li {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

html body #nav .menus_item_child li:hover {
  border-radius: 0 !important;
}

html body #nav .menus_item_child li::before,
html body #nav .menus_item_child li::after,
html body #nav .menus_item_child li:hover::before,
html body #nav .menus_item_child li:hover::after {
  border-radius: 0 !important;
  background: none !important;
  content: none !important;
}

html body #nav .menus_item_child a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 5px 12px !important;
  font-size: 0.85em !important;
  line-height: 1.4 !important;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
}

/* 最后一项在 hover 时应用底部倒角并确保被裁剪显示 */
html body #nav .menus_item_child li:last-child {
  overflow: hidden !important;
  border-radius: 0 0 8px 8px !important;
}
html body #nav .menus_item_child li:last-child a:hover {
  border-radius: 0 0 8px 8px !important;
}


/* 子菜单悬浮背景与直角 */
html body #nav .menus_item_child a:hover {
  background-color: var(--menu-dropdown-hover) !important;
  border-radius: 0 !important;
}

/* 最后一项悬浮时，底部也要有倒角以与整体背景一致 */
html body #nav .menus_item_child li:last-child a:hover {
  border-radius: 0 0 8px 8px !important;
}

/* 移除伪元素的圆角与背景，避免主题默认样式造成顶部圆角 */
html body #nav .menus_item_child a::before,
html body #nav .menus_item_child a:hover::before,
html body #nav .menus_item_child a::after,
html body #nav .menus_item_child a:hover::after {
  border-radius: 0 !important;
  background: none !important;
}

/* 强制移除首项的顶部圆角（常规与悬浮态） */
html body #nav .menus_item_child li:first-child a,
html body #nav .menus_item_child li:first-child a:hover {
  border-radius: 0 !important;
}

/* 进一步提升特异性：覆盖带 class 的首项链接及其伪元素 */
html body #nav .menus_item_child li:first-child a.site-page,
html body #nav .menus_item_child li:first-child a.site-page:hover,
html body #nav .menus_item_child li:first-child a.child,
html body #nav .menus_item_child li:first-child a.child:hover,
html body #nav .menus_item_child li:first-child a.site-page.child,
html body #nav .menus_item_child li:first-child a.site-page.child:hover {
  border-radius: 0 !important;
}

html body #nav .menus_item_child li:first-child a::before,
html body #nav .menus_item_child li:first-child a:hover::before,
html body #nav .menus_item_child li:first-child a::after,
html body #nav .menus_item_child li:first-child a:hover::after,
html body #nav .menus_item_child li:first-child a.site-page::before,
html body #nav .menus_item_child li:first-child a.site-page:hover::before,
html body #nav .menus_item_child li:first-child a.child::before,
html body #nav .menus_item_child li:first-child a.child:hover::before,
html body #nav .menus_item_child li:first-child a.site-page.child::before,
html body #nav .menus_item_child li:first-child a.site-page.child:hover::before,
html body #nav .menus_item_child li:first-child a.site-page::after,
html body #nav .menus_item_child li:first-child a.site-page:hover::after,
html body #nav .menus_item_child li:first-child a.child::after,
html body #nav .menus_item_child li:first-child a.child:hover::after,
html body #nav .menus_item_child li:first-child a.site-page.child::after,
html body #nav .menus_item_child li:first-child a.site-page.child:hover::after {
  border-radius: 0 !important;
  background: none !important;
}

/* 暗色模式下的导航栏背景 */
[data-theme='dark'] #nav,
[data-theme='dark'] html body #nav,
[data-theme='dark'] #page-header #nav,
[data-theme='dark'] .page-header #nav {
  background-color: #1f1f1f !important;
}

[data-theme='dark'] #nav .menus_items > .menus_item,
[data-theme='dark'] #nav #menus > * {
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 隐藏右下角设置按钮 */
#rightside-config {
  display: none !important;
}

/* 文章中的图片左对齐 */
#article-container img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 如果图片在段落中，也保持左对齐 */
#article-container p img {
  display: block !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 调整文章内容行间距 */
#article-container {
  line-height: 1.5 !important;
}

/* qt_basic 列表页卡片：边框/背景自适应浅色/深色 */
html[data-theme] #article-container .qt-card {
  background: var(--card-bg) !important;
  border-color: var(--hr-border) !important;
}

html[data-theme] #article-container .qt-card:hover {
  border-color: var(--text-highlight-color) !important;
}

html[data-theme] #article-container .qt-card a:hover {
  background: var(--text-bg-hover) !important;
}

/* 浅色模式：统一偏灰色的边框与背景（覆盖默认） */
html[data-theme='light'] #article-container .qt-card {
  background: #f5f5f5 !important; /* 浅灰背景 */
  border-color: #d0d0d0 !important; /* 灰色边框 */
}

html[data-theme='light'] #article-container .qt-card:hover {
  border-color: #bfbfbf !important; /* 悬浮时略深的灰色边框 */
}

html[data-theme='light'] #article-container .qt-card a:hover {
  background: #d0d0d0 !important; /* 悬浮时的浅灰背景 */
}
/* 调整段落行间距 */
#article-container p {
  line-height: 1.5 !important;
}

/* 隐藏目录中的编号 */
#card-toc .toc-content ol {
  list-style: none !important;
  counter-reset: none !important;
}

#card-toc .toc-content li {
  list-style-type: none !important;
}

#card-toc .toc-content li::before {
  content: none !important;
}

#card-toc .toc-number {
  display: none !important;
}

/* 首页文章卡片：保留主题默认阴影，并增加边框线 */
html[data-theme] #recent-posts .recent-post-item {
  border: 1px solid var(--hr-border) !important;
  background-clip: padding-box !important;
}

/* 悬浮时覆盖 border（放在 id 基础规则之后以确保优先级/顺序生效） */
html[data-theme='light'] #recent-posts .recent-post-item:hover,
html[data-theme='light'] #recent-posts .recent-post-item:has(:focus-visible) {
  border: 1px solid rgb(4, 122, 200) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

html[data-theme='dark'] #recent-posts .recent-post-item:hover,
html[data-theme='dark'] #recent-posts .recent-post-item:has(:focus-visible) {
  border: 1px solid rgb(150,150,150) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

#recent-posts .recent-post-item:hover,
#recent-posts .recent-post-item:has(:focus-visible) {
  border: 1px solid rgb(124,176,210) !important;
}
/* 首页文章卡片间距优化：确保加载前就有间距，且能自适应缩放 */
#recent-posts .recent-post-item {
  /* 使用 calc 减去间距，确保两列布局下有 20px 的横向间距 */
  width: calc(50% - 10px) !important;
  margin-right: 20px !important;
  /* 每行第偶数个卡片不需要右边距 */
  margin-bottom: 20px !important;
  /* 确保卡片能够响应式缩放 */
  box-sizing: border-box !important;
}

/* 移除每行最后一个卡片的右边距（使用伪类选择器） */
#recent-posts .recent-post-item:nth-child(2n) {
  margin-right: 0 !important;
}

/* Masonry 列数类，支持 masonry-cols-2 / masonry-cols-3 / masonry-cols-4 */
/* responsive behavior: when columns set to N, shrink columns as viewport narrows */

/* 2 列：自动降为 1 列在小屏 */
#recent-posts.masonry.masonry-cols-2 .recent-post-item {
  width: calc(50% - 10px) !important;
  margin-right: 20px !important;
}
#recent-posts.masonry.masonry-cols-2 .recent-post-item:nth-child(2n) {
  margin-right: 0 !important;
}
@media screen and (max-width: 599px) {
  #recent-posts.masonry.masonry-cols-2 .recent-post-item {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* 3 列：默认 3 列 → 中等宽度降为 2 列 → 小屏降为 1 列 */
#recent-posts.masonry.masonry-cols-3 .recent-post-item {
  width: calc(100% / 3 - 14px) !important;
  margin-right: 20px !important;
}
#recent-posts.masonry.masonry-cols-3 .recent-post-item:nth-child(3n) {
  margin-right: 0 !important;
}
/* tablet / medium: 2 列 */
@media screen and (max-width: 1199px) {
  #recent-posts.masonry.masonry-cols-3 .recent-post-item {
    width: calc(50% - 10px) !important;
  }
  #recent-posts.masonry.masonry-cols-3 .recent-post-item:nth-child(2n) {
    margin-right: 0 !important;
  }
}
/* small: 1 列 */
@media screen and (max-width: 599px) {
  #recent-posts.masonry.masonry-cols-3 .recent-post-item {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* 4 列：默认 4 → 大屏降为 4, 中大宽度 3 → 中等 2 → 小屏 1 */
#recent-posts.masonry.masonry-cols-4 .recent-post-item {
  width: calc(25% - 15px) !important;
  margin-right: 20px !important;
}
#recent-posts.masonry.masonry-cols-4 .recent-post-item:nth-child(4n) {
  margin-right: 0 !important;
}
/* >=1200 and <1600 show 3 columns */
@media screen and (max-width: 1599px) {
  #recent-posts.masonry.masonry-cols-4 .recent-post-item {
    width: calc(100% / 3 - 14px) !important;
  }
  #recent-posts.masonry.masonry-cols-4 .recent-post-item:nth-child(3n) {
    margin-right: 0 !important;
  }
}
/* mid: 2 columns */
@media screen and (max-width: 1199px) {
  #recent-posts.masonry.masonry-cols-4 .recent-post-item {
    width: calc(50% - 10px) !important;
  }
  #recent-posts.masonry.masonry-cols-4 .recent-post-item:nth-child(2n) {
    margin-right: 0 !important;
  }
}
/* small: 1 column */
@media screen and (max-width: 599px) {
  #recent-posts.masonry.masonry-cols-4 .recent-post-item {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* 超大屏幕（>=2000px）三列布局 */
@media screen and (min-width: 2000px) {
  #recent-posts .recent-post-item {
    width: calc(33.333% - 14px) !important;
    margin-right: 20px !important;
  }
  
  /* 每行第三个卡片不需要右边距 */
  #recent-posts .recent-post-item:nth-child(3n) {
    margin-right: 0 !important;
  }
  
  /* 重置两列布局的规则 */
  #recent-posts .recent-post-item:nth-child(2n) {
    margin-right: 20px !important;
  }
  
  /* 确保第三个的倍数没有右边距 */
  #recent-posts .recent-post-item:nth-child(3n) {
    margin-right: 0 !important;
  }
}

/* 小屏幕（<=768px）单列布局 */
@media screen and (max-width: 768px) {
  #recent-posts .recent-post-item {
    width: 100% !important;
    margin-right: 0 !important;
  }
}/* 浅色模式主体背景色 */
[data-theme='light'] #body-wrap {
  background: #F7F9FE;
}

/* 浅色模式导航栏背景色 */
[data-theme='light'] #page-header.nav-fixed #nav {
  background: rgba(247, 249, 254, 0.9) !important;
}

[data-theme='light'] #page-header.not-top-img #nav {
  background: #F7F9FE !important;
}

/* 深色模式侧边栏小工具卡片边框 */
html[data-theme='dark'] #aside-content .card-widget.card-info,
html[data-theme='dark'] #aside-content .card-widget#card-toc,
html[data-theme='dark'] #aside-content .card-widget.card-announcement,
html[data-theme='dark'] #aside-content .card-widget.card-recent-post,
html[data-theme='dark'] #aside-content .card-widget.card-newest-comments,
html[data-theme='dark'] #aside-content .card-widget.card-categories,
html[data-theme='dark'] #aside-content .card-widget.card-tags,
html[data-theme='dark'] #aside-content .card-widget.card-archives,
html[data-theme='dark'] #aside-content .card-widget.card-post-series,
html[data-theme='dark'] #aside-content .card-widget.card-webinfo {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 首页文章卡片自定义信息样式 */
#recent-posts .recent-post-item .custom-lectures {
  margin-right: 0 !important;
}

#recent-posts .recent-post-item .custom-lectures i,
#recent-posts .recent-post-item .custom-slogan i {
  margin-right: 4px !important;
}

#recent-posts .recent-post-item .custom-lectures .lecture-number {
  margin: 0 3px !important;
  font-weight: 600 !important;
}

#recent-posts .recent-post-item .article-meta-separator {
  margin: 0 18px !important;
}

#recent-posts .recent-post-item .custom-slogan {
  margin-left: 0 !important;
}

/* 新增：文章卡片底部操作按钮 */
#recent-posts .recent-post-item .card-actions {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap; /* 强制单行显示 */
  align-items: center;
  overflow-x: auto; /* 在极窄屏允许横向滚动以避免裁剪 */
  -webkit-overflow-scrolling: touch;
} 

#recent-posts .recent-post-item .card-actions a {
  flex: 0 1 auto; /* 允许收缩，但不扩展为整行 */
  min-width: 80px; /* 减小最小宽度，便于窄屏保持一行 */
  padding: 6px 10px; /* 统一内边距 */
  border-radius: 7px;
  border: none;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-size: 1.05em; /* 适度减小字体以便在窄屏显示 */
  font-weight: 700; /* 加粗 */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  line-height: 1.8;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  white-space: nowrap; /* 防止按钮内文本换行 */
} 

#recent-posts .recent-post-item .card-actions a::before {
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  content: '';
  transition: left .5s cubic-bezier(.4, 0, .2, 1);
}

#recent-posts .recent-post-item .card-actions a:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  text-decoration: none;
  transform: translateY(-1px) scale(1.02);
  background-color: #FF7242 !important; /* 和 card_author 悬浮色一致 */
  color: var(--btn-color);
  border-color: #b0b0b0 !important;
}

/* 深色模式：覆盖悬浮背景色为 #787878 */
html[data-theme='dark'] #recent-posts .recent-post-item .card-actions a:hover {
  background-color: #787878 !important;
}

/* 浅色模式：针对普通卡片（非封面覆盖）覆盖按钮样式 */
html[data-theme='light'] #recent-posts .recent-post-item .recent-post-info:not([style]) .card-actions a {
  background-color: #f5f5f5 !important; /* 正常背景 */
  border: 1px solid #d0d0d0 !important; /* 边框颜色 */
  color: var(--font-color) !important; /* 使用主题正文颜色以保证可读性 */
}
html[data-theme='light'] #recent-posts .recent-post-item .recent-post-info:not([style]) .card-actions a:hover {
  background-color: #d0d0d0 !important; /* 悬浮背景 */
  color: var(--font-color) !important;
  border-color: #b0b0b0 !important;
}

#recent-posts .recent-post-item .card-actions a:hover::before {
  left: 100%;
}

#recent-posts .recent-post-item .card-actions a:active {
  transition-duration: .1s;
  transform: translateY(0) scale(.98);
}

#recent-posts .recent-post-item .card-actions a > * {
  position: relative;
  z-index: 2;
}

#recent-posts .recent-post-item .card-actions a i {
  display: inline-block;
  vertical-align: middle;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

#recent-posts .recent-post-item .card-actions a:hover i {
  animation: buttonIconBounce .6s ease-in-out;
}

#recent-posts .recent-post-item .card-actions a:hover {
  transform: translateY(-1px);
  background: var(--btn-bg);
  color: var(--btn-color);
  border-color: var(--btn-hover-color);
}

/* 覆写：当卡片为封面覆盖（白字）时，让按钮在暗背景下可见 */
#recent-posts .recent-post-item .recent-post-info[style] .card-actions a {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #fff !important;
}

/* 在移动端按钮占满整行 */
@media screen and (max-width: 768px) {
  /* 减小 recent-post-info 底部内边距以节省垂直空间 */
  #recent-posts .recent-post-item > .recent-post-info {
    padding-bottom: 18px !important;
  }

  #recent-posts .recent-post-item .card-actions {
    gap: 10px;
  }
  #recent-posts .recent-post-item .card-actions a {
    flex: 0 1 auto; /* 仍允许收缩，避免换行 */
    min-width: 72px; /* 更小的最小宽度以适配狭窄屏幕 */
    padding: 6px 8px; /* 移动端稍微减小内边距 */
    font-size: 0.95em; /* 移动端略微回落 */
    font-weight: 700;
  }
}

/* --------------------------- */
/* Marquee (跑马灯) 样式 */
/* --------------------------- */
.custom-marquee {
  width: 100%;
  background: var(--marquee-bg, transparent);
  color: var(--marquee-color, var(--text));
  overflow: hidden;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 0.95rem;
}

.custom-marquee .marquee-container {
  position: relative;
}

.custom-marquee .marquee-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation-name: marquee-linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 15s; /* will be overridden by JS */
}

.custom-marquee .marquee-track .marquee-text {
  display: inline-block;
  padding-right: 2rem;
}

@keyframes marquee-linear {
  /* 使用 --marquee-start/--marquee-end（像素值），保证从容器右侧进入并完全移出到左侧 */
  from { transform: translateX(var(--marquee-start, 100%)); }
  to { transform: translateX(var(--marquee-end, -100%)); }
}

@media (max-width: 768px) {
  .custom-marquee { font-size: 0.9rem; padding: 6px 10px; }
}