/*
 * nav-menu.css — 站点导航（页头菜单）的自有实现。
 *
 * 替代 elementor-pro/assets/css/widget-nav-menu.min.css（27,363 B，商业授权）。
 * **不是抄它的规则**，是照渲染结果重写：`tools/derive-css.mjs` 量出原件在本站
 * 元素上贡献的全部计算属性（首页 1440/760/390 各 137 条 / 11 种元素形状），
 * 再用自己的写法达到同一结果。验收判据是**那 137 条逐条相同**，不是"看起来一样"。
 *
 * 标记形状（505 个片段共用同一套页头）：
 *
 *   .elementor-widget-nav-menu.elementor-nav-menu__align-end
 *     .elementor-widget-container
 *       nav.elementor-nav-menu--main.elementor-nav-menu__container
 *         ul.elementor-nav-menu                     ← 横向主菜单
 *           li > a.elementor-item[.has-submenu]     ← 菜单项（可带子菜单）
 *                  span.sub-arrow > svg             ← 下拉箭头
 *               ul                                  ← 子菜单（默认 display:none）
 *                 li > a.elementor-sub-item
 *
 * ⚠️ 原件 147 条规则里只有约 40 条在本站命中，其余服务于本站没用到的版式
 *（垂直布局、多种下拉动画、图标字体的几种写法…）。**只写命中的那些。**
 *
 * ⚠️ 三个 `var(--e-nav-menu-*)` 变量由 Elementor 的**逐页样式**（uploads/elementor/css/*.css）
 * 提供，本文件只负责消费它们、不定义默认值 —— 定义了就会在客户改设置时压过他的值。
 */

/* ── 组件外壳 ─────────────────────────────────────────────────────── */
.elementor-widget-nav-menu .elementor-widget-container,
.elementor-widget-nav-menu:not(:has(.elementor-widget-container)) {
  display: flex;
  flex-direction: column;
}

/* ── 列表复位 ─────────────────────────────────────────────────────── */
/* 三者一起复位：容器、li、子菜单 ul。少写一个，浏览器默认的 list-style 与
   padding 就会从那一层漏出来。 */
.elementor-nav-menu,
.elementor-nav-menu li,
.elementor-nav-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  line-height: normal;
  list-style: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.elementor-nav-menu {
  position: relative;
  z-index: 2;
}
/* 清浮动：原件用的是老式 `font:0/0 serif` 写法，这里保持同样的计算结果。 */
.elementor-nav-menu::after {
  /* 🔴 **必须是 U+00A0（不换行空格），不是普通空格。**
     原件的字节就是它（那个位置放的是**字面 NBSP 字节**），而普通空格
     在 clearfix 里语义不同：普通空格会被空白折叠吃掉，NBSP 不会。
     ⚠️ 这条差异**只有把伪元素纳入量具之后才看得见** —— 它既不是元素、
     又不带 `getComputedStyle` 第二参数就读不到，此前的"逐条完全相同"对它一个字都没说。
     两侧打印出来长得一模一样（都是 `" "`），差异在**字节**里。
     ⚠️ **别写成 `\u00a0`** —— 那是 JS/JSON 的转义，**CSS 不认**：CSS 的十六进制转义是
     `\a0 `（带终止空格），而 `\u` 在 CSS 里只会转义出字母 `u` ⇒ 写成 `"\u00a0"`
     实际内容是 `u00a0` 五个字符。这里放的是**字面字节**，与原件同。 */
  content: " ";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font: 0/0 serif;
}
.elementor-nav-menu a,
.elementor-nav-menu li {
  position: relative;
}
.elementor-nav-menu li {
  border-width: 0;
}
/* 子菜单默认收起 —— 展开由 SmartMenus 在运行时改 display。 */
.elementor-nav-menu ul {
  display: none;
}

/* ── 菜单项 ───────────────────────────────────────────────────────── */
.elementor-nav-menu a {
  display: flex;
  align-items: center;
}
.elementor-nav-menu a,
.elementor-nav-menu a:focus,
.elementor-nav-menu a:hover {
  padding: 10px 20px;
  line-height: 20px;
}
.elementor-nav-menu a.current {
  background: #1f2124;
  color: #fff;
}
.elementor-nav-menu a.disabled {
  color: #88909b;
  cursor: not-allowed;
}

