/* ============================================================
   MOK 3.1 导航升级 — gateopenerfactory 基线复用（主题内置版）
   文件位置：/wp-content/themes/mok/assets/css/nav-upgrade.css
   由 core/base.php tb_scripts() 加载，排在主题样式之后
   仅作用于 >890px 桌面态（主题移动端断点 890px）
   布局来源：后台 外观→菜单→子菜单布局（1=窄下拉 2=左图右文 3=上图下文）
   ============================================================ */

:root{
  --nav-accent:#007bff;        /* 品牌蓝（=主题主色 --tb--main），换色只改这里 */
  --nav-ink:#1A1A1A;
  --nav-hover-bg:#1C86EE;      /* 条目悬停浅蓝底，与品牌蓝配套 */
  --nav-ease:cubic-bezier(.4,0,.2,1);
}

@media (min-width:891px){

  /* ---- 1. 面板"签名"：白底 + 蓝顶边 + 大柔光阴影 + 上浮淡入 ---- */
  .top-nav>li>.sub-menu{
    border-top:3px solid var(--nav-accent);
    box-shadow:0 8px 32px rgba(0,0,0,.12);
    transform:translateY(-8px);
    transition:opacity .2s var(--nav-ease),
               visibility .2s var(--nav-ease),
               transform .2s var(--nav-ease) !important;
  }
  .top-nav>li:hover>.sub-menu,
  .top-nav>li.tb-nav-open>.sub-menu,
  .top-nav>li:focus-within>.sub-menu{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto;
  }

  /* ---- 2. 触发项品牌蓝 ---- */
  .top-nav>li:hover>a,
  .top-nav>li.tb-nav-open>a,
  .top-nav .current-menu-item>a,
  .top-nav .current-menu-parent>a,
  .top-nav .current-menu-ancestor>a{color:var(--nav-accent)}
  .top-nav li:hover>a .m-a,
  .top-nav li.tb-nav-open>a .m-a{color:var(--nav-accent)}

  /* ---- 3. 布局1（tb-nav-1）窄下拉条目 ----
     注意：display:block 只能给 tb-nav-1 用。tb-nav-2/3 的 li>a 由主题
     的 display:flex 负责排版，若在此统一写 block，主题的
     `.tb-nav-2 .m-info{flex:1;width:0}` 会让条目宽度塌成 0，
     简介（.m-desc，overflow:hidden）就完全看不见了。 */
  .tb-nav-1 .sub-menu{width:240px}
  .tb-nav-1 .sub-menu>li>a{
    display:block;padding:12px 24px;border-left:3px solid transparent;
    border-radius:0;color:var(--nav-ink);
    transition:background-color .2s,border-color .2s,color .2s;
  }
  .tb-nav-1 .sub-menu>li>a:hover{
    background:var(--nav-hover-bg);
    border-left-color:var(--nav-accent);
    color:var(--nav-accent);
  }
  .tb-nav-1 .sub-menu .m-info{font-size:15px;font-weight:600}
  .top-nav .sub-menu .m-desc{
    color:#666;font-size:12px;font-weight:400;
    line-height:1.4;margin-top:3px;
  }

  /* ---- 4. 布局2（tb-nav-2 左图右文·横向）Mega 列 ---- */
  .tb-nav-2>.sub-menu,.tb-nav-3>.sub-menu{
    padding:40px 6.5% 24px;
    max-height:none;
  }
  .tb-nav-2>.sub-menu>li{
    border-radius:12px;padding:8px 12px;transition:background-color .2s;
  }
  .tb-nav-2>.sub-menu>li:hover{background:#fafafa}
  .tb-nav-2>.sub-menu>li>a{
    color:var(--nav-ink);
    transition:color .2s;
  }
  .tb-nav-2>.sub-menu>li>a:hover{color:var(--nav-accent)}
  .tb-nav-2>.sub-menu .m-info{font-size:15px;font-weight:700;line-height:1.35}
  .tb-nav-2 .title-big{font-size:16px}
  .tb-nav-2 .title-blod{font-weight:800;color:var(--nav-ink)}
  .tb-nav-2 .m-media{width:35px;height:35px;border-radius:6px;margin-right:10px;flex:none}
  .tb-nav-2 .sub-menu .sub-menu>li>a{padding:8px 12px;border-left:3px solid transparent;border-radius:8px}
  .tb-nav-2 .sub-menu .sub-menu>li>a:hover{
    background:var(--nav-hover-bg);border-left-color:var(--nav-accent);
  }

  /* ---- 5. 布局3（tb-nav-3 上图下文）产品卡 ---- */
  .tb-nav-3>.sub-menu>li{
    /* 25%-20px：4卡+3×24px边距=100%-8px，留余量防亚像素换行（3+1难看） */
    flex-basis:calc(25% - 20px);
    border-radius:16px;border:1.5px solid transparent;
    padding:16px;margin:0 0 16px;
    transition:all .3s var(--nav-ease);
  }
  .tb-nav-3>.sub-menu>li:not(:nth-child(4n+4)){margin-right:24px}
  /* 主题的 5 列规则 :not(:nth-child(5n+5)) 会给第4张也加 24px 右边距，
     导致 4 卡总宽超容器换行成 3+1。这里强制每行第4张右边距归零。 */
  .tb-nav-3>.sub-menu>li:nth-child(4n){margin-right:0}
  .tb-nav-3>.sub-menu>li:hover{
    border-color:var(--nav-accent);
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    transform:translateY(-2px);
  }
  .tb-nav-3 .m-m-w{
    height:150px;background:#f5f5f5;border-radius:12px;
    overflow:hidden;margin-bottom:14px;
  }
  .tb-nav-3 .m-media{width:100%;height:100%;object-fit:cover;display:block}
  /* GOP 基线：名称大写小标放图片上方 */
  .tb-nav-3 .m-cap{
    display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--nav-accent);margin-bottom:10px;
  }
  .tb-nav-3 .m-info{font-size:16px;font-weight:800;color:var(--nav-ink)}
  .tb-nav-3 .m-desc{font-size:13px;font-weight:400;color:#666;line-height:1.4;margin-top:6px}
  .tb-nav-3>.sub-menu>li>a{padding:0 !important;border-left:0 !important;background:none !important}
  .tb-nav-3>.sub-menu>li>a:hover .m-info,
  .tb-nav-3>.sub-menu>li>a:hover .m-cap{color:var(--nav-accent)}

  /* ---- 6. 中间断点补位（避坑 #3） ---- */
  @media (max-width:1279px){
    .tb-nav-2>.sub-menu>li{flex-basis:calc(50% - 12px)}
    .tb-nav-3>.sub-menu>li{flex-basis:calc(50% - 12px)}
  }

  /* ---- 8. 布局4（tb-nav-4）Key Automation 式排版 + 本站深色半透明磨砂面板：全幅面板 + 二级竖排 + 三级右侧浮层 ----
     2026-10-09 实测 keyautomation.com（浏览器 CSSOM 取原值，规则都带 mq width>=768px）：
       .navbar .has-megamenu{position:static!important}
       .navbar .has-megamenu .megamenu{display:flex;visibility:hidden;opacity:0;pointer-events:none;
            background:rgba(45,51,57,.56);border:0;width:100%;left:0;right:0;height:400px;
            margin-top:1px;padding:1rem;overflow:hidden;
            transition:visibility .5s,opacity .3s ease-in-out}
       .megamenu:hover / .nav .has-megamenu:hover .megamenu{visibility:visible;opacity:1}
       面板里可见的只有一列：.offset-md-1.col-md-2（左偏移 8.333%、宽 16.667%）
         h6.title.fw-bold.text-uppercase = 13px/700/大写/白/line-height 1.2/margin-bottom 8px
         ul.list-unstyled > li{padding:.5rem 0}            ← 二级就是这一列里的竖排条目
         li > a{font-size:14px;font-weight:400;color:#fff;line-height:1.6;padding:0;word-break:break-word}
         li > a::after{宽度 100%、高 .1em、贴底、opacity 0→1 动效}（参考站强调色 #FFDA69，我们按既定配色用主题蓝）
       三级不在这一列里：.second-level/.third-level/.fourth-level/.fifth-level 全是 display:none，
       真正的子项藏在 li 内的 .dropdown-menu{min-width:160px;padding:8px 0;
            background:rgba(45,51,57,.56);border:1px solid rgba(0,0,0,.15);border-radius:4px}
       条目 .dropdown-menu .nav-item{padding:.5rem 1rem}；参考站靠点击 .dropdown-toggle 展开。
     三处有意偏离（用户 2026-10-09 拍板 + 实测）：① 顶栏保持白底；
     ② 面板用 overflow:visible、三级改悬停展开，避免长列表被 400px 固定高裁掉；
     ③ 底色：参考站的 .56 是压在它自己的深色顶栏上（.main-header rgba(45,51,57,.56)）；我们是白底顶栏 +
        浅色首屏，实测 .56 出来是一层灰纱、白字对比只剩 3.4:1（tone/D），所以 1.3.9 提到 .92/.96。
        1.3.11 按用户「太深了」反馈改成**提亮色相而不是提透明度**：面板 rgba(64,74,86,.94)、
        浮层 rgba(50,58,68,.96)。在真实浏览器里对着线上首屏量过四档（tone/live-four.png）：
          .92 原色 中位 #3C4248 → 白字 10.2:1（最重）
          .80 原色 #54595E → 7.1:1（首屏大标题透出来最明显）
          .88 #3A4450 → 7.1:1
          .94 #4A545F → 7.6:1（肉眼最轻、透字最少，当时选定）
        注：无头 Edge 不渲染 backdrop-filter，本地快照看不出磨砂；blur 从 10px 调到 12px 只是锦上添花。
     ④ 1.3.12 用户仍觉得深（"一定要这么深吗？"），线上实拍三档对比（tone/tone2-three.png）后选**浅色面板**：
        面板 #fff + 3px 主题蓝顶边、二级/三级文字 #2D3742（12.1:1）、悬停 #0062cc（5.8:1，主题 a:hover 同款；
        #007bff 只有 4.0:1）、自动列出的产品链接 #4A5560（7.6:1）、小标题与简介 #6B7683（4.6:1；
        原来给的 #8A94A0 只有 3.1:1，13/12px 小字过不了 AA 所以提深一档）、箭头 #8A94A0（非文字图形，3:1 就够）。
        理由：深色只是「白字要有底」这一约束的解，本站其它下拉（main.css 第 65 行）本来就是白底蓝顶边，
        改浅反而更统一，且顺带解掉了约束——不再需要深色底，面板高度也从 min-height:400px 改成按内容自适应
        （浅底上 400px 空白会露出来）。磨砂 blur 一并去掉：不透明白底上它没有可见效果，
        而且实测 blur(22px) 会让 Tabbit 截图每次都超时。
     ⑤ 1.3.14（当前线上）用户改口：「恢复为之前的深色，但是增加透明度，设置成半透明的」。
        做法=深色底 rgba(64,74,86) 的 alpha 从 .94 降到 **.82** + **重新加 backdrop-filter 磨砂 blur(18px)**。
        **必须先解掉祖先的 backdrop root**：`.bk-header`（sticky 白栏）原来自带 `backdrop-filter:blur(10px)`，
        而它是面板的祖先 —— 规范上带 backdrop-filter 的祖先会成为后代的 backdrop root，于是面板的 blur
        只能采到那条白条自己，首屏大标题**照样清晰**地透过来（实测 tone14/live-d-hero.png，字叠字）。
        把主栏的 blur 去掉、透明度 .92→.96 之后，backdrop root 回到视口，磨砂才真的糊（tone14/live-e-hero.png）。
        浓淡是量出来的不是猜的（真实浏览器注入候选档 → 实拍 → PIL 采面板无字区算合成色 → WCAG）：
          .66 + blur18 → 合成 #7F868D，白字 **3.69:1 直接不过 AA**，淘汰
          .78 + blur18 → 合成 #686F78，白字 5.08，但 .88/.84 白只剩 4.37/4.14，次要文字全要提到 .92 才够，层级被压平
          **.82 + blur18 → 最坏情况（面板压在纯白内容区上）合成 #626A72：纯白 5.49、.94 白 5.08、.88 白 4.64、
            .66 箭头 3.35、下划线 #9CCBFF 3.24 —— 全部过 AA**，所以选它
          .90 + blur10 → 合成 #525B66，白字 6.89（最稳但基本看不出透）
        文字档回到白系：主文字 #fff、产品链接 .94 白、小标题/简介 .88 白、箭头 .66 白；
        **悬停保持白色**（#0062cc 在深板上会糊掉），强调下划线用提亮的 #9CC1FF→#9CCBFF（#007bff 在深板上约 1.9:1）。
        面板高度仍按内容自适应（min-height:0），3px 主题蓝顶边保留（白栏与深板之间正好需要一条分隔）。
     ⑥ 1.3.26（本次）客户把基准站换成 **https://www.keyautomation.com.au/**（Divi + QuadMenu + 主题自带
        fullmegamenu.css；**和上面量的 keyautomation.com 不是同一个站**），并判定前四轮"始终没有改成这样的效果"。
        真实浏览器悬停实测（脚本 byekey-nav-upgrade\ka_au_measure.js / ka_au_shot.js，实拍 shots-kaau\kaau-*.png）
        确认**问题在结构不在颜色**，参考站由三个结构件撑起：
          A 面板是**固定高度的框**：.quadmenu_btt{width:100%;left:0;height:580px;padding:20px 140px;
            background:rgba(45,51,57,.87);border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6}
            —— **无 backdrop-filter、无阴影**（1281~1440 视口 padding 收成 20px 50px）。
          B 二级是**列**：面板里的 > ul 实测 [140,103,322,200]，width:20%，条目 padding:10px 15px 10px 0（行高 40），
            文字 15px/500/#fff；列间一条竖线 ul::after{position:absolute;top:0;bottom:0;right:35px;width:1px;background:#dee2e6}。
          C **三级没有自己的盒子**：li.quadmenu-dropdown-submenu>.quadmenu-dropdown-menu{top:0;left:100%;right:0}
            + 内层 .quadmenu_btt{background:rgba(45,51,57,.01);padding:0;border:none} + ul{width:100%}
            → 实测三级列 [462,103,322,580]，**与二级列同宽、顶对齐、全透明**，所以它就是框里的第二列。
        对照我们改前的三处缺失：面板高度跟内容（301px，没有"框"）、只有顶部 3px 蓝粗边（没有下沿，"框架"读不出来）、
        三级是实心 rgba(91,100,109,.96)+白边+圆角 4+阴影的独立卡片（1.3.22 只对齐了颜色，正是客户说的
        "只是把三级菜单也改成黑色了"），道闸那栏 220×210 还比面板底边探出约 63px（＝"三级菜单没在框架里"）。
        本次按 A/B/C 逐条落地，另外两处顺带修：二级箭头原来钉在列右缘会压在分隔线上，改成紧跟文字后面
        （参考站的 caret 就贴着标签）；磨砂关掉（参考站没有，且它是"灰纱感"的来源）。
        **线上注入预览实测**（nav4_preview2.js，Product 下四个带下级的二级项逐个悬停）：面板 1280×580、
        二级列宽 236（=内容 20%）、三级列 x=585/w=236/背景 rgba(0,0,0,0)，**四栏全部 inside:true**
        —— 最坏的道闸 5 项 236×205，离框底还有 207px（改前探出 63px）。
        白字对比：rgba(45,51,57,.87) 压纯白合成 rgb(72,78,83) → **8.43:1**（比 .82 档的 5.49 更稳）。
        四个待选项按默认值定：面板保持容器宽 1280 居中（不铺满视口）、列间竖线拉整框高（**1.3.35 已改：线跟那一栏自己的内容高走**）、磨砂关、PRODUCT 小标题保留。 */
  .top-nav>li.tb-nav-4{
    position:static;
    /* 1.3.26：底色/磨砂/三级底色三档全部按 keyautomation.com.au 实测值取齐（见本段开头 ⑥）。
       要调浓淡只改这一个 alpha：.87 压白底合成 rgb(72,78,83)＝白字 8.43:1。 */
    --nav4-bg:rgba(45,51,57,.87);
    /* 1.3.26：三级不再是"卡片"——参考站的三级背景是 rgba(45,51,57,.01)≈全透明，
       它靠"与二级列同宽 + 顶对齐 + 无盒子"读成框里的第二列（1.3.22 的同色实心是错的方向）。 */
    --nav4-fly:transparent;
    --nav4-fg:#fff;                       /* 二级/三级主文字：实测见本段末尾注释 */
    --nav4-fg-dim:rgba(255,255,255,.94);  /* 1.3.33 起没有规则在用（自动列出的条目已统一成纯白），留着当备用档 */
    --nav4-fg-note:rgba(255,255,255,.88); /* 12px 简介 */
    --nav4-fg-cap:rgba(255,255,255,.88);  /* 13px 大写小标题 */
    --nav4-hover:rgba(255,255,255,.10);   /* 1.3.33 起没有规则在用：全站悬停**不铺行底色**（参考站任一层行底始终透明，只变色+出半宽线） */
    --nav4-line:#9CCBFF;                  /* 下划线/强调：#007bff 在深底上几乎看不见，提亮一档 */
    --nav4-hi:#9CCBFF;                  /* 1.3.31：悬停文字色（与下划线同色系）；4.98:1 压合成底 rgb(72,78,83) */
    --nav4-blur:none;                   /* 1.3.26：参考站无 backdrop-filter；磨砂是"灰纱感"的来源，关掉 */
  }
  .top-nav>li.tb-nav-4>.sub-menu{
    position:absolute;top:100%;left:0;
    width:100%;min-width:0;max-width:none;
    display:block;                        /* 竖排单列，不再横向铺多列 */
    margin-top:1px;padding:20px 50px;     /* 1.3.26：参考站 20px 140px（≥1881px）/20px 50px（1281~1440） */
    height:min(580px,calc(100vh - 200px));/* ★ 1.3.26：面板=固定高度的"框"（参考站 height:580px!important）；
                                             1.3.12~1.3.25 的"按内容自适应"正是"三级没在框架里"的根因之一。
                                             calc 只是防小屏：580 高的框不能把首屏全盖住 */
    background:var(--nav4-bg);
    -webkit-backdrop-filter:var(--nav4-blur);backdrop-filter:var(--nav4-blur);
    /* ★ 1.3.26：顶部 3px 蓝粗边 → 上、下各一条浅色发丝边。那两条浅色边就是客户说的"框架"。 */
    border:0;border-top:1px solid rgba(222,226,230,.72);border-bottom:1px solid rgba(222,226,230,.72);
    border-radius:0;
    box-shadow:none;                      /* 参考站 box-shadow:none!important */
    overflow:visible;z-index:1000;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
    transition:opacity .3s ease-in-out,visibility .3s ease-in-out,transform .3s ease-in-out;
  }
  /* ---- 1.3.35：分隔线的高度改成"跟着那一栏自己走"（客户指出参考站的线不是整框高） ----
     参考站 fullmegamenu.css 原文（keyautomation.com.au，本次抓的 kaau_fullmegamenu.css 第 64~80、108~115 行）：
       li.quadmenu-item>.quadmenu-dropdown-menu>ul{position:relative}
       li.quadmenu-item>.quadmenu-dropdown-menu>ul::after{top:0;bottom:0;right:35px;width:1px;background:#dee2e6}
       .quadmenu_btt ul{width:20%!important;border-right:1px solid #dee2e6}   ← **每一层 ul 都带一条**
         （三级那层 .quadmenu-dropdown-submenu .quadmenu_btt ul{width:100%}，线照样有）
     那个 580px 只是**外框** `.quadmenu_btt`，线挂在各层自己的 ul 上 → 高度＝那一栏的内容高
     （实测二级栏 200px，不是 580）。1.3.26~1.3.34 我们把线画在面板上（面板就是那块 ul）用
     top/bottom:0，等于拉满 580 的框高——这就是客户说的"高度不对"。
     现在：**每个二级 li 各带一条自己的线**。li 是 position:relative，条目之间没有 margin/padding 空隙，
     几条首尾相接正好连成"整栏内容高"的那一条；小标题 li（.t4-title-li，nav.js 注入）不带线，
     所以线从**第一个二级条目**起、到最后一个二级条目止＝二级菜单的高度。
     x 坐标保持不变（还是原来那条线的 271px）：li 盒右缘在 286，`right:15px` 落在文字右界（a 的
     padding-right 正好 15px），既不改到三级文字那边，也不压住二级文字。 */
  .top-nav>li.tb-nav-4>.sub-menu>li:not(.t4-title-li)::after{content:'';position:absolute;
    top:0;bottom:0;right:15px;width:1px;background:rgba(222,226,230,.55)}
  .top-nav>li.tb-nav-4:hover>.sub-menu,
  .top-nav>li.tb-nav-4.tb-nav-open>.sub-menu,
  .top-nav>li.tb-nav-4:focus-within>.sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
  }
  /* 一级小标题：nav.js 注入的面板首个 li.t4-title-li */
  /* ---- 1.3.38：列宽下限 200 → 300（客户：「product 下面的子菜单区域宽度不够，每个子菜单都要单独一行」）----
     线上实测（1400 视口，Product 面板 41 个文字标签逐个用 canvas 按各自 computed font 量单行宽）：
       二级最长「Automatic Boom Barrier」171，三级最长「Top Recessed Mouting Operator」232，四级最长 111；
       而三级那条 <a> 右侧要留 34px 给展开箭头（见下面 .chev-sub 规则），改前列宽 236 → 文字区只有 202
       → 只有两条换行：「Top Recessed Mouting Operator」(232) 和「Horizontal Mounting Operator」(213)。
     列宽取 300：文字区 300-34=266 > 232，余量 34px，四栏全单行。
     横向预算够：三级列是 left:100% 串上去的，最坏"二级+三级+四级"= 3×300=900，
     而桌面导航最小可用视口 1100 时面板内容宽就有 985（导航在 <1050 是整体隐藏的，不用管更窄的）。
     max-width 保持 320（参考站实测 322），不动 width:20%，让窄屏一侧仍按百分比先缩。 */
  .top-nav>li.tb-nav-4>.sub-menu>.t4-title-li{
    margin-left:0;width:20%;min-width:300px;max-width:320px;padding:0 0 8px;pointer-events:none}
  .tb-nav-4 .t4-title{display:block;font-size:13px;font-weight:700;line-height:1.2;
    text-transform:uppercase;color:var(--nav4-fg-cap);margin:0}   /* 13px 大写：.80 白在 .80 深板上实测 5.3:1 */
  /* 二级：面板里的第一列（1.3.26 起＝参考站同款 width:20% 列，不再左偏 8.333%） */
  .top-nav>li.tb-nav-4>.sub-menu>li{
    position:relative;float:none;
    margin-left:0;width:20%;min-width:300px;max-width:320px;
    padding:0;background:none!important;border-radius:0}
  .top-nav>li.tb-nav-4>.sub-menu>li>a{
    display:block;padding:10px 15px 10px 0;margin:0;border-left:0!important;border-radius:0;background:none!important;
    font-size:15px;font-weight:500;line-height:1.4;color:var(--nav4-fg)!important;   /* 1.3.26：参考站 15px/500 */
    position:relative;overflow:visible;word-break:break-word;transition:color .2s var(--nav-ease)}
  /* 二级的悬停色/下划线在下面的 1.3.31 / 1.3.33 两处规则里（合并成一条 li:hover + a:hover 组，避免重复声明）。 */
  .tb-nav-4 .t4-head{display:block;font:inherit;color:inherit;letter-spacing:normal;
    text-transform:none;padding:0;margin:0}
  /* ---- 1.3.31：下划线挂到**文字标签**上，长度 0→50%（参考站 fullmegamenu.css 原文） ----
     .quadmenu_btt .quadmenu-text::after{position:absolute;content:'';left:0;bottom:0;
        background:#CCBB86;width:0;transition:1s;height:2px}
     .quadmenu_btt .quadmenu-text:hover::after{width:50%}
     参考站的 <a> 本身就收缩到文字宽（实测 a 144 / 文字 129），所以它的 50% 天然＝"半个文字长"。
     ⚠️ 我们 1.3.26 起把线挂在 <a>（display:block＝二级列宽 236px）上，线上实测「平移门机」文字 60px
     而线 236px（3.9 倍），一路画到列右缘那条分隔线上 —— 就是客户说的"下划线太长了，
     应该和文字的长度相适应，而且线条是短于文字的"。现在把伪元素下移到标签层，
     线宽跟着文字长短自动变化（最长半截文字）：二级 .t4-head、三级/四级 .t4-label
     （nav.php 1.3.31 新加的内层 span）、自动列出的产品链 .t4-link 里的 .t4-label。
     动效时长照参考站取 1s（要更快改这一行的 width 过渡即可）。 */
  .tb-nav-4 .t4-head,.tb-nav-4 .t4-label{position:relative}
  .tb-nav-4 .t4-head::after,.tb-nav-4 .t4-label::after{content:'';position:absolute;left:0;bottom:0;
    width:0;height:2px;background:var(--nav4-line);transition:width 1s var(--nav-ease)}
  /* 1.3.33：**只有被悬停的那一项**出线（.t4-head 走 a:hover，.t4-label 走自己那级的 li:hover）。
     原来二级还挂着一条 `li:hover>a>.t4-head::after`，于是「悬停三级 → 二级也长出下划线」，
     而二级的文字变色规则只在 a:hover 上 → 二级呈现"有线没色"的半亮态（线上实测 FAQ：l2lineW=14.5 / l2color=#fff），
     同一块面板里 Download 那一列（fly 在 <a> 内）父级却是"有线有色"→ 三种状态，就是客户看到的"和其他菜单不一样"。 */
  .tb-nav-4>.sub-menu>li>a:hover>.t4-head::after,
  .tb-nav-4>.sub-menu>li>a:focus>.t4-head::after,
  .tb-nav-4 .sub-menu .sub-menu>li:hover>a .t4-label::after,
  .tb-nav-4 .t4-link:hover>.t4-label::after{width:50%}
  /* 1.3.33：父级在下级被悬停时＝**只变蓝、线收回**（keyautomation.com.au 实测：父级 .quadmenu-text::after
     width≈0.1/0.27（900ms 后仍是 0＝已收敛），文字仍是 rgb(46,163,242)）。
     二级的 fly 挂在 <a> **内部**，悬停三级必然同时命中 a:hover → 用 :has() 把这条线单独收回；
     三级/四级的子列是同级 ul，悬停子项时父 <a> 本来不 hover，这条只是防 li:hover 规则误亮。
     浏览器不支持 :has 时退化为"线也留着"，不影响可读性。 */
  .top-nav>li.tb-nav-4>.sub-menu>li:has(.t4-fly:hover)>a>.t4-head::after,
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li:has(.sub-menu:hover)>a .t4-label::after{width:0}
  /* 1.3.33：父链联动变蓝（两种三级结构现在走同一条 li:hover，行为一致）。
     ⚠️ 和 1.3.32 同一条铁律：这些选择器必须带 `.top-nav>li` 前缀，特异性要**严格高于**基础色规则，
     两边都是 !important 时按特异性判胜负，短的选择器会静默失效。 */
  .top-nav>li.tb-nav-4>.sub-menu>li:hover>a,
  .top-nav>li.tb-nav-4>.sub-menu>li>a:hover,
  .top-nav>li.tb-nav-4>.sub-menu>li>a:focus{
    color:var(--nav4-hi)!important;background:none!important}   /* 1.3.31：改成「移到就变色」（参考站 .quadmenu-text:hover{color} 的行为）；
       我们按全站蓝口径用 --nav4-hi:#9CCBFF —— 实测压在合成底 rgb(72,78,83) 上 **4.98:1**，15px/500 过 AA。
       1.3.26~1.3.30 这里是 color:#fff!important（悬停不变色、只亮下划线和行底），客户指出的第二条就是这个。
       ⚠️ 1.3.32：选择器必须带上 .top-nav>li 前缀。上一版写成 .tb-nav-4>.sub-menu>li>a:hover，
       特异性 (0,3,2) **低于**上面基础规则，两边都是 !important 时按特异性判胜负 →
       线上实测悬停仍是 rgb(255, 255, 255)（下划线却正常，因为基础规则没竞争 width）。注入红色/绿色对照规则复现过。 */
  /* 有子项的二级：箭头提示（main.css 默认把 sub-menu 里的 chev 隐藏了）。
     1.3.26：箭头**跟着文字走**而不是钉在列右缘——列右缘现在有一条分隔线，箭头压在上面会读成
     「平移门机 > | 上装」（预览实拍发现的）。参考站的 caret 就是贴着标签的。 */
  .tb-nav-4>.sub-menu>li>a>.t4-head{display:inline}
  .tb-nav-4>.sub-menu>li>a>.chev-sub{display:inline-block;position:static;
    width:12px;height:12px;margin:0 0 0 8px;vertical-align:-1px;transform:rotate(-90deg);
    color:rgba(255,255,255,.66);transition:color .2s}          /* 非文字图形，AA 只要 3:1（实测 3.35:1） */
  .tb-nav-4>.sub-menu>li:hover>a>.chev-sub{color:var(--nav4-hi)}   /* 1.3.31：箭头跟着标签一起变蓝 */
  /* 三级 = 框里的第二列（1.3.26 核心改动）。WP 自带的嵌套 ul 与「叶子分类自动列产品」的 span.t4-fly
     同一套外观：**全透明、无边角、无阴影、无内边距，与二级列同宽、与所在行顶对齐** → 它不再是"浮层"。
     参考站：li.quadmenu-dropdown-submenu>.quadmenu-dropdown-menu{top:0;left:100%} + 内层
     .quadmenu_btt{background:rgba(45,51,57,.01);padding:0;border:none} + ul{width:100%}。
     包含块：嵌套 ul 相对二级 li，.t4-fly 在 <a> 内相对该 a（a 是 display:block 整列宽）→ 两者都落在同一列槽位。 */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu,
  .top-nav>li.tb-nav-4 .t4-fly{
    position:absolute;left:100%;top:0;
    width:100%;min-width:0;max-width:none;                     /* 与二级列同宽（参考站 322=322） */
    margin:0;padding:0;list-style:none;
    background:var(--nav4-fly);
    border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-6px);
    transition:opacity .18s var(--nav-ease),visibility .18s var(--nav-ease),transform .18s var(--nav-ease)}
  /* hover 桥：二级文字与浮层之间 24px 不能断 hover */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu::before,
  .top-nav>li.tb-nav-4 .t4-fly::before{content:'';position:absolute;top:-10px;bottom:-10px;left:-24px;width:24px}
  /* 1.3.35：三级↔四级的分隔线，和二级那条同一个做法（参考站 `.quadmenu_btt ul{border-right}` 是**每层都有**）。
     线挂在**子菜单块自己**上（嵌套 ul 或 span.t4-fly，两者都是 position:absolute、宽＝该列 236、高＝它自己的条目数）
     → 高度跟着这一栏的内容走，不再是整框 580；x 同样是右缘内缩 15px。
     ⚠️ 别用 ::after 挂到 li/a 上：那两层已经被 1.3.31 的悬停下划线占用了（.t4-head/.t4-label::after）。 */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu::after,
  .top-nav>li.tb-nav-4 .t4-fly::after{content:'';position:absolute;top:0;bottom:0;right:15px;
    width:1px;background:rgba(222,226,230,.55)}
  /* 1.3.36：上面这条线要**等四级真的展开了**才画（客户：「鼠标移到第 2 级，3/4 级之间的分隔线就出来了，
     可那时第 4 级菜单还没显示」）。做法：保留 1.3.35 的无条件规则，再用 :has() 补一条**收回**规则 ——
     这一栏**存在**可展开的子栏（> li > .sub-menu）、但当前**没有任何一个**处于展开态
     （li:hover / li:focus-within 都没命中）→ content:none，线不画。
     叶子栏不受影响（四级那一栏自己、以及"三级里所有条目都无下级"的情况），线照旧 = 参考站
     `.quadmenu_btt ul{border-right}` 每栏都有一条。
     ⚠️ 三行伪类必须和 :has 连在**同一个复合选择器**里（中间不能换行/空格，否则变成后代选择器）。
     浏览器不支持 :has() 时这条收回规则整条解析失败 → 退回 1.3.35「线一直显示」，只是不美观，不影响可读。 */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu:has(> li > .sub-menu):not(:has(> li:hover > .sub-menu)):not(:has(> li:focus-within > .sub-menu))::after{content:none}
  .tb-nav-4 .sub-menu>li:hover>.sub-menu,
  .tb-nav-4 .sub-menu>li:focus-within>.sub-menu,
  .tb-nav-4 .sub-menu>li:hover .t4-fly,
  .tb-nav-4 .sub-menu>li>a:hover>.t4-fly{
    opacity:1;visibility:visible;pointer-events:auto;transform:none}
  /* 浮层里的条目 */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li{display:block;margin:0;padding:0;background:none!important}
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li>a{
    display:block;padding:10px 34px 10px 0;margin:0;border-left:0!important;border-radius:0;background:none!important;
    font-size:15px;font-weight:500;line-height:1.4;color:var(--nav4-fg)!important;word-break:break-word;
    transition:background-color .15s,color .15s}
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li:hover>a{color:var(--nav4-hi)!important}   /* 1.3.33：三级/四级的父链联动（悬停它的下级时本项也亮） */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li>a:hover{
    background:none!important;color:var(--nav4-hi)!important}   /* 1.3.33：行底色改成"明确不铺"。
       1.3.31 这里写的是 `background:var(--nav4-hover)`，但它**从来没生效过**：上面基础规则是
       `background:none!important`，非 !important 的声明永远输给 !important（不看特异性）→ 线上实测悬停
       `rgba(0,0,0,0)`。结果反而和参考站一致（参考站任一层悬停行底始终透明、只变色+出线），
       所以这次把意图写对，别留一条"写了不生效"的误导性死规则。 */
  /* 1.3.22：三级/四级里还有下级的条目也要给「可展开」箭头。
     walker（inc/nav.php:96）本来就在 has_children 时输出 .chev-sub，但 main.css:66 的
     `.top-nav .sub-menu .chev{display:none}` 把它藏了，1.3.21 之前只有二级被 237 行单独放开
     → 线上实测「地装」有下级（链条/齿轮齿条）但 chev 的 computed display 是 none，用户无从知道能再展开。 */
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li>a>.chev-sub{
    display:block;position:absolute;right:4px;top:50%;width:12px;height:12px;margin:0;
    transform:translateY(-50%) rotate(-90deg);color:rgba(255,255,255,.66);transition:color .2s}
  .top-nav>li.tb-nav-4 .sub-menu .sub-menu>li:hover>a>.chev-sub{color:var(--nav4-hi)}
  /* 三级及以下是通用分支输出的 <div class="m-info">，main.css 给它 15px/600/color:var(--ink)。
     1.3.11 之前的问题是它在深色面板上＝黑字压深底（实测线上 rgb(26,26,26)，整条几乎看不见）。
     1.3.12 换浅底后不再撞色，但这三条继承规则仍然要留：它们把三级条目统一成 Key 式的
     14px/400 常规字重，而不是主题默认的 15px/600 粗体。简介另给一档灰。 */
  .top-nav>li.tb-nav-4 .sub-menu .m-info{font:inherit;color:inherit;letter-spacing:normal;line-height:inherit}
  .top-nav>li.tb-nav-4 .sub-menu .m-cap{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
  .top-nav>li.tb-nav-4 .sub-menu .m-desc{font-size:12px;font-weight:400;line-height:1.45;
    color:var(--nav4-fg-note);margin-top:2px}   /* 12px 小字：.74 白，见本段末尾实测读数 */
  .tb-nav-4 .t4-link{display:block;padding:10px 15px 10px 0;font-size:15px;font-weight:500;line-height:1.4;
    color:var(--nav4-fg);cursor:pointer;transition:background-color .15s,color .15s}   /* 1.3.33：静态色从 .94 白(--nav4-fg-dim) 统一成纯白 */
  .tb-nav-4 .t4-link:hover{color:var(--nav4-hi);background:none}   /* 1.3.33：**去掉那条 rgba(255,255,255,.10) 行底条**。
       这是客户这轮看到的差异本体：Support → Download 的三级是「叶子分类自动列条目」的 span.t4-link，
       只有它有 !important 竞争-free 的背景声明 → 悬停时铺出一块灰白横条，而二级、三级 <a>、参考站都没有。
       线上实测（同一次悬停）：Download 那列 bg=rgba(255,255,255,0.1)，FAQ 那列 bg=rgba(0,0,0,0)。 */
  /* 浮层内再套浮层（四级/五级）：同一规则自动级联 */
  .tb-nav-4 .sub-menu .sub-menu>li{position:relative}
}

