/*
CaspiaSupply Site Navigation Fixed v2

仅固定白色菜单栏。
顶部topbar和深色搜索头部继续正常滚走。
*/

.site-navigation-sentinel {
    width: 100%;
    height: 0;
    pointer-events: none;
}


/* 默认状态 */

.site-navbar.nav-v2[data-site-sticky-navigation] {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 980;

    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid rgba(20, 23, 29, 0.09);

    transition:
        box-shadow 0.22s ease,
        background 0.22s ease;
}


/* 滚动后固定在浏览器顶部 */

.site-navbar.nav-v2[data-site-sticky-navigation].is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9990 !important;

    background:
        rgba(255, 255, 255, 0.97) !important;

    border-bottom:
        1px solid rgba(20, 23, 29, 0.12) !important;

    box-shadow:
        0 8px 24px
        rgba(16, 19, 25, 0.11) !important;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}


/* 下拉菜单显示在固定导航上方 */

.site-navbar.nav-v2[data-site-sticky-navigation]
.nav-dropdown {
    z-index: 10000;
}


/* 锚点滚动预留菜单高度 */

html {
    scroll-padding-top: 78px;
}


@media (max-width: 860px) {
    .site-navbar.nav-v2[data-site-sticky-navigation].is-fixed {
        box-shadow:
            0 5px 18px
            rgba(16, 19, 25, 0.10) !important;

        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}


@media (prefers-reduced-motion: reduce) {
    .site-navbar.nav-v2[data-site-sticky-navigation] {
        transition: none;
    }
}


/* ==================================================
   Site navigation hover interaction v3

   1. 下拉箭头始终向下，不再反转；
   2. 菜单底部线条从左向右出现；
   3. 鼠标移开后从左向右消失。
   ================================================== */


/* 菜单链接作为底部动画线的定位容器 */

.site-navbar.nav-v2
.nav-item > .nav-link {
    position: relative !important;
    overflow: visible !important;

    background: transparent !important;
    text-decoration: none !important;
}


/* 默认状态：线条隐藏，并固定右侧作为消失终点 */

.site-navbar.nav-v2
.nav-item > .nav-link::after {
    content: "";

    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 5px;

    height: 2px;

    border-radius: 999px;

    background: #13c7b7;

    pointer-events: none;

    transform: scaleX(0);
    transform-origin: right center;

    transition:
        transform 0.28s
        cubic-bezier(0.22, 0.61, 0.36, 1);
}


/*
鼠标移入：
把动画原点切换至左侧，
线条由左向右展开。
*/

.site-navbar.nav-v2
.nav-item:hover > .nav-link::after,

.site-navbar.nav-v2
.nav-item.is-active > .nav-link::after,

.site-navbar.nav-v2
.nav-item > .nav-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ==================================================
   固定下拉箭头方向
   ================================================== */


/*
清除旧箭头的旋转、边框和过渡，
重新绘制一个始终向下的箭头。
*/

.site-navbar.nav-v2
.nav-caret {
    position: relative !important;

    width: 9px !important;
    height: 9px !important;

    display: inline-block !important;
    flex: 0 0 9px !important;

    margin-left: 8px !important;

    border: 0 !important;
    background: transparent !important;

    transform: none !important;
    transition: none !important;

    vertical-align: middle !important;
}


/* 使用边框绘制向下箭头 */

.site-navbar.nav-v2
.nav-caret::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 1px !important;

    width: 6px !important;
    height: 6px !important;

    display: block !important;

    border: 0 !important;
    border-right:
        1.5px solid currentColor !important;
    border-bottom:
        1.5px solid currentColor !important;

    background: transparent !important;

    transform:
        rotate(45deg) !important;

    transform-origin:
        center center !important;

    transition: none !important;
}


/* 清除可能存在的第二个箭头 */

.site-navbar.nav-v2
.nav-caret::after {
    content: none !important;
    display: none !important;
}


/*
无论鼠标悬停、JS激活还是键盘聚焦，
箭头本体都不再旋转。
*/

.site-navbar.nav-v2
.nav-item:hover .nav-caret,

.site-navbar.nav-v2
.nav-item.is-active .nav-caret,

.site-navbar.nav-v2
.nav-item:focus-within .nav-caret,

.site-navbar.nav-v2
.has-dropdown:hover .nav-caret,

.site-navbar.nav-v2
.has-dropdown.is-active .nav-caret {
    transform: none !important;
    transition: none !important;
}


/* 用户关闭动画时直接显示和隐藏 */

@media (prefers-reduced-motion: reduce) {
    .site-navbar.nav-v2
    .nav-item > .nav-link::after {
        transition: none !important;
    }
}