/* ============================================
   Particle Background and Theme Styles
   Aries Personality: Bold, Energetic, Passionate
   ============================================ */

/* CSS 变量定义 - 白羊座配色 */
:root {
  /* 亮色模式 - 充满活力的暖色调 */
  --light-bg: #ffffff;
  --light-text: #1a1a1a;
  --light-text-secondary: #4a4a4a;
  --light-border: #e0e0e0;
  --light-accent: #ff6b35;
  --light-accent-secondary: #f77f00;
  --light-gradient-start: #fff5ee;
  --light-gradient-end: #ffe0d9;
  
  /* 暗色模式 - 深沉却不失活力 */
  --dark-bg: #0f0f1e;
  --dark-text: #f5f5f5;
  --dark-text-secondary: #c0c0c0;
  --dark-border: #2a2a4a;
  --dark-accent: #ff6b35;
  --dark-accent-secondary: #f77f00;
  --dark-gradient-start: #1a1a2e;
  --dark-gradient-end: #16213e;
  
  /* 白羊座专属颜色 */
  --aries-red: #ff4444;
  --aries-orange: #ff7722;
  --aries-gold: #ffa500;
  --aries-light: #ffe6d5;
}

/* 亮色模式 */
html {
  background: transparent;
  color-scheme: light;
}

body {
  /* Flexbox layout for sticky footer */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  /* Spacing and appearance */
  margin: 0;
  padding: 60px 1.5rem 200px 1.5rem;  /* top padding for masthead, bottom for footer, sides for spacing */
  background: transparent;
  color: var(--light-text);
  transition: color 0.4s ease, background-color 0.4s ease;
  max-width: 100%;  /* 防止overflow */
  
  /* Font settings */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

/* 暗色模式 */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  color: var(--dark-text);
  background: transparent;
  padding: 60px 1.5rem 200px 1.5rem;
}

/* Canvas 背景 */
#particles-canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1000;
  pointer-events: none;
}

[data-theme="dark"] #particles-canvas {
  filter: invert(1) hue-rotate(180deg) brightness(0.9);
}

/* 固定导航栏 - 亮色模式 */
.masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 238, 0.95) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
}

/* 导航栏内容约束宽度 */
.masthead__inner-wrap {
  max-width: 1280px;
  width: 100%;
  box-sizing: border-box;
}

/* 暗色主题导航栏 */
[data-theme="dark"] .masthead {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.2);
}

/* 导航栏内部链接 */
.masthead a,
.masthead__menu-item {
  color: var(--light-text);
  transition: color 0.3s ease;
}

[data-theme="dark"] .masthead a,
[data-theme="dark"] .masthead__menu-item {
  color: var(--dark-text);
}

/* 导航栏链接悬停 */
.masthead a:hover {
  color: var(--aries-red);
  text-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

[data-theme="dark"] .masthead a:hover {
  color: var(--aries-orange);
  text-shadow: 0 0 10px rgba(255, 119, 34, 0.3);
}

/* 主题图标 */
#theme-icon {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--light-text);
}

[data-theme="dark"] #theme-icon {
  color: var(--dark-text);
  transform: rotate(-20deg);
}

/* 页面内容包装器 - 占据剩余空间 */
.page__wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  align-items: stretch;  /* 改为stretch以适应侧边栏竖向布局 */
  padding: 0 auto;  /* 内部不再padding，由body处理 */
}

/* 确保所有内容在粒子上方 */
main,
.page__content,
.page__footer,
.page {
  position: relative;
  z-index: 1;
}

/* 页脚样式 - 亮色模式 */
.page__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 238, 0.95) 100%);
  color: var(--light-text-secondary);
  border-top: 2px solid var(--aries-orange);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  z-index: 100;
  padding: 20px 1.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(255, 107, 53, 0.15);
  display: flex;
  justify-content: center;
}

/* 页脚内容约束宽度 */
.page__footer > * {
  max-width: 1280px;
  width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .page__footer {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
  color: var(--dark-text-secondary);
  border-top: 2px solid var(--aries-red);
  box-shadow: 0 -4px 20px rgba(255, 107, 53, 0.2);
}

/* 页脚链接 */
.page__footer a {
  color: var(--aries-orange);
  transition: all 0.3s ease;
  position: relative;
}

.page__footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--aries-red);
  transition: width 0.3s ease;
}

[data-theme="dark"] .page__footer a {
  color: var(--aries-gold);
}

[data-theme="dark"] .page__footer a::after {
  background: var(--aries-orange);
}

