/* ============================================================
   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:#F0F6FF;      /* 条目悬停浅蓝底，与品牌蓝配套 */
  --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)}
  }
}

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