/* 导航栏基本样式 */
nav {
    background: white;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    background-color: #ffffff;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    padding: 0 20px;
}

/* 导航栏暗色模式 */
body.dark-mode nav {
    background: transparent;
    box-shadow: none;
}

body.dark-mode .nav-container {
    background-color: transparent;
}

body.dark-mode nav ul li a {
    color: #ffffff;
}

.nav-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-container li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-container li a:hover {
    background-color: #f8f8f8; /* 悬停背景色 */
    border-radius: 10px; /* 添加圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0;
    position: relative;
}

nav ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    color: #2f3542;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 导航项悬停效果 */
nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4757, #ff6b81);
    transition: width 0.3s ease;
}

nav ul li a:hover::before {
    width: 100%;
}

/* 导航图标样式 */
nav ul li a i {
    margin-bottom: 8px;
    font-size: 1.5rem;
    color: #ff4757;
    transition: transform 0.3s ease;
}

nav ul li a span {
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* 悬停效果 */
nav ul li a:hover {
    color: #ff4757;
    background: linear-gradient(to bottom, rgba(255,71,87,0.05), transparent);
}

nav ul li a:hover i {
    transform: translateY(-2px);
}

/* 活跃状态 */
nav ul li a.active {
    color: #ff4757;
}

nav ul li a.active::before {
    width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        overflow-x: auto;
        white-space: nowrap;
    }
    nav ul li {
        width: auto;
        text-align: center;
    }
    nav ul li a {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    .nav-container li a {
        flex-direction: column;
        align-items: center;
    }
    .nav-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .nav-container li {
        flex: 0 0 20%;
        max-width: 20%;
        box-sizing: border-box;
    }
}

/* 添加导航项动画效果 */
@keyframes navItemFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav ul li {
    animation: navItemFade 0.5s ease forwards;
    animation-delay: calc(0.1s * var(--i));
}

/* 汉堡菜单样式，只在小屏幕上显示 */
.hamburger-menu {
    display: none; /* 默认不显示 */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1001;
    background: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.hamburger-menu .bar {
    height: 3px;
    width: 100%;
    background-color: #333;
    border-radius: 10px;
    transition: all 0.3s ease; /* 过渡动画 */
}

/* 汉堡菜单激活状态 */
.hamburger-menu.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* 在小屏幕上应用特定样式 */
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex; /* 在小屏幕上显示汉堡菜单 */
    }
    .nav-container {
        display: none; /* 默认不显示，通过汉堡菜单控制显示 */
        position: absolute; /* 使菜单覆盖其他内容 */
        top: 100%;
        left: 0;
    }
    .nav-container.active {
        display: block; /* 当菜单被激活时显示 */
    }
}

/* 专门针对大屏幕的样式 */
@media (min-width: 769px) {
    .nav-container {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        display: flex;
        justify-content: center; /* 容器居中 */
    }

    nav ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center; /* 导航项居中 */
        width: auto; /* 宽度由内容决定 */
        padding: 0;
        margin: 0 auto; /* 水平居中 */
    }

    nav ul li {
        flex: 0 0 auto;
        white-space: nowrap; /* 防止文字换行 */
    }

    nav ul li a {
        padding: 1rem 1.2rem; /* 稍微减小内边距以适应更多项目 */
    }
}

/* 调整图标和文字的样式 */
.nav-container li a i {
    font-size: 1.2rem; /* 减小图标大小 */
    margin-bottom: 5px; /* 调整图标与文字之间的间距 */
}

.nav-container li a span {
    font-size: 0.85rem; /* 调整文字大小 */
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 专门针对大屏幕的样式 */
@media (min-width: 769px) {
    .nav-container li a i {
        font-size: 1.5rem; /* 在大屏幕上稍微增大图标大小 */
    }

    .nav-container li a span {
        font-size: 0.9rem; /* 在大屏幕上增大文字大小 */
    }
}

/* 汉堡菜单和特殊菜单项的容器样式，确保在小屏幕上并排显示 */
.header-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start; /* 从左侧开始排列 */
    padding: 10px; /* 添加一些内边距 */
}

/* 特殊菜单项样式，确保在小屏幕上显示 */
.special-menu-items {
    display: none; /* 默认不显示 */
}

@media (max-width: 768px) {
    .special-menu-items {
        display: flex; /* 确保容器在小屏幕上显示 */
        flex-direction: row;
        justify-content: space-between; /* 增加两个图标之间的距离，使用space-between更好地分散 */
        align-items: center; /* 垂直居中对齐 */
        width: auto; /* 宽度自适应内容 */
        height: 25px; /* 高度适应图标 */
        padding: 5px; /* 内边距减少，适应图标大小 */
        background: transparent; /* 将背景色改为透明 */
        box-shadow: none; /* 移除阴影 */
        color: #ccc; /* 改变图标颜色以适配页面 */
    }

    .special-menu-items a {
        display: flex; /* 使用flex布局 */
        align-items: center; /* 垂直居中对齐 */
        justify-content: center; /* 水平居中对齐 */
        width: 30px; /* 设置宽度与汉堡菜单一致 */
        height: 25px; /* 设置高度与汉堡菜单一致 */
        color: #fff; /* 设置图标颜色为白色 */
        font-size: 20px; /* 设置图标大小 */
        text-decoration: none; /* 去除下划线 */
    }

    .special-menu-items a i {
        display: block; /* 确保图标显示 */
    }

    .special-menu-items a span {
        display: none; /* 隐藏文本 */
    }

    .special-menu-items i {
        margin-right: 5px; /* 图标和文本之间的间距 */
    }
}

