/* ================================================================== */
/* iOS风格毛玻璃效果 - 修复版 */
/* ================================================================== */

/* Glass Effect Variables */
:root {
  /* 背景完全透明（无遮罩） */
  --glass-bg: rgba(255, 255, 255, 0);
  /* 半透明边框 */
  --glass-border: rgba(255, 255, 255, 0.2);
  /* 模糊程度 */
  --glass-blur: 28px;
  /* 阴影效果 */
  --glass-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
  --text-white: #ffffff;
  --text-shadow: 0 2px 15px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, 0);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

/* ================================================================== */
/* 删除页面顶部蓝色背景（header区域） */
/* ================================================================== */

#page-header,
#page-header.full_page,
#page-header.post-bg,
#page-header .page-title {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 删除导航栏背景 */
#nav,
#nav:not(.fixed) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 删除文章标题区域的背景 */
#post-info,
#post-info .post-title {
  background: transparent !important;
  background-color: transparent !important;
}

/* ================================================================== */
/* 删除文章页外层框 - 只保留最里面的article-container */
/* ================================================================== */

/* 文章页外层容器（排除标题和正文容器） */
.post,
#post,
.post header:not(.post-title),
#post > header:not(.post-title) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 特别保护文章标题不被覆盖 */
.post .post-title,
#post .post-title,
body.post .post-title,
#post-info .post-title {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px 30px !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* 只保留article-container的样式（文章页正文容器） */
#article-container {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 40px !important;
  margin-bottom: 30px !important;
}

/* ================================================================== */
/* 文章标题毛玻璃效果（只有文章详情页的标题加毛玻璃） */
/* ================================================================== */

/* 首页文章标题 - 保持原样，不加毛玻璃 */
#recent-posts .article-title,
.recent-post-item .article-title {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* 列表页文章标题 - 保持原样，不加毛玻璃 */
h2.article-title,
.article-sort-title {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 首页大标题 - 保持原样，不加毛玻璃 */
#site-title,
#site-info #site-title {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 只有文章详情页标题加毛玻璃 */
body.post #post-info .post-title,
body.post .post-title {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px 30px !important;
  margin-bottom: 20px !important;
}

/* ================================================================== */
/* 删除所有灰色半透明遮罩 - 最高优先级 */
/* ================================================================== */

/* 删除所有可能的overlay */
*::before,
*::after {
  background-color: transparent !important;
  background: transparent !important;
}

/* 删除特定的灰色遮罩元素 */
.overlay,
.mask,
#mask,
#page-header-overlay,
#page-header::before,
#page-header::after,
header::before,
header::after,
.full_page::before,
.full_page::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 删除主容器的所有背景色 */
#page,
.page,
#body-wrap,
body,
html {
  background: transparent !important;
  background-color: transparent !important;
  background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1920&h=1080&q=80') !important;
}

/* 移动端壁纸 - 深色银河 */
@media (max-width: 768px) {
  body,
  html {
    background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1080&h=1920&q=80') !important;
  }
}

/* 删除main容器的背景 */
main,
#content-inner,
#content-outer,
.layout {
  background: transparent !important;
  background-color: transparent !important;
}

/* 删除所有带rgba灰色值的背景 */
*[style*="rgba"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* 删除所有半透明遮罩 */
*[class*="overlay"],
*[class*="mask"],
*[class*="shade"] {
  display: none !important;
}

/* 删除header相关的遮罩 */
#article-cover,
.post-cover,
.cover-bg {
  display: none !important;
}

/* ================================================================== */
/* 强制删除Butterfly列表页默认白色背景 */
/* ================================================================== */

/* 删除页面灰色遮罩 */
body,
html,
#body-wrap,
.page,
#content-inner,
#category,
#archive,
#tag {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 删除所有可能的灰色背景和遮罩 */
#web_bg,
#web_bg::before,
#web_bg::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* ================================================================== */
/* 强制删除Butterfly列表页默认白色背景 */
/* ================================================================== */

/* 删除页面灰色遮罩 */
body,
html,
#body-wrap,
.page,
#content-inner,
#category,
#archive,
#tag {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 删除所有可能的灰色背景和遮罩 */
#web_bg,
#web_bg::before,
#web_bg::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* ================================================================== */
/* 强制壁纸覆盖 */
/* ================================================================== */

/* PC端横屏壁纸 */
html,
body,
#body-wrap,
body.post#body-wrap,
body.page#body-wrap {
  background: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=1920&h=1080&q=80') center/cover no-repeat fixed !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: transparent !important;
}

/* 手机端竖屏壁纸 - 使用伪元素实现固定背景 */
@media screen and (max-width: 768px) {
  html,
  body,
  #body-wrap,
  body.post#body-wrap,
  body.page#body-wrap {
    background: transparent !important;
    background-attachment: scroll !important;
  }

  body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&w=1080&h=1920&q=80') center top/cover no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    z-index: -100 !important;
    pointer-events: none !important;
  }
}

/* ================================================================== */
/* 全站字体改为白色（排除代码块） */
/* ================================================================== */

/* 排除代码块（保持原有高亮） - 最高级别保护 */
pre,
pre *,
.gutter,
.gutter *,
.code,
.code *,
figure.highlight,
figure.highlight *,
code-copy-btn,
.copy-button {
  background-color: inherit !important;
  border-color: inherit !important;
}

/* 保留代码高亮 - 不覆盖颜色 */
code,
code *,
span[class*="syn"],
span[class*="hljs-"],
.highlight *,
.highlight table,
.highlight table *,
.highlight tbody,
.highlight tbody *,
.highlight tr,
.highlight tr *,
.highlight td,
.highlight td * {
  background-color: inherit !important;
  border-color: inherit !important;
}

