:root {
    --primary-color: #b35c3a; /* 来自头部/页脚的红棕色 */
    --secondary-color: #ffffff; /* 米色背景 */
    --text-color: #333;
    --accent-color: #d2691e;
    --border-color: #e0e0e0;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 自定义版心宽度：在大屏下固定为 1200px */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }
}

body {
    /* font-family: "Microsoft YaHei", Arial, sans-serif; */
    background-color: var(--secondary-color);
    color: var(--text-color);
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* 头部 */
.top-header {
    background-color: var(--primary-color);
    color: white;
    padding: 0; /* Let navbar handle padding */
}

/* Navbar Customization */
.navbar {
    padding-top: 15px;
    padding-bottom: 15px;
}

.logo-area {
    display: flex;
    align-items: center;
    /* Remove padding-bottom as flex alignment handles it */
}

/* Desktop Layout for Header Right Side */
.header-right-desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

.main-nav .nav-link {
    color: rgba(255, 255, 255) !important;
    font-size: 17px;
    padding: 0.5rem 0.5rem;
    font-weight: 500;
}

.main-nav .nav-link:hover, .main-nav .nav-link.active {
    color: #fff !important;
    background-color: rgba(0,0,0,0.1);
}

/* Mobile Toggle Button */
.navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}
.nav-link:focus {
    box-shadow: none;
    outline: none;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menu Customization */
.dropdown-menu {
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 0;
    padding: 0;
}

.dropdown-item {
    padding: 12px 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--primary-color);
    color: white;
}

.search-box input {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.8); /* 保持白色边框，类似图片中的圆角矩形 */
    background: transparent;
    color: white;
    padding: 2px 35px 2px 15px; /* 右侧留出空间给图片图标 */
    font-size: 12px;
    width: 180px;
    outline: none;
    height: 26px; /* 适当增加高度以匹配图标 */
}
.search-box input::placeholder {
    color: rgba(255,255,255,0.7);
}

/* 轮播图保持固定高度，避免不同尺寸图片导致跳动 */
.hero-carousel .carousel-item {
    height: clamp(280px, 55vh, 600px);
}

#newsCarousel .carousel-item {
    height: clamp(300px, 40vh, 450px)!important;
}

.hero-carousel .carousel-link {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 版块通用样式 */
.section-header {
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
    /* Removed border-bottom to implement middle line style */
    padding-bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* Middle line between title and more link */
.section-header::after {
    content: "";
    flex-grow: 1;
    height: 3px;
    background-color: var(--primary-color);
    margin: 0 20px 8px 20px; /* 8px bottom margin to align with text middle */
    order: 1;
    border-radius: 2px;
}

.section-title-group {
    display: flex;
    flex-direction: column;
    order: 0;
}

.section-en-title {
    font-size: 12px;
    color: #888;
    margin-bottom: -5px;
    text-transform: capitalize;
}

.section-zh-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
}

.more-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
    order: 2; /* Ensure it stays on the right */
    margin-bottom: 3px;
}

.more-link:hover {
    color: var(--primary-color);
}

.more-link i {
    margin-right: 5px;
}

/* News Section */
.news-container {
    display: flex;
    align-items: stretch; /* Ensure both columns are same height */
    flex-wrap: wrap; /* Allow wrapping */
    position: relative; /* For bottom connecting line */
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px; /* Ensure a minimum height */
}

.news-list-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute items evenly */
}

.news-item {
    border-bottom: 3px solid var(--primary-color); /* Thicker solid line */
    padding: 15px 0; /* Increase padding for better spacing */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Remove border from the last item if needed, but prototype shows lines for all?      
   Let's keep it consistent. Prototype seems to have lines under items. */
.news-item:last-child {
    border-bottom: 3px solid var(--primary-color);
}

.news-date {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 20px; /* Larger date */
    margin-right: 25px;
    font-style: italic; /* Italic per prototype */
    font-family: "Times New Roman", Times, serif; /* Serif font for date often looks more academic */
    white-space: nowrap; /* Prevent wrapping on desktop */
    flex-shrink: 0; /* Prevent date from shrinking */
}

.news-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
    text-decoration: none;
    font-size: 17px;
}
.news-title:hover {
    color: var(--primary-color);
}

/* Event Preview */
.event-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative; /* For bottom connecting line */
}

.event-img-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px;
}

.event-list-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-left: 20px;
}

.event-item {
    background: transparent;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--primary-color); /* Solid line separator */
    padding-bottom: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: center; Removed to allow margin-top: auto on location to work effectively */
    text-decoration: none; /* 绉婚櫎閾炬帴涓嬪垝绾?*/
    color: inherit;
}


.event-item:hover .event-title {
    color: var(--primary-color); /* 鎮仠鏃堕珮浜爣棰?*/
}

.event-item:last-child {
    border-bottom: 3px solid var(--primary-color);
    margin-bottom: 0;
    padding-bottom: 30px; 
}

.event-time {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
    font-family: "Times New Roman", Times, serif;
}

.event-title {
    /* font-weight: bold; */
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 22px;
}

