/* ====================================================================
   web-scoped.css —— 布局组件层（2/3 分层方案）
   ▶ 对应 Vue 打包前源码（scoped 样式用「前缀」模拟组件作用域，防止
     与其他页面/组件的样式冲突）：
       src/layout/TheNavigation.vue  → 前缀 #nav（header#nav 根元素）
       src/components/SubMenu.vue / CollapseSubMenu.vue → 前缀 #nav
       src/layout/TheFooter.vue / TheLogo.vue → 前缀 footer
   ▶ pxTorem(N) = N/16 rem（见 index.css 头注释）
   ==================================================================== */

/* ============ App.vue：.header（导航吸顶） ============ */
#nav {
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 0;
}

/* ============ TheNavigation.vue scoped ============ */
/* 滚动后加的背景类（web.js 挂在 header#nav 上，同 Vue） */
#nav.nav-background-light {
  background-color: #000000;
  box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
  z-index: 10;
}
#nav.nav-background-dark {
  background-color: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

#nav .language-container {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.9rem;
}
#nav .language {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0.15rem solid #fff;
  border-radius: 0.2rem;
  cursor: pointer;
}
#nav .language-container:hover { background: #222; }
#nav .language-container:hover > .language { filter: invert(0) !important; }

#nav li { font-size: 0.875rem; }  /* pxTorem(14) */

#nav .navbar {
  box-shadow: none;
  width: 72.8%;
  margin: auto;
}
/* logo 外层 h1 重置浏览器默认 margin/font-weight，避免挤压导航布局 */
#nav .brand-wrap {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  line-height: 1;
}
#nav .brand-wrap a {
  display: inline-block;
}
/* logo：200px 定宽 + 8:1 裁切（cover！源码如此；改 contain 会缩成小点） */
#nav .brand {
  width: 200px;
  object-fit: cover;
  aspect-ratio: 8/1;
}

#nav .level-1 {
  font-family: var(--default-font);
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  font-weight: normal;
  margin: 0 2.5rem;                 /* pxTorem(40) */
  position: relative;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

#nav .menu-icon:hover,
#nav .menu-icon:active,
#nav .menu-icon:focus {
  background: #222 !important;
  box-shadow: 0px 0.5rem 0.5rem 0px rgba(0, 0, 0, 0.25);  /* pxTorem(8) */
}

#nav .level-1 > .input {
  position: absolute;
  left: 2.5rem;                     /* pxTorem(40) */
  top: 100%;
  width: calc(100% - 2.5rem);
  background: #222;
  box-shadow: 0px 0.5rem 0.5rem 0px rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0;                /* pxTorem(8) */
}
#nav .input-wrapper {
  display: block;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 0 2.4375rem;             /* pxTorem(39) */
  background-image: none;
  cursor: text;
}
/* 搜索框输入（TheNavigation scoped 的 input 规则） */
#nav .level-1 > .input input {
  width: 100%;
  -webkit-appearance: none;
  font-size: inherit;
  outline: none;
  border: none;
  background: none;
  box-sizing: border-box;
  color: #fff;
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  font-size: 0.875rem;              /* pxTorem(14) */
  border-bottom: 1px solid #fff;
  max-height: 2.875rem;             /* pxTorem(46) */
  min-height: 2rem;                 /* pxTorem(32) */
  padding: 0.5rem 0;                /* pxTorem(8) */
}

/* hover 展开二级菜单 */
#nav .level-1:hover .level-2,
#nav .level-1:active .level-2 { display: flex; }

#nav .collapse-menu {
  color: #fff;
  font-family: var(--default-font);
  font-size: 1.875rem;              /* pxTorem(30) */
  letter-spacing: calc(var(--letterSpacing) * 0.33);
  opacity: 0.8;
  padding: 0;
}
#nav .menu-collapse { font-size: 1.25rem; }  /* pxTorem(20) */

