/* --- 基础设置 --- */
.date-nav--body a {
    text-decoration: none; /* 确保链接没有下划线 */
    color: inherit; /* 继承父元素的颜色 */
}

/* --- 折叠菜单分组容器 --- */
.collapsible-group {
    margin: 4px 0; /* 为每个主分类增加一点垂直间距 */
}

/* --- 可点击的触发器（主分类）样式 --- */
.collapsible-trigger {
    position: relative; /* 这是为了让箭头能相对于它进行定位 */
    padding: 10px 15px; /* 增加内边距，让点击区域更大，更好看 */
    cursor: pointer;
    border-radius: 4px; /* 添加圆角，使其更柔和 */
    transition: background-color 0.3s ease; /* 为背景色变化添加过渡动画 */
    display: flex; /* 使用flex布局，方便对齐 */
    align-items: center; /* 垂直居中对齐内容 */

}

/* 鼠标悬停在主分类上时的效果 */
.collapsible-trigger:hover {
    background-color: #f5f7fa; /* 一个淡淡的灰色背景 */
}

/* 主分类被选中时的样式 (沿用您之前的 .selected 逻辑) */
.collapsible-trigger.selected span {

    font-weight: bold;
}

/* --- 箭头样式 --- */
.collapsible-trigger .arrow {
    position: absolute; /* 绝对定位，相对于 .collapsible-trigger */
    right: 15px; /* 定位到右边 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%) rotate(0deg); /* 初始状态，不旋转 */
    height: 18px; /* 调整箭头大小，让它更精致 */
    width: 18px;
    transition: transform 0.3s ease-in-out; /* 这是箭头旋转动画的关键 */
}

/* 当分组展开时 (is-open)，旋转箭头 */
.collapsible-group.is-open .collapsible-trigger .arrow {
    transform: translateY(-50%) rotate(180deg); /* 旋转180度，箭头朝上 */
}

/* --- 子菜单内容区域样式 --- */
.collapsible-content {
    /* 这是让展开/收起拥有平滑动画的关键部分 */
    max-height: 0; /* 默认最大高度为0，即收起状态 */
    overflow: hidden; /* 超出部分隐藏 */
    transition: max-height 0.4s ease-in-out; /* 为max-height的变化添加动画 */
    padding-left: 15px; /* 子菜单的整体缩进 */
}

/* 当分组展开时 (is-open)，设置一个足够大的max-height */
/* 注意：这里依然建议使用前一个回复中的 JS 方案来动态计算高度，会更健壮 */
.collapsible-group.is-open .collapsible-content {
    max-height: 1500px; /* 设置一个足够大的高度，让内容可以完全显示 */
}

/* 子菜单里的每个链接项 */
.collapsible-content .cate_a .date-nav--item {
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}


