/* ==========================================================
   MobileNav — 企业官网通用移动端导航样式
   重构自 xymob-head 系列样式
   
   使用方式：
     1. 将 CSS 变量定义在 :root 或容器元素上
     2. HTML 结构参照下方注释
     3. 通过修改 --nav-primary 等变量快速切换主题
   
   命名规范：所有 class 以 mn- 为前缀，避免冲突
   ========================================================== */


/* ──────────────────────────────────────────────
   1. 设计 Token（CSS 自定义属性）
   ────────────────────────────────────────────── */

:root {
  /* 颜色 */
  --nav-primary:       #ffffff;              /* 顶栏背景（白底，logo 为靛蓝，避免重色） */
  --nav-primary-dark:  #ffffff;              /* 滚动后保持白底 */
  --nav-ink:           #252168;              /* 顶栏图标/文字（logo 同色靛蓝） */
  --nav-secondary:     #101321;              /* 抽屉背景（深藏青，与 logo 重色错开） */
  --nav-white:         #ffffff;
  --nav-text-muted:     rgba(255, 255, 255, 0.62);
  --nav-border:        rgba(255, 255, 255, 0.09);
  --nav-overlay:       rgba(10, 12, 22, 0.5);
  --nav-accent:        #f5b301;              /* 琥珀金点缀（呼应 Z 标黄色） */

  /* 尺寸 */
  --nav-height:        56px;      /* 顶栏高度 */
  --nav-logo-max-w:    100px;     /* Logo 最大宽度 */
  --nav-radius:        10px;      /* 圆角 */
  --nav-item-h:        54px;      /* 一级导航行高 */
  --nav-sub-item-h:    46px;      /* 二级导航行高 */

  /* 层级（系统化分配，告别 999999） */
  --z-nav:             100;       /* 顶栏 */
  --z-overlay:         150;       /* 遮罩 */
  --z-menu:            200;       /* 菜单抽屉 */

  /* 动画 */
  --nav-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --nav-duration:      0.35s;
}


/* ──────────────────────────────────────────────
   2. 顶部栏（Header）
   
   HTML:
   <header class="mn-header">
     <button class="mn-burger" aria-label="菜单">...</button>
     <div class="mn-logo"><a href="/"><img src="logo.png" alt="Logo"></a></div>
     <div class="mn-actions">
       <a class="mn-lang-btn" href="?lang=en">En</a>
     </div>
   </header>
   ────────────────────────────────────────────── */

.mn-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: var(--z-nav);

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;

  background: var(--nav-primary);
  border-bottom: 1px solid rgba(15, 18, 34, 0.07);
  transition: background var(--nav-duration) var(--nav-ease),
              box-shadow var(--nav-duration) var(--nav-ease);
}

/* 滚动后加深 */
.mn-header.is-scrolled {
  background: var(--nav-primary-dark);
  box-shadow: 0 2px 14px rgba(15, 18, 34, 0.08);
}


/* ──────────────────────────────────────────────
   3. 汉堡按钮（Burger）
   
   三线 → X 动画，纯 CSS transform 驱动（GPU 加速）
   
   HTML:
   <button class="mn-burger [is-active]" aria-label="菜单" aria-expanded="false">
     <span class="mn-burger__line"></span>
     <span class="mn-burger__line"></span>
     <span class="mn-burger__line"></span>
   </button>
   ────────────────────────────────────────────── */

.mn-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  z-index: calc(var(--z-menu) + 1);
  position: relative;
}

.mn-burger__line {
  display: block;
  height: 2px;
  background: var(--nav-ink);
  border-radius: 2px;
  transition: transform var(--nav-duration) var(--nav-ease),
              opacity var(--nav-duration) var(--nav-ease),
              width var(--nav-duration) var(--nav-ease),
              background-color var(--nav-duration) var(--nav-ease);
  transform-origin: center;
}

.mn-burger__line:nth-child(1) { width: 22px; }
.mn-burger__line:nth-child(2) { width: 28px; margin: 5px 0; }
.mn-burger__line:nth-child(3) { width: 16px; }

/* 激活态 → X 形（此时按钮浮在深色抽屉上，线条转白） */
.mn-burger.is-active .mn-burger__line {
  background: var(--nav-white);
}

.mn-burger.is-active .mn-burger__line:nth-child(1) {
  width: 28px;
  transform: translateY(7px) rotate(45deg);
}

.mn-burger.is-active .mn-burger__line:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.mn-burger.is-active .mn-burger__line:nth-child(3) {
  width: 28px;
  transform: translateY(-7px) rotate(-45deg);
}


/* ──────────────────────────────────────────────
   4. Logo 居中
   
   用 absolute + translateX 精确居中，不影响 Flex 两端元素
   ────────────────────────────────────────────── */

.mn-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  pointer-events: none;
}

.mn-logo img,
.mn-logo svg {
  max-width: var(--nav-logo-max-w);
  height: auto;
}

.mn-logo a {
  font-size: 0;  /* 隐藏辅助文字，只显示图片 */
  display: inline-flex;
}


/* ──────────────────────────────────────────────
   5. 右侧操作区 & 语言切换
   ────────────────────────────────────────────── */

