/* ============================================================
   starshine-drawer.css — 汉堡菜单 + 左侧抽屉导航(全站通用,中英文共用)
   由 header fragment 以 <link> 引入:首页、内页、英文站统一加载,不依赖页面各自的 CSS
   汉堡按钮仅移动端显示,点击展开左侧抽屉;PC 端保留横向导航与头部热线
   显隐实现:transform + opacity + visibility 过渡,禁用 display 切换,避免动画闪烁
   ============================================================ */

/* 汉堡按钮:红色方块 + 白色三线;默认隐藏,仅移动端显示(PC 保留横向导航) */
.ss-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: .5rem; height: .5rem; margin-left: .28rem; padding: 0; border: 0; background: var(--ss-red, #d0121c); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 汉堡图标:三条横线纯 CSS 绘制,280ms 平滑过渡为叉号
   ::before 上线 / .ss-burger-bar 中线 / ::after 下线 */
.ss-burger-box { position: relative; display: block; width: .3rem; height: .22rem; }
.ss-burger-box::before, .ss-burger-box::after, .ss-burger-bar { position: absolute; left: 0; width: 100%; height: 2px; content: ""; background: currentColor; border-radius: 1px; transition: top 280ms cubic-bezier(0.32, 0.72, 0, 1), bottom 280ms cubic-bezier(0.32, 0.72, 0, 1), transform 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 280ms ease; }
.ss-burger-box::before { top: 0; }
.ss-burger-bar { top: 50%; margin-top: -1px; }
.ss-burger-box::after { bottom: 0; }
/* 展开态:上/下线向中心聚拢旋转 45° 成叉号,中线淡出 */
.ss-burger.is-open .ss-burger-box::before { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.ss-burger.is-open .ss-burger-bar { opacity: 0; transform: scaleX(.4); }
.ss-burger.is-open .ss-burger-box::after { bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-45deg); }

/* 移动端:横向导航与头部热线让位给汉堡抽屉 */
@media (max-width: 768px) {
  .ss-nav { display: none; }
  .ss-header-hotline { display: none; }
}

/* 菜单级联入场动画:JS 在菜单项 >6 个时为每项写入 --i 索引,间隔 18ms 逐条延迟;
   不超过 6 个时 --i 缺省为 0,全部同时入场 */
@keyframes ssDrawerItemIn {
  from { opacity: 0; transform: translateX(-.4rem); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- 抽屉根节点:全屏固定层,z-index 999 防止被页面元素遮挡 ----
   visibility 延迟切换:打开立即可见;关闭等 300ms 滑出动画结束后再隐藏 */
.ss-drawer-root { display: block; position: fixed; inset: 0; z-index: 999; visibility: hidden; pointer-events: none; transition: visibility 0s linear 300ms; }
.ss-drawer-root.active { visibility: visible; pointer-events: auto; transition: visibility 0s; }

/* 纯黑遮罩 55% 透明度(40%~60% 区间内),300ms 淡入淡出,点击直接关闭 */
.ss-drawer-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity 300ms cubic-bezier(0.32, 0.72, 0, 1); cursor: pointer; }
.ss-drawer-root.active .ss-drawer-mask { opacity: 1; }

/* 抽屉面板:宽度 85%、最大 440px;从左侧滑入 300ms;
   padding 让出左侧刘海(env safe-area-inset-left)与底部手势条(inset-bottom)安全区 */
.ss-drawer { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 85%; max-width: 440px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); background: #fff; box-shadow: .04rem 0 .3rem rgba(0, 0, 0, .25); transform: translateX(-102%); transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1); }
.ss-drawer-root.active .ss-drawer { transform: translateX(0); }

/* 抽屉头部:logo + 中英文切换 */
.ss-drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: .86rem; padding: .12rem .2rem; border-bottom: 1px solid #eee; }
.ss-drawer-logo { display: block; width: 1.55rem; height: .48rem; }
.ss-drawer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.ss-drawer-lang { display: inline-flex; align-items: center; gap: .08rem; color: #222; font-size: .16rem; font-weight: 700; }
.ss-drawer-lang a, .ss-drawer-lang em, .ss-drawer-lang i { color: inherit; font-style: normal; text-decoration: none; opacity: .68; }
.ss-drawer-lang a { display: inline-flex; align-items: center; min-height: max(48px, .8rem); /* 热区 ≥48px */ }
.ss-drawer-lang .is-on { color: var(--ss-red); opacity: 1; }

/* ---- 菜单项显隐联动(核心避坑规则):父容器激活后子项恢复显示 ----
   默认 display:none,父容器(.navbar_nav)加 .active 后恢复 block 并播放级联动画;
   关闭时移除 .active → 子项立即回到 display:none,动画同步取消,全部即时收起 */
.navbar_nav .cat { display: none; }
.navbar_nav.active .cat { display: block; animation: ssDrawerItemIn 300ms cubic-bezier(0.32, 0.72, 0, 1) both; animation-delay: calc(60ms + var(--i, 0) * 18ms); }

.ss-drawer-list { margin: 0; padding: .08rem 0; list-style: none; }
.ss-drawer-list .cat a { display: flex; align-items: center; min-height: max(48px, .8rem); /* 热区 ≥48px */ margin: .04rem .14rem; padding: .12rem .2rem; border-radius: .06rem; color: #222; font-size: .18rem; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ss-drawer-list .cat a:active, .ss-drawer-list .cat a.is-active { background: rgba(208, 18, 28, .08); color: var(--ss-red); font-weight: 700; }

/* 抽屉底部:服务热线 */
.ss-drawer-foot { margin-top: auto; padding: .16rem .2rem; border-top: 1px solid #eee; }
.ss-drawer-hotline { display: flex; align-items: center; gap: .12rem; min-height: max(48px, .8rem); color: #222; text-decoration: none; }
.ss-drawer-hotline img { display: block; width: .4rem; height: .4rem; object-fit: contain; }
.ss-drawer-hotline span { display: block; color: #999; font-size: .13rem; }
.ss-drawer-hotline strong { display: block; margin-top: .04rem; color: var(--ss-red); font-size: .2rem; }

/* 抽屉展开时锁定背景滚动,避免底层页面跟随滑动 */
body.ss-drawer-lock { overflow: hidden; }

/* 移动端:汉堡显示并放大热区到 .86rem≈54px */
@media (max-width: 768px) {
  .ss-burger { display: flex; width: .86rem; height: .86rem; }
  .ss-burger-box { width: .34rem; height: .26rem; }
}