/* 删除了 @font-face, body, html, .background 等通用样式，因为它们已在 style.css 中定义 */

/* --- 博客页面布局 --- */
p{
    line-height: 1.7;
    color: rgb(183, 221, 255);
}
#markdown-list {
    margin: 0 auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    max-width: min(90vw, 1200px);
    width: 100%;
    box-sizing: border-box;
}

.container {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

/* --- 博客页面元素 --- */
.subtitle {
    font-size: 15px;
    color: var(--accent-highlight); /* 使用变量 */
}

button {
    border: 1px solid var(--text-primary); /* 使用变量 */
    border-radius: 20px;
    background-color: transparent;
    color: var(--text-primary); /* 使用变量 */
    padding: 0px 10px;
    transition: all 0.3s ease;
}

button:hover {
    background-color: var(--text-primary); /* 使用变量 */
    color: var(--background-dark); /* 使用变量 */
    cursor: pointer;
}

.contentback {
    padding: 2px 50px;
    background-color: rgba(11, 18, 38, 0.5); /* 使用深蓝背景色的半透明版本 */
    font-family: 'LXGWWenKai', sans-serif;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}
.contentback p {
    max-width: 100%; /* 覆盖全局的80%宽度限制 */
    margin-left: 0;  /* 覆盖全局的 auto 边距 */
    margin-right: 0; /* 覆盖全局的 auto 边距 */
    text-indent: 2em; /* '2em' 约等于两个中文字符宽度 */
}

.contentback p,
.contentback ul,
.contentback ol,
.contentback blockquote,
.contentback pre,
.contentback table,
.contentback .share-container {
    margin-bottom: 20px;
}

/* 2. 确保容器内最后一个元素没有多余间距 */
.contentback > *:last-child {
    margin-bottom: 0;
}

/* 3. 标题样式 (H1-H6) */
.contentback h1,
.contentback h2,
.contentback h3,
.contentback h4,
.contentback h5,
.contentback h6 {
    color: var(--text-title); /* 使用 style.css 定义的标题色 */
    margin-top: 1em;    /* 距离上方内容留出更多空间 */
    margin-bottom: 0.3em;   /* 距离下方内容留出较少空间 */
    line-height: 1.4;
}
.contentback h1 {font-size: 1.75rem;}
.contentback h2 {font-size: 1.5rem;}
.contentback h3 {font-size: 1.25rem;}
.contentback h4 {font-size: 1.1rem;}
.contentback h5 {font-size: 1rem;}
.contentback h6 {font-size: 0.9rem;color: #666;}

/* 4. 列表 (ul, ol) 样式优化 */
.contentback ul,
.contentback ol {
    padding-left: 2em; /* 明确设置列表缩进 */
}

.contentback li {
    margin-bottom: 0.5em; /* 增加列表项(li)之间的垂直间距 */
}

/* 5. 引用 (Blockquote) 样式 */
.contentback blockquote {
    border-left: 4px solid var(--accent-primary); /* 继承全局主题色 */
    padding-left: 1.5em;
    margin-left: 0;
    color: var(--text-secondary); /* 使用次要文字颜色 */
    font-style: italic;
}

.contentback blockquote p {
    color: var(--text-secondary);
}

/* 6. 代码 (Code & Pre) 样式 */

/* 行内代码: `code` */
.contentback code {
    background-color: rgba(138, 149, 181, 0.15); /* 次要文本的透明色 */
    color: var(--accent-secondary); /* 淡黄色突出显示 */
    padding: 0.2em 0.4em;
    margin: 0 0.2em;
    border-radius: 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}

/* 块级代码: ```code``` */
.contentback pre {
    background-color: #0F1A36; /* 比背景稍亮的深蓝 */
    border: 1px solid var(--background-interactive-hover);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto; /* 允许代码横向滚动 */
    line-height: 1.45; /* 调整代码块的行高 */
}

/* 修复 pre 内部的 code 样式，移除行内代码的样式 */
.contentback pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 1em; /* 恢复正常字体大小 */
}

/* 7. 水平分割线 */
.contentback hr {
    border: 0;
    border-top: 1px solid var(--background-interactive-hover);
    margin: 2em 0;
}

.contentback img {
    max-width: 100%; /* 核心：限制最大宽度不超过容器宽度 */
    height: auto;    /* 核心：按比例自动缩放高度 */
    
    /* 以下是推荐的排版优化，你可以根据喜好决定是否保留 */
    display: block;  /* 将图片变成块级元素，消除底部可能的间隙 */
    margin: 1em auto; /* 让图片上下留点空隙，并在容器中水平居中 */
    border-radius: 8px; /* 给图片加上一点圆角，配合你的按钮圆角风格 */
}

/* 超链接 (Link) 样式优化 */
.contentback a {
    /* 使用你已经定义的强调色，或者换成一个柔和的浅蓝/浅青色，比如 #8ab4f8 */
    color: var(--accent-primary); 
    
    /* 移除默认的生硬下划线 */
    text-decoration: none; 
    
    /* 可选：用一条半透明的底边框代替下划线，看起来更精致 */
    border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.3); 
    
    /* 增加颜色变化的平滑过渡效果 */
    transition: all 0.3s ease; 
}

