/**
 * 分类页/详情页侧边导航 — STAR 布局复刻
 *
 * 实现方式：
 * 1. PHP 复用主题首页 io_show_layout_aside() 输出 ioui-aside。
 * 2. JS 将 ioui-aside 移动到 main.container 前，模拟 STAR 页面 DOM 顺序。
 * 3. CSS 通过 body.aside-show / body.has-aside-taxonomy 给内容区让出左侧空间。
 */

body.has-aside-taxonomy .ioui-aside .aside-card {
    background: #fff !important;
    box-shadow: none !important;
}

.io-black-mode body.has-aside-taxonomy .ioui-aside .aside-card,
.io-black-mode.has-aside-taxonomy .ioui-aside .aside-card {
    background: #2d2e2f !important;
}

@media screen and (min-width: 768px) {
    body.has-aside-taxonomy.aside-show:not(.star-hide-aside) main.container.my-2,
    body.has-aside-taxonomy.aside-show:not(.star-hide-aside) main.container[role="main"] {
        max-width: var(--main-max-width, 1500px);
        margin-top: 0 !important;
    }

    body.has-aside-taxonomy.aside-show:not(.star-hide-aside) main.container .content-layout {
        margin-left: calc(10px + var(--main-aside-width));
    }

    body.has-aside-taxonomy.full-container.star-sidebar-stick.aside-show:not(.star-hide-aside) main.container .content-layout {
        margin-left: var(--main-aside-width);
    }

    /* 详情页只取消线上旧规则给外层 .content 叠加的 150px，内层 .content-layout 仍保留侧边栏避让距离，避免内容压到左侧侧边栏下方。 */
    body.has-aside-taxonomy.single main.container > .content {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 767.98px) {
    body.has-aside-taxonomy main.container .content-layout {
        margin-left: 0 !important;
    }
}

.ioui-aside.star-aside-accordion .aside-accordion-row {
    position: relative;
}

.ioui-aside.star-aside-accordion .aside-accordion-row .aside-accordion-arrow {
    position: absolute;
    right: .65rem;
    top: 50%;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: var(--muted-color, rgba(0, 0, 0, .45));
    cursor: pointer;
    pointer-events: auto;
    transition: transform .2s ease, color .15s ease;
}

.ioui-aside.star-aside-accordion .aside-accordion-row .aside-accordion-arrow.open {
    transform: translateY(-50%) rotate(90deg);
}

.ioui-aside.star-aside-accordion .aside-sub-accordion .aside-btn {
    margin-left: 30px;
    position: relative;
    cursor: pointer;
}

.ioui-aside.star-aside-accordion .aside-sub-accordion:before {
    position: absolute;
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--muted-blur-bg-color, rgba(0, 0, 0, .12));
    left: 20px;
}

.ioui-aside.star-aside-accordion .aside-sub-accordion .aside-btn:after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 1px;
    background-color: var(--muted-blur-bg-color, rgba(0, 0, 0, .12));
    top: 0;
    bottom: 0;
    margin: auto;
    left: -10px;
}

body.aside-min:has(.ioui-aside.star-aside-accordion) .aside-accordion-arrow {
    display: none !important;
}

body:not(.aside-min):not(.star-minisidebar-hover):has(.ioui-aside.star-aside-accordion) .aside-popup.text-sm,
body.star-minisidebar-hover:not(.aside-min) .aside-popup.text-sm {
    display: none !important;
}

body.star-minisidebar-hover.aside-min .aside-body.hover-show {
    width: var(--main-aside-basis-width) !important;
    max-width: var(--main-aside-basis-width) !important;
}

body.star-minisidebar-hover.aside-min .aside-body.hover-show .aside-more,
body.star-minisidebar-hover.aside-min .aside-body.hover-show span {
    visibility: visible !important;
    opacity: 1 !important;
}