/* 重置列表样式 */
nav#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
nav#menu li {
    padding: 0; 
    margin: 0;
}

/* 箭头样式 */
nav#menu li > p {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    margin: 8px 0;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
    transition: color 0.3s ease;
    padding-right: 25px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;  /* 添加背景颜色 */
    border-radius: 4px;         /* 圆角效果 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 只有有子菜单的项才显示箭头 */
nav#menu li > p.has-submenu::before {
    content: '▶'; /* 箭头 */
    position: absolute;
    left: 10px;
    top: 45%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 0.9em;
    transition: transform 0.3s ease;
    color: #555;
}

nav#menu li > p.open.has-submenu::before {
    transform: translateY(-50%) rotate(90deg); /* 箭头旋转 */
}

/* 子菜单缩进 */
nav#menu ul ul {
    padding-left: 15px;
    /* display: none; */
    background-color: #f9f9f9; /* 子菜单背景 */
    border-left: 3px solid #2196F3; /* 子菜单左侧边框 */
    /* transition: display 0.3s ease; */
    overflow: hidden; /* 隐藏超出部分 */
    max-height: 0; /* 初始状态高度为0 */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}

nav#menu ul ul.show-animation,
nav#menu ul .open + ul {
    display: block; /* 显示子菜单 */
    max-height: 10000px; /* 设置一个足够大的值 */
    opacity: 1;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.1s;
}

/* 子菜单项动画 */
nav#menu ul ul li {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

nav#menu ul ul.show-animation li,
nav#menu ul .open + ul li {
    transform: translateY(0);
    opacity: 1;
    /*transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;*/
}

/* 为子菜单项添加延迟动画 */
nav#menu ul ul li {
    transition-delay: 0s; /* 重置默认值 */
}

/* 为子菜单项添加延迟动画 */
nav#menu ul ul li:nth-child(1) { transition-delay: 0.1s; }
nav#menu ul ul li:nth-child(2) { transition-delay: 0.15s; }
nav#menu ul ul li:nth-child(3) { transition-delay: 0.2s; }
nav#menu ul ul li:nth-child(4) { transition-delay: 0.25s; }
nav#menu ul ul li:nth-child(5) { transition-delay: 0.3s; }
nav#menu ul ul li:nth-child(n+6) { transition-delay: 0.35s; }

nav#menu ul .open + ul li:nth-child(1) { transition-delay: 0.2s; }
nav#menu ul .open + ul li:nth-child(2) { transition-delay: 0.25s; }
nav#menu ul .open + ul li:nth-child(3) { transition-delay: 0.3s; }
nav#menu ul .open + ul li:nth-child(4) { transition-delay: 0.35s; }
nav#menu ul .open + ul li:nth-child(5) { transition-delay: 0.4s; }
nav#menu ul .open + ul li:nth-child(n+6) { transition-delay: 0.45s; }


/* 链接样式 */
nav#menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px 0;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

nav#menu a:hover {
    color: #2196F3; /* 鼠标悬停时链接颜色变化 */
}

/* 当前活动项样式 */
nav#menu strong {
    color: #2196F3; /* 当前活动项的颜色 */
    font-weight: bold;
    display: block;
    padding: 5px 0;
}

/* 鼠标悬停效果 */
nav#menu li > p:hover {
    color: #2196F3; /* 鼠标悬停时，文本颜色变化 */
    background-color: #e0e0e0; /* 鼠标悬停时背景变化 */
    border-radius: 4px;
    padding-left: 30px;
}

/* 子菜单背景色 */
nav#menu ul ul li > p:hover {
    background-color: #e6f0ff; /* 子菜单项悬停时背景色 */
}

/* 为没有子菜单的项增加背景和阴影 */
nav#menu li > p:not(.has-submenu) {
    background-color: #f9f9f9; /* 没有子菜单项的背景色 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 增加阴影 */
}

/* 动画效果 */
nav#menu ul {
    transition: transform 0.3s ease-out;
}

