/* =========================================================================
   移动端抽屉导航（hc-offcanvas-nav 6.2.5 定制）
   目标：一级项、二级项、当前项、hover 全部沿用同一套几何与配色，
        不再出现“有的行有底色、有的行没有”“箭头前多一条灰竖线”的情况。
   色板：底 #17191e / 分隔线 #ffffff14 / 正文 #f2f2f4 / 次要 #b8bbc4 / 点缀 #c41950
   ========================================================================= */

/* ---------------- 页头汉堡按钮 ---------------- */
.site-header .menu-toggle.hc-nav-trigger {
    position: static;
    top: auto;
    z-index: auto;
    min-height: 0
}

.site-header .menu-toggle.hc-nav-trigger span {
    position: static;
    width: 24px;
    height: 1px;
    background: #fff;
    transform: none;
    transition: opacity .25s
}

.site-header .menu-toggle.hc-nav-trigger span::before,
.site-header .menu-toggle.hc-nav-trigger span::after {
    display: none
}

@media (min-width:1200px) {
    .site-header .menu-toggle.hc-nav-trigger {
        display: none
    }
}

/* ---------------- 抽屉外壳 ---------------- */
.deepskin-drawer {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif
}

.deepskin-drawer .nav-container,
.deepskin-drawer .nav-wrapper,
.deepskin-drawer ul {
    background: #17191e
}

.deepskin-drawer .nav-container {
    border-left: 1px solid #ffffff15;
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
    box-shadow: -20px 0 60px #0003
}

.deepskin-drawer.disable-body::after {
    background: #03060bb3
}

.deepskin-drawer .nav-wrapper::after {
    background: #0b0c10a6
}

.deepskin-drawer .nav-content {
    padding: 0 24px max(28px, env(safe-area-inset-bottom))
}

/* ---------------- 品牌区 + 关闭按钮 ---------------- */
.deepskin-drawer .nav-content > .nav-title {
    margin: 0;
    padding: max(26px, env(safe-area-inset-top)) 56px 24px 0;
    border-bottom: 1px solid #ffffff14
}

.drawer-brand-logo {
    display: inline-block;
    line-height: 0
}

.drawer-brand img {
    width: 145px;
    height: auto
}

.drawer-brand > span {
    display: block;
    margin-top: 12px;
    color: #989ba3;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px
}

.deepskin-drawer .nav-title + .nav-close a:not(.has-label) {
    top: max(26px, env(safe-area-inset-top));
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%
}

.deepskin-drawer .nav-close-button span {
    width: 44px;
    border: 1px solid #ffffff20;
    border-radius: 50%
}

.deepskin-drawer .nav-close-button span::before,
.deepskin-drawer .nav-close-button span::after {
    width: 14px;
    height: 1px;
    margin: 0;
    border: 0;
    background: #e4e4e7;
    position: absolute;
    left: 50%;
    top: 50%;
    content: ''
}

.deepskin-drawer .nav-close-button span::before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.deepskin-drawer .nav-close-button span::after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

/* ---------------- 列表容器 ---------------- */
.deepskin-drawer .nav-wrapper-0 > .nav-content > ul {
    margin: 8px 0 0
}

.deepskin-drawer .nav-item-wrapper {
    border-bottom: 1px solid #ffffff14
}

/* ---------------- 一级项：统一行高 / 内距 / 字色 ---------------- */
.deepskin-drawer .nav-item-link {
    display: flex;
    align-items: center;
    /* min-height: 58px; */
    /* 左内距归零：文字左端与 logo、分隔线起点对齐（原来多缩进 16px） */
    padding: 15px  56px 15px 0;
    border-radius: 0;
    background: none;
    color: #f2f2f4;
    font-size: 18px;
    line-height: 1.35;
    transition: color .25s, background-color .25s
}

/* 左侧点缀竖条：当前项 / 当前分支共用同一位置与尺寸 */
.deepskin-drawer .nav-item-link::after {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background: #c41950;
    opacity: 0;
    transition: opacity .25s
}

/* 没有子项的条目不需要给箭头留位，但保持左侧对齐一致 */
.deepskin-drawer li:not(.nav-parent) > .nav-item-wrapper > .nav-item-link {
    padding-right: 0
}

/* 库给父项链接加了 margin-right:52px，会让 hover 底色在箭头前断掉，这里抹平 */
.deepskin-drawer li.nav-parent > .nav-item-wrapper > .nav-item-link {
    margin-right: 0
}

.deepskin-drawer .nav-item-link.is-current,
.deepskin-drawer .nav-item-link.is-current-group {
    color: #edc6d4
}

