/*
 * Mega menu — 分组面板一级下拉（PCB Manufacturing / PCB Assembly）。
 *
 * Owner: assets/css/mega-menu.css
 * Markup owner: wp-content/themes/junj/functions.php (Junj_Header_Menu_Walker)
 * JS owner:    wp-content/themes/junj/assets/js/mega-menu.js
 * 架构说明：docs/主导航架构调整说明.md
 *
 * 设计规则（依据《SUNHOPE Independent Website Menu Architecture》架构图）：
 *   - 架构图把每个一级菜单画成一个纵向列：分组标题（BY CONSTRUCTION …）
 *     在上，该分组下的叶子链接紧随其下；分组之间纵向堆叠。
 *     因此面板内部是 `.mega-group` 的纵向列表，而不是标题列 + 列表列的并排网格
 *     —— 「BY TECHNICAL REQUIREMENT」这类长标题在并排网格里放不下。
 *   - 面板锚定在自己的一级项下方（.nav-item.has-mega-menu 保持 relative），
 *     所以窄面板与所属菜单项视觉相连。
 *   - 面板沿用 .dropdown 的视觉语言（绿色顶边 + 柔和投影 + 全宽 hover 底色），
 *     保证分组下拉与普通单列下拉（Capabilities / Industries / …）观感一致。
 *   - 桌面端由 :hover / :focus-within / [data-open="true"] 控制显隐；
 *     无 JS 用户仍然可用。
 *   - ≤1199px 塌缩为 header.js 手风琴里的纵向堆叠（.is-submenu-open）。
 *   - 尊重 prefers-reduced-motion：取消过渡动画。
 */

/* === 一级项标记 === */

.nav-item.has-mega-menu {
  /* 面板要锚定在自身一级项下方，因此不能是 static。 */
  position: relative;
}

.nav-link--mega {
  cursor: pointer;
}

.nav-link--mega[aria-expanded="true"] {
  color: var(--green);
  font-weight: 700;
}

.nav-link--mega[aria-expanded="true"]::after {
  opacity: 1;
}

/* === 面板容器 ===
   继承 .dropdown 的视觉语言，但作为分组面板收紧内边距、限制最大宽度。 */

.has-mega-menu > .dropdown.mega-menu {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translate(-50%, 10px);
  width: auto;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid rgba(0, 140, 17, 0.18);
  border-top: 3px solid var(--green);
  background: #fff;
  color: #6f7a74;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  z-index: 1100;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* 导航条与面板之间的隐形桥：让光标从一级项走到面板不掉 hover。 */
.has-mega-menu > .dropdown.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
}

.nav-item.has-mega-menu:hover > .dropdown.mega-menu,
.nav-item.has-mega-menu:focus-within > .dropdown.mega-menu,
.has-mega-menu > .dropdown.mega-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* === 分组堆叠 === */

.mega-menu__inner {
  display: flex;
  flex-direction: column;
  padding: 13px 0;
}

.mega-group {
  display: flex;
  flex-direction: column;
}

.mega-group + .mega-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 140, 17, 0.1);
}

.mega-group__title {
  margin: 0;
  padding: 6px 22px 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--green);
  white-space: nowrap;
}

.mega-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-group__list li {
  margin: 0;
  padding: 0;
}

.mega-group__list a {
  display: block;
  padding: 8px 22px;
  font-size: 15px;
  line-height: 1.2;
  color: #6f7a74;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.mega-group__list a:hover,
.mega-group__list a:focus-visible {
  color: var(--green);
  background: #f2fbf3;
}

/* === 平板与手机（≤1199px） ===
   面板不再是浮层，而是手风琴里的普通纵向列表，由 .is-submenu-open 控制显隐。 */

@media (max-width: 1199px) {
  .has-mega-menu > .dropdown.mega-menu,
  .has-mega-menu > .dropdown.mega-menu[data-open="true"],
  .nav-item.has-mega-menu:hover > .dropdown.mega-menu,
  .nav-item.has-mega-menu:focus-within > .dropdown.mega-menu,
  .nav-item.has-mega-menu:focus-within > .dropdown.mega-menu[data-open="true"],
  .nav-item:focus-within > .dropdown.mega-menu {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
  }

  .has-mega-menu > .dropdown.mega-menu::before {
    display: none;
  }

  .nav-item.has-mega-menu.is-submenu-open > .dropdown.mega-menu {
    display: block;
  }

  .mega-menu__inner {
    padding: 4px 0 8px 16px;
  }

  .mega-group + .mega-group {
    margin-top: 6px;
    padding-top: 6px;
  }

  .mega-group__title {
    padding: 4px 0;
    font-size: 13px;
    white-space: normal;
  }

  .mega-group__list a {
    padding: 5px 0;
    white-space: normal;
  }

  .mega-group__list a:hover,
  .mega-group__list a:focus-visible {
    background: transparent;
  }
}

/* === 手机（≤767px） === */

@media (max-width: 767px) {
  .mega-menu__inner {
    padding-left: 8px;
  }

  .mega-group__title,
  .mega-group__list a {
    white-space: normal;
  }
}

/* === Reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .has-mega-menu > .dropdown.mega-menu,
  .mega-group__list a {
    transition: none;
  }
}