/* ========================================
   全局样式定义
   ======================================== */

/* 全局字体和背景设置 */
body {
    font-family: 'Inter', sans-serif;  /* 使用Inter字体，提供现代化的显示效果 */
    background-color: #f8f7f4;         /* 浅灰色背景，提供舒适的视觉体验 */
    color: #4a4a4a;                    /* 深灰色文字，确保良好的可读性 */
}

/* ========================================
   固定导航栏样式
   ======================================== */

/* 固定导航栏的基础样式 */
header {
    transition: all 0.3s ease;         /* 平滑的过渡动画 */
}

/* 导航栏在滚动时的阴影效果 */
header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 滚动时增加阴影 */
}

/* 确保导航栏始终在最顶层 */
header {
    z-index: 1000;                     /* 确保导航栏在其他元素之上 */
}

/* ========================================
   滚动偏移样式 - 解决固定导航栏遮挡问题
   ======================================== */

/* 为所有锚点目标添加滚动偏移 */
#hero,
#summary,
#experience,
#skills,
#education {
    scroll-margin-top: 120px;          /* 滚动时留出120px的顶部空间给导航栏 */
}

/* 确保所有章节标题都有足够的顶部间距 */
section {
    scroll-margin-top: 120px;          /* 为所有section添加滚动偏移 */
}

/* 备用方案：为不支持scroll-margin-top的浏览器提供padding-top */
@supports not (scroll-margin-top: 120px) {
    #hero,
    #summary,
    #experience,
    #skills,
    #education {
        padding-top: 120px;
        margin-top: -120px;
    }
}

/* ========================================
   时间线样式定义
   ======================================== */

/* 时间线项目前的圆点装饰 */
.timeline-item::before {
    content: '';                        /* 创建伪元素 */
    position: absolute;                 /* 绝对定位 */
    top: 12px;                         /* 垂直位置调整 */
    left: -4px;                       /* 水平位置调整，位于时间线左侧 */
    width: 10px;                       /* 圆点宽度 */
    height: 10px;                      /* 圆点高度 */
    border-radius: 50%;                /* 圆形样式 */
    background-color: #60a5fa;         /* 蓝色背景，与主题色一致 */
    border: 2px solid #f8f7f4;        /* 白色边框，与背景色形成对比 */
}

/* 时间线垂直装饰线 */
.timeline-line {
    position: absolute;                 /* 绝对定位 */
    top: 12px;                         /* 起始位置 */
    left: 0px;                       /* 水平位置，与圆点对齐 */
    bottom: 0;                         /* 延伸到底部 */
    width: 2px;                        /* 线条宽度 */
    background-color: #e5e7eb;         /* 浅灰色线条 */
    z-index: -1;                       /* 置于内容后方 */
}

/* ========================================
   标签页样式定义
   ======================================== */

/* 激活状态的标签页样式 */
.tab-active {
    border-color: #60a5fa;             /* 蓝色边框，表示激活状态 */
    color: #60a5fa;                    /* 蓝色文字 */
    font-weight: 500;                  /* 中等字重，增强视觉层次 */
}

/* ========================================
   技能标签样式定义
   ======================================== */

/* 技能标签的过渡动画效果 */
.skill-tag {
    transition: all 0.2s ease-in-out;  /* 平滑的过渡动画，提升用户体验 */
}

/* ========================================
   详情内容展开/收起动画
   ======================================== */

/* 详情内容的初始状态（收起） */
.details-content {
    max-height: 0;                     /* 初始高度为0，内容隐藏 */
    overflow: hidden;                  /* 隐藏溢出内容 */
    transition: max-height 0.5s ease-out; /* 平滑的展开/收起动画 */
}

/* 详情内容的展开状态 */
.details-content.open {
    max-height: 1000px;                /* 展开后的最大高度，可根据需要调整 */
}

/* ========================================
   章节标题样式定义
   ======================================== */

/* 章节标题的基础样式 */
.section-title {
    position: relative;                 /* 相对定位，为下划线提供定位基准 */
    padding-bottom: 8px;               /* 底部内边距，为下划线留出空间 */
    margin-bottom: 24px;               /* 底部外边距，与内容保持距离 */
}

/* 章节标题下方的装饰线 */
.section-title::after {
    content: '';                       /* 创建伪元素 */
    position: absolute;                /* 绝对定位 */
    bottom: 0;                        /* 位于标题底部 */
    left: 0;                          /* 左对齐 */
    width: 50px;                      /* 装饰线宽度 */
    height: 3px;                      /* 装饰线高度 */
    background-color: #60a5fa;        /* 蓝色装饰线，与主题色一致 */
}