/* =========================
   基础样式与布局设定
   ========================= */

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全局字体和背景 */
body {
    font-family: "微软雅黑", sans-serif;
    background: #EFF5F8; /* 浅背景色 */
    line-height: 1.6;
    padding-top: 120px; /* header总高度(60px上部图区 + 60px导航区) */
}

/* 通用链接样式 */
a {
    text-decoration: none; /* 去掉下划线 */
    color: #E15F49; /* 默认颜色 */
    transition: transform 0.3s ease, color 0.3s ease, background-color 0.3s ease; /* 添加背景颜色过渡效果 */
    padding: 5px 0; /* 添加一些内边距，确保鼠标悬停时不会只限于文字 */
    display: inline-block; /* 保持元素在行内，同时支持块级样式 */
}

/* 鼠标悬停时放大并且背景变灰 */
a:hover {
    transform: scale(1.2); /* 鼠标悬停时放大20% */
    background-color: #f0f0f0; /* 鼠标悬停时背景色为灰色 */
}

/* 访问后的链接颜色 */
a:visited {
    color: cornflowerblue; /* 访问后的链接变为浅蓝色 */
}

/* 容器设置 */
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0; /* 默认不添加内边距 */
    height: calc(100vh - 120px); /* 减去 header高度 */
    display: flex;
    flex-direction: column;
}

/* =========================
   Header 样式
   ========================= */

/* Header 固定在顶部 */
header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    z-index: 999;
    height: 120px; /* 60px上部 + 60px导航 */
    background: #fff; /* 确保 header 背景为白色 */
}

/* 顶部图片区域 */
.header-top {
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-top .left-pic,
.header-top .right-pic {
    position: absolute;
    top: 5px;
    height: 50px;
    width: auto;
    bottom: 5px;
}

.header-top .left-pic {
    left: 0;
}

.header-top .right-pic {
    right: 0;
}

.header-top .welcome-text {
    font-size: 2em;
    color: #00518E;
    font-weight: bold;
}

/* 导航菜单区域 */
.header-nav {
    height: 60px;
    background: #00518E; /* 庄重的蓝色 */
    font-size: 150%;
    color: #fff;
}

nav {
    display: flex;
    height: 60px; 
    line-height: 60px; 
    flex-wrap: nowrap;
    position: relative;
}

nav a {
    flex: 1;
    text-align: center;
    color: #fff; /* 保持白色文字 */
    background: #00518E; /* 与 header-nav 背景色一致 */
    border-right: 1px solid #003f6b; /* 深蓝色边框 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

nav a:last-child {
    border-right: none;
}

nav a.current {
    background: #003f6b; /* 更深的蓝色 */
    color: #FFD700; /* 金色文字，增加对比 */
    font-weight: bold;
}

nav a:hover {
    background: #FFD700; /* 鼠标悬停时背景色为金色 */
    color: #00518E; /* 悬停时文字颜色为蓝色 */
}

nav a .sub-text {
    display: block;
    font-size: 65%;
    color: #B8B8B8;
    line-height: 1.2;
}


/* =========================
   内容区域样式
   ========================= */

/* 主内容与侧边栏容器 */
.content {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    flex-grow: 1; /* 让 content 填满容器 */
    height: 100%; /* 由父容器 .container 控制 */
}

/* 主内容区域 */
main, aside {
    overflow-y: auto; 
    overflow-x: hidden;
    height: 100%; /* 设置为100%，由父容器控制高度 */
    position: relative;
}

/* 统一垂直滚动条宽度为5px */
main::-webkit-scrollbar,
aside::-webkit-scrollbar {
    width: 5px; /* 统一为5px */
    background: transparent;
}
/* 激活区域的样式 */
main.active, aside.active {
    border: 2px solid #30A3FC;
    transition: border 0.3s ease;
}

/* 滚动条轨道样式 */
main::-webkit-scrollbar-track,
aside::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

/* 滚动条滑块样式 */
main::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

/* 强制添加额外的1px高度，确保即使内容很少也有滚动余量 */
main::after, aside::after {
    content: "";
    display: block;
    height: 1px; 
}

/* main 和 aside 初始宽度 */
main {
    background: #fff;
    width: 275px;
    min-width: 150px;

    /* padding-right: 5px; 移除以避免多余空间 */
    position: relative;
    z-index: 2; /* 保证 main 在 divider 上方 */
    transition: width 0.3s ease, height 0.3s ease; /* 添加过渡效果 */
}

aside {
    background: #f9f9f9;
    width: 720px; /* 调整为720px，275 + 5 + 720 = 1000px */
    min-width: 300px;
    position: relative; /* 确保子元素的绝对定位相对于 aside */
    transition: width 0.3s ease, height 0.3s ease; /* 添加过渡效果 */
}

/* 分割条样式 */
.divider {
    width: 5px;
    background: #ccc;
    cursor: col-resize;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    transition: visibility 0.3s ease;
}

/* footer 样式 */
footer {
    position: fixed; 
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    background: #000;
    border-top: 1px solid #333;
    color: #fff;
    font-size: 80%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    opacity: 1;
    z-index: 999; /* 确保 footer 在最上层 */
}

footer.hidden {
    opacity: 0;
    pointer-events: none; /* 避免鼠标事件 */
}

/* =========================
   小屏幕 (<700px) 的响应式样式
   ========================= */

@media (max-width: 700px) {
    .container {
        padding: 0 15px; /* 添加左右内边距，防止内容紧贴边缘 */
    }

    .content {
        flex-direction: column;
        height: calc(100vh - 120px); /* 调整为固定高度，方便动画 */
    }

    .divider {
        height: 5px;
        width: 100%;
        cursor: row-resize;
    }

    /* 上下布局时，高度平分 */
    main, aside {
        width: 100%;
        height: 50%;
        transition: height 0.5s ease; /* 添加过渡动画 */
    }

    /* 隐藏顶部左右图片避免重叠 */
    .header-top .left-pic,
    .header-top .right-pic {
        display: none;
    }

    /* 调整 header-nav 字体大小，避免换行 */
    .header-nav {
        font-size: 120%; /* 调整为合适的大小 */
    }

    /* 使导航栏在小屏幕上更适应 */
    nav {
        flex-wrap: wrap; /* 允许换行 */
    }

    nav a {
        padding: 5px 0; /* 减小内边距 */
        font-size: 14px; /* 调整字体大小 */
    }

    /* 调整 footer 位置以适应小屏幕 */
    footer {
        max-width: 100%;
    }

/* =========================
   大屏幕 (≥701px) 的响应式样式
   ========================= */
@media (min-width: 701px) {
    /* 确保 container 无内边距 */
    .container {
        padding: 0;
    }
}