.page__footer a:hover::after {
  width: 100%;
}

/* 页面内容区域 */
.page__content {
  background: rgba(255, 255, 255, 0.7);
  transition: background-color 0.4s ease;
  border-radius: 12px;
  margin: 20px;
  padding: 30px;
  border-left: 4px solid var(--aries-orange);
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.1);
}

[data-theme="dark"] .page__content {
  background: rgba(26, 26, 46, 0.6);
  border-left-color: var(--aries-red);
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15);
}

/* 所有文本元素的颜色过渡 */
p, h1, h2, h3, h4, h5, h6 {
  transition: color 0.4s ease;
}

/* 链接样式 */
a {
  color: var(--aries-orange);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--aries-orange), var(--aries-red));
  transition: width 0.3s ease;
}

a:hover {
  color: var(--aries-red);
  opacity: 1;
}

a:hover::after {
  width: 100%;
}

[data-theme="dark"] a {
  color: var(--aries-gold);
}

[data-theme="dark"] a:hover {
  color: var(--aries-orange);
}

/* 代码块和高亮 */
code, pre {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--light-border);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  border-radius: 4px;
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--dark-border);
}

/* 表格样式 */
table {
  border-collapse: collapse;
  margin: 15px 0;
}

table th {
  background-color: var(--light-border);
  color: var(--light-text);
  transition: background-color 0.4s ease, color 0.4s ease;
}

[data-theme="dark"] table th {
  background-color: var(--dark-border);
  color: var(--dark-text);
}

table td {
  border-bottom: 1px solid var(--light-border);
  transition: border-color 0.4s ease;
}

[data-theme="dark"] table td {
  border-bottom-color: var(--dark-border);
}

/* 按钮和表单元素 */
button, input, textarea, select {
  background-color: var(--light-bg);
  color: var(--light-text);
  border: 1px solid var(--light-border);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

[data-theme="dark"] button,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

/* 块引用样式 */
blockquote {
  border-left: 4px solid var(--aries-orange);
  margin: 1em 0;
  padding: 0.5em 1em;
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.08) 0%, transparent 100%);
  transition: all 0.4s ease;
  border-radius: 4px;
}

blockquote:hover {
  border-left-color: var(--aries-red);
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.15) 0%, transparent 100%);
  padding-left: 1.5em;
}

[data-theme="dark"] blockquote {
  border-left-color: var(--aries-red);
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.12) 0%, transparent 100%);
}

[data-theme="dark"] blockquote:hover {
  border-left-color: var(--aries-orange);
  background: linear-gradient(90deg, rgba(255, 107, 53, 0.2) 0%, transparent 100%);
}

/* 主题切换按钮样式 */
.theme-toggle-btn {
  position: fixed;
  top: 75px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 53, 0.5);
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 238, 0.95) 100%);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.6),
              0 0 40px rgba(255, 119, 34, 0.4),
              inset 0 0 20px rgba(255, 200, 150, 0.3);
}

/* 亮色模式 - 太阳按钮 */
.theme-toggle-btn::before {
  content: '☀️';
  animation: sun-glow 2s ease-in-out infinite;
  display: block;
  line-height: 1;
}

/* 暗色模式 - 月亮按钮 */
[data-theme="dark"] .theme-toggle-btn {
  background: linear-gradient(135deg, rgba(15, 15, 30, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
  border-color: rgba(255, 107, 53, 0.6);
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.7),
              0 0 40px rgba(255, 107, 53, 0.4),
              inset 0 0 20px rgba(255, 107, 53, 0.2);
}

[data-theme="dark"] .theme-toggle-btn::before {
  content: '🌙';
  animation: moon-glow 2s ease-in-out infinite;
}

/* 太阳发光动画 */
@keyframes sun-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.8),
                 0 0 20px rgba(255, 119, 34, 0.6),
                 0 0 30px rgba(255, 68, 68, 0.4);
    transform: scale(1) rotate(0deg);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 107, 53, 1),
                 0 0 30px rgba(255, 119, 34, 0.8),
                 0 0 40px rgba(255, 68, 68, 0.6);
    transform: scale(1.05) rotate(5deg);
  }
}

/* 月亮发光动画 */
@keyframes moon-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.8),
                 0 0 20px rgba(255, 165, 0, 0.6),
                 0 0 30px rgba(255, 119, 34, 0.4);
    transform: scale(1) rotate(0deg);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 107, 53, 1),
                 0 0 30px rgba(255, 165, 0, 0.8),
                 0 0 40px rgba(255, 119, 34, 0.6);
    transform: scale(1.05) rotate(-5deg);
  }
}