/* 确保汉堡菜单在小屏幕上显示 */
.hamburger-menu {
    display: flex; /* 在小屏幕上显示 */
}

/* 在大屏幕上，特殊菜单项不显示 */
@media (min-width: 769px) {
    .special-menu-items {
        display: none;
    }
}

/* 移除汉堡菜单中的特殊菜单项 */
.nav-container ul li.special-item {
    display: none;
}

/* 在小屏幕上隐藏汉堡菜单中的特殊菜单项 */
@media (max-width: 768px) {
    .nav-container ul li.special-item {
        display: none; /* 隐藏特殊菜单项 */
    }

    .special-menu-items {
        display: flex; /* 显示特殊菜单项容器 */
        margin-left: auto; /* 将特殊菜单项推到右边 */
    }

    .special-menu-items a {
        padding: 5px; /* 调整内边距 */
        font-size: 24px; /* 调整图标大小 */
    }
}

/* 在大屏幕上，保持原有的显示方式 */
@media (min-width: 769px) {
    .nav-container ul li.special-item {
        display: block; /* 在大屏幕上显示特殊菜单项 */
    }

    .special-menu-items {
        display: none; /* 在大屏幕上隐藏特殊菜单项容器 */
    }
}

/* 在大屏幕上，隐藏汉堡菜单并显示完整导航 */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none; /* 在大屏幕���不显示汉堡菜单 */
    }

    .nav-container {
        display: flex; /* 在大屏幕上显示导航容器 */
        justify-content: center; /* 水平居中导航项 */
        width: 100%; /* 容器宽度为100% */
    }
}

/* 特殊菜单项的基础样式（亮色模式） */
@media (max-width: 768px) {
    .special-menu-items a:not(.theme-toggle) {
        color: #333; /* 投稿联系默认黑色 */
        display: flex;
        align-items: center;
        margin-right: 30px; /* 在小屏幕上显著增加按钮之间的间距 */
    }
    .special-menu-items a.theme-toggle {
      
        display: flex;
        align-items: center;
        margin-right: 15px; /* 在小屏幕上显著增加按钮之间的间距 */
        
    }
    .special-menu-items a:last-child {
        margin-right: 0; /* 最后一个元素不添加右边距 */
    }
}

/* 暗色模式下的按钮样式 */


body.dark-mode .special-menu-items a:not(.theme-toggle) {
    color: #ffffff; /* 投稿联系按钮为白色 */
}

/* 暗色模式下打开的汉堡菜单背景 */
@media (max-width: 768px) {
    body.dark-mode .nav-container.active {
        background-color: #1a1a1a; /* 深色背景 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 可选：添加轻微阴影 */
    }
}

/* 底部黑色框样式 */
footer {
    border-radius: 15px; /* 添加圆角 */
    background-color: #2d2f34; /* 保持原有的黑色背景 */
    padding: 20px;
    margin: 20px;
}

/* 亮色模式下的药丸按钮样式 */
@media (max-width: 768px) {
    .theme-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 4px !important;
        background: #e0e0e0;
        border-radius: 30px !important;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 70px !important;
        height: 30px !important;
    }

    .theme-toggle .toggle-slider {
        position: absolute;
        left: 4px;
        right: auto;
        width: 26px;
        height: 26px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s, background-color 0.3s;
    }

    .theme-toggle .toggle-icons {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 8px;
    }

    .theme-toggle .toggle-icons i {
        font-size: 14px;
        line-height: 22px;
    }

    /* 调整月亮图标位置到右侧 */
    .theme-toggle .toggle-icons i.fa-moon {
        position: absolute;
        left: 8px;
        color: #ffd700;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    }

    /* 调整太阳图标位置到左侧 */
    .theme-toggle .toggle-icons i.fa-sun {
        position: absolute;
        right: 8px;
        color: #ff6b6b;
        text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
    }

    /* 亮色模式下滑块在左侧 */
    .theme-toggle .toggle-slider {
        position: absolute;
        left: 4px;
        right: auto;
        width: 26px;
        height: 26px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s, background-color 0.3s;
    }
}

/* 暗色模式下的药丸按钮样式 */
@media (max-width: 768px) {
    body.dark-mode .theme-toggle {
        background: #666;
    }

    /* 暗色模式下滑块移动到右侧 */
    body.dark-mode .theme-toggle .toggle-slider {
        transform: translateX(36px);
        background: #1a1a1a;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
}