/* ==========================================================================
   MultCloud 头部导航 + 页脚（2026 改版）独立样式 —— mc-header-footer.css
   由 mcnav.css + mcfooter.css 合并而来（2026-09-23）
   设计稿：Figma「MC-导航更新-260805」
     - 导航：默认态 417:18477 / 展开态 417:18923
     - 页脚：Footer 实例 I417:18727;1116:7857
   用法：页面在 main.css、index.css 之后引入本文件；
        仅引入本文件的页面使用新导航 / 新页脚，不影响未改造页面
   断点：1328 / 1150 / 991 / 767（设计稿仅提供桌面端，移动端按设计语言自拟）
   配套 JS：mcnav.js（抽屉 / 下拉 / 二级手风琴）、mcfooter.js（手风琴 / 语言下拉）
   ========================================================================== */

/* ==========================================================================
   一、头部导航（原 mcnav.css）
   ========================================================================== */

/* 新导航高度 68（旧导航为 64） */
body {
  padding-top: 68px;
}

/* --------------------------------------------------------------------------
   1. 导航条
   -------------------------------------------------------------------------- */
.mcnav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 68px;
  background: #fff;
  border-bottom: 1px solid rgba(10, 31, 79, 0.08);
  box-shadow: none;
  z-index: 9999;
}

.mcnav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1328px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Logo
   -------------------------------------------------------------------------- */
.mcnav__logo {
  display: flex;
  align-items: center;
  gap: 7.7px;
  text-decoration: none;
}

.mcnav__logo-mark {
  display: block;
  width: 53px;
  height: 34px;
}

.mcnav__logo-txt {
  display: flex;
  flex-direction: column;
  gap: 4.6px;
  width: 150px;
}

.mcnav__logo-word {
  display: block;
  width: 87px;
  height: 14px;
}

.mcnav__logo-slogan {
  font-family: Inter, Arial, sans-serif;
  font-size: 7.3px;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 主菜单
   -------------------------------------------------------------------------- */
.mcnav__main {
  display: flex;
  align-items: center;
  gap: 52px;
  height: 38px;
  padding-left: 42px;
  &:lang(es) {
    gap: 36px;
  }
}

.mcnav__link {
  display: flex;
  align-items: center;
  height: 38px;
  font-size: 16px;
  line-height: 1;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.mcnav__link:hover {
  color: #0055ff;
}

/* --------------------------------------------------------------------------
   4. Online Tools 下拉
   -------------------------------------------------------------------------- */
.mcnav__drop {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
}

/* hover 桥接区：鼠标从按钮移向面板时保持展开（与面板之间 15px 空隙） */
.mcnav__drop::after {
  content: "";
  position: absolute;
  left: -40px;
  right: -40px;
  top: 100%;
  height: 16px;
}

.mcnav__drop-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: #000;
  cursor: pointer;
}

.mcnav__drop:hover .mcnav__drop-btn,
.mcnav__drop--open .mcnav__drop-btn {
  color: #0055ff;
}

.mcnav__drop-ic {
  width: 12px;
  height: 12px;
  transition: transform 0.18s;
}

.mcnav__drop:hover .mcnav__drop-ic,
.mcnav__drop--open .mcnav__drop-ic {
  transform: rotate(180deg);
}

.mcnav__menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 15px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: calc(100vw - 32px);
  padding: 24px 40px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 20px rgba(0, 85, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition:
    opacity 0.18s,
    transform 0.18s,
    visibility 0.18s;
}

.mcnav__drop:hover .mcnav__menu,
.mcnav__drop:focus-within .mcnav__menu,
.mcnav__drop--open .mcnav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mcnav__menu-cols {
  display: flex;
  gap: 60px;
}

.mcnav__menu-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

/* PC 端（≥992px）：面板与三列的最小宽度（设计稿 816 = 191 + 60 + 215 + 60 + 210 + 80 内边距） */
@media (min-width: 992px) {
  .mcnav__menu {
    min-width: 816px;
  }

  .mcnav__menu-col:nth-child(1) {
    min-width: 191px;
  }

  .mcnav__menu-col:nth-child(2) {
    min-width: 215px;
  }

  .mcnav__menu-col:nth-child(3) {
    min-width: 210px;
  }
}

.mcnav__menu-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

.mcnav__menu-head img {
  width: 24px;
  height: 24px;
}

.mcnav__menu-it {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.mcnav__menu-it:hover {
  background: #eef2ff;
  color: #0055ff;
  text-decoration: underline;
}

.mcnav__menu-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mcnav__menu-dash {
  height: 0;
  border-top: 1px dashed #e5e7eb;
}

.mcnav__menu-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: #000;
}

/* 链接单独占一行（替代 <br>：无论 note 文案多长都强制换行） */
.mcnav__menu-more {
  display: block;
  color: #0055ff;
  text-decoration: none;
}

.mcnav__menu-more:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. 右侧操作区
   -------------------------------------------------------------------------- */
.mcnav__sec {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mcnav__cta,
.mymc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid #0055ff;
  border-radius: 7px;
  font-size: 14px;
  color: #0055ff;
  text-decoration: none;
  white-space: nowrap;
}
.mymc:hover {
  background: #eef2ff;
}
.mcnav__cta:hover {
  background: #eef2ff;
}

.mcnav__search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #f5f7fb;
  border-radius: 10px;
  text-decoration: none;
}

