/* =========================================================================
 * 主题导航：超级菜单（覆盖层）
 *
 * 面板结构由 theme-tune/mega-menu.php 里的 walker 输出，这里只管长相。
 *
 * ★ 开合走 CSS hover + focus-within，没有 JS ★
 * 主题自己的下拉（.sub-menu）也是纯 hover 的，保持一致 —— 加一套 JS 反而
 * 会和它的 hover 打架（鼠标从菜单移到面板的路上会闪）。
 * ====================================================================== */

/* ★ 必须改成 static ★
   main.css:1346 给 .nav-item 设了 position:relative，面板会以那一项为基准
   定位 —— 宽度只有几十像素，怎么都撑不开。改成 static 之后，最近的定位祖先
   变成 .header-1（它是 absolute）或 .sticky-menu（fixed），正好是整条头部，
   面板就能按整个视口宽度居中了。 */
#sticky-header .navbar-nav .nav-item.has-mega{ position:static; }

/* ★ .navbar 也得改成 static ★
   Bootstrap 的 .navbar 自带 position:relative，只把 .nav-item 改成 static 的话，
   定位基准会落到 .navbar 上 —— 它的高度只有菜单那一条（不含头部的上下内边距），
   于是 top:100% 算出来在头部**里面**：实测头部底边 100px，面板顶边却是 80px，
   正好差一个 padding-bottom；悬浮态更明显（62 / 53）。
   改成 static 之后基准变成 .header-1 / .sticky-menu 自己，top:100% 就是头部底边。

   ★ 会不会影响主题自带的首页演示大菜单（.has-homemenu）★
   不会。它是 left:0;right:0 贴着 .nav-item / .menu-thumb 定位的（main.css:1425），
   .nav-item 的 position:relative 我们只在 .has-mega 那一项上去掉，别的项不动。 */
#sticky-header .header-main .navbar{ position:static; }