/* ---- 9. 布局4 在移动端抽屉里：只用竖排手风琴，浮层不出现 ----
   1.3.31：抽屉里**不要**那条 0→50% 下划线（白底上 #9CCBFF 只有 2.1:1，而且点按会残留 hover 态），
   标签也恢复继承白底配色。
   断点取 1024 而不是 890：抽屉/汉堡按钮在 main.css:222 的 max-width:1024 就已启用，
   原来写 890 会在 891–1024 之间漏掉这一段（实测平板横屏：抽屉里出现空的浮层容器占位，
   全站Bug排查报告 第 20 条）。 */
@media (max-width:1024px){
  /* 二级名称就是条目文字，不再当小标题用 */
  .bk-mobile-nav .t4-head{display:inline;font-size:15px;font-weight:500;line-height:1.5;
    color:inherit;letter-spacing:normal;text-transform:none;padding:0;margin:0}
  /* 抽屉里不自动列该分类下的产品：点二级进分类页，列表短、不会拖到几十屏 */
  .bk-mobile-nav .t4-fly,.bk-mobile-nav .t4-list{display:none}
  .bk-mobile-nav .t4-title-li{display:none}
  /* 1.3.31：移动端抽屉关掉桌面面板的文字下划线与蓝色悬停（白底不适用） */
  .bk-mobile-nav .t4-head::after,.bk-mobile-nav .t4-label::after{content:none}
  .bk-mobile-nav .t4-head,.bk-mobile-nav .t4-label{position:static}
  /* 主题的 .bk-mobile-nav .m-info{display:none} 会把三级及以下条目的文字整块吃掉
     （实测：抽屉里出现一排只有分隔线的高空行）。这里恢复显示并继承条目自身的字号/颜色。 */
  .bk-mobile-nav .m-info{display:inline;font:inherit;color:inherit;letter-spacing:normal}
  /* 有子项的每一层都要留出右侧 +/- 钮的位置 */
  .bk-mobile-nav li.menu-item-has-children>a{padding-right:52px}
  /* 抽屉里箭头与 +/- 钮重复：只保留 +/-（nav.js 注入，点击展开） */
  .bk-mobile-nav .chev{display:none}
}

/* ---- 7. 动效降级（避坑 #8） ---- */
@media (prefers-reduced-motion:reduce){
  .top-nav .sub-menu,.top-nav .sub-menu *{transition:none !important}
}
