/* 永序物联 · 统一顶部汉堡导航
   默认显示“三”字形汉堡图标，置于 YONGXU 文字标识左侧；
   点击后图标旋转并变为 X，同时展开下方【两栏式】菜单面板：
   · 桌面端：左栏主导航 + 右栏 FDE 服务三级菜单独立竖排
   · 移动端：单列抽屉，FDE 服务默认收起，点击后展开子项
   导航逻辑保持一致，菜单面板带 max-height 与内部滚动兜底。 */
.bm-wrap,.header-left{position:relative;display:flex;align-items:center;gap:6px}

/* 汉堡按钮 */
.brand-morph{
  position:relative;width:36px;height:36px;border:none;background:transparent;
  cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;
  padding:0;flex:none;transition:background .2s ease,transform .35s cubic-bezier(.34,1.56,.64,1)
}
.brand-morph:hover{background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.brand-morph:active{transform:scale(.95)}
.brand-morph.active{transform:rotate(180deg);background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.brand-morph:focus-visible{outline:2px solid var(--yx-blue,var(--brand,#0068B6));outline-offset:2px}

/* 三横线 */
.brand-morph .hm-bars{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:20px;height:18px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)
}
.brand-morph .hm-bars i{
  display:block;width:20px;height:2.5px;border-radius:2px;background:var(--yx-blue,var(--brand,#0068B6));
  transition:transform .3s ease,opacity .2s ease,width .2s ease
}

/* active：三横变 X */
.brand-morph.active .hm-bars{transform:rotate(180deg)}
.brand-morph.active .hm-bars i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.brand-morph.active .hm-bars i:nth-child(2){opacity:0;width:0}
.brand-morph.active .hm-bars i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* 兼容旧结构：仍支持 bm-icon / bm-bars，但默认隐藏旧图标 */
.brand-morph .bm-icon,
.brand-morph .bm-bars{display:none}

/* ===== 两栏式下挂菜单 ===== */
.bm-nav,
.nav-menu{
  display:none;position:absolute;top:44px;left:0;
  background:var(--yx-card,#fff);border:1px solid var(--yx-line,var(--line,#e4eaf1));
  border-radius:14px;box-shadow:0 16px 44px rgba(0,104,182,.18);
  padding:6px;z-index:60;overflow:hidden;text-align:left;
  transform:translateY(-6px);opacity:0;
  transition:transform .25s ease,opacity .25s ease;
  /* 防止下拉过长：限制高度并允许内部滚动 */
  max-height:calc(100vh - 64px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.bm-nav.open,
.nav-menu.open{
  display:flex;flex-direction:row;align-items:stretch;
  transform:translateY(0);opacity:1;animation:navDropIn .25s ease;
}
@keyframes navDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* 左栏：主导航 */
.bm-main{display:flex;flex-direction:column;min-width:160px}
.bm-main a{
  display:block;padding:11px 18px;font-size:14px;color:var(--yx-ink,var(--ink,#413D3C));
  border-radius:9px;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.bm-main a:hover,
.bm-main a.active{color:var(--yx-blue,var(--brand,#0068B6));background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.bm-main a.active{font-weight:700}

/* 右栏：FDE 服务 三级菜单（独立竖排，桌面端可见） */
.bm-flyout{
  display:flex;flex-direction:column;min-width:152px;
  margin-left:6px;padding-left:12px;
  border-left:1px solid var(--yx-line,var(--line,#e4eaf1));
}
.bm-flyout-head{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yx-blue,var(--brand,#0068B6));
  padding:9px 16px 7px;opacity:.92;
}
.bm-flyout a{
  display:block;padding:9px 16px;font-size:13px;font-weight:500;
  color:var(--yx-ink-2,#6B7280);border-radius:9px;
  text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.bm-flyout a:hover,
.bm-flyout a.active{color:var(--yx-blue,var(--brand,#0068B6));background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.bm-flyout a.active{font-weight:700}

/* ===== 移动端折叠子菜单 ===== */
.bm-parent{position:relative}
.bm-parent-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px 0 0;border-radius:9px;
  transition:background .15s ease;
}
.bm-parent-row:hover{background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.bm-parent-row > a{
  flex:1;padding:11px 12px 11px 18px;
  color:var(--yx-ink,var(--ink,#413D3C));
}
.bm-parent-row > a.active{color:var(--yx-blue,var(--brand,#0068B6));background:transparent;font-weight:700}
.bm-caret{
  width:28px;height:28px;border:none;background:transparent;border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--yx-ink-2,#6B7280);transition:transform .25s ease,background .15s ease;
}
.bm-caret:hover{background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.bm-caret:focus-visible{outline:2px solid var(--yx-blue,var(--brand,#0068B6));outline-offset:-1px}
.bm-caret svg{width:14px;height:14px;transition:transform .25s ease}
.bm-parent.open .bm-caret svg{transform:rotate(180deg)}

/* 移动端专用子菜单（默认收起） */
.bm-sub{
  display:none;flex-direction:column;
  padding:2px 4px 6px 12px;margin:0 6px 4px;
  border-left:2px solid var(--yx-blue-l,var(--brand-light,#E6F0F8));
}
.bm-parent.open .bm-sub{display:flex;animation:subDropIn .2s ease}
@keyframes subDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.bm-sub a{
  display:block;padding:9px 14px;font-size:13px;font-weight:500;
  color:var(--yx-ink-2,#6B7280);border-radius:8px;
  text-decoration:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.bm-sub a:hover,
.bm-sub a.active{color:var(--yx-blue,var(--brand,#0068B6));background:var(--yx-blue-l,var(--brand-light,#E6F0F8))}
.bm-sub a.active{font-weight:700}

/* 桌面端：隐藏移动折叠 caret 与内嵌子菜单 */
.bm-caret{display:none}
.bm-sub{display:none !important}

/* 响应式：窄屏两栏堆叠为单列，FDE 服务改为折叠 */
@media(max-width:560px){
  .bm-nav,.nav-menu{top:40px;left:0;max-width:calc(100vw - 14px);padding:5px}
  .bm-nav.open,.nav-menu.open{flex-direction:column}
  .bm-main{min-width:0;width:100%}
  .bm-main a{padding:11px 16px}

  /* 移动端：显示 caret，启用折叠子菜单 */
  .bm-caret{display:flex}
  .bm-sub{display:none !important}
  .bm-parent.open .bm-sub{display:flex !important}

  /* 移动端：隐藏桌面右栏 */
  .bm-flyout{display:none !important}
}

/* 桌面端断点：显示右栏 */
@media(min-width:561px){
  .bm-flyout{display:flex !important}
  .bm-caret{display:none !important}
  .bm-sub{display:none !important}
}

/* ===== 深色模式 ===== */
html[data-theme="dark"] .bm-nav,
html[data-theme="dark"] .nav-menu{background:var(--yx-card,#161b22);border-color:var(--yx-line,#222b36)}
html[data-theme="dark"] .bm-main a{color:var(--yx-ink,#e6edf3)}
html[data-theme="dark"] .bm-main a:hover,
html[data-theme="dark"] .bm-main a.active{background:#1b232c;color:#cfd6df}
html[data-theme="dark"] .bm-parent-row:hover{background:#1b232c}
html[data-theme="dark"] .bm-flyout{border-color:#222b36}
html[data-theme="dark"] .bm-flyout a{color:#9aa4b2}
html[data-theme="dark"] .bm-flyout a:hover,
html[data-theme="dark"] .bm-flyout a.active{background:#1b232c;color:#cfd6df}
html[data-theme="dark"] .bm-sub{border-color:#222b36}
html[data-theme="dark"] .bm-sub a{color:#9aa4b2}
html[data-theme="dark"] .bm-sub a:hover,
html[data-theme="dark"] .bm-sub a.active{background:#1b232c;color:#cfd6df}
html[data-theme="dark"] .bm-caret{color:#9aa4b2}
html[data-theme="dark"] .bm-caret:hover{background:#1b232c}