body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f8f8f8;
    color: #333;
    margin: 0;
    padding: 0;
}

.header {
    background-color: #ffd700;
    text-align: center;
    padding: 0.8rem;
}

.header h1 {
    font-size: 3.5rem;
    color: #2c3e50;
    margin-bottom: 0.4rem;
}

.domain {
    font-size: 1rem;
    color: #555;
}

.main-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0.8rem;
    box-sizing: border-box;
}

.disclaimer {
    background-color: #fff3cd;
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 1.2rem;
    box-sizing: border-box;
    font-size: 0.95rem;
}

/* 年份标题 */
.year-heading {
    font-size: 1.8rem;
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.4rem;
    margin-bottom: 1.2rem;
    text-align: center;
}

/* 月份标题 */
.month-heading {
    font-size: 1.3rem;
    color: #2ecc71;
    margin-bottom: 0.8rem;
    text-align: center;
}

/* 减小导航项的内边距和字体大小 */
.event-nav {
    display: flex;
    background-color: #e0e0e0;
    /*padding: 0.3rem 0.5rem; !* 减少了内边距 *!*/
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
    gap: 3px; /* 减小间距 */
    font-size: 0.9rem; /* 稍微减小字体 */
}

.event-nav-item {
    flex: 1;
    min-width: 60px; /* 减小最小宽度 */
    text-align: center;
    white-space: nowrap;
    /*padding: 0.2rem 0.3rem; !* 大幅减少内边距 *!*/
    color: #333 ;
    text-decoration: none;
}

/* 减小事件项的内边距 */
.event-item {
    background-color: white;
    padding: 0.4rem 0.6rem; /* 减少内边距 */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.3rem;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    display: block;
    font-size: 0.9rem;
}

/* 移除原来的事件信息容器样式，现在状态直接在内容中 */
.event-info-content {
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
}

/* 状态样式 - 现在作为内容的一部分 */
.event-status {
    font-weight: bold;
    color: #3498db; /* 未开始默认色 */
}

.status-running {
    color: #2ecc71; /* 进行中绿色 */
}

.status-upcoming {
    color: #3498db; /* 未开始蓝色 */
}

.status-ended {
    color: #e74c3c;
    display: none;
}

.event-description {
    display: none;
    background-color: white;
    padding: 0.5rem 0.8rem;
    margin-top: 0.2rem;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    line-height: 1.3;
    font-size: 0.9rem;
}

.friend-links {
    background-color: #e0f7fa;
    padding: 0.8rem;
    margin-top: 1.5rem;
    box-sizing: border-box;
}

.friend-links h3 {
    font-size: 1.3rem;
    color: #3498db;
    text-align: center;
    margin-bottom: 0.8rem;
}

.friend-links ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
}

.friend-links ul li {
    margin: 0 0.8rem;
}

.footer {
    background-color: #e0e0e0;
    padding: 0.8rem;
    text-align: center;
    box-sizing: border-box;
}

.footer-section {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 0.8rem;
}

