/* ======================================================================
   移动端下拉菜单（.menu）—— 全站公共样式
   ======================================================================
   2026-10-21 从 res/2026v2/css/home_2026v2.css 整段搬到这里。

   为什么要搬：
     这套规则原先每条选择器前面都带 ".home-2026v2-page" 这个前缀，
     而这个类【只有首页的 body 上才有】（内页 body 没有），
     所以 50 个内页（workwx / guests / price_list …）拿不到任何菜单样式，
     加上它们的 component/main/header.html 里压根没有 ul.menu 这个容器，
     表现就是「移动端点右上角汉堡图标完全没反应」。

   现在：
     · 本文件由 component/main/header_common.html 统一引入 → 全站生效
     · 菜单容器抽成 component/main/mobile_menu.html
     · 交互抽成 res/2026v2/js/mobile_menu.js
     首页 index.ejs 与内页 component/main/header.html 都 include 同一个组件，
     首页不再单独维护一份（原 home_2026v2.css 里那段已删除）。

   ⚠ 选择器前面【不要再加 ".home-2026v2-page" 前缀】，否则内页又会失效。
     （改完可用 grep -c "home-2026v2-page" 本文件自查，正常应为 0）
   ====================================================================== */
/* ======================================================================
   【2026-10-21 修复】桌面端隐藏移动端菜单
   ======================================================================
   现象：PC 端强刷后，移动端的下拉菜单内容（引流拓客/场景方案/主动拓客…）
        直接铺在首页上，PC 端也能看到。

   根因：<ul class="menu"> 是我 2026-10-20 为移动端【新增】的元素
        （官网桌面端用的是 .menu_pc，本地也一样，桌面端从来没有 .menu）。
        但 common.css 里隐藏 .menu 的规则只有一条：
            @media (max-width: 768px) { .menu { display: none; } }
        —— 那是移动端专用的。
        桌面端（≥769px）没有任何规则隐藏 .menu，
        所以我加的移动端样式（.menu-sub 等在 @media 内，display:block）
        虽然也只在移动端生效，但 .menu 这个 ul 本身是可见的，
        里面的 li/strong/div 就按【普通文档流】渲染出来了。

   ⚠ 为什么平时看不到、强刷才出现：
        平时我的 JS 里有 $menu[0].style.display = "none"（行内样式，优先级最高）
        把 .menu 整个藏起来了；
        强刷时如果 CSS/JS 的加载时序变了，或 JS 那行没跑到，
        行内样式就没了，.menu 就露出来了。
        —— 所以这是「靠 JS 兜底」带来的不稳定，PC 端应该由 CSS 兜底。

   修法：桌面端（≥769px）用 CSS 明确隐藏 .menu，
        不依赖 JS 的行内样式。JS 那行仍保留（双保险）。
   ====================================================================== */
@media screen and (min-width: 769px) {
  .menu {
    display: none !important;
  }
}

/* ======================================================================
   【2026-10-20 移动端修复】移动端菜单（.menu）
   ⚠ 2026-10-20 修正：这段原本被写在了 @media (max-width:767px) 块内部，
     而那个块里又嵌了一个 @media (max-width:768px)，导致规则被套了两层媒体查询。
     嵌套 @media 在部分浏览器下不生效，表现为「二级菜单链接横排成一行」。
     现在整段移到文件末尾的顶层，与其他规则平级。
   ====================================================================== */