/* TheNavigation 非 scoped 块（原全局，这里收敛到 #nav 内） */
#nav .menu-title {
  padding-right: 0 !important;
  padding-left: 0 !important;
  display: inline-block;
  font-size: 0.875rem;              /* pxTorem(14) */
  font-weight: normal;
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  font-family: var(--default-font);
}
#nav .level-1:hover .menu-title::after,
#nav .level-1:active .menu-title::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0.1875rem;                /* pxTorem(3) */
  position: absolute;
  bottom: 0.625rem;                 /* pxTorem(10) */
  left: 0;
  background: #fff;
}
#nav .menu-icon {
  margin-left: 1.25rem !important;  /* pxTorem(20) */
  margin-right: 0 !important;
  font-size: 1rem !important;       /* pxTorem(16) */
  position: unset !important;
}
#nav .search-icon { padding: 0.5rem 1rem !important; }
/* PC 搜索图标：Vue 里由 MDB nav-link 默认 padding 0.5rem 撑出 34px 宽（search-icon
   类因 linkClass 字符串拼接无空格实际未生效），H5 的裸 div 需补齐；FA 的 fa-lg
   line-height 仅 0.05em（图标盒 1px 高），Vue 靠 body 1.6 行盒撑到 22px，这里同步 */
#nav #searchToggle { padding: 0.5rem; line-height: 1.6; }
#nav .menu-icon:hover .nav-link.active { color: #fff !important; }
#nav .collapse-menu a { align-items: center; }

/* ============ SubMenu.vue（二级/三级下拉，非 scoped → #nav 前缀） ============ */
#nav .level-2 {
  display: none;
  position: absolute;
  top: 100%;
}
#nav .level-2 .sub-navbar {
  background: #222;
  box-shadow: 0px 0.5rem 0.5rem 0px rgba(0, 0, 0, 0.25);
  width: max-content;
  position: relative;
  padding-right: 5rem !important;
  z-index: 9;
  /* 方向不写死：mdb.min.css 的 .navbar-expand-md .navbar-nav 在 md+ 就是横向（与 Vue 一致） */
}
#nav .level-2 li {
  padding: 0.8125rem 0;             /* pxTorem(13) */
  margin: 0 1rem;                   /* pxTorem(16) */
  opacity: 0.8;
  display: flex;
  align-items: center;
}
#nav .submenu-title {
  padding-right: 0 !important;
  padding-left: 0 !important;
  font-size: 0.875rem;              /* pxTorem(14) */
  font-weight: normal;
  letter-spacing: calc(0.14 * var(--letterSpacing));
  font-family: var(--default-font);
  display: flex !important;
  align-items: center !important;
}
#nav .submenu-title::before {
  content: '';
  display: inline-block;
  width: 0.625rem;                  /* pxTorem(10) */
  height: 0.125rem;                 /* pxTorem(2) */
  margin-right: 0.5rem;             /* pxTorem(8) */
  background: #0082e6;
  opacity: 0;
}
#nav .submenu-title:hover,
#nav .submenu-title:focus,
#nav .submenu-title:active { color: #fff !important; }
#nav .level-2 li:hover,
#nav .level-2 li:active,
#nav .submenu-title:hover,
#nav .submenu-title:hover::before,
#nav .submenu-title:active,
#nav .submenu-title:active::before,
#nav .submenu-title:focus { opacity: 1; }

/* ============ H5 侧修补（Vue 依靠 MDB 组件类实现，H5 结构等价即可） ============ */
/* MDB 对 .navbar .nav-link 有默认色/内边距，这里与 .menu-title 的 0 对齐，
   确保 hover 下划线宽度与文字一致 */
#nav .navbar-nav .nav-link { color: inherit; }
#nav .navbar-nav > li > a.nav-link { display: inline-flex; }
#nav .menu-title { white-space: nowrap; }

