/* 顶栏一级菜单悬停弹出的二级菜单（mega menu），与 www.dten.com 一致。
   官网的样子 = dten-navigation 插件模板上的 Tailwind 类（templates/menu.php）+ 主题的深色导航皮肤
   （dten-theme/assets/css/layout/nav-skin-dark.css，全站默认皮肤，盖掉了插件的大部分样式）。
   这里直接写两者叠加后的结果，数值都来自那两份文件，官网改了这里跟着改。
   面板标记由 nav-menu.mjs 生成，导入时换掉原型里的占位面板（.dd）；原型 .dd 的样式留着不用。
   面板只在桌面宽度出现：≤1023px 时原型把一级菜单整行藏起来，换成汉堡菜单，那里的子菜单见文件末尾。 */

/* 面板：满宽白底，贴顶栏底边。往上多伸 12px 透明边框压住顶栏底部，鼠标从菜单项往下移进面板，中途不会丢 :hover。
   显隐同官网：悬停 0.15s 后淡入；离开后保留 0.25s 再淡出，期间仍可点，斜着移去点别的栏不会扑空。
   矮屏放不下时面板自己滚（外壳页的滚轮接管见导入脚本的补丁）。 */
#nav .mega{position:fixed;left:0;right:0;top:calc(var(--nav) - 12px);z-index:1;max-height:calc(100vh - var(--nav));overflow-y:auto;overscroll-behavior:contain;
  border-top:12px solid transparent;background:#fff;background-clip:padding-box;box-shadow:inset 0 1px 0 #e3e6e3,0 24px 50px rgba(0,0,0,.2);
  /* 官网 body 的字体基准：17px / 600 / 行高 3 倍。图片和子链接都坐在行内，行高撑出图下、子链接之间的空隙，照搬才对得上 */
  font:600 17px/3 var(--font);letter-spacing:normal;color:#272c29;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .2s ease .25s,visibility 0s linear .45s}
#nav ol > li:hover > .mega{opacity:1;visibility:visible;transition:opacity .3s ease .15s,visibility 0s linear .15s}
/* 展开的那一项，鼠标移进面板后标题仍保持悬停色 */
#nav ol > li:hover > a{color:var(--accent)}

/* 原型的 #nav li a 是给一级菜单的（整栏高、15px、不换行），面板里的链接先还原 */
#nav .mega a{display:block;height:auto;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;white-space:normal;color:inherit;text-decoration:none;transition:none}
#nav .mega a:hover{color:inherit}

#nav .mega h2{margin:0 0 3px;color:#1f2421;font-size:17px;font-weight:700;line-height:1.3;transition:color .15s ease}
#nav .mega h2 + p{margin:0;color:#535a56;font-size:14px;font-weight:400;line-height:1.45}
#nav .mega a:hover h2{color:#3d8142}

/* ---- Solutions（layout_1）：三栏产品，第三栏产品下方是 Accessories 卡（按栏内 gap 排开） ---- */
#nav .mega-cols,#nav .mega-in{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:38px 0 44px}
#nav .mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
#nav .mega-col{display:grid;align-content:start;gap:28px}
#nav .mega .mega-row{display:flex;align-items:flex-start;gap:16px}
#nav .mega-thumb{flex:none;display:grid;place-items:center;width:88px;height:72px;padding:4px;overflow:hidden;border-radius:8px;background:#fff}
#nav .mega-thumb a{width:100%;height:100%}
#nav .mega-thumb img{width:100%;height:100%;object-fit:contain}
#nav .mega-text{flex:1}
/* 子链接（DTEN D7X 55" / 75" 这类）。h3 用官网的标题字号和行高（23.8px / 1.2），子链接是坐在这一行基线上的行内块，每条的高度由它撑出来 */
#nav .mega h3{margin:5px 0 0;font-size:23.8px;font-weight:600;line-height:1.2}
#nav .mega h3:first-of-type{margin-top:8px}
#nav .mega h3 a{display:inline-block;color:#535a56;font-size:14px;font-weight:700;line-height:1.45}
#nav .mega h3 a:hover{color:#3d8142}
/* 侧栏：渐变底、居中的 Accessories 卡，占满所在栏宽 */
#nav .mega .mega-side{align-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:210px;padding:30px;
  border-radius:10px;background:linear-gradient(145deg,#f0f2f0,#e4e8e5);text-align:center}
#nav .mega .mega-side h2{margin:0 0 12px;font-size:20px}
#nav .mega .mega-side h2 a{display:inline;color:#303632}
#nav .mega .mega-side h2 a:hover{color:#3d8142}
#nav .mega .mega-side p{max-width:22ch;margin:0 auto;color:#303632;font-size:15px;font-weight:700;line-height:1.45}
#nav .mega .mega-more{font-size:13px;font-weight:600;color:#4eb857}
#nav .mega .mega-more:hover{color:#4eb857;text-decoration:underline}

/* ---- Services / Industries / Alliances（layout_2）：三列图片卡 ---- */
#nav .mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 56px}
#nav .mega-card{min-width:0}
#nav .mega-card img{width:100%;height:auto;margin-bottom:14px;object-fit:cover;border-radius:8px;background:#f7f8f7}

/* ---- 手机菜单（≤1023px 的汉堡菜单 #menu）的子菜单 ----
   带下拉的一级菜单点了切到子菜单视图（标记与切换见 nav-menu.mjs 的 MOBILE / MEGA_SCRIPT）。行高、字号、分隔线、
   深浅配色（--nf）沿用原型 #menu 的写法。Solutions 子菜单比一屏高，菜单自己滚。 */
@media (max-width:1023px){
  #menu{max-height:calc(100vh - var(--nav));max-height:calc(100dvh - var(--nav));overflow-y:auto;overscroll-behavior:contain}
  #menu [hidden]{display:none}
  #menu button{display:flex;align-items:center;width:100%;padding:0;border:0;border-bottom:1px solid rgba(128,128,128,.22);background:none;
    color:inherit;font:inherit;text-align:left;cursor:pointer}
  /* 只给能悬停的设备：手机上点了 Solutions，悬停色会粘在换上来的 Main Menu 上 */
  @media (hover:hover){#menu button:hover{color:var(--accent)}}
  #menu button svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #menu .msub-open{justify-content:space-between;height:48px;font-size:17px;font-weight:700}
  #menu .msub-open svg{opacity:.55}
  #menu .msub-back{gap:4px;height:48px;margin-left:-4px;font-size:15px;font-weight:600}
  #menu .msub-title{margin:0;padding:14px 0 2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
  #menu .msub ul{list-style:none;margin:0;padding:0}
  #menu .msub li{border-bottom:1px solid rgba(128,128,128,.22)}
  #menu .msub li:last-child{border-bottom:0}
  #menu .msub a{border-bottom:0}
  /* 产品下面的子链接（DTEN D7X 55" / 75" 这类） */
  #menu .msub a.msub-link{height:40px;font-size:15px;font-weight:600;opacity:.8}
  #menu .msub a.msub-link:last-child{margin-bottom:6px}
}