/* nav.css - 导航栏样式 */

/* 主导航栏容器样式 */
.main-nav {
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 1rem 5%; /* 内边距 */
    background-color: rgba(255, 255, 255, 1); /* 背景颜色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    z-index: 1000; /* 层级高度 */
    transition: transform 0.3s ease-in-out; /* 变换动画 */
}

/* 导航栏隐藏状态 */
.main-nav.hide {
    transform: translateY(-100%); /* 向上隐藏 */
    box-shadow: none; /* 无阴影 */
}

/* 标志/logo区域样式 */
.logo {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 0; /* 元素间距 */
    height: 2.8rem; /* 固定高度 */
}

/* logo图片样式 */
#top_logo {
    height: 100%; /* 高度100% */
    width: auto; /* 宽度自适应 */
    display: block; /* 块级显示 */
}

/* logo链接样式 */
.logo a {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 高度100% */
    font-size: 1.5rem; /* 字体大小 */
}

/* 导航链接列表样式 */
.nav-links {
    display: flex; /* 弹性布局 */
    list-style: none; /* 无列表样式 */
}

/* 导航链接项样式 */
.nav-links li {
    margin-left: 2rem; /* 左侧外边距 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
    color: var(--primary-color); /* 主色调 */
}

/* 汉堡菜单按钮样式 */
.burger {
    display: none; /* 默认隐藏 */
    cursor: pointer; /* 手型光标 */
}

/* 汉堡菜单线条样式 */
.burger div {
    width: 25px; /* 宽度 */
    height: 3px; /* 高度 */
    background-color: #333; /* 背景色 */
    margin: 5px; /* 外边距 */
    transition: all 0.3s ease; /* 过渡动画 */
}

/* 汉堡菜单激活状态 */
.burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px); /* 第一线旋转 */
}

.burger.toggle .line2 {
    opacity: 0; /* 第二线透明 */
}

.burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px); /* 第三线旋转 */
}

/* 响应式导航 - 移动端 */
@media (max-width: 768px) {
    /* 导航链接移动端样式 */
    .nav-links {
        display: none; /* 默认隐藏 */
        width: 100%; /* 全宽 */
        position: absolute; /* 绝对定位 */
        top: 100%; /* 位于导航栏下方 */
        left: 0; /* 左侧对齐 */
        background: white; /* 白色背景 */
        flex-direction: column; /* 垂直排列 */
        padding: 1rem 5%; /* 内边距 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    /* 导航链接激活状态 */
    .nav-links.nav-active {
        display: flex; /* 显示导航 */
    }

    /* 导航项移动端样式 */
    .nav-links li {

        margin: 0; /* 移除默认外边距 */
        padding: 0.5rem 5%; /* 添加内边距 */
        width: 100%; /* 全宽 */
    }

    /* 导航链接移动端样式 */
    .nav-links a {
        display: block; /* 块级显示 */
        padding: 0.2rem 0.2rem; /* 扩大点击区域 */
        width: 100%; /* 全宽 */
        height: 100%; /* 全高 */
    }

    /* 汉堡菜单移动端显示 */
    .burger {
        display: var(--text-tertiary); /* 备用显示方式 */
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    /* 导航链接样式调整 */
    .nav-links {
        display: none; /* 默认隐藏 */
        width: 100%; /* 全宽 */
        position: absolute; /* 绝对定位 */
        top: 100%; /* 位于导航栏下方 */
        left: 0; /* 左侧对齐 */
        background: white; /* 白色背景 */
        flex-direction: column; /* 垂直排列 */
        padding: 1rem 5%; /* 内边距 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    }

    /* 导航链接激活状态 */
    .nav-links.nav-active {
        display: flex; /* 显示导航 */
    }

    /* 导航项样式调整 */
    .nav-links li {
        position: relative; /* 相对定位 */
        margin: 1rem 0; /* 上下外边距 */
    }
}