/**
 * 主网站列表页 · 仅左侧「网站二级导航」
 * 在列表页 head 中引入：<link rel="stylesheet" href="./css/list-sidebar-nav.css">
 * 并从页面内联 <style> 中删除原 .category-nav … 相关规则，避免重复。
 */

/* ---------- 侧栏容器 ---------- */
.category-nav .category-sidebar-nav {
    padding: 8px 0 16px;
}

.category-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---------- 分组 ---------- */
.category-group {
    position: relative;
    border-radius: 0;
    transition: background 0.2s ease;
}

.category-group:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ---------- 一级项 ---------- */
.category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 16px 18px;
    border-left: 4px solid transparent;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    outline: none;
}

.category-item:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(150, 60, 51, 0.35);
    z-index: 1;
}

.category-item-label {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

/* 箭头（替代 ▶ 字符，更易对齐） */
.category-item-chevron {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid #963c33;
    border-bottom: 2px solid #963c33;
    transform: rotate(-45deg);
    margin-top: -2px;
    opacity: 0.55;
    transition: transform 0.28s ease, opacity 0.2s ease;
}

.category-item-chevron--leaf {
    border-color: #c4a8a5;
    opacity: 0.35;
    transform: rotate(-45deg) scale(0.85);
}

@media (min-width: 769px) {
    .category-group.has-children:hover .category-item-parent .category-item-chevron {
        transform: rotate(45deg);
        margin-top: 0;
        opacity: 1;
    }
}

.category-group.active-group .category-item-parent .category-item-chevron,
.category-group.is-open .category-item-parent .category-item-chevron {
    transform: rotate(45deg);
    margin-top: 0;
    opacity: 1;
}

.category-item .badge {
    flex-shrink: 0;
    margin-left: auto;
    background: #ececec;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
}

/* 宽屏：分组悬停时一级项微亮 */
@media (min-width: 769px) {
    .category-group:hover .category-item:not(.active) {
        background: #faf8f8;
        border-left-color: rgba(150, 60, 51, 0.25);
    }

    .category-group:hover .category-item-parent:not(.active) .category-item-chevron {
        opacity: 0.85;
    }
}

/* 当前一级 */
.category-item.active {
    background: linear-gradient(90deg, rgba(150, 60, 51, 0.1) 0%, rgba(255, 245, 244, 0.95) 100%);
    border-left-color: #963c33;
    color: #963c33;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.category-item.active .badge {
    background: #963c33;
    color: #fff;
}

.category-item.active .category-item-chevron {
    border-color: #963c33;
    opacity: 1;
}

/* ---------- 二级列表 ---------- */
.sub-category-list {
    padding: 0;
    margin: 0 0 0 12px;
    border-left: 2px solid #f0e8e7;
    background: linear-gradient(180deg, #fdfcfb 0%, #fafafa 100%);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, padding 0.28s ease;
}

/* 当前栏目所在分组：始终展开（各端一致） */
.category-group.active-group .sub-category-list {
    max-height: min(70vh, 560px);
    opacity: 1;
    padding: 8px 0 12px;
}

/* 宽屏：悬停其它分组也可展开 */
@media (min-width: 769px) {
    .category-group:hover .sub-category-list {
        max-height: min(70vh, 560px);
        opacity: 1;
        padding: 8px 0 12px;
    }
}

.sub-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 22px;
    margin: 0 8px 2px 0;
    border-radius: 0 8px 8px 0;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    outline: none;
}

.sub-category-item:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(150, 60, 51, 0.25);
}

.sub-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8d0cf;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sub-label {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.sub-category-item:hover {
    background: rgba(150, 60, 51, 0.06);
    color: #963c33;
    padding-left: 26px;
}

.sub-category-item:hover .sub-dot {
    background: #963c33;
    transform: scale(1.15);
}

.sub-category-item.active {
    color: #963c33;
    font-weight: 600;
    background: rgba(150, 60, 51, 0.1);
}

.sub-category-item.active .sub-dot {
    background: #963c33;
    box-shadow: 0 0 0 3px rgba(150, 60, 51, 0.15);
}

/* ---------- 移动端：禁用 hover 展开；点击展开非当前分组；当前分组始终展开 ---------- */
@media (max-width: 768px) {
    /* 非当前分组：hover 不展开（避免误触） */
    .category-group:not(.active-group):hover .sub-category-list {
        max-height: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
    }

    .category-group.active-group .sub-category-list {
        max-height: min(70vh, 560px) !important;
        opacity: 1 !important;
        padding: 8px 0 12px !important;
    }

    .category-group.mobile-active:not(.active-group) .sub-category-list,
    .category-group.is-open:not(.active-group) .sub-category-list {
        max-height: min(70vh, 560px) !important;
        opacity: 1 !important;
        padding: 8px 0 12px !important;
    }

    .category-item-parent {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}