/* 悬停/当前项的装饰条：两个伪元素常驻，靠 opacity 与 transform 显隐。
   **不是 display 切换** —— 那样没有过渡。 */
.elementor-item::before,
.elementor-item::after {
  display: block;
  position: absolute;
  transition: 0.3s;
  transition-timing-function: cubic-bezier(0.58, 0.3, 0.005, 1);
}
.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::before,
.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::after {
  opacity: 0;
}
.elementor-item-active::before,
.elementor-item-active::after,
.elementor-item.highlighted::before,
.elementor-item.highlighted::after {
  transform: scale(1);
}

/* ── 下拉箭头 ─────────────────────────────────────────────────────── */
/* 负的上下外边距 + 同量内边距：把点击热区撑到整行高，而不改变行盒高度。 */
.elementor-nav-menu .sub-arrow {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-block-start: -10px;
  margin-block-end: -10px;
  padding: 10px;
  padding-inline-end: 0;
}
.elementor-nav-menu .sub-arrow i {
  pointer-events: none;
}
.elementor-nav-menu .sub-arrow .e-font-icon-svg {
  width: 1em;
  height: 1em;
}
.elementor-nav-menu .sub-arrow .e-font-icon-svg.fa-svg-chevron-down {
  width: 0.7em;
  height: 0.7em;
}
.elementor-nav-menu .sub-arrow .fa.fa-chevron-down,
.elementor-nav-menu .sub-arrow .fas.fa-chevron-down {
  font-size: 0.7em;
}

/* ── 主菜单（--main）：内边距、过渡、子菜单定位 ───────────────────── */
.elementor-nav-menu--main .elementor-nav-menu a {
  transition: 0.4s;
}
.elementor-nav-menu--main .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-nav-menu--main .elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-nav-menu a.highlighted {
  padding: 13px 20px;
}
.elementor-nav-menu--main .elementor-nav-menu a.current {
  background: #1f2124;
  color: #fff;
}
.elementor-nav-menu--main .elementor-nav-menu a.disabled {
  background: #3f444b;
  color: #88909b;
}
.elementor-nav-menu--main .elementor-nav-menu ul {
  position: absolute;
  width: 12em;
  padding: 0;
  border-style: solid;
  border-width: 0;
}
/* 下拉面板里的箭头转 90°（指向侧边而不是下方）。
   `--direction-multiplier` 由 Elementor 在 RTL 下翻成 -1。 */
.elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow .e-font-icon-svg,
.elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow i {
  transform: rotate(calc(-90deg * var(--direction-multiplier, 1)));
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown .sub-arrow .e-font-icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ── 横向布局 ─────────────────────────────────────────────────────── */
.elementor-nav-menu--layout-horizontal {
  display: flex;
}
.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
}
.elementor-nav-menu--layout-horizontal .elementor-nav-menu a {
  flex-grow: 1;
  white-space: nowrap;
}
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li {
  display: flex;
}
/* 项间距：**只在相邻两项之间**加，首尾不加 —— 用 :not(:first-child) /
   :not(:last-child) 而不是统一 margin + 负边距，后者在换行时会露出来。 */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > a {
  margin-inline-start: var(--e-nav-menu-horizontal-menu-item-margin);
}
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child) > a {
  margin-inline-end: var(--e-nav-menu-horizontal-menu-item-margin);
}
/* 分隔线：画在 li 的 ::after 上，最后一项没有。 */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after {
  align-self: center;
  border-color: var(--e-nav-menu-divider-color, #000);
  border-left-style: var(--e-nav-menu-divider-style, solid);
  border-left-width: var(--e-nav-menu-divider-width, 2px);
  content: var(--e-nav-menu-divider-content, none);
  height: var(--e-nav-menu-divider-height, 35%);
}

/* ── 下拉档位：本站是 --dropdown-none ─────────────────────────────── */
/*
 * ⚠️ **这一条是最要紧的，而我第一版漏了它。**
 * 组件有四档下拉行为（none / mobile / tablet / mobile_extra），本站取 `none`：
 * **移动端下拉面板与汉堡按钮永远不显示**，任何宽度下都只有横向主菜单。
 * 漏掉它的后果不是"少个样式"：整个组件从 32px 高变成 179px 高（下拉面板露了出来），
 * 而 `derive-css` 的逐条对账一次就把它指出来了。
 *
 * 漏掉的原因值得记：我那个静态"活规则"筛选器要求**整条选择器列表里的每个类**
 * 都在标记里出现，而这条规则的另一个分支带着本站没有的 `elementor-menu-toggle`
 * ⇒ **整条被丢掉**。判据应当按逗号拆开、任一分支命中即算活。
 */
.elementor-nav-menu--dropdown-none .elementor-menu-toggle,
.elementor-nav-menu--dropdown-none .elementor-nav-menu--dropdown {
  display: none;
}

/* 横向布局下，子菜单从菜单项底边开始。原件带 !important —— 沿用，
   因为 Elementor 的逐页样式可能给 ul 设别的 top，这条要压过它。 */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li ul {
  top: 100% !important;
}
/*
 * 子菜单的左偏移要抵掉菜单项之间的间距（第一项没有左间距，所以排除它）。
 * ⚠️ 我第一版漏了这一条，原因值得记：我把上面那条规则的**规则体打印截断在 150 字符**，
 * 于是以为它只有 `top`。后来 `derive-css` 的逐条对账指出
 * `ul.sub-menu…|left` 只有原件有，去问 CDP「哪条规则赢了」才找出这一条 ——
 * **它根本是另一条规则**，选择器又被 CDP 的输出截断在 60 字符。
 * 两次都是**读了一份被截断的东西然后当成了全部**。
 */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > ul,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > .scroll-up,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > .scroll-down {
  inset-inline-start: var(--e-nav-menu-horizontal-menu-item-margin) !important;
}

/* ── 对齐 ─────────────────────────────────────────────────────────── */
.elementor-nav-menu__align-end .elementor-nav-menu {
  justify-content: flex-end;
  margin-inline-start: auto;
}

/* ── 下拉面板 ─────────────────────────────────────────────────────── */
.elementor-nav-menu--dropdown {
  background-color: #fff;
  font-size: 13px;
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: top;
  transition: max-height 0.3s, transform 0.3s;
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-sub-item {
  font-size: 0.85em;
}
.elementor-nav-menu--dropdown a {
  color: #33373d;
}
.elementor-nav-menu--dropdown a.current {
  background: #1f2124;
  color: #fff;
}
.elementor-nav-menu--dropdown a.disabled {
  color: #b3b3b3;
}
.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown .elementor-item.highlighted {
  background-color: #3f444b;
  color: #fff;
}
/* 下拉里的层级缩进用**透明左边框**做（而不是 padding）——
   这样背景色能一直铺到最左边，缩进只体现在文字上。 */
ul.elementor-nav-menu--dropdown a,
ul.elementor-nav-menu--dropdown a:focus,
ul.elementor-nav-menu--dropdown a:hover {
  border-inline-start: 8px solid transparent;
  text-shadow: none;
}
.elementor-nav-menu ul ul a,
.elementor-nav-menu ul ul a:focus,
.elementor-nav-menu ul ul a:hover,
.elementor-nav-menu ul ul a:active {
  border-left: 16px solid transparent;
}
.elementor-nav-menu ul ul ul a,
.elementor-nav-menu ul ul ul a:focus,
.elementor-nav-menu ul ul ul a:hover,
.elementor-nav-menu ul ul ul a:active {
  border-left: 24px solid transparent;
}
.elementor-nav-menu ul ul ul ul a,
.elementor-nav-menu ul ul ul ul a:focus,
.elementor-nav-menu ul ul ul ul a:hover,
.elementor-nav-menu ul ul ul ul a:active {
  border-left: 32px solid transparent;
}
.elementor-nav-menu ul ul ul ul ul a,
.elementor-nav-menu ul ul ul ul ul a:focus,
.elementor-nav-menu ul ul ul ul ul a:hover,
.elementor-nav-menu ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}