.footer-section h4 {
    font-size: 1.1rem;
    color: #3498db;
    margin-bottom: 0.4rem;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

/* 响应式适配 */
@media (min-width: 768px) {
    .main-container {
        padding: 0 1.5rem;
    }
}

/* 在小屏幕上进一步调整 */
@media (max-width: 576px) {
    .header {
        padding: 0.6rem;
    }

    .header h1 {
        font-size: 2.8rem;
    }

    .domain {
        font-size: 0.9rem;
    }

    .event-nav {
        padding: 0.2rem 0.3rem;
        font-size: 0.8rem;
    }

    .event-nav-item {
        font-size: 0.8rem;
        min-width: 50px;
        padding: 0.15rem 0.2rem;
    }

    .event-item {
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
    }

    .year-heading {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .month-heading {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }
}
/* nav-hover 基础样式：添加过渡效果，确保背景变化平滑 */
.nav-hover:hover {
    transition: background-color 0.3s ease-in-out;
    color: #3498db;
}




/* 针对 <a> 标签的 .nav-hover 基础样式（解决核心问题） */
a.nav-hover {
    /* 关键1：将行内元素转为行内块元素，支持伪元素定位和宽高控制 */
    display: inline-block;
    /* 关键2：相对定位，作为伪元素的定位容器（必不可少） */
    position: relative;
    /* 关键3：预留下划线空间，避免文字与下划线重叠（可选，优化美观度） */
    padding-bottom: 2px;
    /* 关键4：统一过渡效果，移入/移出均平滑（文字色+下划线同步过渡） */
    transition: all 0.3s ease-in-out;
    /* 可选：移除 <a> 标签默认下划线，避免与自定义下划线冲突 */
    text-decoration: none;
    /* 可选：默认文字颜色，保证视觉统一 */
    color: #333;
    /* 可选：鼠标移入显示手型，提升交互感知 */
    cursor: pointer;
}

/* <a> 标签移入时：文字变色 #3498db */
a.nav-hover:hover {
    color: #3498db;

}

.active{
    color: #3498db !important;
}


/* 自定义下划线：伪元素实现（默认隐藏） */
a.nav-hover::after {
    content: ''; /* 伪元素必备，空值即可 */
    position: absolute; /* 绝对定位，精准控制下划线位置 */
    left: 0; /* 下划线左对齐（如需居中：left: 50%; transform: translateX(-50%);） */
    bottom: 0; /* 与 <a> 标签底部对齐，配合 padding-bottom 控制间距 */
    width: 0; /* 默认宽度 0，隐藏下划线 */
    height: 2px; /* 下划线高度，2px 视觉舒适 */
    background-color: #3498db; /* 下划线颜色，匹配文字变色 #3498db */
    transition: width 0.3s ease-in-out; /* 下划线宽度过渡，实现平滑展开/收缩 */
}

/* <a> 标签移入时：展开下划线（显示效果） */
a.nav-hover:hover::after {
    width: 100%; /* 宽度展开为 100%，显示完整下划线 */
}
/* 导航栏基础样式（对齐 Bootstrap 导航栏） */
.navbar.event-nav {
    display: flex;
    flex-direction: row; /* 横向排列（Bootstrap 风格） */
    align-items: center;
    background-color: #fff;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 0; /* 取消原有间距 */
    font-size: 1rem;
}

/* 导航项包裹器（下拉容器） */
.nav-item-wrapper.dropdown {
    position: relative; /* 支撑下拉菜单绝对定位 */
}

/* 导航项按钮（下拉触发） */
.event-nav-item.nav-hover {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0.25rem;
}
.event-nav-item.nav-hover:hover {
    color: #3498db;
    background-color: #f8f9fa;
}

/* 下拉箭头 */
.dropdown-caret {
    font-size: 0.8rem;
    margin-left: 0.3rem;
    transition: transform 0.2s ease;
}
.dropdown.open .dropdown-caret {
    transform: rotate(180deg); /* 下拉展开时箭头反转 */
}

/* 下拉菜单样式（对齐 Bootstrap 下拉） */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none; /* 默认隐藏 */
    min-width: 160px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 0.25rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* 下拉菜单项 */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    color: #212529;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.dropdown-item:hover {
    color: #3498db;
    background-color: #f8f9fa;
}

/* 下拉菜单显示状态 */
.dropdown.open .dropdown-menu {
    display: block;
}

/* 第一步：修复 .active 类，恢复垂直对齐，统一内边距 */
.active {
    color: #3498db !important;
    /* 必备：相对定位（保留，支撑伪元素），去掉 !important 避免强制覆盖默认对齐 */
    position: relative;
    /* 关键1：统一导航项内边距（与 .event-nav-item 保持一致，避免文字变矮） */
    /* 此处数值需与 .event-nav-item 的 padding 匹配，示例用 0.5rem 1rem，你可根据实际调整 */
    padding: 0.5rem 1rem !important;
    /* 关键2：底部额外预留下划线空间（不修改整体内边距，避免错位） */
    padding-bottom: 0.7rem !important;
    /* 关键3：恢复垂直对齐，确保与其他导航项平行（去掉强制 inline-block，继承父容器样式） */
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    /* 确保与其他导航项高度一致，不塌陷 */
    height: 100%;
    box-sizing: border-box;
}

/* 第二步：优化伪元素，增加与文字的间距，避免紧贴 */
.active::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    /* 关键：将 bottom 从 0 改为 -2px / 4px，拉开与文字的间距（不紧贴） */
    bottom: 4px !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #3498db !important;
    display: block !important;
    z-index: 99 !important;
    transition: width 0.3s ease-in-out !important;
    /* 可选：左右留出少量间距，视觉更精致（避免下划线完全贴边） */
    left: 1rem !important;
    width: calc(100% - 2rem) !important;
}

/* 补充：确保 .event-nav-item 基础样式统一（所有导航项对齐的核心） */
.event-nav-item {
    /* 与 .active 类的 padding 保持完全一致，确保高度、对齐统一 */
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    position: relative; /* 统一添加，避免 hover 样式错位 */
}