.deepskin-drawer .nav-item-link.is-current::after,
.deepskin-drawer .nav-item-link.is-current-group::after {
    opacity: 1
}

/* hover 与当前项用同一套底色，只是文字更亮 */
.deepskin-drawer:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover {
    background: #ffffff0a;
    color: #fff
}

/* 箭头盖在链接之上，但它自己不参与 hover 底色，统一交给整行。
   只在真能 hover 的设备上生效，避免手机上点完一直留着高亮。 */
@media (hover:hover) and (pointer:fine) {
    .deepskin-drawer li:not(.nav-item-custom) a.nav-next:hover,
    .deepskin-drawer li:not(.nav-item-custom) a.nav-next:focus {
        background: transparent
    }

    .deepskin-drawer li:not(.nav-item-custom) .nav-item-wrapper:hover > .nav-item-link {
        background: #ffffff0a;
        color: #fff
    }
}

/* ---------------- 展开箭头：去掉库自带的灰色竖条 ---------------- */
.deepskin-drawer .nav-parent .nav-next {
    width: 44px;
    right: 0;
    border-radius: 0;
    /* 库把 .nav-item-link 设为 z-index:1，箭头 z-index:auto 会被压在下面，
       点箭头实际点到整行链接 → 直接跳转，二级永远展不开。这里提到最上层 */
    z-index: 2
}

.deepskin-drawer a.nav-next::before {
    display: none
}

.deepskin-drawer .nav-next span::before,
.deepskin-drawer .nav-back span::before {
    width: 7px;
    height: 7px;
    border-width: 1px 0 0 1px;
    border-color: #a6a8b0
}

.deepskin-drawer.nav-position-right .nav-next span::before {
    transform: translate(-50%, -50%) rotate(225deg);
    transition: transform .25s
}

.deepskin-drawer.nav-levels-expand li.level-open > .nav-item-wrapper > .nav-next span::before {
    margin: 0;
    transform: translate(-50%, -50%) rotate(45deg)
}

/* ---------------- 二级项：与一级同一套分隔线、同一套高亮 ---------------- */
.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    height: auto;
    max-height: none;
    margin-left: 16px;
    overflow: hidden;
    visibility: hidden;
    transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1), visibility 0s .32s
}

.deepskin-drawer.nav-levels-expand li.level-open > .nav-wrapper {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1), visibility 0s
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper > .nav-content {
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: 0
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper::before {
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    border-radius: 0;
    background: #ffffff1a
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper .nav-item-wrapper {
    border-color: #ffffff0f
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper .nav-item-link {
    /* min-height: 46px; */
    padding: 10px 16px ;
    font-size: 15px;
    line-height: 1.6;
    color: #b8bbc4
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper .nav-item-link::after {
    height: 14px
}

.deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper .nav-item-link.is-current {
    color: #edc6d4
}

.deepskin-drawer.nav-levels-expand .level-open > .nav-item-wrapper > .nav-item-link {
    color: #edc6d4
}

/* ---------------- 底部说明 ---------------- */
.deepskin-drawer .nav-custom-content {
    padding: 20px 16px 0
}

.drawer-brand-note {
    font-size: 12px;
    line-height: 1.8;
    color: #858994
}

.deepskin-drawer a:focus-visible {
    outline: 2px solid #d14a75;
    outline-offset: -2px
}

.application-card[id],
.tech-card[id] {
    scroll-margin-top: 20px
}

/* ---------------- 窄屏微调 ---------------- */
@media (max-width:359px) {
    .deepskin-drawer .nav-content {
        padding-left: 16px;
        padding-right: 16px
    }

    .drawer-brand img {
        width: 128px
    }

    .deepskin-drawer .nav-item-link {
        min-height: 52px;
        font-size: 17px
    }

    .deepskin-drawer.nav-levels-expand .nav-wrapper .nav-wrapper .nav-item-link {
        min-height: 42px;
        font-size: 14px
    }
}

/* ---------------- 汉堡图标：始终三条线 ---------------- */
@media (max-width:1199px) {
    .site-header .menu-toggle.hc-nav-trigger {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px
    }

    .site-header .menu-toggle.hc-nav-trigger > span {
        display: block;
        flex: 0 0 1px;
        width: 24px;
        height: 1px;
        position: static;
        inset: auto;
        margin: 0;
        transform: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .deepskin-drawer *,
    .deepskin-drawer::after,
    .deepskin-drawer .nav-container {
        transition-duration: .01ms !important
    }
}

/* 抽屉导航标题统一为 500，覆盖插件默认的 normal */
.hc-offcanvas-nav .nav-content>h2,
.hc-offcanvas-nav .nav-content>h3,
.hc-offcanvas-nav .nav-content>h4 {
    font-weight: 500
}