/**
 * Qing theme - Elementor "Site Header" widget styles.
 *
 * Ported from 轻蜓光电官网/css/style.css (页眉 Header / 超级菜单 / 移动端侧边栏).
 * Class names are namespaced with `qth-` so they never collide with the
 * theme's own .site-header styles or with Elementor's own classes.
 */

.qth {
  --qth-accent: #1f6feb;

  /* 汉堡按钮尺寸（由控件驱动，位置自动换算） */
  --qth-burger-w: 30px;
  --qth-burger-h: 24px;
  --qth-burger-bar: 2px;
  --qth-burger-inset: 3px;

  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #1a1a1a;

  /* 禁用双击放大。主题样式表里已在 html 上设过一份，这里再设一次是
     因为 Elementor 构建的页面不一定加载主题 style.css。
     manipulation＝只去掉双击缩放，双指缩放仍可用。 */
  touch-action: manipulation;
}

/* Scoped reset: the source stylesheet relies on a global `* { margin:0 }` reset. */
.qth,
.qth *,
.qth *::before,
.qth *::after {
  box-sizing: border-box;
}

.qth ul,
.qth li,
.qth h4,
.qth p {
  margin: 0;
  padding: 0;
}

.qth ul {
  list-style: none;
}

.qth a {
  text-decoration: none;
  color: inherit;
}

/* ===== 页眉 Header ===== */
.qth-header {
  position: relative;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.qth-header.qth-is-sticky {
  position: sticky;
  top: 0;
}

.qth-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  height: 72px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 品牌标识 */
.qth-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.qth-brand-img {
  display: block;
  height: auto;
  max-height: 48px;
  width: auto;
  flex: 0 0 auto;
}

.qth-brand-logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #111;
  line-height: 1.2;
}

.qth-brand-cn {
  font-size: 13px;
  color: #999;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* 主导航 */
.qth-nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.qth-nav-list {
  display: flex;
  align-items: center;
  height: 100%;
}

.qth-nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.qth-nav-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  font-size: 15px;
  color: #333;
  transition: color 0.2s ease;
}

.qth-nav-item:hover > a {
  color: var(--qth-accent);
}

/* 当前选中项：仅蓝色字体，无背景 */
.qth-nav-item.qth-is-active > a {
  color: var(--qth-accent);
  font-weight: 600;
}

/* 自定义 SVG 下拉箭头 */
.qth-nav-arrow {
  margin-left: 6px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.qth-has-mega:hover .qth-nav-arrow {
  transform: rotate(180deg);
}

.qth-no-arrow-rotate .qth-has-mega:hover .qth-nav-arrow {
  transform: none;
}

/* 产品中心悬停时仅变蓝色字体 */
.qth-has-mega:hover > a {
  color: var(--qth-accent);
}

/* ===== 超级菜单 Mega Menu（悬浮卡片） ===== */
.qth-nav-item.qth-has-mega {
  position: relative;
}

.qth-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(820px, calc(100vw - 40px));
  background: #fff;
  border: 2px solid #111;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.qth-has-mega:hover .qth-mega,
.qth-has-mega:focus-within .qth-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.qth-mega-inner {
  padding: 32px 40px 38px;
}

.qth-mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qth-mega-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

.qth-mega-all {
  font-size: 15px;
  color: #333;
  border-bottom: 1px solid #999;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.qth-mega-all:hover {
  color: #000;
  border-color: #000;
}

.qth-mega-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 20px 0 28px;
}

.qth-mega-cols {
  display: flex;
  gap: 60px;
}

.qth-mega-col {
  flex: 1 1 0;
  min-width: 0;
}

.qth-mega-col-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 22px;
}

.qth-mega-list li {
  margin-bottom: 22px;
}

.qth-mega-list li:last-child {
  margin-bottom: 0;
}

.qth-mega-list a {
  display: inline-block;
  font-size: 16px;
  color: #333;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.qth-mega-list a:hover {
  color: #000;
  padding-left: 4px;
}

