/**
 * 自定义分类导航样式
 *
 * 用于 [suopu_category_nav] 短代码的样式
 * 兼容 Astra 主题，响应式设计
 *
 * @package Astra_Child
 * @since 1.0.0
 */

/* =====================================================
   容器样式
   ===================================================== */

.suopu-category-nav,
.ceo-category-card-box {
   
}

/* =====================================================
   列表基础样式
   ===================================================== */

.suopu-category-nav ul,
.ceo-category-card-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 子栏列表 - 添加上边距 */
.suopu-category-nav ul.category-nav-child,
.ceo-category-card-box ul:not(:first-child) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dee2e6;
}

/* =====================================================
   列表项样式
   ===================================================== */

.suopu-category-nav li,
.ceo-category-card-box li {
    margin: 0;
    padding: 0;
}

/* 标签样式（栏目：、子栏：） */
.suopu-category-nav .category-nav-label,
.ceo-category-card-box li:first-child {
    margin-right: 5px;
}

.suopu-category-nav .category-nav-label strong,
.ceo-category-card-box li:first-child strong {
    color: #495057;
    font-size: 16px;
    font-weight: 600;
}

/* =====================================================
   链接样式
   ===================================================== */

.suopu-category-nav .cat-item a,
.ceo-category-card-box .cat-item a {
    display: inline-block;
    padding: 6px 14px;
    color: #495057;
    text-decoration: none;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
}

/* 链接悬停状态 */
.suopu-category-nav .cat-item a:hover,
.ceo-category-card-box .cat-item a:hover {
    color: #212529;
}

/* =====================================================
   当前分类高亮样式
   ===================================================== */

.suopu-category-nav .cat-item.current-cat a,
.ceo-category-card-box .cat-item.current-cat a {
    background-color: #006fff;
    color: #ffffff;
    border-color: #006fff;
}

.suopu-category-nav .cat-item.current-cat a:hover,
.ceo-category-card-box .cat-item.current-cat a:hover {
    background-color: #006fff;
    border-color: #006fff;
}

/* =====================================================
   响应式设计 - 平板端
   ===================================================== */

@media (max-width: 991px) {
    .suopu-category-nav,
    .ceo-category-card-box {
        padding: 12px 15px;
    }

    .suopu-category-nav ul,
    .ceo-category-card-box ul {
        gap: 6px;
    }

    .suopu-category-nav .cat-item a,
    .ceo-category-card-box .cat-item a {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* =====================================================
   响应式设计 - 移动端
   ===================================================== */

@media (max-width: 767px) {
    .suopu-category-nav,
    .ceo-category-card-box {
        padding: 10px 12px;
    }

    .suopu-category-nav ul,
    .ceo-category-card-box ul {
        gap: 5px;
    }

    .suopu-category-nav .category-nav-label strong,
    .ceo-category-card-box li:first-child strong {
        font-size: 13px;
    }

    .suopu-category-nav .cat-item a,
    .ceo-category-card-box .cat-item a {
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 15px;
    }

    /* 子栏列表移动端调整 */
    .suopu-category-nav ul.category-nav-child,
    .ceo-category-card-box ul:not(:first-child) {
        margin-top: 10px;
        padding-top: 10px;
    }
}

/* =====================================================
   深色模式支持（可选）
   ===================================================== */

@media (prefers-color-scheme: dark) {
    .suopu-category-nav,
    .ceo-category-card-box {
        background-color: #2d3748;
    }

    .suopu-category-nav .category-nav-label strong,
    .ceo-category-card-box li:first-child strong {
        color: #e2e8f0;
    }

    .suopu-category-nav .cat-item a,
    .ceo-category-card-box .cat-item a {
        background-color: #4a5568;
        color: #e2e8f0;
        border-color: #4a5568;
    }

    .suopu-category-nav .cat-item a:hover,
    .ceo-category-card-box .cat-item a:hover {
        background-color: #718096;
        border-color: #718096;
    }

    .suopu-category-nav ul.category-nav-child,
    .ceo-category-card-box ul:not(:first-child) {
        border-top-color: #4a5568;
    }
}