@import "./styles.css";

/* ========================================
   HOME 页面样式表 (home.html)
   功能：控制首页中的个人资料、个人简介、新闻等区域的外观
   ======================================== */

/* ===== 基础布局和对齐 =====
   作用：为首页三大区域（#home-profile、#home-biography、#home-news）
         设置居中对齐和下方间距
   应用于：index.html 首页的个人资料区、个人简介区、新闻区 */
#home-profile, #home-biography, #home-news {
    text-align: center;
    margin-bottom: 1rem;
}

/* ===== 个人头像样式 =====
   作用：为头像图片添加圆形边框和阴影效果
   应用于：index.html 的个人头像 <img> 标签 */
#home-profile img {
    border-radius: 50%;  /* 圆形效果 */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);  /* 下方阴影，增加立体感 */
}

/* ===== 个人名字标题样式 =====
   作用：设置个人名字的字体、大小、粗度和颜色
   字体：Kanit 是泰文字体，Cambria 和 Mulish 是备选字体
   应用于：index.html 的 #home-profile h2（个人名字标题） */
#home-profile h2 {
    font-family: Kanit, "Cambria", "Mulish", sans-serif;
    font-size: 2rem;      /* 大标题，2倍默认字号 */
    font-weight: 700;     /* 加粗（1-1000，700=bold） */
    margin-top: 0.5rem;   /* 头像下方间距 */
}

/* ===== 个人资料区社交链接样式 =====
   作用：设置社交链接（GitHub、Google Scholar 等）的默认颜色和悬停效果
   应用于：index.html 的社交链接 <a> 标签 */
#home-profile a {
    color: #24306b;      /* 深蓝色，与整个设计主色调统一 */
    text-decoration: none;  /* 去掉下划线 */
}

#home-profile a:hover {
    text-decoration: none;
    color: #3948d2;      /* 悬停时变为更亮的蓝色，提示可交互 */
}

/* ===== 关于我（About Me）部分标题 =====
   作用：设置 "About Me" 标题的字体和颜色
   应用于：index.html 左列的 "About Me" h3 标题 */
#home-biography h3 {
    font-family: Kanit, "Cambria", "Mulish", sans-serif;
    font-size: 1.5rem;   /* 副标题大小 */
    color: #24306b;      /* 深蓝色主色 */
}

/* ===== 关于我内容样式 =====
   作用：设置从 Markdown 渲染的个人简介内容的字体大小、行高和对齐
   应用于：index.html 的 #aboutme-md（个人简介内容区域） */
#aboutme-md {
    font-size: 1rem;     /* 正文字号 */
    line-height: 1.5rem; /* 行高使文本更易阅读 */
    text-align: justify; /* 两端对齐，显得更正式 */
}

/* ===== 新闻（News）部分标题 =====
   作用：设置 "News" 标题的样式
   应用于：index.html 右列的 "News" h3 标题 */
#home-news h3 {
    font-family: Kanit, "Cambria", "Mulish", sans-serif;
    font-size: 1.5rem;   /* 副标题大小 */
    color: #24306b;      /* 深蓝色主色 */
}

/* ===== 新闻列表样式 =====
   作用：设置新闻列表的圆点样式、缩进和间距
   应用于：index.html 的 #news-md ul（新闻列表容器） */
#news-md ul {
    list-style: disc;    /* 显示圆点列表 */
    padding-left: 1.2rem; /* 给圆点留出缩进空间 */
    margin: 0;           /* 移除默认外边距 */
}

/* ===== 新闻列表项样式 =====
   作用：设置每条新闻的字体大小、行高、间距和悬停交互效果
   功能说明：
   - 紧凑的字号和行高使列表看起来简洁
   - hover 效果（背景色和位移）提供视觉反馈
   应用于：index.html 的 #news-md li（每一条新闻项） */
#news-md li {
    margin-bottom: 0.3rem;  /* 条目间距紧凑 */
    font-size: 0.95rem;     /* 稍小字体 */
    line-height: 1.3rem;    /* 行高紧凑一些 */
    display: list-item;     /* 保持列表项默认布局 */
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.2s, transform 0.2s;  /* 平滑动画过渡 */
    padding: 0.3rem 0.5rem; /* 内部间距 */
    border-radius: 5px;     /* 圆角背景 */
}

/* 新闻项悬停效果 */
#news-md li:hover {
    background-color: #f0f4ff;  /* 浅蓝色背景 */
    transform: translateX(3px);  /* 向右移动3px，增加交互反馈 */
}

/* ===== 新闻链接样式 =====
   作用：设置新闻标题链接的颜色和字体粗度
   应用于：index.html 新闻列表中的链接 <a> 标签 */
.news-link {
    color: #24306b;     /* 深蓝色 */
    text-decoration: none;
    font-weight: 600;   /* 加粗，使标题更突出 */
}

.news-link:hover {
    text-decoration: none;
    color: #3948d2;     /* 悬停时变为更亮的蓝色 */
}

/* ===== 个人资料分割线 =====
   作用：在个人名字和社交链接之间添加一条装饰性的横线
   应用于：index.html 的 .profile-divider 元素 */
.profile-divider {
    width: 40%;            /* 横线长度占父容器40% */
    height: 1.5px;         /* 横线粗细 */
    background-color: #d3d3d3;  /* 浅灰色 */
    margin: 0.5rem auto 0.5rem auto;  /* 上下各0.5rem间距，水平居中 */
    border-radius: 1px;    /* 可选，使端点略微圆润 */
}

/* ===== 社交链接容器 =====
   作用：使用 Flexbox 布局社交链接，使其水平排列并均匀分布
   应用于：index.html 的 .social-links 容器（GitHub、Google Scholar 等链接） */
