/*
 * Custom CSS for Nexus Theme - Anime Style Refined
 * Focus: Clean White Background, Detailed Cards, Micro-interactions
 */

:root {
  --anime-primary: #ffb7c5; /* 樱花粉 */
  --anime-hover-shadow: rgba(255, 183, 197, 0.4); /* 悬停时的粉色阴影 */
  --anime-card-border: rgba(0, 0, 0, 0.04);
  --anime-radius: 16px; 
}

/* 全局字体优化 */
body {
  font-family: 'Nunito', 'Quicksand', 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  color: #4a4a4a;
  background-color: #ffffff !important; /* 回归纯白背景 */
}

/* =========================================
   首页卡片精修 (Refined Cards)
   ========================================= */

/* 列表项容器重置 */
section.mx-auto ul.space-y-7 > li {
  position: relative;
  background: #ffffff;
  padding: 24px;
  border-radius: var(--anime-radius);
  /* 默认状态：轻微的阴影和细边框 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--anime-card-border);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 有弹性的过渡 */
  overflow: hidden; /* 保证内部元素不溢出圆角 */
  margin-bottom: 24px !important;
}

/* 悬停状态：上浮 + 扩散的彩色阴影 */
section.mx-auto ul.space-y-7 > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--anime-hover-shadow), 
              0 4px 8px rgba(0,0,0,0.02);
  border-color: var(--anime-primary);
}

