/* styles.css 文件的内容 */

/* 设置页面的基本样式 */
body {
    font-family: Arial, sans-serif; /* 字体设置 */
    margin: 0; /* 去除默认边距 */
    padding: 0; /* 去除默认内边距 */
    background-color: #f5f6fa; /* 背景颜色 */
    color: #333; /* 字体颜色 */
    text-align: center; /* 文本居中 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
    overflow-x: hidden; /* 隐藏横向滚动条 */
}

/* 导航栏样式 */
.navbar {
    position: fixed; /* 保持固定位置 */
    top: 50%; /* 垂直居中 */
    left: 20px; /* 改为距离左侧20px */
    right: auto; /* 取消右侧定位 */
    transform: translateY(-50%); /* 垂直居中微调 */
    background: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    padding: 15px 10px; /* 垂直内边距增加，水平内边距减少 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 更强的阴影效果 */
    z-index: 1000; /* 保持高层级 */
    border-radius: 10px; /* 圆角 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    backdrop-filter: blur(5px); /* 背景模糊效果，增加现代感 */
    border: 1px solid rgba(255, 255, 255, 0.5); /* 细边框 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    animation: slideInLeft 0.5s forwards; /* 修改为左侧入场动画 */
    max-width: 150px; /* 设置最大宽度 */
    cursor: move; /* 鼠标指针变为移动图标 */
    user-select: none; /* 防止拖动时选择文本 */
    touch-action: none; /* 防止触摸设备上的默认行为 */
}

/* 添加拖动时的效果 */
.navbar.dragging {
    opacity: 0.8;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    transition: none; /* 拖动时禁用过渡效果以获得更好的响应性 */
}

/* 导航头部样式，作为拖动手柄 .navbar-handle {
    width: 100%;
    

    

    position: relative;
}*/


.navbar-handle::before {
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 3px;
    background-color: rgba(150, 150, 150, 0.5);
    border-radius: 2px;
}

/* 导航栏悬停效果 */
.navbar:hover {
    background: rgba(255, 255, 255, 0.95); /* 增加不透明度 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* 增强阴影 */
    transform: translateY(-50%) scale(1.05); /* 轻微放大效果 */
}

/* 导航链接样式 */
.navbar a {
    display: block;
    width: auto; /* 改为自动宽度 */
    min-width: 80px; /* 设置最小宽度 */
    margin: 8px 5px; /* 调整上下边距，缩小左右边距 */
    text-decoration: none; /* 去除下划线 */
    color: #333; /* 字体颜色 */
    font-weight: bold; /* 加粗 */
    transition: all 0.3s; /* 所有属性过渡效果 */
    font-size: 0.9rem; /* 调整字体大小 */
    padding: 8px 12px; /* 增加内边距 */
    border-radius: 6px; /* 圆角 */
    text-align: left; /* 改为左对齐，适应左侧导航 */
    position: relative; /* 为伪元素定位 */
    white-space: nowrap; /* 防止文字换行 */
    border-left: 3px solid transparent; /* 添加透明左边框 */
}

/* 添加小图标指示效果 */
.navbar a::before {
    content: '•'; /* 使用点作为图标 */
    margin-right: 5px;
    opacity: 0.7;
}

/* 导航链接悬停效果 */
.navbar a:hover {
    color: white; /* 悬停时文字颜色 */
    background-color: #4a90e2; /* 悬停时背景颜色 */
    transform: translateX(5px); /* 改为向右移动效果 */
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.1); /* 修改阴影方向 */
    border-left-color: #2c5aa0; /* 高亮左边框 */
}

/* 激活状态的导航链接 */
.navbar a.active {
    color: white; 
    background-color: #4a90e2;
    transform: translateX(5px); /* 改为向右移动效果 */
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.1); /* 修改阴影方向 */
    position: relative;
    border-left-color: #2c5aa0; /* 高亮左边框 */
}