/* 按钮悬停效果 */
.theme-toggle-btn:hover {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.9),
              0 0 50px rgba(255, 68, 68, 0.6),
              0 4px 20px rgba(255, 107, 53, 0.3),
              inset 0 0 30px rgba(255, 200, 150, 0.4);
}

[data-theme="dark"] .theme-toggle-btn:hover {
  transform: scale(1.15) rotate(-10deg);
  box-shadow: 0 0 30px rgba(255, 107, 53, 0.9),
              0 0 50px rgba(255, 107, 53, 0.6),
              0 4px 20px rgba(255, 107, 53, 0.4),
              inset 0 0 30px rgba(255, 107, 53, 0.3);
}

/* ============================================
   白羊座主题额外装饰
   ============================================ */

/* 表格样式优化 */
table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

table th {
  background: linear-gradient(135deg, var(--aries-orange), var(--aries-red));
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  transition: background 0.3s ease;
}

[data-theme="dark"] table th {
  background: linear-gradient(135deg, var(--aries-red), var(--aries-orange));
}

table tr:hover {
  background-color: rgba(255, 107, 53, 0.1);
}

table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 107, 53, 0.2);
  transition: background-color 0.3s ease;
}

[data-theme="dark"] table td {
  border-bottom-color: rgba(255, 107, 53, 0.3);
}

/* 列表项样式 */
li {
  transition: transform 0.2s ease;
  margin: 8px 0;
}

li:hover {
  transform: translateX(4px);
}

li::marker {
  color: var(--aries-orange);
}

[data-theme="dark"] li::marker {
  color: var(--aries-gold);
}

/* 输入框和表单元素 */
input,
textarea,
select {
  border: 2px solid rgba(255, 107, 53, 0.3);
  border-radius: 6px;
  padding: 10px;
  transition: all 0.3s ease;
  background-color: var(--light-bg);
  color: var(--light-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--aries-orange);
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.3);
  outline: none;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  border-color: rgba(255, 107, 53, 0.4);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.4);
}

/* 水平分割线 */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--aries-orange), transparent);
  margin: 24px 0;
  border-radius: 1px;
}

/* 强调文本 */
strong, b {
  color: var(--aries-red);
  font-weight: 600;
  transition: color 0.3s ease;
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--aries-orange);
}

/* 删除文本 */
del {
  color: var(--light-text-secondary);
  text-decoration: line-through;
  opacity: 0.6;
}

[data-theme="dark"] del {
  color: var(--dark-text-secondary);
}

/* 标签/标签样式 */
.tag, .label, .badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 68, 68, 0.2));
  border: 1px solid var(--aries-orange);
  border-radius: 20px;
  color: var(--aries-red);
  font-size: 0.9em;
  margin: 4px 4px;
  transition: all 0.3s ease;
}

.tag:hover,
.label:hover,
.badge:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 68, 68, 0.3));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

[data-theme="dark"] .tag,
[data-theme="dark"] .label,
[data-theme="dark"] .badge {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 68, 68, 0.3));
  color: var(--aries-gold);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .theme-toggle-btn {
    width: 45px;
    height: 45px;
    font-size: 20px;
    top: 70px;
    right: 15px;
    border-width: 2px;
  }

  /* 移动设备上调整页脚大小 */
  body {
    padding-bottom: 180px;
  }

  .page__footer {
    padding: 15px 0;
    font-size: 0.9em;
  }
}