.bc-mega{
  position:absolute;left:50%;top:calc(100% + 8px);
  width:min(1100px,calc(100vw - 48px));
  transform:translateX(-50%) translateY(10px);
  z-index:120;
  background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid rgba(16,52,110,.09);
  box-shadow:0 40px 90px -50px rgba(11,36,68,.9),0 2px 6px rgba(16,52,110,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility .24s;
}
/* 鼠标移过去的路上会经过头部和面板之间那道缝，没有这块透明的桥就会闪断。
   ★ 光靠它不够 ★ 桥只往上补 18px，补不到 <li> 的下边缘 —— 中间还隔着
   .header-1 的 padding-bottom（20px），那一段既不在 <li> 上也不在面板上。
   真正兜住的是 mega-menu.js 的 260ms 收起延迟，这块桥只是把死区变窄。 */
.bc-mega::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
/* ★ .is-mega-open 由 mega-menu.js 加 ★
   和下面的 :hover 是「或」的关系：JS 没跑起来就退回纯 hover（能用，只是没有
   收起延迟），JS 跑起来则在 hover 断掉之后再撑 260ms，让鼠标能穿过死区。
   两条规则并存，不存在谁覆盖谁。 */
#sticky-header .nav-item.has-mega.is-mega-open > .bc-mega,
#sticky-header .nav-item.has-mega:hover > .bc-mega,
#sticky-header .nav-item.has-mega:focus-within > .bc-mega,
.bc-mega:hover{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.bc-mega-inner{
  display:grid;grid-template-columns:minmax(0,1fr) 280px;
}
@media (max-width:1399px){
  .bc-mega{ width:min(960px,calc(100vw - 40px)); }
  .bc-mega-inner{ grid-template-columns:minmax(0,1fr) 240px; }
}

/* ★ 按内容缩窄 ★ 类由 walker 输出（见 mega-menu-walker.php 的 build_panel）
   没配「常见场景」右栏时，280px 那一列会空占位置，1100px 的面板右边空一大块，
   看着像没加载完。这几条按实际内容换一套窄版尺寸。
   .bc-mega.is-slim（0,2,0）比上面 @media 里的 .bc-mega（0,1,0）权重高，
   不依赖书写顺序。 */
.bc-mega.is-slim{ width:min(720px,calc(100vw - 48px)); }
.bc-mega-inner.is-solo{ grid-template-columns:minmax(0,1fr); }
.bc-mega-grid.is-1col{ grid-template-columns:minmax(0,1fr); }
@media (max-width:1399px){
  .bc-mega.is-slim{ width:min(660px,calc(100vw - 40px)); }
}

.bc-mega-label{
  display:block;margin-bottom:16px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--pbi-text-2,#8A94A3);
}

/* ---------------------------------------------------------------- 左区 */
.bc-mega-main{ padding:26px 28px; }
.bc-mega-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
}
.bc-mega-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:11px 12px;border-radius:12px;text-decoration:none;
  transition:background .2s ease;
}
.bc-mega-item:hover{ background:#F4F7FC; }

.bc-mega-ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;
  background:#F0F5FC;border:1px solid rgba(16,52,110,.07);
  color:#2E6BB8;font-size:16px;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.bc-mega-item:hover .bc-mega-ico{
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
  border-color:transparent;color:#fff;
}
/* 没填图标类时的占位：一个渐变小方块，一眼看得出「这项还没配图标」 */
.bc-mega-ico b{
  width:14px;height:14px;border-radius:4px;
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}
.bc-mega-item:hover .bc-mega-ico b{ background:#fff;background-image:none; }

.bc-mega-tx{ display:block;min-width:0;padding-top:2px; }
.bc-mega-tx b{
  display:block;font-size:15.5px;font-weight:600;line-height:1.4;color:#0B2444;
  transition:color .2s ease;
}
.bc-mega-item:hover .bc-mega-tx b{ color:var(--pbi-blue,#007BFF); }
.bc-mega-tx em{
  display:block;margin-top:3px;font-style:normal;
  font-size:13px;line-height:1.55;color:var(--pbi-text-2,#8A94A3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------------------------------------------------------- 右区 */
.bc-mega-side{
  padding:26px 26px;
  background:linear-gradient(170deg,#F5F8FD,#EEF4FC);
  border-left:1px solid rgba(16,52,110,.07);
}
.bc-mega-list{ list-style:none;margin:0;padding:0; }
.bc-mega-list li + li{ margin-top:4px; }
.bc-mega-list a{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;margin-left:-8px;border-radius:9px;
  font-size:14px;font-weight:500;color:#2A4A7A;text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.bc-mega-list a:hover{ background:rgba(255,255,255,.9);color:var(--pbi-blue,#007BFF); }
.bc-mega-spark{
  flex:none;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
}

/* -------------------------------------------------------------- 底部条 */
.bc-mega-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 28px;
  background:#F7F9FC;border-top:1px solid rgba(16,52,110,.07);
}
.bc-mega-foot-tx b{ display:block;font-size:15px;font-weight:600;color:#0B2444; }
.bc-mega-foot-tx p{
  margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--pbi-text,#5B6472);
}
.bc-mega-btn{
  flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:60px;
  font-size:14px;font-weight:600;color:#fff;text-decoration:none;
  background-image:var(--pbi-grad,linear-gradient(103.71deg,#5CABFF 17.96%,#007BFF 66.13%));
  box-shadow:0 12px 26px -12px rgba(0,90,200,.85);
  transition:gap .25s ease,transform .28s ease;
}
.bc-mega-btn:hover{ gap:14px;transform:translateY(-2px);color:#fff; }

/* ------------------------------------------------------------ 窄屏收起 */
/* 1200px 以下主题本来就切到汉堡抽屉了（.d-none.d-xl-flex），桌面菜单整个
   不显示，面板自然也看不见。这里再兜一层，防止以后把断点下放时漏掉。 */
@media (max-width:1199px){
  .bc-mega{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .bc-mega,.bc-mega-item,.bc-mega-ico,.bc-mega-btn,.bc-mega-list a{ transition:none; }
}