@media screen and (max-width: 768px) {
  .menu {
    /* 【2026-10-20 抖动修复】
       收起态 height:0 + overflow:hidden，
       展开态由 JS 加 .is-open，CSS 只提供过渡。
           ⚠ 高度【不能写死】：加了二级菜单后，总高度会随展开项变化
             （产品 11 子项 / 解决方案 10 子项 / 开放平台 3 子项），
             所以由 JS 动态测量 scrollHeight 后写 inline style。
       transition 做动画，不用 jQuery slideDown/slideUp——
       原因见 index.ejs 里「移动端菜单开合」的注释：
       jQuery 3.4.1 的 slide 与子元素 transition、max-height 互相干扰，
       会导致菜单「下来→上去→又下来」。

       显隐由 JS 写 inline display 控制（优先级最高，不受本规则影响）。

       ⚠ 展开态必须用【固定像素值】而不是 auto：
       height:auto 无法做 CSS transition（浏览器无法插值），
       会变成瞬间跳变而不是动画。 */
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 70px;
    z-index: 45;
    background-color: #ffffff;
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12);

    height: 0;
    overflow: hidden;
    /* 收起方向的过渡：JS 先把 display 设为 none，
       display 无过渡能力，但 height 从 420→0 的那一帧仍能被看到。
       配合 JS 里先改 height 再改 display 的顺序即可做出收起动画。 */
    transition: height .25s ease;
  }

  /* 展开态：高度由 JS 动态测量后写 inline style（优先级最高）
     ⚠ 这里【不要】写死 px 值 —— 二级菜单展开后总高度会变：
        产品 11 个子项、解决方案 10 个、开放平台 3 个，高度各不相同。
     CSS 只负责提供过渡，收起态的 height:0 在上面那条规则里。 */
  .menu.is-open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ★ 收起动画的关键
     展开：display:none → block，然后 height 0→420（transition 生效，平滑）
     收起：需要先让 height 420→0 播完，再 display:none。
     用这个短暂的状态切换配合 JS 里的 setTimeout 实现。 */
  .menu.is-closing {
    height: 0 !important;
    overflow: hidden !important;
  }

  /* JS 给 .menu_ico 加 .hover 表示展开中，这里给个上边框做视觉分隔 */
  .menu_ico.hover ~ .menu {
    border-top: 1px solid #e2e8f0;
  }

  /* ⚠ 不要在这里写 height:0 / overflow:hidden 来控制收起态！
     jQuery 的 slideDown 会先读元素的 scrollHeight 算出目标高度，
     若 CSS 里已有 height:0 !important 压着，
     它算出的目标高度是 0 → 动画目标是 0 → 菜单打不开。
     收起/展开完全交给 jQuery 的 inline style 控制即可
     （inline style 优先级最高，不会被 CSS 覆盖）。 */

  /* 一级菜单项
     官网实测（www.yjiyun.com，390px）：
       li       padding: 5px 20px; border-bottom: 1px solid #eee
       strong   display: flex; align-items: center; justify-content: space-between
       a        display: block; font-size: 15px; color: #333; line-height: 40px
       展开态   a 变蓝 #0086c7
     ⚠ 关键：strong 用 flex + space-between，
        这样「文字」靠左、「三角箭头」靠右。
        之前我写的是 display:block，导致文字被 text-align:center 居中了。 */
  .menu li {
    height: auto;
    padding: 5px 20px;
    line-height: 1.6;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }

  .menu li:last-child {
    border-bottom: none;
  }

  /* ⚠ display 必须加 !important
     实测：写 display:flex 时计算值却是 block，
     因为 common.css 里还有一条 .menu li strong { display:block }（桌面段），
     加载顺序在后会覆盖掉。
     加 !important 后计算值 = flex，箭头才会靠右。 */
  .menu li strong {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  .menu li strong a {
    display: block;
    padding: 0;
    font-size: 15px;
    line-height: 40px;
    color: #333;
    text-align: left;
    /* ⚠ 必须清掉继承来的 transition
       common.css 里有 .menu li strong a { transition: all .3s ease 0s }，
       而我们的菜单用 CSS transition 动画容器的 max-height，
       两者叠加会导致菜单展开/收起时抖动一下（内容先跳、容器高度后到位）。

       官网 jQuery 2.1.4 没这个问题是因为它的 slide 动画实现方式不同，
       我们用 3.4.1 就必须把子元素的 transition 明确关掉。 */
    transition: none !important;
    -webkit-transition: none !important;
  }

  /* 展开态一级项高亮（官网是 #0086c7） */
  .menu li.has-sub.is-open > strong > a,
  .menu li.hover > strong > a {
    color: #0086c7 !important;
  }

  /* 隐藏二级菜单里的 span 标记（一级菜单的三角用 i 标签） */
  .menu li span {
    display: none !important;
  }

  /* ==================================================================
     【2026-10-20】移动端二级菜单
     样式参照官网 www.yjiyun.com 的移动端菜单：
       · 有下级的项右侧显示 ▼ 三角，展开后变 ▲
       · 展开区域浅灰底、左侧细缩进
       · 分组小标题为蓝色（如「场景方案」「行业方案」）
       · 每项之间有 1px 分割线
     ================================================================== */

  /* 有下级的项：整行可点，右侧留出箭头位置 */
  .menu li.has-sub > strong {
    position: relative;
    display: block;
  }

  /* 右侧三角箭头
     ⚠⚠ 方向：官网是【收起 ▲ / 展开 ▼】，不是反过来！
     实测官网页面：未展开的「解决方案」「企微学院」是尖朝上的 ▲，
                   展开的「产品」是尖朝下的 ▼。

     官网用两张图切换（不是 CSS 旋转）：
       .menu li strong i  { background: url(...ico_up.png)  }   ← 收起，向上 ▲
       .menu li.hover i   { background: url(...ico_upa.png) }   ← 展开，向下 ▼
     ico_up.png  = 向上 ▲（200×200，上半部分像素多）
     ico_upa.png = 向下 ▼（200×200，下半部分像素多）
     这两张图本地都有，直接照搬，不用 rotate。

     ⚠ strong 是 flex + space-between，i 天然靠右，不用 absolute 定位。 */
  .menu li.has-sub > strong > i {
    display: block !important;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    /* 收起态：向上 ▲ */
    background: url("/templates/website/res/2020/img/ico_up.png") no-repeat center center;
    background-size: 100% auto;
    cursor: pointer;
  }

  /* 展开态：换成向下的 ▼（官网 .menu li.hover i 的做法） */
  .menu li.has-sub.is-open > strong > i,
  .menu li.has-sub.hover > strong > i {
    background: url("/templates/website/res/2020/img/ico_upa.png") no-repeat center center;
    background-size: 100% auto;
  }

  /* 展开时一级项高亮（与官网一致：文字变蓝） */
  .menu li.has-sub.is-open > strong > a {
    color: #2563eb !important;
  }

  /* 二级菜单容器：默认收起 */
  .menu li .menu-sub {
    display: block;
    height: 0;
    overflow: hidden;
    /* 官网实测：二级区域是【白底】（rgba(0,0,0,0)），
       只有里面的链接是浅灰方块 #f7f7f7 */
    background: transparent;
    border-top: none;
    transition: height .25s ease;
    /* ⚠ 必须重置 line-height：common.css 里 .menu li { height:70px; line-height:70px }
       会让二级菜单的每行都占 70px，看起来像超大字号 */
    line-height: 1.4 !important;
    font-size: 14px;
    text-align: left;
    position: static;
  }

  /* 展开态 */
  .menu li.has-sub.is-open > .menu-sub {
    height: auto;
  }

  /* 分组容器：必须 block，否则标题和链接会挤在同一行 */
  .menu li .menu-sub .menu-sub__group {
    display: block;
    width: 100%;
  }

  /* 分组小标题
     官网实测（www.yjiyun.com，390px 视口）：
       字号 13px、深色 #333、font-weight 500（加粗感）、左对齐
       左边距与下面的方块左边缘对齐（x=20）
     注意：不是蓝色！蓝色是「一级菜单展开态」的颜色，不是分组标题的颜色。 */
  /* 官网实现：.menu_pro .menu_pro_div .menu_pro_title {
       font-size:13px; font-weight:600; line-height:20px; padding:5px 0; } */
  .menu li .menu-sub .menu-sub__title {
    display: block;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 5px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 20px !important;
    text-align: left !important;
    background: transparent;
  }

  /* 二级链接组：三列网格（官网实测 x = 20 / 136 / 251，宽 112px，间距 4px）
     ⚠ 关键：用 flex + wrap 做三列，而不是竖排的 block。
        官网的每个链接是一个【浅灰方块】，高 30px、字号 12px、文字居中。
     ⚠⚠ 但分组标题 .menu-sub__title 也在这个 group 里，
        它会成为一个 flex item 跟方块抢位置 —— 实测标题和方块重叠了。
        解决：给标题 flex: 0 0 100%，强制它独占一行。 */
  /* 官网实现：.menu_pro .menu_pro_div { margin-bottom: 10px }
     ⚠ 官网【没有用 gap】，而是用链接的 margin-top:5px + margin-right:1%
     我之前用 gap:4px，导致分割线和间距都对不上。 */
  .menu li .menu-sub .menu-sub__group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  /* 分组标题必须独占整行（flex-basis:100%），否则会跟方块抢同一格。
     ⚠ 因为 group 有 gap:4px，标题独占一行时下方也会多 4px 间隙，
     所以用负 margin 抵消，让标题和方块之间的间距与其他方块一致。 */
  .menu li .menu-sub .menu-sub__title {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* 二级链接
     官网实测：
       背景 rgb(247,247,247) = #f7f7f7（浅灰方块）
       高 30px、字号 12px、文字居中、颜色 #333
       宽 112px（由三列网格分配，不是写死的）
     ⚠ display 必须是 block（覆盖 common.css 里 .menu li a 的 inline），
        字号要压过 .menu li strong a { font-size:16px }（特异性 0,2,2），
        所以选择器写到 .menu li .menu-sub a（0,3,2）并加 !important。
     ⚠ 用后代选择器而非 > ：a 的父级实际是 .menu-sub__group，不是 .menu-sub。 */
  .menu li .menu-sub a,
  .menu li .menu-sub a:link,
  .menu li .menu-sub a:visited,
  .menu li .menu-sub a:hover,
  .menu li .menu-sub a:active {
    display: block !important;
    float: none !important;
    /* 官网实现：width:32%; margin-right:1%; margin-top:5px;
       padding:5px 10px; line-height:20px; box-sizing:border-box; */
    width: 32% !important;
    margin-top: 5px !important;
    margin-right: 1% !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    line-height: 20px !important;
    box-sizing: border-box;
    font-weight: 400 !important;
    color: #333 !important;
    text-align: center !important;
    background: #f7f7f7 !important;
    border: none !important;
    border-radius: 0;
    transition: none !important;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu .menu-sub a:active {
    background: #eff6ff;
    color: #2563eb;
  }

  /* 无分组标题的扁平子菜单（企微学院 / 开放平台用） */
  .menu li .menu-sub--flat a:first-child {
    padding-top: 12px;
  }

  /* 分组之间的间隔 */
  /* 官网【没有】分组之间的分割线，靠 .menu_pro_div { margin-bottom:10px } 区分 */

  /* 点击区域至少 44px，符合移动端可点击标准 */
  .menu_ico {
    cursor: pointer;
  }
}