/* =====================================================
   qing-mega-panel  —  超级菜单面板（独立小部件）
   前缀: qmp-（外层）+ 复用 site-header 的 .qth-mega-* 内部样式

   用途：把超级菜单面板做成独立小部件，存为 Elementor 模板，
   再用模板短码嵌进「页眉」小部件的导航项里。

   为什么要这个文件：
   elementor-site-header.css 里的 .qth-mega 是为「挂在导航项下方」写的 ——
   position:absolute + opacity:0 + visibility:hidden，只有 :hover 才显形。
   独立小部件在编辑器里必须始终可见、静态排布，所以这里把那几条中和掉。
   内部的 .qth-mega-head / -cols / -col / -list 等样式完全复用，不重复定义，
   这样面板嵌回页眉后外观与原来一致。
   ===================================================== */

/* 中和定位与隐藏。选择器带 .qmp-panel 前缀，只影响独立小部件，
   不会波及页眉里真正的悬浮面板。 */
.qmp-panel .qth-mega {
  position: static;
  top: auto;
  left: auto;
  opacity: 1;
  visibility: visible;
  /* 基础规则 .qth-mega 现在带 pointer-events: none（隐藏时不可命中），
     独立小部件是静态可见的，这里恢复可交互。 */
  pointer-events: auto;
  transform: none;
  transition: none;
  width: 100%;
  max-width: 100%;
}

/* 独立面板默认铺满所在容器；宽度交给「面板最大宽度」控件或外层容器。 */
.qmp-panel {
  width: 100%;
}

/* 嵌回页眉后：短码渲染出的 .qmp-panel 处于 .qth-mega 内部，
   此时不能再套一层边框/阴影/背景，否则会出现双层框。

   注意不要连 padding 一起清零：短码路径下 DOM 是
   .qth-mega > [Elementor 容器] > .qmp-panel > .qth-mega > .qth-mega-inner，
   外层 .qth-mega 里并没有第二个 .qth-mega-inner，
   面板的内边距全靠这一个提供。清零会让内容直接贴到边框上。 */