/* 右侧样式 */
#main a {
    /* 基础颜色加深 */
    color: #f27474;
    text-decoration: none;
    font-weight: 600;  /* 增加字重 */
    transition: all 0.3s ease;
    position: relative;
    padding: 0.2rem 0;
    margin: 0 0.5rem;

    /* 悬停效果增强 */
    &:hover {
        color: #0f3d8c;  
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 2px;  /* 加粗下划线 */
    }

    /* 点击效果 */
    &:active {
        color: #f27474; 
        transform: scale(0.98);
    }

    /* 焦点状态加深 */
    &:focus {
        outline: 3px solid rgba(26, 91, 191, 0.4);  /* 更明显的轮廓 */
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* 已访问链接 */
    &:visited {
        color: #f27474;  
    }

    /* 外链标识 */
    &[target="_blank"]::after {
        content: "↗";
        font-weight: 700;  /* 箭头加粗 */
        color: #1a5bbf;  
    }

    /* 导航链接样式 */
    &.nav-link {
        color: white;
        background: #1a5bbf; 
        padding: 0.6rem 1.5rem;
        border-radius: 8px;
        
        &:hover {
            background: #0f3d8c;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);  /* 添加投影 */
        }
    }
}

/* 保持原有样式基础上增加新规则 */
#content a {
    target-new: tab; /* 非标准属性，需配合JavaScript实现 */
}

/* 给新窗口链接添加更明显的标识 */
#content a[target="_blank"]::after {
    content: "↗";
    font-size: 0.85em;
    margin-left: 0.4em;
    font-weight: bold;
    color: #ff4757; /* 醒目的红色 */
    transition: transform 0.2s;
}

#content a[target="_blank"]:hover::after {
    transform: translate(2px, -2px);
}




/* 设置#content为Flexbox容器 */
#content {
    display: flex;
    flex-wrap: wrap; /* 当内容超出容器宽度时换行 */
    gap: 10px; /* 设置元素之间的间距 */
}

/* 设置每个<p>标签的基本样式 */
#content p {
    display: flex;          /* 使用flex布局 */
    justify-content: flex-start; /* 水平左对齐（保持原有对齐方式） */
    flex: 1 1 auto; /* 允许项目增长和收缩 */
    min-width: 200px; /* 设置最小宽度，避免过窄 */
    padding: 10px;
    margin-bottom: 0; /* 确保没有额外的下边距 */
    border-left: 5px solid transparent; /* 移除transparent，颜色由具体样式类决定 */
    box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
    word-wrap: break-word; /* 自动换行 */
    position: relative; /* 为伪元素定位做准备 */
    overflow: hidden; /* 隐藏伪元素的溢出部分 */
    background-color: transparent !important; /* 初始透明，避免干扰动画 */
    line-height: normal;   /* 重置行高以避免冲突 */
    text-align: left;            /* 确保文本内容左对齐（适用于多行文本） */
    white-space: normal !important; /* 覆盖可能的 flex 影响 */
    display: block !important; /* 防止 flex 布局干扰 */
}

/* 确保 <br> 标签生效 */
#content p br {
    content: ""; /* 确保伪元素不影响换行 */
    display: block !important; /* 强制换行 */
    
}



/* 伪元素：用于实现背景动画 */
#content p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* 初始宽度为0 */
    height: 100%;
    z-index: -1; /* 确保背景在文字下方 */
    transition: width 1.5s ease !important; /* 宽度动画 */
}

/* 动态添加样式时的动画触发 */
#content p[class^="style-"]::before {
    width: 100%; /* 动画结束时宽度100% */
}


/* 修正所有样式类定义 */
#content .style-1 {
    border-left-color: rgb(29, 144, 221) !important;
}
#content .style-1::before {
    background-color: rgba(139, 183, 213, 0.2) !important;
}

#content .style-2 {
    border-left-color: rgb(110, 242, 191) !important;
}
#content .style-2::before {
    background-color: rgba(212, 242, 230, 0.2) !important;
}

#content .style-3 {
    border-left-color: rgb(206, 232, 59) !important;
}
#content .style-3::before {
    background-color: rgba(216, 225, 168, 0.2) !important;
}

#content .style-4 {
    border-left-color: rgb(206, 28, 91) !important;
}
#content .style-4::before {
    background-color: rgba(208, 128, 156, 0.2) !important;
}

#content .style-5 {
    border-left-color: rgb(128, 73, 223) !important;
}
#content .style-5::before {
    background-color: rgba(193, 176, 221, 0.2) !important;
}

#content .style-6 {
    border-left-color: rgb(229, 113, 67) !important;
}
#content .style-6::before {
    background-color: rgba(225, 188, 173, 0.2) !important;
}