.social-links {
    display: flex;        /* Flexbox 布局 */
    justify-content: center;  /* 水平居中 */
    gap: 1rem;           /* 链接之间间距为 1rem */
    margin-top: 0.5rem;  /* 顶部间距 */
}

/* ===== 单个社交链接样式 =====
   作用：为社交链接添加方形边框、背景、颜色和交互效果
   样式特点：
   - 白色背景 + 深蓝色边框，呈现"按钮"效果
   - 包含图标和文字
   - hover 时背景变灰、略微上移
   应用于：index.html 的 .social-link <a> 标签（单个社交链接） */
.social-link {
    display: inline-flex;
    align-items: center;  /* 图标和文字垂直居中 */
    padding: 0.05rem 0.5rem;   /* 内边距，使方框宽度适中 */
    border-radius: 12px;       /* 圆角，呈现现代感 */
    border: 2px solid #24306b; /* 深蓝色边框 */
    background-color: #ffffff; /* 白色背景 */
    color: #24306b;           /* 深蓝色文字 */
    text-decoration: none;    /* 去掉下划线 */
    font-size: 0.95rem;       /* 字体大小 */
    font-weight: 500;         /* 中等粗度 */
    transition: all 0.2s ease; /* 平滑过渡 */
    text-decoration: none !important;  /* 确保没有下划线 */
}

/* 社交链接中的图标样式 */
.social-link i {
    margin-right: 0.5rem;       /* 图标和文字间的距离 */
    font-size: 1rem;            /* 图标大小 */
    text-decoration: none !important;  /* 确保图标没有下划线 */
}

/* 社交链接悬停效果 */
.social-link:hover {
    background-color: #e0e0e0;  /* 灰色背景，增加视觉反馈 */
    transform: translateY(-2px);  /* 向上移动2px，产生"浮起"效果 */
    text-decoration: none !important;  /* 确保没有下划线 */
}

/* ===== 新闻列表容器样式 =====
   作用：设置新闻列表的基础样式（去掉默认圆点、间距等）
   应用于：index.html 的 .news-list 容器 */
.news-list {
  list-style: none;     /* 去掉默认的圆点 */
  padding-left: 0;      /* 去掉默认的左内边距 */
  margin: 0;            /* 去掉默认的外边距 */
  font-size: 1rem;      /* 条目字体大小 */
  color: #333;          /* 条目字体颜色（深灰色） */
  text-decoration: none;
}

/* ===== 新闻列表项（支持滚动）=====
   作用：设置单条新闻的样式，当超长时自动省略并支持悬停滚动
   功能说明：
   - white-space: nowrap 强制单行
   - text-overflow: ellipsis 超出时显示"..."
   - 悬停时自动左右滚动显示完整内容
   应用于：index.html 的 .news-list li（单条新闻） */
.news-list li {
  position: relative;
  white-space: nowrap;   /* 强制单行，不换行 */
  overflow: hidden;      /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出时显示"..." */
  cursor: pointer;       /* 鼠标悬停显示手型 */
  padding: 4px 0;        /* 上下间距 */
}

/* 新闻列表项悬停时取消省略号 */
.news-list li:hover {
  text-overflow: clip;   /* 悬停时取消"..."，显示完整文本 */
}

/* ===== 新闻项内部文本（用于滚动） =====
   作用：为超长新闻文本提供水平滚动效果
   功能说明：
   - padding-right: 60px 在右侧留出滚动空间
   - will-change: transform 提示浏览器优化动画性能
   应用于：.news-list li 内的 .scroll-inner 元素 */
.news-list li .scroll-inner {
  display: inline-block;
  padding-right: 60px;   /* 留出右侧空间供滚动 */
  transition: transform linear;
  will-change: transform;  /* 告诉浏览器该元素会动画变换，优化性能 */
}

/* 新闻项悬停时触发水平滚动动画 */
.news-list li:hover .scroll-inner {
  animation: li-scroll 15s linear forwards;  /* 播放一次，保持末尾状态 */
}

/* ===== 新闻文本滚动动画 =====
   作用：定义新闻超长时的水平滚动动画
   动画流程：
   - 0%：文本初始位置
   - 100%：文本向左移动，显示后续内容
   应用于：.news-list li:hover .scroll-inner */
@keyframes li-scroll {
  0% {
    transform: translateX(0);        /* 初始位置 */
  }
  100% {
    transform: translateX(-50%);     /* 向左移动50%宽度 */
  }
}

/* ===== 新闻列表项间距 =====
   作用：为列表中的每一项添加下方间距，使其更分散
   应用于：.news-list li */
.news-list li {
  margin-bottom: 0.5rem;  /* 项目间间距 */
}

/* ===== 新闻日期样式 =====
   作用：突出显示新闻的发布日期
   应用于：.news-date（新闻前面的日期标签） */
.news-date {
  font-weight: bold;   /* 加粗日期 */
  color: #24306b;      /* 深蓝色，与整体主色调统一 */
}

/* 新闻链接样式（与上面重复，用于保险） */
.news-link {
  text-decoration: none;
  color: #3948d2;      /* 链接蓝色 */
}

.news-link:hover {
  text-decoration: none;  /* 悬停时仍然去掉下划线 */
}

/* ===== "更多新闻"链接 =====
   作用：在新闻列表底部显示"More"链接，指向完整新闻页面
   应用于：index.html 右侧新闻区的 .news-more-link */
.news-more-link {
  display: inline-block;
  margin-left: auto;    /* 靠右对齐 */
  margin-top: 0.3rem;   /* 顶部间距 */
  font-size: 1rem;      /* 字号 */
  font-weight: bold;    /* 加粗 */
  color: #3948d2;       /* 蓝色链接 */
  text-decoration: none;
}

.news-more-link:hover {
  text-decoration: none;  /* 悬停时仍然无下划线 */
}