.qth-mega .qmp-panel .qth-mega {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* 嵌回页眉后，短码渲染出的 Elementor 容器夹在 .qth-mega 和 .qmp-panel 之间。
   boxed 容器（.e-con-boxed / .e-con-inner）自带左右内边距与最大宽度，
   会在面板边框与内容之间再叠一层，容器设置左右不对称时就表现为单侧偏移。
   这里把这段路径上的内边距和宽度限制中和掉，
   让面板的留白只由 .qth-mega-inner 一处提供，与内置重复器路径保持一致。 */
.qth-mega > .elementor,
.qth-mega > .elementor > .e-con,
.qth-mega > .elementor > .e-con > .e-con-inner {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}



/* ===== 修复：未 hover 时面板不该能被鼠标命中 =====
   本文件开头的 .qmp-panel .qth-mega { visibility: visible; opacity: 1 }
   是给 Elementor 编辑器用的（独立小部件必须始终可见）。
   但面板用短码嵌回页眉后，这条规则同样命中内层那个同名元素。

   visibility 可继承，子级写 visible 会把外层悬浮层的 visibility: hidden 顶掉。
   此时面板虽被外层 opacity: 0 遮成透明，却依然占位、依然参与鼠标命中测试 ——
   鼠标扫到导航项下方那片「看不见的面板」就等于 hover 了 li.qth-has-mega，
   :hover 规则随即把 opacity 拉回 1，于是「没碰到菜单，子菜单自己冒出来」。

   改成 inherit：内层跟随外层显隐，隐藏时真的不可见、也不可命中。
   pointer-events 同理 —— 否则子级的 auto 会重新打开父级关掉的命中测试。 */
.qth-mega .qmp-panel .qth-mega {
  visibility: inherit;
  pointer-events: inherit;
}

/* =====================================================
   修复：hover 时内层面板被外层的 translateX(-50%) 推向左侧

   内外两层都叫 .qth-mega，于是 site-header.css 里这条
     .qth-has-mega:hover .qth-mega { transform: translateX(-50%) ... }
   特异性 (0,3,0)，会连内层一起命中；
   而本文件开头中和用的
     .qmp-panel .qth-mega { transform: none; position: static; }
   只有 (0,2,0)，压不住它。

   结果：不 hover 时正常（(0,2,0) 能压住基础规则 (0,1,0)），
   一 hover 内层就被按自身宽度的一半左移，内容整块跑出边框。

   另外页眉的「超级菜单宽度」控件输出 {{WRAPPER}} .qth-mega => width，
   短码输出就在页眉 wrapper 内，这条内联样式同样会命中内层，
   与 .qmp-panel .qth-mega { width: 100% } 特异性打平、靠加载顺序决定。

   下面用 (0,4,0) 显式钉住内层：位置、位移、宽度都不再受外层规则影响。
   ===================================================== */
.qth-nav-item.qth-has-mega .qmp-panel .qth-mega,
.qth-has-mega:hover .qmp-panel .qth-mega,
.qth-has-mega:focus-within .qmp-panel .qth-mega {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
}

/* 嵌回页眉后，面板应铺满外层 .qth-mega ——
   宽度由页眉的「超级菜单宽度」决定（与面板小部件里
   「面板最大宽度」控件的说明一致：那项只影响独立预览）。
   面板自己的 max-width 若小于外层，会在外层里居中并留出空隙，
   看起来就像「没在容器里」，所以这里解除。 */
.qth-nav-item.qth-has-mega .qth-mega .qmp-panel {
  max-width: none;
  width: 100%;
}

/* =====================================================
   手机端（≤1080px）
   与页眉的默认移动断点一致。

   作用域是 .qmp-panel 而不是抽屉里的 .qth-drawer-mega —— 面板有两条
   渲染路径：作为独立小部件直接放在页面上，或由页眉短码渲进抽屉。
   只限定抽屉那条会漏掉前者（表现就是手机端毫无变化）。

   权重说明：下面多处要压过 Elementor 控件输出的内联 CSS。
   控件选择器形如 {{WRAPPER}} .qmp-panel .qth-mega（0,3,0）或
   {{WRAPPER}} .qth-mega（0,2,0），所以关键几条写到 0,3,0 以上，
   必要处用 :where() 之外的显式堆叠。
   ===================================================== */

@media (max-width: 1080px) {
  /* ---- 去掉外框 ----
     那圈黑框是桌面端悬浮面板的视觉边界；手机端面板在白底容器里，
     再套一圈只会显脏。阴影、圆角一并清掉。
     两层同名 .qth-mega 都要覆盖（短码路径下会嵌套）。 */
  .qmp-panel .qth-mega,
  .qmp-panel .qth-mega .qmp-panel .qth-mega,
  .qth-mega .qmp-panel .qth-mega {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- 隐藏头部 ----
     「产品中心」标题和「查看全部产品」在手机端是重复信息：
     抽屉里外层手风琴按钮已经写着栏目名，栏目入口另有链接。
     下面那条分隔线一并隐藏。 */
  .qmp-panel .qth-mega-head,
  .qmp-panel .qth-mega-divider {
    display: none;
  }

  /* ---- 多列改纵向堆叠 ----
     桌面端是并排两列；手机端宽度不够，并排会让每个链接折成好几行。 */
  .qmp-panel .qth-mega-cols {
    display: block;
  }

  .qmp-panel .qth-mega-inner {
    padding: 4px 0 0;
  }

  .qmp-panel .qth-mega-col {
    margin: 0;
    border-top: 1px solid #ececec;
  }

  .qmp-panel .qth-mega-col:first-child {
    border-top: none;
  }

  /* ---- 列标题变成手风琴开关 ----
     交互语义（role / tabindex / aria-expanded）由 JS 补，见
     assets/js/elementor-mega-panel.js。

     字号与字重刻意和抽屉一级项（.qth-drawer-link，16px / 400）对齐：
     基础 CSS 里列标题是 16px / 700，比抽屉条目粗一档，嵌进抽屉后两级
     菜单看起来像各写各的。这里统一成同一套排版，层级只用缩进和分隔线
     表达，不靠字重。 */
  .qmp-panel .qth-mega-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 16px 2px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #222;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .qmp-panel .qth-mega-col-title:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: 2px;
  }

  /* 箭头用 ::after 画，不必改小部件的 HTML。
     只在 JS 接管后（带上 aria-expanded）才出现，避免出现一个
     点不动却带箭头的标题。 */
  .qmp-panel .qth-mega-col-title[aria-expanded]::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 1.6px solid #999;
    border-bottom: 1.6px solid #999;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
  }

  .qmp-panel .qth-mega-col-title[aria-expanded="true"]::after {
    transform: rotate(225deg) translateY(-2px);
  }

  /* ---- 收起 / 展开 ----
     用 display 而不是 max-height 动画：列表条数不定，算不出一个通用的
     展开高度，硬给一个值长列表会被截断。
     规则挂在 [aria-expanded="false"] 上，所以脚本没加载时列表保持展开，
     不会变成一堆点不开的死标题。 */
  .qmp-panel .qth-mega-col-title[aria-expanded="false"] + .qth-mega-list {
    display: none;
  }

  .qmp-panel .qth-mega-list {
    margin: 0;
    padding: 0 0 10px;
    list-style: none;
  }

  .qmp-panel .qth-mega-list li {
    margin: 0;
    /* 桌面端可能带项目符号，手机端列表已经很紧凑，去掉更干净 */
    list-style: none;
  }

  /* 三级链接与抽屉子项（.qth-drawer-acc-panel a，14px / #444）对齐。
     基础 CSS 里这些链接是 16px，和列标题一样大，层级读不出来。 */
  .qmp-panel .qth-mega-list a {
    display: block;
    padding: 11px 2px 11px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #444;
  }
}