@media (max-width: 480px) {
  body {
    padding-bottom: 220px;
  }

  .page__footer {
    padding: 12px 0;
    font-size: 0.85em;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: more) {
  :root {
    --light-text: #000000;
    --light-text-secondary: #333333;
    --dark-text: #ffffff;
    --dark-text-secondary: #e0e0e0;
  }
}

/* 动画加载减速器 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 标题样式优化 - 白羊座风格 */
h1, h2, h3, h4, h5, h6 {
  position: relative;
  transition: all 0.3s ease;
}

h1::before,
h2::before,
h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: linear-gradient(180deg, var(--aries-red), var(--aries-orange));
  border-radius: 2px;
  margin-right: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

h1 { padding-left: 16px; }
h2 { padding-left: 16px; }
h3 { padding-left: 16px; }

h1:hover::before,
h2:hover::before,
h3:hover::before {
  opacity: 1;
}

[data-theme="dark"] h1::before,
[data-theme="dark"] h2::before,
[data-theme="dark"] h3::before {
  background: linear-gradient(180deg, var(--aries-orange), var(--aries-gold));
}

/* 代码块样式 */
code, pre {
  background-color: rgba(255, 107, 53, 0.08);
  border: 1px solid rgba(255, 107, 53, 0.2);
  transition: all 0.4s ease;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
}

code:hover, pre:hover {
  background-color: rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: rgba(255, 107, 53, 0.1);
  border-color: rgba(255, 107, 53, 0.3);
}

/* 按钮元素样式 */
button:not(.theme-toggle-btn) {
  background: linear-gradient(135deg, var(--aries-orange), var(--aries-red));
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

button:not(.theme-toggle-btn):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
  background: linear-gradient(135deg, var(--aries-red), var(--aries-orange));
}

[data-theme="dark"] button:not(.theme-toggle-btn) {
  background: linear-gradient(135deg, var(--aries-red), var(--aries-orange));
}

/* ============================================
   布局修复 - 解决左侧人物介绍与右侧内容重叠
   ============================================ */

/* 主内容区域: 为固定的作者侧边栏预留空间 */
#main {
  width: 100%;
  max-width: 900px; /* 内容最大宽度 */
  margin: 10px 0 auto auto; /* 顶部间距 + 右边0 + 底部auto推动footer + 左边auto对齐 */
  padding: 0;
  box-sizing: border-box;
  flex: 1;
}

/* 在大屏幕上 (1024px+) 为左侧固定侧边栏预留空间，与导航栏对齐 */
@media screen and (min-width: 1024px) {
  #main {
    /* 计算：中心至左边界(640px) + sidebar宽度(250px) + sidebar右padding(24px) + content间距(10px) = 924px */
    margin: 10px 0 auto calc(50vw - 640px + 250px + 34px);
    width: auto;
    max-width: 1000px;
  }
}}

/* 在超大屏幕上进一步调整 */
@media screen and (min-width: 1280px) {
  #main {
    /* 计算：(页宽 - 限制宽度) / 2 + sidebar区域(250px + 32px padding + 10px gap) */
    margin: 10px 0 auto calc((100vw - 1280px) / 2 + 292px);
    width: auto;
    max-width: 1000px;
  }
}

/* 页面容器: 确保不被导航栏遮挡 */
.page {
  margin-top: 0;
  clear: both; /* 清除浮动影响 */
}

/* 文章内容与sidebar的间距 */
article.page {
  margin-left: 0;
  padding: 0 1.5em;  /* 内容内部padding */
  flex: 1;
}

@media screen and (min-width: 1024px) {
  article.page {
    margin-left: 0;
    padding: 0 2em;  /* 大屏幕增加内容padding */
  }
}

@media screen and (max-width: 768px) {
  article.page {
    padding: 0 1em;  /* 小屏幕减少padding */
  }
}

@media screen and (max-width: 768px) {
  article.page {
    padding: 0 1em;  /* 小屏幕减少padding */
  }
}

/* 作者个人资料块样式优化 */
.author__content {
  max-width: 240px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 确保侧边栏在固定位置清晰显示，与导航栏内容对齐 */
@media screen and (min-width: 1024px) {
  .sidebar {
    /* 与导航栏内容对齐 */
    left: calc(50vw - 640px);  /* 导航栏内容max-width 1280px, 居中对齐 */
    width: 250px;
    top: 70px; /* 从导航栏下方开始 */
    height: calc(100vh - 70px);
    padding: 2em 1.5em;
  }
}

/* 在超大屏幕上调整sidebar和main的对齐 */
@media screen and (min-width: 1280px) {
  .sidebar {
    left: calc((100vw - 1280px) / 2);
  }
}

/* 响应式调整: 中等屏幕 */
@media screen and (max-width: 1023px) {
  #main {
    margin-left: 0;
    width: 100%;
    max-width: 900px;
  }
  
  .sidebar {
    position: relative !important;
    width: auto;
    height: auto;
    margin: 0 0 3em 0;  /* 侧边栏底部增加间距分隔 */
    padding: 2em 1.5em;
    max-width: 100%;
    border-bottom: 1px solid var(--light-border);
  }
  
  [data-theme="dark"] .sidebar {
    border-bottom: 1px solid var(--dark-border);
  }
}

/* 响应式调整: 小屏幕 */
@media screen and (max-width: 768px) {
  body {
    padding: 60px 1rem 200px 1rem;  /* 小屏幕减少水平padding */
  }
  
  #main {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}