.mn-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: calc(var(--z-menu) + 1);
  position: relative;
}

.mn-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: var(--nav-ink);
  color: var(--nav-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s var(--nav-ease);
  -webkit-tap-highlight-color: transparent;
}

.mn-lang-btn:hover,
.mn-lang-btn:active {
  background: #1b1850;
  transform: translateY(-1px);
}


/* ──────────────────────────────────────────────
   6. 遮罩层（Overlay）
   ────────────────────────────────────────────── */

.mn-overlay {
  position: fixed;
  inset: 0;
  background: var(--nav-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nav-duration) var(--nav-ease),
              visibility var(--nav-duration) var(--nav-ease);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mn-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}


/* ──────────────────────────────────────────────
   7. 侧滑抽屉（Drawer）
   
   HTML:
   <nav class="mn-drawer [is-open]">
     <div class="mn-drawer__header">...</div>
     <div class="mn-drawer__body">
       <div class="mn-nav-item">
         <a class="mn-nav-link" href="...">
           <span class="mn-nav-link__text">标题</span>
           <span class="mn-nav-link__arrow [is-expanded]">▾</span>
         </a>
         <div class="mn-sub-menu [is-expanded]">
           <a class="mn-sub-link" href="...">
             <span class="mn-sub-link__dot"></span>子项
           </a>
         </div>
       </div>
     </div>
     <div class="mn-drawer__footer">...</div>
   </nav>
   ────────────────────────────────────────────── */

.mn-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 340px;
  z-index: var(--z-menu);
  background: var(--nav-secondary);
  transform: translateX(-100%);
  transition: transform var(--nav-duration) var(--nav-ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mn-drawer.is-open {
  transform: translateX(0);
}

/* 抽屉头部 */
.mn-drawer__header {
  display: flex;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--nav-border);
  flex-shrink: 0;
}

.mn-drawer__logo-text {
  color: var(--nav-white);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 抽屉内容区（可滚动） */
.mn-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}


/* ──────────────────────────────────────────────
   8. 导航项 & 子菜单
   ────────────────────────────────────────────── */

.mn-nav-item {
  border-bottom: 1px solid var(--nav-border);
}

.mn-nav-link {
  display: flex;
  align-items: center;
  height: var(--nav-item-h);
  padding: 0 22px;
  color: var(--nav-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s var(--nav-ease);
  -webkit-tap-highlight-color: transparent;
}

.mn-nav-link:active {
  background: rgba(255, 255, 255, 0.07);
}

.mn-nav-link__text {
  flex: 1;
}

.mn-nav-link__arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--nav-ease);
  color: var(--nav-text-muted);
}

.mn-nav-link__arrow.is-expanded {
  transform: rotate(180deg);
  color: var(--nav-accent);
}

/* 子菜单：max-height 过渡替代 display:none */
.mn-sub-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s var(--nav-ease);
  background: rgba(0, 0, 0, 0.22);
}

.mn-sub-menu.is-expanded {
  max-height: 400px;
}

.mn-sub-link {
  display: flex;
  align-items: center;
  height: var(--nav-sub-item-h);
  padding: 0 20px 0 42px;
  color: var(--nav-text-muted);
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s var(--nav-ease),
              background 0.2s var(--nav-ease);
  -webkit-tap-highlight-color: transparent;
}

.mn-sub-link:active {
  color: var(--nav-white);
  background: rgba(255, 255, 255, 0.06);
}

.mn-sub-link__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nav-accent);
  margin-right: 12px;
  opacity: 0.85;
  flex-shrink: 0;
}


/* ──────────────────────────────────────────────
   9. 抽屉底部（CTA 按钮区）
   ────────────────────────────────────────────── */

.mn-drawer__footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--nav-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mn-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  border-radius: var(--nav-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s var(--nav-ease);
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.mn-cta-btn--primary {
  background: var(--nav-accent);
  color: #1a1503;
  font-weight: 600;
}

.mn-cta-btn--primary:active {
  background: #dda403;
}

.mn-cta-btn--outline {
  background: transparent;
  color: var(--nav-white);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.mn-cta-btn--outline:active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}


/* ──────────────────────────────────────────────
   10. 主题变体（通过覆盖变量切换）
   ────────────────────────────────────────────── */

/* 商务深灰 */
.mn-theme-dark {
  --nav-primary:      #111827;
  --nav-primary-dark: #030712;
  --nav-secondary:    #1f2937;
  --nav-accent:       #60a5fa;
}

/* 生态绿 */
.mn-theme-green {
  --nav-primary:      #059669;
  --nav-primary-dark: #047857;
  --nav-secondary:    #1a2e28;
  --nav-accent:       #34d399;
}

/* 品牌红 */
.mn-theme-red {
  --nav-primary:      #dc2626;
  --nav-primary-dark: #b91c1c;
  --nav-secondary:    #2d1b1b;
  --nav-accent:       #f87171;
}


/* ──────────────────────────────────────────────
   11. 安全区适配（iPhone 底部刘海）
   ────────────────────────────────────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mn-drawer__footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}