/*
 * @File: post_detail.css
 * @Description: 帖子详情页专用样式文件，实现了内容的清晰排版、评论区美化及响应式适配。
 * @Author: Your Name
 * @Date: 2023-10-27
 */

:root {
  --bs-heading-color: #1a1a1a;
}

/* --- 1. 页面布局与容器样式 --- */
.main-container {
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.post-detail {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 50px 100px;
  transition: all 0.3s ease;
}

/* --- 2. 帖子头部元信息（非主体）样式 --- */
.post-detail h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #212529; /* 标题偏深但非纯黑，低于主体优先级 */
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* 仅针对元信息的p标签.post-content（非主体），刻意降低视觉优先级 */
.post-content:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem; /* 字号远小于主体 */
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e9ecef;
}

.post-author-profile a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}

.post-author-profile a:hover {
  text-decoration: underline;
}

/* --- 3. 帖子核心主体：article.post-content 样式（重点优化） --- */
article.post-content {
  /* 核心1：纯黑色字体，与其他区域形成绝对区分 */
  color: #000000;
  /* 核心2：字号增大到1.2rem，远大于元信息(0.9rem)、评论(1rem) */
  font-size: 1.2rem;
  /* 核心3：轻微加粗，进一步强化主体辨识度（不刺眼） */
  font-weight: 450;
  /* 行高适配大字号，保证阅读舒适 */
  line-height: 1.85;
  margin-bottom: 3rem;
  /* 视觉隔离：背景+内边距+圆角，物理区分主体区域 */
  background-color: rgba(255, 255, 255, 0.45);
  padding: 2.2rem;
  border-radius: 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

/* 主体内图片样式（保留居中优化） */
article.post-content img {
  max-width: 80%;
  max-height: 600px;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 0.8rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- 4. 评论区（非主体）样式：刻意弱化，突出主体 --- */
.post-detail form {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

#comment-content {
  width: 100%;
  min-height: 100px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  font-size: 1rem; /* 小于主体1.2rem */
  resize: vertical;
  margin-bottom: 1rem;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease-in-out;
  color: #343a40; /* 浅于主体纯黑 */
}

#comment-content:focus {
  outline: none;
  border-color: #80bdff;
}

.post-detail form label[for="is_anonymous"] {
  font-size: 0.9rem; /* 小于主体 */
  color: #495057; /* 浅灰色 */
  margin-right: 1rem;
}

.error-messages {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  color: #dc3545;
  font-size: 0.9rem;
}

.post-detail form button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  background-color: rgba(93, 127, 229, 0.8);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  margin-top: 1rem;
  backdrop-filter: blur(12px);
}

.post-detail form button:hover {
  background-color: #0b5ed7;
}

/* 评论列表（非主体）：继续弱化 */
.comments-list {
  margin-top: 2rem;
}

.comment-item {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-content {
  display: block;
  color: #343a40; /* 浅灰色，远浅于主体纯黑 */
  font-size: 1rem; /* 小于主体1.2rem */
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.comment-create-time,
.comment-author {
  font-size: 0.85rem; /* 最小字号，弱化 */
  color: #6c757d; /* 浅灰色 */
  margin-right: 1rem;
}

/* --- 5. 响应式适配：主体字号同步调整，保持区分度 --- */
@media (max-width: 767.98px) {
  .main-container {
    margin: 1rem auto;
  }
  .post-detail {
    padding: 1.5rem;
  }

  .post-detail h2 {
    font-size: 1.75rem;
  }

  /* 移动端主体字号稍降，但仍大于其他区域 */
  article.post-content {
    padding: 1.5rem;
    font-size: 1.15rem; /* 仍大于评论1rem、元信息0.9rem */
    color: #000000; /* 保持纯黑不变 */
  }

  article.post-content img {
    max-width: 95%;
  }

  .post-detail form,
  .comment-item {
    padding: 1rem;
  }
}