/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* header 容器 */
.header-main {
  position: relative;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

/* 图标容器：左侧 2% */
.header-ico {
  margin-left: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo 链接 */
.hearder-a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1f2937;
  font-weight: 600;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.hearder-a:hover {
  color: #2b8163;
}

.hearder-a-span {
  position: relative;
  font-size: 1.25rem;
  padding-bottom: 2px;
}

.hearder-a-ico {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Logo 文字下划线动画 */
.hearder-a-span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2b8163;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.hearder-a:hover .hearder-a-span::after {
  transform: scaleX(1);
}

.hearder-a.active .hearder-a-span::after {
  transform: scaleX(1);
}

/* 桌面端菜单容器（绝对定位居中） */
.header-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* 导航链接容器 */
.header-menu-item-nav {
  display: flex;
  align-items: center;
  gap: 1px;               /* JS 动态调整 */
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

/* 导航链接 */
.header-menu-item-nav a {
  position: relative;
  padding: 0.8rem 1.2rem;
  color: #2563eb;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  padding-bottom: 0.5rem;
}

.header-menu-item-nav a.active,
.header-menu-item-nav a:hover {
  color: #2b8163;
}

/* 导航链接下划线动画 */
.header-menu-item-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2b8163;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.header-menu-item-nav a:hover::after,
.header-menu-item-nav a.active::after {
  transform: scaleX(1);
}

/* 搜索图标 */
.icon-link {
  text-decoration: none;
  color: #2b8163;
}

.icon-link::after {
  display: none;
}

.header-menu-item-search {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

/* ========== 移动端汉堡按钮 ========== */
.header-zhezhao-item {
  width: 48px;          /* 移动端标准最小点击尺寸48x48 */
  height: 48px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: 2%;
  z-index: 1003;        /* 强制提升到最顶层 */
  outline: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

/* 点击反馈 */
.header-zhezhao-item:active {
  background-color: rgba(0,0,0,0.05);
}

.header-zhezhao-item span {
  display: block;
  height: 2.5px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-origin: center;
  position: absolute; /* 绝对定位，精确控制变形 */
}

/* 精确位置：长短长 */
.header-zhezhao-item span:nth-child(1) { 
  width: 22px; 
  transform: translateY(-8px);
}
.header-zhezhao-item span:nth-child(2) { 
  width: 14px; 
  transform: translateY(0);
}
.header-zhezhao-item span:nth-child(3) { 
  width: 16px; 
  transform: translateY(8px);
}

/* 悬停变短长短 */
.header-zhezhao-item:hover span:nth-child(1) { width: 16px; }
.header-zhezhao-item:hover span:nth-child(3) { width: 14px; }
.header-zhezhao-item:hover span:nth-child(2) { width: 22px; }

/* 完美X变形（绝对居中，无错位） */
.header-zhezhao-item.active span:nth-child(1) {
  width: 28px;
  transform: rotate(45deg);
}
.header-zhezhao-item.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header-zhezhao-item.active span:nth-child(3) {
  width: 28px;
  transform: rotate(-45deg);
}

/* ========== 移动端悬空卡片菜单（极致透明 液态水晶 + Miuix 主题） ========== */
.main-menu {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 380px;
  /* 液态水晶核心：高透明背景 + 强模糊 + 内阴影 */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(255, 255, 255, 0.12) inset;
  z-index: 9999;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: 
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.35s ease;
  /*padding: 0 16px;*/
  pointer-events: none;
}

/* 菜单展开状态 */
.main-menu.show {
  max-height: 5800px;          /* 足够容纳所有菜单项，永远不截断 */
  padding: 16px 16px 28px;    /* 保留底部额外间距，避免被圆角切 */
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  pointer-events: auto;
  overflow: hidden;          /* 彻底消除裁剪，确保最后一项可点 */
}

.main-menu nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 单个菜单项：液态水晶风格（增强点击区域） */
.main-menu nav a {
  display: flex;                  /* 改用 flex，让内部元素撑开块 */
  align-items: center;           /* 垂直居中文字 */
  width: 100%;                   /* 确保横向铺满 */
  min-height: 50px;              /* 保证足够大的触控热区 */
  padding: 0 20px;               /* 保留水平内边距，去掉垂直 padding，高度由 min-height 控制 */
  color: #1f2937;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: 16px;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  cursor: pointer;               /* 明确手型光标 */
}

/* 菜单项悬停态 */
.main-menu nav a:hover {
  background: rgba(43, 129, 99, 0.22);
  border-color: rgba(43, 129, 99, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: #2b8163;
}

/* 菜单项激活态 */
.main-menu nav a.active {
  background: rgba(43, 129, 99, 0.26);
  color: #2b8163;
  font-weight: 600;
  border-color: rgba(43, 129, 99, 0.45);
}

/* ========== 响应式断点（和JS完全对齐） ========== */
@media (max-width: 959px) {
  .header-menu-item-search {
    display: none;
  }
  .header-zhezhao-item {
    display: flex;
  }
}

/* 小屏手机适配 */
@media (max-width: 480px) {
  .main-menu {
    width: calc(100% - 24px);
  }
}

/* ========== main 基础设置 ========== */
.main {
    position: relative;
    min-height: calc(100vh - 64px);  /* 至少占满 header 下方全部高度 */
    overflow: hidden;               /* 防止背景超出（可选） */
}

/* ========== 壁纸背景层 ========== */
.main-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;      /* 保持比例，完整显示，不裁剪 */
    z-index: 0;                   /* 最底层 */
}

/* 桌面端横向壁纸 */
@media (min-width: 960px) {
    .main-bg {
        background-image: url('../scp/cn.png');
    }
}

/* 手机端纵向壁纸 */
@media (max-width: 959px) {
    .main-bg {
        background-image: url('../scp/zh.jpg');
    }
}

/* 确保 main 内其他内容位于壁纸之上 */
.main > *:not(.main-bg) {
    position: relative;
    z-index: 1;
}