.event-location {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Right aligned */
    margin-top: auto; /* Push to bottom */
}
.event-location i, .event-location svg {
    margin-right: 8px;
}
/* 閫氱煡鍏憡 */
.notice-item {
    display: flex;
    margin-bottom: 20px; /* 澧炲姞闂磋窛 */
    align-items: flex-start; /* 椤堕儴瀵归綈浠ュ鐞嗗琛屾枃鏈?*/
    text-decoration: none; /* 绉婚櫎閾炬帴涓嬪垝绾?*/
    color: inherit; /* 缁ф壙鐖跺厓绱犻鑹?*/
}
.notice-item:hover .notice-content {
    color: var(--primary-color); /* 鎮仠鏃堕珮浜唴瀹?*/
}
.date-box {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
}
.date-box .day {
    background-color: var(--primary-color);
    color: white;
    font-size: 20px;
    font-weight: bold;
    height: 34px;
    line-height: 34px;
}
.date-box .year-month {
    background-color: white;
    color: var(--primary-color);
    font-size: 10px;
    height: 24px;
    line-height: 24px;
    font-weight: bold;
}
.notice-content {
    font-size: 17px; /* Slightly larger text */
    line-height: 1.5;
    color: #333;
    /* font-weight: bold; */
    padding-top: 0px; /* Remove top padding as we are now centering */
    /* letter-spacing: 2px;  */
}


/* 娲诲姩棰勫憡 - OLD STYLES REMOVED */
/*
.event-card { ... }
*/

/* 瀛﹂櫌椋庨噰 / 鍥惧簱 */
.gallery-wrapper {
    overflow: hidden; /* Prevent scale overflow */
    border-radius: 4px; /* Optional rounded corners */
}
.gallery-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s;
    display: block; /* Remove bottom space */
}
.gallery-img:hover {
    transform: scale(1.05);
}

/* 椤佃剼 */
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 15px 0;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-info {
    font-size: 17px;
    line-height: 1.8;
}

/* ==========================================================================
   媒体查询 - 桌面端增强样式 (宽度 >= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    /* 导航栏悬停效果 */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    
    /* 悬停下拉菜单时保持父级链接高亮 */
    .nav-item.dropdown:hover .nav-link {
        color: #fff !important;
        background-color: rgba(0,0,0,0.1);
    }

    /* 新闻版块内边距 */
    .news-img-col {
        padding-right: 20px;
    }
    .news-list-col {
        padding-left: 20px;
    }

    /* 新闻版块底部贯穿线 */
    .news-container::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: var(--primary-color);
        z-index: 1;
    }
    
    /* PC端移除最后一项的独立下边框 */
    .news-item:last-child {
        border-bottom: none;
    }

    /* 活动版块底部贯穿线 */
    .event-row::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: var(--primary-color);
        z-index: 1;
    }

    .event-item:last-child {
        border-bottom: none;
    }

    /* 通知公告列表项垂直居中 */
    .notice-item {
        align-items: center;
    }

    /* 移除PC端最后一个通知项的下边距，使其与底部对齐 */
    .notice-item:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================================================
   媒体查询 - 平板与移动端 (宽度 <= 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* 移动端隐藏背景图片 */
    body {
        background-image:none;
    }

    /* 头部与导航栏 */
    .header-right-desktop {
        align-items: flex-start; /* 移动端左对齐 */
        margin-top: 15px;
    }

    .top-bar {
        justify-content: flex-start; /* 移动端左对齐 */
        width: 100%;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .main-nav {
        width: 100%;
    }

    .main-nav .nav {
        flex-direction: column;
        width: 100%;
    }

    .main-nav .nav-link {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    /* 移动端下拉菜单调整 */
    .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.2); /* 稍微加深背景以增加对比度 */
        border: none;
        box-shadow: none;
        padding-left: 0; /* 移除默认左内边距 */
        position: static !important; /* 强制静态定位，将下方内容挤下去 */
        float: none;
        width: 100%;
        margin-top: 0;
    }
    
    .dropdown-item {
        color: rgba(255, 255, 255, 0.9); /* 深色背景上的浅色文字 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        white-space: normal; /* 允许换行 */
        padding: 12px 20px 12px 40px; /* 增加左内边距以体现层级缩进 */
    }
    
    .dropdown-item:hover, .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .logo-area svg {
        width: 40px;
        height: 40px;
    }

    .logo-area h2 {
        font-size: 20px !important;
    }

    .logo-area small {
        font-size: 12px !important;
    }

    /* 主轮播图高度 */
    .hero-carousel .carousel-item {
        height: clamp(150px, 30vh, 250px);
    }

    /* 新闻轮播图移动端高度 */
    #newsCarousel .carousel-item {
        height: clamp(150px, 30vh, 250px) !important;
    }

    /* 新闻版块移动端布局 */
    .news-container {
        flex-direction: column;
    }
    .news-img-col {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 20px;
        width: 100%;
    }
    .news-list-col {
        padding-left: 0;
        padding-right: 0;
    }
    .news-img {
        min-height: auto;
        height: auto;
        width: 100%;
    }
    .news-list {
        height: auto !important;
        justify-content: flex-start !important;
        display: block;
    }

    .news-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
    }

    .news-date {
        white-space: nowrap;
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 5px;
        color: var(--accent-color);
        font-weight: 900;
        font-family: "Times New Roman", Times, serif;
    }

    .news-title {
        font-size: 15px;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip;
        display: block;
        width: 100%;
        line-height: 1.5;
        font-weight: 500 !important;
    }

    /* 活动版块移动端布局 */
    .event-row {
        flex-direction: column;
    }
    .event-list-container {
        padding-left: 0 !important;
        padding-top: 30px;
    }
    .event-img-large {
        min-height: auto;
        height: auto;
        width: 100%;
    }

    /* 通知公告和活动预告移动端字体 */
    .notice-content, .event-title {
        font-size: 15px;
    }
}

/* ==========================================================================
   媒体查询 - 仅移动端小屏 (宽度 <= 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 页脚居中对齐 */
    footer .col-md-3.text-end {
        text-align: center !important; /* 移动端强制居中 */
        margin-top: 20px;
    }
}