/* CollapseSubMenu（移动端折叠菜单）：对齐 Vue MDBCollapse + CollapseSubMenu
   - #coallapse 默认收起；#nav.menu-open 时整块显示（class 驱动，不用 inline display）
   - navbar 是 flex 容器，MDB 的 .navbar-collapse 自带 flex-basis:100%，这里等价补齐，
     否则遮罩宽度被内容挤窄（右侧页面内容会透出）
   - 内层 .collapse-inner 100vh 全屏黑遮罩（Vue 模板 <div style="height:100vh">） */
#nav #coallapse { display: none; flex-basis: 100%; width: 100%; }
#nav.menu-open #coallapse { display: block; }
#nav #coallapse .collapse-inner { height: 100vh; overflow-y: auto; }
#nav.menu-open .navbar { background-color: #000 !important; }

/* 展开后：汉堡两线隐藏、× 显示、搜索/语言图标隐藏（同 Vue v-if="!toggler"）；
   × 对应 Vue 的 MDBNavbarToggler times（无边框），去掉按钮 outline 白框 */
#nav.menu-open .menu-open-icon { display: none; }
#nav.menu-open .menu-close-icon { display: flex !important; }
#nav.menu-open .mobile-hide-on-open { display: none !important; }
#nav.menu-open #menuToggle { border-color: transparent !important; }

/* 二级菜单：默认收起，点一级行加 .open 后展开（MDBCollapse 手风琴） */
#nav .sub-collapse { display: none; }
#nav .collapse-item.open > .sub-collapse { display: block; }

#nav .collapse-menu .m-3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#nav .collapse-menu .border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* TheNavigation 响应式（scoped 媒体查询） */
@media screen and (max-width: 767px) {
  #nav .navbar {
    width: 100%;
    padding: 1rem 6% 0 5%;
    z-index: 99;
  }
  #nav .brand { height: 3rem; width: auto; }

  #nav .navbar { z-index: 99; }

  /* 图标组 UL 是 .input 的包含块：Vue 移动端 UL 带 inline filter:invert(0)
     （filter 隐式创建 abs 定位包含块），left:2rem / width:calc(100%-2rem) 均按 UL 计
     → 面板从搜索图标左侧起、延伸到导航右缘（图一效果）；
     H5 无 filter，用 position:relative 等价实现，否则包含块退到 navbar 变全宽（图二） */
  #nav .mobile-nav { position: relative; }

  #nav .level-1 > .input { left: 2rem; width: calc(100% - 2rem); }
  #nav .input-wrapper { padding: 0 1rem; }

  #nav .level-1 { padding: 0 !important; }

  #nav .language-container { padding: 0 1.56rem; font-size: 1.2rem; }
  #nav .language { width: 2.5rem; height: 2.5rem; border: 0.2rem solid #fff; }

  /* 非 scoped 媒体块 */
  #nav .nav-link { padding: 0.5rem !important; }
}

/* ====================================================================
   TheFooter.vue + TheLogo.vue（scoped → footer 前缀）
   ==================================================================== */
