/* General body styles / 全局样式 */
body {
    font-family: 'Roboto', Arial, sans-serif; /* Use Roboto as the primary font, fallback to Arial / 使用Roboto作为主要字体，Arial作为备选 */
    background-color: #f4f4f4; /* Background color for the body / 背景颜色 */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Allows the footer to stay at the bottom / 允许页脚固定在底部 */
    min-height: 100vh; /* Ensure the content covers the full screen height / 确保内容覆盖整个屏幕高度 */
    padding-top: 0px; /* 为body内容添加足够的上边距，以防被固定导航栏遮挡 */
    width: 100%; /* 占据全屏宽度 */
}

/* Navigation bar styling / 导航栏样式 */
.navbar {
    background-color: #ffffff; /* White background for the navbar / 导航栏的白色背景 */
    padding: 22px 0;
    border-bottom: 4px solid #E6E6E6; /* Subtle bottom border / 微妙的底部边框 */
    border-top: 1px solid #E6E6E6; /* Subtle top border / 微妙的顶部边框 */
    position: fixed; /* 固定在页面顶部 */
    z-index: 1000; /* 确保导航栏在其他内容之上 */
    display: flex;
    align-items: center; /* 使导航栏中的内容垂直居中 */
    justify-content: space-between; /* 左侧文本和右侧导航菜单分布在两端 */
    width: 100%; /* 让导航栏占据页面的整个宽度 */
    top: 0; /* 固定在页面顶部 */
    left: 0; /* 确保导航栏从页面左侧开始 */
    right: 0; /* 确保导航栏延伸到页面右侧 */
    box-sizing: border-box; /* 包括 padding 和 border 计算在内 */
}

/* 左侧文本链接样式 */
.logo-text {
    white-space: nowrap; /* 防止换行 */

    font-size: 20px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体加粗 */
    color: rgb(24, 28, 98); /* 设置文本颜色 */
    text-decoration: none; /* 去除下划线 */
    margin-left: 20px; /* 左边距，确保不会贴边 */
    padding: 5px 10px; /* 增加内边距，让背景更明显 */
    border-radius: 5px; /* 添加圆角 */
    transition: background-color 0.3s, color 0.3s; /* 平滑的过渡效果 */
}

/* 当鼠标悬停时的样式 */
.logo-text:hover {
    background-color: #f1f1f1; /* 悬停时显示灰色背景 */
    color: rgb(149, 18, 114); /* 文本颜色变为黑色 */
}

/* 导航栏项目的样式 */
.navbar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* 导航项右对齐 */
    align-items: center;
    max-width: 1200px; /* 设置导航项的最大宽度，防止在超宽屏上拉伸过宽 */
    width: 100%; /* 占据整个导航栏宽度 */
}

.navbar ul li {
    display: inline-block; /* Aligns the list items horizontally / 将列表项水平排列 */
    margin-right: 20px; /* Adds space between navigation items / 在导航项之间添加间距 */
}

.navbar ul li a {
    text-decoration: none; /* Removes the underline from links / 去除链接下划线 */
    font-family: 'Roboto', Arial, sans-serif; /* Font for the links / 链接的字体 */
    font-size: 16px; /* Font size for the links / 字体大小 */
    color: #333; /* Text color / 文本颜色 */
    padding: 10px 20px; /* Padding inside each link / 链接内部的填充 */
    border-radius: 10px; /* Rounded corners for buttons / 按钮的圆角 */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect / 平滑的悬停效果 */
}

.navbar ul li a:hover {
    background-color: #f1f1f1; /* Light background color when hovered / 悬停时的浅色背景 */
    color: #000; /* Darker text color on hover / 悬停时文本颜色变深 */
}

.navbar ul li a.active {
    background-color: rgb(24, 28, 98); /* Dark background for the active button / 当前选中页面的按钮背景 */
    color: white; /* White text for the active button / 当前选中页面的按钮文本颜色 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a slight shadow to the active button / 为选中的按钮添加阴影 */
}