/* 入场动画 - 从左侧滑入 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate(-50px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

/* 添加响应式设计 */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 0; /* 改为顶部固定 */
        left: 0; 
        right: 0;
        bottom: auto; /* 不再底部 */
        width: 100%; /* 宽度100% */
        max-width: 100%; /* 最大宽度100% */
        margin: 0;
        flex-direction: row; /* 水平排列 */
        justify-content: center; /* 水平居中 */
        transform: none;
        border-radius: 0; /* 移除圆角 */
        padding: 10px 5px;
        background: rgba(255, 255, 255, 0.95); /* 更不透明 */
        animation: slideInTop 0.5s forwards; /* 顶部入场动画 */
        z-index: 9999; /* 确保在最上层 */
        overflow-x: auto; /* 允许水平滚动 */
        -webkit-overflow-scrolling: touch; /* 平滑滚动触摸 */
    }
    
    .navbar a {
        margin: 0 5px;
        font-size: 0.85rem; /* 调整字体大小 */
        padding: 8px 12px; /* 增加内边距 */
        min-width: auto; /* 取消最小宽度 */
        display: inline-block; /* 改为内联块 */
        border-left: none;
        border-bottom: 3px solid transparent;
        text-align: center;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    .navbar a:hover, .navbar a.active {
        transform: translateY(-3px); /* 向上移动效果 */
        border-bottom-color: #2c5aa0;
        border-left-color: transparent;
    }
    
    /* 新增顶部入场动画 */
    @keyframes slideInTop {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 调整内容项样式以适应移动设备 */
    .item {
        padding: 1.5rem; /* 减少内边距 */
        margin: 70px auto 20px; /* 增加顶部间距，为固定导航栏留出空间 */
        width: 90%; /* 宽度调整 */
    }
    
    .item:first-of-type {
        margin-top: 70px; /* 第一个项目顶部间距 */
    }
    
    /* 优化列表项在移动设备上的显示 */
    .item li {
        padding: 0.75rem 0;
        word-break: break-word; /* 允许在任何字符处换行 */
    }
    
    /* 修改按钮样式适应移动设备 */
    a.button {
        display: block; /* 块级显示 */
        margin: 1rem auto; /* 居中 */
        width: 80%; /* 宽度 */
        text-align: center; /* 文本居中 */
    }
    
    /* 搜索按钮位置调整 */
    .search-button {
        position: fixed;
        right: 10px;
        top: 10px; /* 移至顶部 */
        z-index: 10000;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4a90e2;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
}

/* 底部入场动画 */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 内容项样式 */
.item {
    background: #ffffff; /* 背景颜色 */
    padding: 2rem; /* 内边距 */
    margin: 30px auto; /* 上下边距和自动左右居中 */
    width: 95%; /* 宽度95% */
    max-width: 1000px; /* 最大宽度 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: transform 0.2s ease-in-out; /* 变换过渡效果 */
    text-align: left; /* 左对齐 */
}

/* 第一个内容项的额外样式 */
.item:first-of-type {
    margin-top: 30px; /* 减少顶部边距，因为导航栏已经不在顶部 */
}

/* 内容项悬停效果 */
.item:hover {
    transform: scale(1.02); /* 放大效果 */
}

/* 内容项标题样式 */
.item h2 {
    margin-top: 0; /* 去除顶部边距 */
    font-size: 1.5rem; /* 字体大小 */
    color: #3a3a3a; /* 字体颜色 */
}

/* 内容项段落样式 */
.item p {
    margin: 0.5rem 0; /* 上下边距 */
    line-height: 1.6; /* 行高 */
    color: #555; /* 字体颜色 */
}

/* 内容项列表样式 */
.item ul {
    list-style-type: none; /* 去除列表样式 */
    padding-left: 0; /* 去除左内边距 */
    margin-bottom: 1.5rem; /* 下边距 */
}

/* 内容项列表项样式 */
.item li {
    padding: 0.5rem 0; /* 上下内边距 */
    border-bottom: 1px solid #e0e0e0; /* 底部边框 */
    display: flex; /* 使用flex布局 */
    flex-direction: column;
}

/* 最后一个列表项的样式 */
.item li:last-child {
    border-bottom: none; /* 去除底部边框 */
}

/* 内容项加粗文本样式 */
.item strong {
    display: inline-block; /* 行内块元素 */
    width: auto; /* 改为自动宽度 */
    min-width: 120px; /* 设置最小宽度 */
    color: #4a90e2; /* 字体颜色 */
    margin-bottom: 5px; /* 添加底部间距 */
}

/* 按钮样式 */
a.button {
    display: inline-block; /* 行内块元素 */
    margin-top: 1rem; /* 上边距 */
    padding: 0.5rem 1.5rem; /* 内边距 */
    background-color: #4a90e2; /* 背景颜色 */
    color: white; /* 字体颜色 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 8px; /* 圆角 */
    transition: background-color 0.3s; /* 背景颜色过渡效果 */
}

/* 按钮悬停效果 */
a.button:hover {
    background-color: #357ab8; /* 悬停时背景颜色 */
}

/* 视频容器样式 */
.video-container {
    position: relative; /* 相对定位 */
    width: 100%; /* 宽度100% */
    padding-bottom: 56.25%; /* 高度比例 */
    height: 0; /* 高度为0 */
}

/* 视频iframe样式 */
.video-container iframe {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部位置 */
    left: 0; /* 左侧位置 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    border: none; /* 去除边框 */
}

/* 可缩放图片样式 */
img.zoomable {
    width: 100%; /* 宽度100% */
    max-width: 500px; /* 最大宽度 */
    border-radius: 8px; /* 圆角 */
    margin-top: 1rem; /* 上边距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* 模态框样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1001; /* 层级 */
    left: 0; /* 左侧位置 */
    top: 0; /* 顶部位置 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    overflow: hidden; /* 隐藏溢出内容 */
    background-color: rgba(0, 0, 0, 0.7); /* 背景颜色 */
}

/* 模态框内容样式 */
.modal-content {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部位置 */
    left: 0; /* 左侧位置 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: auto; /* 允许溢出内容滚动 */
}

/* 模态框内图片样式 */
.modal img {
    max-width: 100%; /* 最大宽度100% */
    max-height: 100%; /* 最大高度100% */
    object-fit: contain; /* 保持比例 */
    border-radius: 8px; /* 圆角 */
}

/* 添加响应式样式兼容更小屏幕设备 */
@media (max-width: 480px) {
    .navbar {
        padding: 8px 3px;
    }
    
    .navbar a {
        font-size: 0.75rem;
        padding: 6px 8px;
        margin: 0 3px;
    }
    
    .item h2 {
        font-size: 1.3rem;
        word-wrap: break-word;
    }
    
    .item {
        padding: 1.2rem;
        margin: 65px auto 15px;
        width: 95%;
    }
}