/* 语言切换 */
.qth-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 28px;
  font-size: 14px;
  color: #666;
}

.qth-lang {
  transition: color 0.2s ease;
}

.qth-lang.qth-is-active {
  color: #111;
  font-weight: 600;
}

.qth-lang:hover {
  color: #000;
}

.qth-lang-sep {
  color: #ccc;
}

/* ===== 移动端操作区（默认隐藏，由内联断点样式接管） ===== */
.qth-mobile-actions {
  display: none;
  align-items: center;
  gap: 16px;
}

.qth-mobile-actions .qth-lang-switch {
  margin-left: 0;
}

/* 汉堡按钮是 <span role="button">，不是 <button>：
   去掉了原生按钮的外观和点击态背景。
   -webkit-tap-highlight-color 关掉移动端点击时的半透明灰块；
   user-select 防止连点两下选中周围文字；
   outline: none 只去掉常驻焦点框，键盘焦点另用 :focus-visible 给回，
   不能一并去掉——那样键盘用户就看不出焦点在哪了。 */
.qth-hamburger {
  width: var(--qth-burger-w);
  height: var(--qth-burger-h);
  position: relative;
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.qth-hamburger:focus,
.qth-hamburger:active,
.qth-hamburger:hover {
  background: none;
}

.qth-hamburger:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: 4px;
}

/* 直接子级选择器：外层本身也是 span，用后代选择器会把自己也选中 */
.qth-hamburger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--qth-burger-bar);
  background: #111;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
}

/* 三条横线位置由高度与线宽换算，改尺寸时保持均匀分布并垂直居中 */
.qth-hamburger > span:nth-child(1) {
  top: var(--qth-burger-inset);
}

.qth-hamburger > span:nth-child(2) {
  top: calc((var(--qth-burger-h) - var(--qth-burger-bar)) / 2);
}

.qth-hamburger > span:nth-child(3) {
  top: calc(var(--qth-burger-h) - var(--qth-burger-bar) - var(--qth-burger-inset));
}

.qth-hamburger.qth-is-open > span:nth-child(1) {
  top: calc((var(--qth-burger-h) - var(--qth-burger-bar)) / 2);
  transform: rotate(45deg);
}

.qth-hamburger.qth-is-open > span:nth-child(2) {
  opacity: 0;
}

.qth-hamburger.qth-is-open > span:nth-child(3) {
  top: calc((var(--qth-burger-h) - var(--qth-burger-bar)) / 2);
  transform: rotate(-45deg);
}

/* ===== 移动端侧边栏 ===== */
.qth-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 1100;
}

.qth-drawer-overlay.qth-is-open {
  opacity: 1;
  visibility: visible;
}

.qth-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 82%;
  max-width: 340px;
  height: 100%;
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}

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

/* 从左侧滑出 */
.qth-drawer-left {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.12);
}

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

.qth-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #eee;
}

.qth-drawer-title {
  font-size: 16px;
  font-weight: 700;
}

.qth-drawer-close {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: #333;
  cursor: pointer;
  padding: 0;
}

.qth-drawer-nav {
  padding: 8px 0 40px;
}

/* 抽屉导航是列表结构：ul.qth-drawer-list > li.qth-drawer-item */
.qth-drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qth-drawer-item {
  margin: 0;
  list-style: none;
}

/* 折叠项一行内是「标题链接 + 箭头按钮」：
   点文字进栏目页，点箭头只展开。整行做成按钮会让栏目页进不去。
   下边框画在这一行上，而不是各自的链接/按钮上，否则会出现两段错开的线。 */
.qth-drawer-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f2f2f2;
}

/* 行内的链接和按钮各自的边框交给 .qth-drawer-row，这里清掉。
   权重要高于下面那条通用规则，所以放在它之前不行——用更具体的
   选择器（0,2,0）压住 0,1,0 的通用声明。 */
.qth-drawer-row .qth-drawer-link,
.qth-drawer-row .qth-drawer-acc-btn {
  border-bottom: none;
}

