/**
 * 电脑端导航菜单简约Active状态设计
 * 为当前页面菜单项提供清晰但不突兀的视觉反馈
 */

/* 电脑端导航菜单Active状态 - 仅在桌面端生效 */
@media (min-width: 768px) {
    
    /* 基础过渡效果 */
    .cscj-menu-primary > li > a {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    
    /* 悬停状态 - 轻微的背景变化 */
    .cscj-menu-primary > li > a:hover {
        background-color: rgba(0, 0, 0, 0.04);
        border-radius: 6px;
        color: #333;
    }
    
    /* Active状态 - 当前页面菜单项 */
    .cscj-menu-primary > li.current > a,
    .cscj-menu-primary > li.current-menu-item > a,
    .cscj-menu-primary > li.current-menu-parent > a,
    .cscj-menu-primary > li.current-menu-ancestor > a {
        position: relative;
        color: #ff6000;
        font-weight: 500;
    }
    
    /* Active状态的底部指示器 - 简约线条 */
    .cscj-menu-primary > li.current > a::after,
    .cscj-menu-primary > li.current-menu-item > a::after,
    .cscj-menu-primary > li.current-menu-parent > a::after,
    .cscj-menu-primary > li.current-menu-ancestor > a::after {
        content: '';
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background: linear-gradient(90deg, #ff6000, #ff8533);
        border-radius: 1px;
        animation: activeIndicatorFadeIn 0.3s ease;
    }
    

    
    /* 悬停时的Active状态 */
    .cscj-menu-primary > li.current > a:hover,
    .cscj-menu-primary > li.current-menu-item > a:hover,
    .cscj-menu-primary > li.current-menu-parent > a:hover,
    .cscj-menu-primary > li.current-menu-ancestor > a:hover {
        color: #ff6000;
    }

    /* 悬停时底部指示器的增强效果 */
    .cscj-menu-primary > li.current > a:hover::after,
    .cscj-menu-primary > li.current-menu-item > a:hover::after,
    .cscj-menu-primary > li.current-menu-parent > a:hover::after,
    .cscj-menu-primary > li.current-menu-ancestor > a:hover::after {
        width: 28px;
    }
    
    /* 指示器动画 */
    @keyframes activeIndicatorFadeIn {
        from {
            opacity: 0;
            width: 0;
        }
        to {
            opacity: 1;
            width: 20px;
        }
    }
    
    /* 粘性导航栏中的Active状态 */
    .cscj-header.sticky .cscj-menu-primary > li.current > a,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-item > a,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-parent > a,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-ancestor > a {
        color: #ff6000;
    }
    
    .cscj-header.sticky .cscj-menu-primary > li.current > a::after,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-item > a::after,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-parent > a::after,
    .cscj-header.sticky .cscj-menu-primary > li.current-menu-ancestor > a::after {
        background: linear-gradient(90deg, #ff6000, #ff8533);
    }
    
    /* 暗色主题适配 */
    body.theme-dark .cscj-menu-primary > li > a:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    body.theme-dark .cscj-menu-primary > li.current > a,
    body.theme-dark .cscj-menu-primary > li.current-menu-item > a,
    body.theme-dark .cscj-menu-primary > li.current-menu-parent > a,
    body.theme-dark .cscj-menu-primary > li.current-menu-ancestor > a {
        color: #ff7f33;
    }

    body.theme-dark .cscj-menu-primary > li.current > a::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-item > a::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-parent > a::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-ancestor > a::after {
        background: linear-gradient(90deg, #ff7f33, #ffaa66);
    }

    body.theme-dark .cscj-menu-primary > li.current > a:hover,
    body.theme-dark .cscj-menu-primary > li.current-menu-item > a:hover,
    body.theme-dark .cscj-menu-primary > li.current-menu-parent > a:hover,
    body.theme-dark .cscj-menu-primary > li.current-menu-ancestor > a:hover {
        color: #ff7f33;
    }

    body.theme-dark .cscj-menu-primary > li.current > a:hover::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-item > a:hover::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-parent > a:hover::after,
    body.theme-dark .cscj-menu-primary > li.current-menu-ancestor > a:hover::after {
        width: 28px;
    }
    

    
    /* 确保文字在active状态下清晰可见 */
    .cscj-menu-primary > li.current > a span,
    .cscj-menu-primary > li.current-menu-item > a span,
    .cscj-menu-primary > li.current-menu-parent > a span,
    .cscj-menu-primary > li.current-menu-ancestor > a span {
        position: relative;
        z-index: 1;
    }
    
    /* 减少动画的用户偏好 */
    @media (prefers-reduced-motion: reduce) {
        .cscj-menu-primary > li > a,
        .cscj-menu-primary > li > a::after {
            transition: none !important;
            animation: none !important;
        }
    }
    
    /* 高分辨率屏幕优化 */
    @media (min-width: 1200px) {
        .cscj-menu-primary > li.current > a::after,
        .cscj-menu-primary > li.current-menu-item > a::after,
        .cscj-menu-primary > li.current-menu-parent > a::after,
        .cscj-menu-primary > li.current-menu-ancestor > a::after {
            width: 24px;
        }
        
        @keyframes activeIndicatorFadeIn {
            from {
                opacity: 0;
                width: 0;
            }
            to {
                opacity: 1;
                width: 24px;
            }
        }
    }
    
    /* 焦点可访问性 */
    .cscj-menu-primary > li > a:focus {
        outline: 2px solid #ff6000;
        outline-offset: 2px;
        border-radius: 6px;
    }
    
    /* 确保在所有状态下都有良好的对比度 */
    .cscj-menu-primary > li.current > a,
    .cscj-menu-primary > li.current-menu-item > a,
    .cscj-menu-primary > li.current-menu-parent > a,
    .cscj-menu-primary > li.current-menu-ancestor > a {
        text-shadow: none; /* 移除可能的文字阴影 */
    }
}