/* Footer Section Styling / 页脚样式 */
.footer {
    background-color: #f9f9f9; /* Light grey background / 浅灰色背景 */
    padding: 10px 0; /* Padding for the footer / 页脚的内边距 */
    border-top: 2px solid #E6E6E6; /* Subtle top border / 微妙的顶部边框 */
}

.footer-container {
    display: flex;
    justify-content: space-between; /* Space between columns / 列之间的间距 */
    align-items: center; /* Vertically centers content / 垂直居中内容 */
    max-width: 1200px; /* Maximum width for footer / 页脚的最大宽度 */
    margin: 0 auto; /* Center the footer content / 将页脚内容居中 */
}

.footer-column {
    flex: 1; /* Flexbox to distribute columns evenly / Flexbox使列均匀分布 */
    text-align: left; /* Left-align the text / 左对齐文本 */
}

.footer-column h3 {
    font-family: 'Roboto', Arial, sans-serif; /* Use Roboto or Arial for the header text / 使用Roboto或Arial字体 */
    font-size: 16px; /* Font size for headings / 标题的字体大小 */
    color: #333; /* Dark color for headings / 标题的深色 */
    margin-bottom: 15px; /* Spacing below the heading / 标题下方的间距 */
}

.footer-column ul {
    list-style: none; /* Remove bullet points / 去除列表中的圆点 */
    padding: 0; /* Remove padding / 去除内边距 */
}

.footer-column ul li {
    margin-bottom: 10px; /* Space between list items / 列表项之间的间距 */
}

.footer-column ul li a {
    text-decoration: none; /* Remove underline from links / 去除链接下划线 */
    color: #333; /* Dark color for links / 链接文本颜色 */
    transition: color 0.3s; /* Smooth transition on hover / 平滑的悬停效果 */
}

.footer-column ul li a:hover {
    color: #000; /* Change color to black on hover / 悬停时变为黑色 */
}

.footer-logo {
  width: 260px;              /* 控制 Logo 大小，和首页保持一致 */
  max-height: 80px;          /* 防止撑开 */
  object-fit: contain;
  display: block;
}

.footer p {
    font-size: 14px; /* Set a smaller font size for the copyright text / 版权文字的较小字体 */
    color: #666; /* Grey color for the copyright text / 版权文字的灰色 */
    margin-top: 10px; /* Add spacing above the copyright text / 在版权文字上方添加间距 */
}

/* Ensure the footer stays at the bottom of the page / 确保页脚始终位于页面底部 */
html, body {
    height: 100%; /* Set height to 100% to ensure full height layout / 设置页面高度为100% */
}

body {
    display: flex;
    flex-direction: column; /* Flexbox layout to ensure the footer stays at the bottom / 使用Flexbox布局确保页脚位于底部 */
}

footer {
    margin-top: auto; /* Push the footer to the bottom of the page / 将页脚推到页面底部 */
}

/* 当页面宽度小于 768px 时隐藏正常导航，显示汉堡菜单 */
@media screen and (max-width: 1600px) {
    .nav-menu {
        display: none; /* 隐藏正常的导航菜单 */
    }
    .hamburger-menu {
        display: block; /* 显示汉堡菜单 */
    }
}

/* 显示移动端下拉菜单时的样式 */
.mobile-menu {
    display: none; /* 默认隐藏 */
    background-color: #ffffff;
    position: absolute;
    top: 80px;
    left: auto;
    right: 0;
    flex-direction: column;
    text-align: center;
    border-top: 1px solid #E6E6E6;
}

.mobile-menu a {
    padding: 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #E6E6E6;
}

.mobile-menu a:hover {
    background-color: #f1f1f1;
}


/* Index 页面中的News and Updates格式垂直居中对齐 */
.news-item {
    display: flex;
    align-items: center;   /* 垂直居中对齐 */
    margin-bottom: 20px;   /* 每条新闻之间间距 */
}

.news-date {
    width: 150px;          /* 固定日期宽度，确保对齐 */
    font-weight: bold;
    color: #333;
    flex-shrink: 0;        /* 防止被压缩 */
}

.news-content {
    flex: 1;               /* 自动填满剩余空间 */
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* --- Mobile overflow safety net --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;   /* prevent accidental horizontal scroll */
}

img, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}