/* 标题占满剩余宽度，箭头按钮贴右 */
.qth-drawer-row .qth-drawer-link {
  flex: 1 1 auto;
  min-width: 0;
}

.qth-drawer-row .qth-drawer-acc-btn {
  flex: 0 0 auto;
  justify-content: center;
  /* 箭头区域给足点击面积，但不要太宽挤掉标题。
     左内边距收掉：通用规则那份 22px 是给整行链接用的，
     箭头只需要右侧留白与标题保持一致的视觉边距。 */
  width: auto;
  min-width: 52px;
  padding-left: 0;
  padding-right: 18px;
}

/* 「未展开」时箭头颜色浅一些，展开后转正——纯视觉提示，
   与 aria-expanded 的语义状态一致。 */
.qth-drawer-row .qth-drawer-acc-btn .qth-acc-arrow {
  color: #999;
}

.qth-drawer-row .qth-drawer-acc-btn[aria-expanded="true"] .qth-acc-arrow {
  color: #222;
}

.qth-drawer-link,
.qth-drawer-acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 22px;
  font-size: 16px;
  font-family: inherit;
  color: #222;
  background: none;
  border: none;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
  text-align: left;
}

/* 手风琴开关是 <span role="button">，不是 <button>：
   去掉了原生按钮外观和点击态背景。
   -webkit-tap-highlight-color 关掉移动端点击时的半透明灰块；
   user-select 防止连点两下选中周围文字；
   outline: none 只去常驻焦点框，键盘焦点另用 :focus-visible 给回。 */
.qth-drawer-acc-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

/* 只清 :focus 的背景。不写 :active —— 「悬停背景色」控件
   （权重 0,2,0）在触屏上按下时也会命中，这里若一并清掉，
   那个控件设的反馈色就没了。 */
.qth-drawer-acc-btn:focus {
  background: none;
}

.qth-drawer-acc-btn:focus-visible {
  outline: 2px solid var(--qth-accent);
  outline-offset: -2px;
}

.qth-drawer-link.qth-is-active {
  color: #000;
  font-weight: 700;
}