.mcnav__search:hover {
  background: #eef2ff;
}

.mcnav__search img {
  width: 20px;
  height: 20px;
}

.mcnav__search-txt {
  display: none;
}

/* --------------------------------------------------------------------------
   6. 汉堡按钮（≤991px；设计稿未提供移动端，按导航设计语言自拟）
   -------------------------------------------------------------------------- */
.mcnav__tg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: #f5f7fb;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mcnav__tg span {
  display: block;
  width: 18px;
  height: 2px;
  background: #000;
  border-radius: 1px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* 面板展开时汉堡变 X（.mcnav--open 仅移动端会触发） */
.mcnav--open .mcnav__tg span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mcnav--open .mcnav__tg span:nth-child(2) {
  opacity: 0;
}

.mcnav--open .mcnav__tg span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1328px) {
  .mcnav__main {
    gap: 32px;
    padding-left: 24px;
  }
}

@media (max-width: 1150px) {
  .mcnav__main {
    gap: 24px;
    padding-left: 16px;
  }

  .mcnav__sec {
    gap: 12px;
  }
}

@media (max-width: 991px) {
  .mcnav__tg {
    display: flex;
  }

  /* 面板展开时锁定背景滚动（:has 为渐进增强，不支持也不影响使用） */
  body:has(.mcnav--open) {
    overflow: hidden;
  }

  /* ---- 主面板：导航条下方全屏抽屉 ---- */
  .mcnav__main {
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    bottom: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }

  .mcnav--open .mcnav__main {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* 内容超高时滚动而不是挤压 */
  .mcnav__main > * {
    flex: none;
  }

  /* ---- 一级菜单项 ---- */
  .mcnav__link {
    display: flex;
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  /* ---- Online Tools 手风琴 ---- */
  .mcnav__drop {
    display: block;
    height: auto;
  }

  .mcnav__drop::after {
    display: none;
  }

  .mcnav__drop-btn {
    justify-content: space-between;
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  /* 覆盖桌面端 hover 规则（触摸端 hover 会粘连）：箭头旋转统一交给 --open */
  .mcnav__drop:hover .mcnav__drop-ic {
    transform: rotate(0);
  }

  .mcnav__drop-ic {
    transform: rotate(0);
    transition: transform 0.2s ease;
  }

  /* 加权选择器压过桌面端 hover 规则，保证展开时箭头确实旋转 */
  .mcnav__drop.mcnav__drop--open .mcnav__drop-ic {
    transform: rotate(180deg);
  }

  .mcnav__menu {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition:
      max-height 0.3s ease,
      visibility 0.3s,
      padding 0.3s ease;
  }

  /* 触摸端 hover 会粘连：只中和桌面的位移，展开与否完全交给 --open */
  .mcnav__drop:hover .mcnav__menu,
  .mcnav__drop:focus-within .mcnav__menu {
    transform: none;
  }

  /* 加权选择器压过桌面 hover/focus/(--open) 规则，确保移动端能下拉展开且不位移 */
  .mcnav__drop.mcnav__drop--open .mcnav__menu {
    max-height: 1200px;
    visibility: visible;
    padding: 4px 0 12px;
    transform: none;
  }

  .mcnav__menu-cols {
    flex-direction: column;
    gap: 0;
  }

  .mcnav__menu-col:nth-child(1),
  .mcnav__menu-col:nth-child(2),
  .mcnav__menu-col:nth-child(3) {
    width: auto;
  }

  /* ---- 二级手风琴：Cloud Transfer / Cloud Sync / Cloud Backup ---- */
  .mcnav__menu-col {
    gap: 0;
    max-height: 44px; /* 收起：仅显示分组标题行 */
    overflow: hidden;
    border-bottom: 1px solid #f0f2f5;
    transition: max-height 0.3s ease;
  }

  /* 防止 flex 子项在收起状态被压缩（标题挤扁、链接半露） */
  .mcnav__menu-col > * {
    flex-shrink: 0;
  }

  .mcnav__menu-col.mcnav__menu-col--open {
    max-height: 400px;
  }

  .mcnav__menu-head {
    height: 44px;
    padding: 0 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mcnav__menu-head::after {
    content: "";
    flex-shrink: 0;
    margin-left: auto;
    width: 12px;
    height: 12px;
    background: url(/resource/images/mcnav/mcnav-ic-arrow.svg) center / 12px
      12px no-repeat;
    transition: transform 0.3s ease;
  }

  .mcnav__menu-col.mcnav__menu-col--open .mcnav__menu-head::after {
    transform: rotate(180deg);
  }

  .mcnav__menu-it {
    height: auto;
    min-height: 44px;
    padding: 10px 12px 10px 36px; /* 左缩进与分组标题文字对齐 */
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
  }

  .mcnav__menu-it:active {
    background: #eef2ff;
    color: #0055ff;
  }

  .mcnav__menu-foot {
    gap: 12px;
    padding-top: 4px;
  }

  /* ---- 分隔线 + 登录 / 注册 / 搜索 ---- */
  .mcnav__sec {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f5;
  }

  .mcnav__cta,
  .mymc {
    height: 48px;
    margin-top: 8px;
    font-size: 16px;
  }

  .mcnav__search {
    justify-content: flex-start;
    width: 100%;
    height: 52px;
    gap: 12px;
    padding: 0 4px;
    background: none;
    border-radius: 8px;
    font-size: 16px;
    color: #000;
  }

  .mcnav__search:active {
    background: #eef2ff;
  }

  .mcnav__search-txt {
    display: inline;
  }
}

@media (max-width: 767px) {
  .mcnav__container {
    padding: 0 16px;
  }

  .mcnav__main {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   二、页脚（原 mcfooter.css）
   仅作用于 .mcfooter，不影响未改造页面（main.css 里的 .footer 样式保持原样）
   ========================================================================== */

.mcfooter {
  background: #000;
  color: #fff;
}

.mcfooter__container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 1328px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   1. 主区：三列链接 + 品牌区
   -------------------------------------------------------------------------- */
.mcfooter__main {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 120px 0;
}

.mcfooter__nav {
  display: flex;
  gap: 200px;
}

.mcfooter__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mcfooter__title {
  margin: 0 0 12px;
  /* 设计节点：标题块下间距 28（含列 gap 16） */
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
}

.mcfooter__link {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* 统一 hover：列链接 / 邮箱 / 法务链接（白色 → 半透明白） */
.mcfooter__link:hover,
.mcfooter__contact:hover,
.mcfooter__legal a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   2. 品牌区：Logo / 邮箱 / 地址 / 社交媒体
   -------------------------------------------------------------------------- */
.mcfooter__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 32px;
  width: 342px;
}

.mcfooter__logo img {
  display: block;
}

.mcfooter__contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
}

.mcfooter__addr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}

/* 邮箱 / 地址图标（由 CSS 绘制，HTML 不放 img） */
.mcfooter__contact::before,
.mcfooter__addr::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.mcfooter__contact::before {
  background-image: url(/resource/images/mcfooter/mcfooter-ic-email.svg);
}

.mcfooter__addr::before {
  background-image: url(/resource/images/mcfooter/mcfooter-ic-address.svg);
}

.mcfooter__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mcfooter__soc {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.mcfooter__soc:hover {
  opacity: 0.7;
}

.mcfooter__soc img {
  display: block;
}

.mcfooter__follow {
  display: inline-block;
  height: 32px;
  padding: 0 11px;
  border-radius: 4px;
  background: #3f89d7;
  color: #fff;
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. 底栏：版权 / 法务链接 / 语言切换
   -------------------------------------------------------------------------- */
.mcfooter__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 0;
  border-top: 1px solid #25324e;
}

.mcfooter__copyright {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
}

.mcfooter__legal {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
}

.mcfooter__legal a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mcfooter__sep {
  padding: 0 11px;
  color: #fff;
}

/* 语言切换：点击(JS)/悬停(鼠标)向上弹出 */
.mcfooter__lang {
  position: relative;
}

.mcfooter__lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #323232;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.mcfooter__lang-btn img {
  display: block;
}

.mcfooter__lang-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 10;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  width: 140px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.mcfooter__lang.is-open .mcfooter__lang-list {
  display: flex;
}

.mcfooter__lang-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  color: #000;
  text-decoration: none;
}

.mcfooter__lang-list a:hover {
  background: #eef2ff;
}

.mcfooter__lang-list a.is-active {
  background: #eef2ff;
  color: #0055ff;
  font-weight: 700;
}

.mcfooter__lang-check {
  display: inline-flex;
  width: 9px;
  height: 7px;
  flex-shrink: 0;
}

.mcfooter__lang-check svg {
  display: block;
  width: 9px;
  height: 7px;
}

/* --------------------------------------------------------------------------
   4. 响应式（仅媒体查询，不改 HTML 结构）
   -------------------------------------------------------------------------- */
@media (max-width: 1328px) {
  .mcfooter__main {
    gap: 40px;
  }

  .mcfooter__nav {
    gap: 120px;
  }
}

@media (max-width: 1150px) {
  .mcfooter__nav {
    gap: 64px;
  }

  .mcfooter__brand {
    width: 300px;
  }
}

@media (max-width: 991px) {
  .mcfooter__main {
    flex-wrap: wrap;
    gap: 48px;
    padding: 80px 0;
  }

  .mcfooter__nav {
    width: 100%;
    justify-content: space-between;
    gap: 40px;
  }

  .mcfooter__brand {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .mcfooter__container {
    padding: 0 16px;
  }

  .mcfooter__main {
    gap: 40px;
    padding: 56px 0 48px;
  }

  /* 链接列改为手风琴：标题行点击展开/收起（is-open 状态由 mcfooter.js 控制） */
  .mcfooter__nav {
    flex-direction: column;
    width: 100%;
    gap: 0;
    border-top: 1px solid #25324e;
  }

  .mcfooter__col {
    width: 100%;
    gap: 0;
    max-height: 60px; /* 收起时仅显示标题行 */
    overflow: hidden;
    border-bottom: 1px solid #25324e;
    transition: max-height 0.3s ease;
  }

  /* 防止 flex 子项在收起状态被压缩（否则折叠时标题会被挤扁、链接半露） */
  .mcfooter__col > * {
    flex-shrink: 0;
  }

  .mcfooter__col.is-open {
    max-height: 640px;
  }

  .mcfooter__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mcfooter__title::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background: url(/resource/images/mcfooter/mcfooter-ic-arrow.svg) center /
      12px 12px no-repeat;
    transition: transform 0.3s ease;
  }

  .mcfooter__col.is-open .mcfooter__title::after {
    transform: rotate(180deg);
  }

  .mcfooter__link {
    padding: 8px 0;
  }

  .mcfooter__col > .mcfooter__link:last-child {
    margin-bottom: 20px;
  }

  /* 品牌区移动端居中展示（logo/邮箱/地址/社媒） */
  .mcfooter__brand {
    align-items: center;
    text-align: center;
  }

  /* 地址行改内联流：图标与文字间距固定 12px（与桌面 gap 一致），
       图标随首行文字一起居中，换行后逐行居中 */
  .mcfooter__addr {
    display: block;
    text-align: center;
  }

  .mcfooter__addr::before {
    display: inline-block;
    margin-right: 12px;
    vertical-align: -4px;
  }

  .mcfooter__bottom {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
    padding: 32px 0;
  }

  .mcfooter__copyright {
    width: 100%;
    text-align: center;
  }

  /* 底栏居中后，语言下拉仍以按钮左缘为锚点向右展开，避免溢出视口 */
  .mcfooter__lang-list {
    right: auto;
    left: 0;
  }
}

/* 仅鼠标设备用悬停打开（避免触屏 hover 粘连） */
@media (hover: hover) {
  .mcfooter__lang:hover .mcfooter__lang-list {
    display: flex;
  }

  /* hover 桥接区：鼠标从按钮移向列表时保持展开（两者之间 10px 空隙） */
  .mcfooter__lang::after {
    content: "";
    position: absolute;
    left: -40px;
    right: 0;
    bottom: 100%;
    height: 12px;
  }
}