/* 嵌入时清除背景 */
.embedded .background {
    background: transparent;
}

.share-container {
  margin: 20px auto;
  max-width: 800px; /* YouTube视频的最大宽度建议不超过800px */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden; 
}

/* 2. 专门为包含 iframe (如YouTube) 的容器设置宽高比 */
.share-container:has(> iframe) {
  aspect-ratio: 16 / 9;
}

/* 3. 让 YouTube 的 iframe 填满容器 */
.share-container > iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.share-container img {
  width: 50%;
  display: block;
  margin: 0 auto;
}

/* 4. Twitter嵌入内容的最大宽度设为更适合阅读的宽度 */
.share-container .twitter-tweet {
    margin: 0 auto !important; /* 使用 !important 强制居中 */
    max-width: 550px;
}

/* 让 iframe 填满整个容器 */
.share-container iframe {
  width: 100%;
  height: 100%;
  border: 0; /* 移除 iframe 可能存在的默认边框 */
}

.article-header {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 10px 15px;
}

/* 标题和日期的包装器 */
.title-wrapper {
min-width: 200px;
}

/* 标签的容器 */
.tags-container {
display: flex;
gap: 8px;
flex-shrink: 0;
}

/* 单个标签的样式*/
.tag-item {
background-color: rgba(var(--accent-primary-rgb), 0.2);
color: var(--accent-primary);
border: 1px solid rgba(var(--accent-primary-rgb), 0.5);
padding: 3px 10px;
border-radius: 15px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
transition: all 0.2s ease;
cursor: pointer; 
}
.tag-item:hover {
background-color: rgba(var(--accent-primary-rgb), 0.4);
}

/* 新增：高亮（被选中）标签的样式 */
.tag-item.active-tag {
background-color: var(--accent-secondary);
color: var(--background-dark);
border-color: var(--accent-secondary);
font-weight: bold;
}

/* 展开/收起按钮 */
.article-header > button {
flex-shrink: 0;
}

/* --- 新增：标签云容器样式 --- */
#tag-cloud-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 20px 0;
margin-bottom: 20px;
border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}


/* --- 移动端适应 --- */
@media (max-width: 767px) {
    .container {
        width: 100%;
    }
    .subtitle {
        font-size: 12px;
        line-height: 1.4;
    }
    button {
        border-radius: 15px;
        padding: 5px 8px;
        font-size: 14px;
    }
    .contentback {
        margin: 1px;
        padding: 5px 12px;
        font-size: 18px;
        line-height: 1.3;
        width: 100%;
        box-sizing: border-box;
    }
    #markdown-list {
        margin: 0;
        padding: 20px;
        width: 100%;
        max-width: 100%;
        left: 0;
        box-sizing: border-box;
    }
}