.qth-acc-arrow {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.qth-drawer-acc-btn[aria-expanded="true"] .qth-acc-arrow {
  transform: rotate(180deg);
}

.qth-drawer-acc-panel {
  display: none;
  flex-direction: column;
  background: #fafafa;
  padding: 6px 0 12px;
}

.qth-drawer-acc-panel.qth-is-open {
  display: flex;
}

/* 子项列表 */
.qth-drawer-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qth-drawer-sublist li {
  margin: 0;
  list-style: none;
}

/* ---------- 抽屉内的超级菜单 ----------
   面板内容是桌面端那份 Elementor 模板，原样搬进抽屉必须做两层复位：

   1) 基础规则 .qth-mega 是 absolute + opacity:0 + visibility:hidden +
      pointer-events:none，靠桌面端 :hover 才显形。抽屉里没有那个 hover
      祖先，不复位就永远不可见。

   2) 短码路径下 DOM 是
      .qth-drawer-mega > .qth-mega > [Elementor 容器] > .qmp-panel > .qth-mega
      内外两层同名。而 elementor-mega-panel.css 里有一条
      .qth-mega .qmp-panel .qth-mega { visibility: inherit; pointer-events: inherit }
      （0,3,0），它是为了修桌面端「未 hover 时面板仍可被鼠标命中」的问题。
      在抽屉里这条会让内层继承到外层的隐藏态。

   所以选择器要写到 0,4,0 才压得住那条 0,3,0，两层一起显式点亮。

   边框也在这里一起去掉。手机端不需要那圈黑框——它是桌面端悬浮面板
   的视觉边界，抽屉里面板本身就在一个白底容器内，再套一圈框只会显脏。
   注意有两个 Elementor 边框控件会命中 .qth-mega：页眉的 mega_border
   （0,2,0）和面板的 panel_border（0,3,0）。下面第二个选择器是 0,4,0，
   两者都压得住；第一个 0,2,0 只用于兜底基础规则。 */
.qth-drawer-mega .qth-mega,
.qth-drawer-mega .qth-mega .qmp-panel .qth-mega {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* 页眉的 mega_border 控件输出 {{WRAPPER}} .qth-mega（0,2,0），
   压得过上面第一个同权重选择器（靠加载顺序）。这里补一条 0,3,0
   专门钉住外层那个 .qth-mega，确保黑框在抽屉里一定消失。 */
.qth-drawer .qth-drawer-mega .qth-mega {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* 桌面端的大内边距在抽屉里太占地方，换成与抽屉内链接一致的左右缩进
   （.qth-drawer-acc-panel 自身没有左右 padding，是靠里面的 a 撑的，
   所以这里要自己补，否则超级菜单会贴着抽屉边缘）。
   具体排版你要自己适配，这里只给一个不至于溢出或贴边的基线。 */
.qth-drawer-mega .qth-mega-inner {
  padding: 6px 22px 2px;
}

/* 短码路径下会出现两层 .qth-mega-inner 嵌套（外层菜单的 + 面板小部件的），
   内层再叠一份内边距会让内容往里缩两次，这里清掉。 */
.qth-drawer-mega .qth-mega-inner .qth-mega-inner {
  padding: 0;
}

/* 短码渲染出的 Elementor 容器夹在两层 .qth-mega 之间，
   boxed 容器自带左右内边距与最大宽度，会在抽屉里再叠一层留白。
   elementor-mega-panel.css 里已有同类复位，但那条只针对
   .qth-mega > .elementor 的直接子级路径，抽屉这条链要单独写。 */
.qth-drawer-mega .elementor,
.qth-drawer-mega .e-con,
.qth-drawer-mega .e-con-inner {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* 注：头部隐藏、多列堆叠、列手风琴这些「手机端形态」的规则不在这里，
   统一放在 elementor-mega-panel.css 的 @media (max-width: 1080px) 里，
   作用域是 .qmp-panel。
   原因：面板有两条渲染路径——独立小部件直接放在页面上，或由页眉短码
   渲进抽屉。只按 .qth-drawer-mega 限定会漏掉前者。
   这里只保留抽屉特有的部分（复位定位/显隐、清内边距）。 */

/* 注：抽屉内超级菜单的字号 / 字重 / 颜色统一在
   elementor-mega-panel.css 的手机端媒体查询里设置，与抽屉自身的
   一级项、子项排版对齐。这里不再单独指定颜色，否则两处会打架。 */
.qth-drawer-mega .qth-mega-list a:active {
  color: #000;
}

.qth-drawer-sub-title {
  padding: 14px 22px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.5px;
}

/* 链接现在包在 <li> 里，需要 display: block 才能让整行都是点击区，
   否则只有文字本身可点，上下内边距也撑不开。
   14px / #444 这套值与超级菜单里的三级链接一致（见
   elementor-mega-panel.css 手机端媒体查询），两级子菜单排版统一。 */
.qth-drawer-acc-panel a {
  display: block;
  padding: 11px 22px;
  font-size: 14px;
  color: #444;
}

/* 注：超级菜单里的链接不需要在这里排除。
   面板自己那条 .qmp-panel .qth-mega-list a（0,2,0）权重更高，
   会把上面这条 0,1,1 的内边距整体覆盖掉，缩进由面板统一决定。 */

.qth-drawer-acc-panel a:active {
  color: #000;
}

.qth-drawer-all {
  margin-top: 6px;
  font-weight: 600;
  color: #111 !important;
}

/* ===== Elementor editor helpers ===== */
.elementor-editor-active .qth-drawer,
.elementor-editor-active .qth-drawer-overlay {
  /* Keep the drawer out of the way while editing. */
  pointer-events: none;
}

.elementor-editor-active .qth-drawer.qth-is-open,
.elementor-editor-active .qth-drawer-overlay.qth-is-open {
  pointer-events: auto;
}