/* ============================================================================
   COMPONENT: MARKDOWN CUSTOMIZATION
   基于 github-markdown-css 进行 Design Tokens 适配
   ============================================================================ */

.markdown-body {
  /* 1. 基础重置：让它背景透明，融入我们的网页 */
  background-color: transparent !important;
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  
  /* 2. 注入字体系统 */
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  line-height: 1.8 !important;
  color: var(--color-text-main) !important;
}

/* --- 覆盖颜色 (使用 Design Tokens) --- */

/* 标题 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: var(--color-text-main) !important;
  font-family: var(--font-heading) !important;
  border-bottom-color: var(--color-border) !important; /* 覆盖 h1/h2 下划线 */
}

/* 链接 */
.markdown-body a {
  color: var(--color-text-main) !important; /* 或者定义一个 var(--color-link) */
  text-decoration: underline;
  text-underline-offset: 4px;
}
.markdown-body a:hover {
  opacity: 0.8;
}

/* 引用块 */
.markdown-body blockquote {
  border-left-color: var(--color-text-muted) !important;
  color: var(--color-text-muted) !important;
  background: transparent !important; /* 现在的设计倾向于简洁，不要灰色背景 */
}

/* 代码块容器 */
.markdown-body pre {
  background-color: #161b22 !important; /* 保持深色背景用于代码高亮 */
  border-radius: 6px !important;
  position: relative; /* 为复制按钮定位 */
}

/* 分割线 */
.markdown-body hr {
  background-color: var(--color-border) !important;
  height: 1px !important;
}

/* --- 增强组件：复制按钮 --- */
.copy-code-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ccc;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0; /* 默认隐藏 */
}

/* 鼠标悬停在代码块上才显示按钮 */
.markdown-body pre:hover .copy-code-btn {
  opacity: 1;
}

.copy-code-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.copy-code-btn.is-copied {
  background: var(--color-text-main); /* 使用主色调表示成功 */
  color: var(--color-bg-body);
  border-color: transparent;
}


/* ============================================================================
   MARKDOWN MOBILE OVERRIDES
   描述：强制覆盖 github-markdown.css 的硬编码字号，使其响应移动端
   ============================================================================ */

/* 1. 全局字号适配 */
.markdown-body {
    /* 桌面端保持 16px 或跟随你的系统字号 */
    font-size: var(--text-base, 16px);
    line-height: 1.6;
    font-family: var(--font-body); /* 强制使用你的 Open Sans 字体 */
}

/* 2. 标题适配：使用你的响应式变量 */
.markdown-body h1 {
    font-family: var(--font-heading);
    /* 强制使用你的 --text-3xl (它在手机上会自动变小) */
    font-size: var(--text-3xl) !important;
    border-bottom-color: var(--color-border-light, #eee); /* 统一颜色 */
}

.markdown-body h2 {
    font-family: var(--font-heading);
    /* 使用你的 --text-2xl */
    font-size: var(--text-2xl) !important;
}

.markdown-body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl) !important;
}

/* 3. 移动端特别微调 (max-width: 768px) */
@media (max-width: 768px) {
    .markdown-body {
        /* 关键：减少两侧留白 (GitHub 默认是 45px，手机上太宽了) */
        padding: var(--space-xs) !important;
    }
    
    .markdown-body h1 {
        /* 如果你的变量不够小，可以在这里强制再小一点 */
        line-height: 1.3;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .markdown-body {
        font-size: 0.75rem !important;
    }
}