/* 图片容器优化 */
section.mx-auto ul.space-y-7 > li .aspect-h-9 {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 图片悬停放大特效 */
section.mx-auto ul.space-y-7 > li img {
  transition: transform 0.5s ease;
}
section.mx-auto ul.space-y-7 > li:hover img {
  transform: scale(1.05); /* 轻微放大 */
}

/* 标题样式 */
section.mx-auto ul.space-y-7 > li h2 {
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
  transition: color 0.3s;
}

/* 标题悬停变色 */
section.mx-auto ul.space-y-7 > li:hover h2 {
  color: #ff758c;
}

/* 摘要文字颜色 */
section.mx-auto ul.space-y-7 > li .text-zinc-600 {
  color: #777;
  line-height: 1.6;
}

/* 底部元信息（作者、时间） */
section.mx-auto ul.space-y-7 > li .mt-3 {
  margin-top: 16px;
  opacity: 0.8;
  transition: opacity 0.3s;
}
section.mx-auto ul.space-y-7 > li:hover .mt-3 {
  opacity: 1;
}

/* =========================================
   其他细节优化
   ========================================= */

/* 搜索框/按钮 */
nexus-search-widget input, 
button, 
.btn {
  border-radius: 99px !important; /* 胶囊圆角 */
}

/* 右上角“全部”按钮优化 */
a[href="/archives"] {
  border-radius: 20px !important;
  padding: 6px 16px !important;
  background-color: #f5f5f5;
  transition: all 0.2s;
}
a[href="/archives"]:hover {
  background-color: var(--anime-primary);
  color: white !important;
}

/* =========================================
   首页封面 (Hero) 深度优化
   ========================================= */

/* 1. 容器改造：从全屏变为悬浮大圆角卡片 */
section.relative.flex.h-96 {
  margin: 24px auto 40px auto;
  /* 与下方内容区域 (max-w-7xl = 80rem = 1280px) 保持严格一致 */
  max-width: 80rem; 
  width: calc(100% - 32px); /* 移动端留出左右间距 */
  border-radius: 24px;
  overflow: hidden; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
}

/* 强制对齐修正：下方最新文章区域 */
section.mx-auto.max-w-7xl {
  max-width: 80rem !important;
  width: calc(100% - 32px) !important; /* 移动端保持一致 */
  padding-left: 0 !important; /* 移除默认内边距，实现严格对齐 */
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* 移动端特殊适配 */
@media (min-width: 1280px) {
  section.relative.flex.h-96,
  section.mx-auto.max-w-7xl {
    width: 100% !important; /*在大屏下回退到 max-width 限制 */
  }
}

/* 2. 背景图优化：视差滚动效果 */
section.relative.flex.h-96 > div.absolute.inset-0.bg-cover {
  background-attachment: fixed !important; /* 核心：视差效果 */
  background-position: center top !important;
  filter: brightness(0.85) !important; /* 稍微调亮一点，不要太暗 */
  transform: scale(1.05); /* 稍微放大防止白边 */
}

/* 3. 标题美化 */
section.relative.flex.h-96 h2 {
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 文字浮起感 */
  font-size: 2.5rem !important; /* 更大气的标题 */
  margin-bottom: 1rem;
}

/* =========================================

   沉浸式阅读模式 (Immersive Reading) - 修正版

   1. 移除侧边栏

   2. 内容全宽左对齐

   3. 字体精致化 (Smaller Fonts)

   ========================================= */



/* 1. 彻底隐藏右侧 TOC 侧边栏 */

.sticky.top-28 {

  display: none !important;

}



/* 2. 让文章主体区域占满宽度 */

#print-node {

  flex: 1 1 100% !important; 

  width: 100% !important;

  max-width: 100% !important;

}



/* 3. 正文排版修正：全宽 + 左对齐 + 字体优化 */

.prose-content {

  margin-left: 0 !important; /* 恢复左对齐 */

  margin-right: 0 !important;

  max-width: 100% !important; /* 填满容器，与标题对齐 */

  

  /* 字体优化：技术文档经典配置 */

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;

  font-size: 15px !important; 

  line-height: 1.75 !important; 

  color: #374151; /* 经典的深灰色，不刺眼 */

}



/* 4. 标题区域恢复左对齐 */

.flex.space-x-10 {

  justify-content: flex-start !important;

}



/* =========================================

   Markdown 深度美化 (Technical Blog Style)

   ========================================= */



/* --- 标题 (Headings) --- */

.prose-content h1,

.prose-content h2,

.prose-content h3,

.prose-content h4 {

  color: #111827;

  font-weight: 700;

  margin-top: 2em !important;

  margin-bottom: 1em !important;

  letter-spacing: -0.025em;

}



/* H1 & H2: 增加底部线条，增强文档结构感 */

.prose-content h1 {

  font-size: 1.75em !important;

  padding-bottom: 0.3em;

  border-bottom: 1px solid #e5e7eb;

}

.prose-content h2 {

  font-size: 1.4em !important;

  padding-bottom: 0.3em;

  border-bottom: 1px solid #e5e7eb;

}

.prose-content h3 {

  font-size: 1.15em !important;

  margin-top: 1.5em !important;

}



/* --- 代码块 (Code Blocks) - Mac 窗口风格 --- */

.prose-content pre {

  background-color: #282c34 !important; /* 经典 One Dark 背景 */

  border-radius: 8px !important;

  padding: 12px 16px !important; /* 顶部留出 header 空间 */

  padding-top: 36px !important; /* 为红绿灯留位 */

  position: relative;

  box-shadow: 0 4px 6px rgba(0,0,0,0.05);

  margin: 1.5em 0 !important;

  border: 1px solid rgba(0,0,0,0.1);

}



/* Mac 风格红黄绿小点 (伪元素) */

.prose-content pre::before {

  content: "";

  position: absolute;

  top: 12px;

  left: 14px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background-color: #ff5f56; /* 红 */

  box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f; /* 黄, 绿 */

}



.prose-content pre code {

  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;

  font-size: 0.9em !important;

  line-height: 1.5 !important;

  background-color: transparent !important;

  color: #abb2bf !important; /* 浅灰文字 */

  padding: 0 !important;

  border-radius: 0 !important;

}



/* --- 行内代码 (Inline Code) - Notion 风格 --- */

.prose-content :not(pre) > code {

  background-color: rgba(255, 117, 140, 0.1) !important; /* 极淡的粉色背景 */

  color: #d63384 !important; /* 玫红色文字 */

  font-family: 'JetBrains Mono', Consolas, monospace !important;

  padding: 2px 5px !important;

  border-radius: 4px;

  font-size: 0.85em !important;

  font-weight: 500;

}



/* --- 引用块 (Blockquote) - 提示框风格 --- */

.prose-content blockquote {

  border-left: 4px solid #ffb7c5 !important; /* 樱花粉边框 */

  background-color: #fff9fa; /* 极淡的粉白背景 */

  padding: 12px 20px !important;

  margin: 1.5em 0 !important;

  border-radius: 0 8px 8px 0;

  color: #555;

  font-style: normal !important; /* 不用斜体，保持易读 */

}

.prose-content blockquote p {

  margin: 0 !important; /* 移除内部段落间距 */

}



/* --- 列表 (Lists) --- */

.prose-content ul {

  list-style: none !important;

  padding-left: 1.5em !important;

}

.prose-content ul li {

  position: relative;

  margin-bottom: 0.5em;

}

.prose-content ul li::before {

  content: "•";

  color: #ffb7c5; /* 粉色圆点 */

  font-weight: bold;

  display: inline-block;

  width: 1em;

  margin-left: -1em;

}



.prose-content ol {

  padding-left: 1.5em !important;

}

.prose-content ol li::marker {

  color: #ffb7c5; /* 粉色数字 */

  font-weight: 600;

}



/* --- 链接 (Links) --- */

.prose-content a {

  color: #3b82f6; /* 科技蓝 */

  text-decoration: none !important;

  border-bottom: 1px solid transparent;

  transition: border-color 0.2s;

}

.prose-content a:hover {

  color: #2563eb;

  border-bottom-color: #2563eb; /* 悬停出现下划线 */

}



/* --- 表格 (Tables) --- */

.prose-content table {

  width: 100%;

  border-collapse: collapse;

  margin: 1.5em 0;

  font-size: 0.9em;

  border: 1px solid #e5e7eb;

  border-radius: 8px;

  overflow: hidden; /* 圆角 */

}

.prose-content thead th {

  background-color: #f9fafb;

  font-weight: 600;

  text-align: left;

  padding: 10px 16px;

  border-bottom: 2px solid #e5e7eb;

}

.prose-content tbody td {

  padding: 10px 16px;

  border-bottom: 1px solid #e5e7eb;

}

.prose-content tbody tr:last-child td {

  border-bottom: none;

}

.prose-content tbody tr:nth-child(even) {

  background-color: #fcfcfc; /* 隔行变色 */

}



/* --- 图片 (Images) --- */

.prose-content img {

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  margin: 2em auto;

  display: block;

}



/* 6. 文章顶部的大标题 (Page Title) 也要调小一点 */

#print-node h1.text-2xl,

#print-node h1.md\:text-3xl {

  font-size: 1.8rem !important;

  font-weight: 700 !important;

}