footer .footer-1 {
  background: #fff;
  color: #000;
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
footer .footer-1-text {
  font-family: var(--default-font);
  font-size: 1.875rem;              /* pxTorem(30) */
  font-style: normal;
  font-weight: 500;
  letter-spacing: calc(var(--letterSpacing) * 0.25);
  height: 10%;
  white-space: pre-wrap;
}
footer .pic {
  display: inline-block;
  object-fit: contain;
  width: 100%;
  z-index: -1;
}
footer .logo2 {
  width: 40%;
  position: relative;
  display: inline-block;
}
footer .logo2::after {
  content: '';
  position: absolute;
  background: url('/assets/logo2-dark.png');
  top: -5rem;
  right: -3rem;
  width: 8rem;
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
}

footer .footer-2 {
  padding: 2rem 3.75rem;            /* pxTorem(32/60) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* TheLogo.vue：.logo + img（280px 定宽，8:1 cover） */
footer .logo.footer-logo {
  display: inline-block;
  width: 280px;
  margin: 1.5rem auto;              /* pxTorem(24) */
}
footer .logo.footer-logo > img {
  aspect-ratio: 8/1;
  vertical-align: middle;
  object-fit: cover;
  width: 100%;
}

footer .footer-2-tab {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  padding: 2rem 0;                  /* pxTorem(32) */
  margin: 1.5rem 0 3.375rem;        /* pxTorem(24/54) */
  color: #fff;
  font-family: var(--default-font);
  font-size: 0.875rem;              /* pxTorem(14) */
  letter-spacing: calc(var(--letterSpacing) * 0.15);
}
footer .footer-2-tab > span { cursor: pointer; opacity: 1; }
footer .footer-2-tab > span > a { color: inherit; }
footer .footer-2-tab > span:hover { opacity: 1; }

footer .footer-email {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  padding: 10px 0;
  cursor: pointer;
}
footer .footer-email > span {
  display: inline-block;
  flex: 1;
  padding-right: 0.375rem;          /* pxTorem(6) */
  color: rgba(0, 0, 0, 0.5);
}
/* TheFooter：.input-text（源码末尾 font-size 1.2rem 生效） */
footer .input-text {
  width: 100%;
  -webkit-appearance: none;
  font-size: inherit;
  outline: none;
  border: none;
  background: none;
  box-sizing: border-box;
  color: #000;
  letter-spacing: calc(var(--letterSpacing) * 0.15);
  min-height: 2rem;                 /* pxTorem(32) */
  padding-right: 1rem;
  font-size: 1.2rem;
}

footer .qr-modal {
  width: 9rem;
  height: 9rem;
  background: #fff;
  position: absolute;
  bottom: 150%;
  left: calc(50% - 4.5rem);
  padding: 0.5rem;
}
footer .qr-modal .close {
  color: #000;
  font-weight: bold;
  font-size: 1rem;
  position: absolute;
  top: 0;
  right: 0.1rem;
}
footer .qr-modal .close:hover { color: #0082e6; cursor: pointer; }
footer .qr-modal img { width: 100%; height: 100%; }

/* H5 侧修补：订阅表单是 input+按钮包在 form 里（Vue 中 input 直接在 .footer-email
   下），用 flex 防止箭头按钮被挤到下一行 */
footer .footer-email > form {
  display: flex;
  align-items: center;
  width: 100%;
}
footer .footer-email .ani-txt-btn {
  flex-shrink: 0;
  margin-left: 0.5rem;
}

@media screen and (max-width: 768px) {
  footer .logo2 { display: none; }
}

/* ============ 深色导航模式（Download 白底页，对齐 TheNavigation.vue mode='dark'） ============
   Vue: 菜单 text-black；logo 切 logo-dark.png；语言框(.language)/移动端图标组(.mobile-nav) filter:invert(1)；
   滚动后 nav-background-dark（白底黑影，上方已有）；折叠菜单展开时恢复白 logo 并取消反转。
   注意：语言框不能再改 border-color（旧 hack 已删），invert(1) 会把白框白字整体反转成黑框黑字 */
#nav .brand-dark { display: none; }
body[data-nav-mode="dark"] #nav .brand-light { display: none; }
body[data-nav-mode="dark"] #nav .brand-dark { display: inline-block; }
body[data-nav-mode="dark"] #nav .pc-nav .menu-title { color: #000 !important; }  /* 覆盖 MDB .text-white */
/* PC：语言框 + 搜索图标各自反转（.pc-nav 整体无 filter，所以分别给需要的元素加）；
   移动端：整个 .mobile-nav 统一反转一次，语言框/搜索图标不能再单独反转——双重 invert
   会抵消回白色，白底上白框白字不可见 */
body[data-nav-mode="dark"] #nav .pc-nav .language { filter: invert(1); }
body[data-nav-mode="dark"] #nav .pc-nav .search-icon-img { filter: invert(1); }
body[data-nav-mode="dark"] #nav .mobile-nav { filter: invert(1); }
/* 菜单展开（黑遮罩）：恢复白 logo、取消反转（同 Vue toggler 态：logo-light + ×白色） */
body[data-nav-mode="dark"] #nav.menu-open .brand-light { display: inline-block; }
body[data-nav-mode="dark"] #nav.menu-open .brand-dark { display: none; }
body[data-nav-mode="dark"] #nav.menu-open .mobile-nav { filter: none; }
body[data-nav-mode="dark"] #nav.menu-open .pc-nav .language { filter: none; }
body[data-nav-mode="dark"] #nav.menu-open .pc-nav .search-icon-img { filter: none; }

/* 菜单展开态：关闭 × 后面不要灰色 hover 底（H5 的汉堡/× 是同一个 li 切换，
   Vue 是两套组件；触摸后 li 的 :hover/:focus 会滞留，灰块 #222 会留在 × 后面） */
#nav.menu-open .menu-icon:hover,
#nav.menu-open .menu-icon:active,
#nav.menu-open .menu-icon:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* ====================================================================
   header.html 内联 style 抽离（SEO：避免内联 style，统一由 CSS 管理）
   ==================================================================== */
#nav .pc-nav { position: relative; flex-direction: row; align-items: center; }
#nav .search-toggle { cursor: pointer; }
#nav .search-input-box { display: none; }
#nav .mobile-nav { flex: 1; justify-content: flex-end; }
#nav .search-toggle-m { cursor: pointer; display: flex; align-items: center; }
/* 搜索图标尺寸：与右侧 .language 语言框（1.6rem 含 border）视觉对齐，设 1.4rem */
#nav .search-icon-img { width: 1.4rem; }
#nav .menu-toggle-btn { padding: 0.5rem 0; border: 1px solid #fff; border-radius: 0; background: none; }
#nav .menu-open-icon { margin: 0.5rem; width: 1.5rem; height: 0.5rem; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
#nav .menu-close-icon { display: none; margin: 0; width: 3rem; height: 3rem; line-height: 1; align-items: center; justify-content: center; }
#nav .menu-close-icon .menu-close-svg { width: 2.4rem; height: 2.4rem; display: block; }
#nav .collapse-trigger { width: 100%; color: inherit; display: flex; }
#nav .collapse-arrow { height: 4px; }
#nav .sub-collapse-list { width: 100%; }
#nav .sub-collapse-link { width: 100%; color: inherit; }

/* ====================================================================
   footer.html 内联 style 抽离
   ==================================================================== */
footer .footer-1-left { display: inline-block; }
footer .newsletter-form { display: flex; align-items: center; width: 100%; }
footer .newsletter-submit { display: inline-block; cursor: pointer; }
footer .footer-msg { display: none; margin-top: .5rem; color: #0082e6; font-size: 1rem; }
footer .footer-logo-img { width: 280px; }
footer .qr-toggle { position: relative; display: inline-block; }
footer .qr-modal { display: none; }
footer .copyright-link { color: #fff; }

/* ============ 右侧浮动操作栏（仅 PC）：联系我们 / 返回顶部 ============
   样式参数对齐新日官网 side.vue：fixed 右缘、宽 64px、半透明黑底、
   行高 68px + 1px 白分隔线、hover 左侧弹出 165px 同色浮层白字 */
.side-float {
  position: fixed;
  right: 0;
  top: calc(39% - 68px);
  z-index: 100;
  width: 64px;
  background: rgba(0, 0, 0, 0.2);
}
.side-float-item {
  position: relative;
  display: block;
  width: 64px;
  height: 68px;
  cursor: pointer;
  text-decoration: none;
}
.side-float-item:not(:last-child)::after {
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  content: "";
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
}
.side-float-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 60px;
}
.side-float-icon svg {
  display: inline-block;
  width: 30px;
  height: 30px;
}
.side-float-pop {
  display: none;
  position: absolute;
  top: 0;
  right: 64px;
  width: 165px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
}
.side-float-item:hover .side-float-pop { display: block; }
/* 移动端不显示 */
@media (max-width: 768px) {
  .side-float { display: none; }
}