/* 保护行号和代码块容器 */
span.line,
td.code span,
td.gutter span {
  color: inherit !important;
}

/* 主要文字白色 - 排除代码块 */
body:not(.post) *,
body:not(.post) p,
body:not(.post) h1,
body:not(.post) h2,
body:not(.post) h3,
body:not(.post) h4,
body:not(.post) h5,
body:not(.post) h6,
body:not(.post) span,
body:not(.post) div {
  color: #ffffff !important;
}

/* 文章页正文白色，排除代码 */
body.post #article-container p,
body.post #article-container h1,
body.post #article-container h2,
body.post #article-container h3,
body.post #article-container h4,
body.post #article-container h5,
body.post #article-container h6,
body.post #article-container div:not(.highlight):not(.highlight-):not([class*="code-"]),
body.post #article-container span:not(pre span):not(.line span):not([class*="hljs-"]):not([class*="syn"]) {
  color: #ffffff !important;
}

/* 首页白色 */
#recent-posts,
#recent-posts *:not(pre):not(pre *):not(code):not(code *):not(.highlight):not(.highlight *),
.aside-content,
.aside-content *:not(pre):not(pre *):not(code):not(code *) {
  color: #ffffff !important;
}

/* 特定链接颜色 */
a,
a:link,
a:visited,
a:hover,
a:active {
  color: #87CEEB !important;
}

/* ================================================================== */
/* 侧边栏布局 - 超强制在右边，增加间距 */
/* ================================================================== */

#content-inner.layout {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  gap: 30px !important;
  padding: 0 20px !important;
}

/* 强制使用Flexbox布局来重新排列侧边栏 */
#content-inner.layout,
main.layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
}

#content-inner.layout > #recent-posts,
#content-inner.layout > .aside-content {
  display: block !important;
}

#content-inner.layout .aside-content {
  order: 2 !important;
  flex: 0 0 26% !important;
  max-width: 26% !important;
  min-width: 260px !important;
  float: none !important;
}

#content-inner.layout #recent-posts {
  order: 1 !important;
  flex: 0 0 74% !important;
  max-width: 74% !important;
  float: none !important;
}

/* 使用选择器强制 */
aside,
.aside-content,
*#aside-content,
*[id="aside-content"] {
  float: right !important;
  order: 2 !important;
}

main.layout,
#content-inner {
  display: flex !important;
  flex-direction: row-reverse !important;
}

/* 手机端清除间距 */
@media screen and (max-width: 768px) {
  #content-inner.layout {
    gap: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
  }

  #content-inner.layout .aside-content,
  #content-inner.layout #recent-posts {
    float: none !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
}

/* ================================================================== */
/* 导航栏毛玻璃效果 */
/* ================================================================== */

#nav.fixed {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ================================================================== */
/* 侧边栏所有卡片毛玻璃效果 */
/* ================================================================== */

.aside-content .card-widget {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
}

.aside-content .card-widget:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* ================================================================== */
/* 首页文章卡片毛玻璃效果 */
/* ================================================================== */

.recent-post-item {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 30px !important;
  margin-bottom: 25px !important;
  transition: all 0.3s ease !important;
}

.recent-post-item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-3px) !important;
}

.recent-post-info {
  background: transparent !important;
}

/* ================================================================== */
/* 文章详情页毛玻璃效果 */
/* ================================================================== */

/* 删除外层容器的所有背景和边框 */
.post,
#post,
body.post #body-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#article-container {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 40px !important;
  margin-bottom: 30px !important;
}

#article-container .post-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.post-copyright {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px !important;
  margin-top: 30px !important;
}

.relatedPosts {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 30px !important;
  margin-top: 30px !important;
}

#post-comment {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 40px !important;
  margin-top: 30px !important;
}

.pagination {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px !important;
  margin-top: 30px !important;
}

/* 列表页文章项毛玻璃 */
.article-sort-item {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
}

/* ================================================================== */
/* 底部栏毛玻璃效果（只最外层） */
/* ================================================================== */

#footer,
footer,
#footer,
#footer > *,
section#footer > * {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}

/* 底部栏内部元素不添加毛玻璃 */
#footer .footer-copyright,
#footer .footer-other,
#footer .footer_custom_text,
#footer p,
#footer span,
#footer a,
footer .footer-copyright,
footer .footer-other,
footer .footer_custom_text,
footer p,
footer span,
footer a {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ================================================================== */
/* 响应式调整 */
/* ================================================================== */

@media screen and (max-width: 768px) {
  :root {
    --glass-blur: 15px;
  }

  #article-container {
    padding: 20px !important;
  }

  .recent-post-item {
    padding: 20px !important;
  }

  .aside-content .card-widget {
    padding: 15px !important;
  }

  /* 手机端侧边栏恢复默认 */
  #content-inner.layout {
    flex-direction: column !important;
  }

  #content-inner.layout .aside-content,
  #content-inner.layout #recent-posts {
    flex: 1 !important;
    max-width: 100% !important;
  }
}

/* ================================================================== */
/* 确保内容可读性 */
/* ================================================================== */

.card-widget,
.recent-post-item,
#article-container,
.post-copyright,
.relatedPosts,
#post-comment {
  color: var(--font-color) !important;
}

.card-widget a,
.recent-post-item a,
#article-container a,
.post-copyright a {
  color: var(--text-highlight-color) !important;
}

/* ================================================================== */
/* 删除关于页面的 #page div */
/* ================================================================== */

body.page #page {
  display: none !important;
}