/* 全局重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
li {
  list-style: none;
}

/* 导航栏核心样式 - 平滑动画 */
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  background-color: transparent;
  height: 74px;
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  color: #fff;
  will-change: transform, opacity;
  opacity: 1;
}

.header.scrolled .nav-item-main {
  color: #000 !important;
}

.header.scrolled .nav-item-main:hover {
  color: #8b572a !important;
}

/* 导航容器 */
.nav-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  height: 74px;
  padding: 0 8%;
  max-width: 100%;
  margin-right: 20%;
}

/* 仅保留桌面端hover效果，移动端会被媒体查询覆盖 */
@media (min-width: 1024px) {
  .header:hover {
    background: #fff !important;
  }

  .header:hover .logo-default {
    opacity: 0;
    z-index: 1;
  }

  .header:hover .logo-scrolled {
    opacity: 1;
    z-index: 2;
  }

  .header:hover .nav-item-main {
    color: #333 !important;
  }

  .header:hover .nav-item-main:hover {
    color: #8b572a !important;
  }

  .header:hover .menu-line {
    background-color: #fff !important;
  }
}

/* 移动端适配：导航容器 - 移除hover效果，但保留滚动背景 */
@media screen and (max-width: 1023px) {
  .nav-container {
    padding: 0 4%;
    justify-content: space-between;
    margin-right: 2%;
  }

  /* 仅禁用hover时的背景变化，不影响滚动状态 */
  .header:hover {
    background: transparent !important;
  }

  /* 恢复移动端滚动时的白色背景 */
  .header.scrolled {
    background-color: #fff !important;
    color: #000 !important;
  }

  /* 移动端滚动时，Logo和菜单线条同步变色 */
  .header.scrolled .logo-default {
    opacity: 0 !important;
  }

  .header.scrolled .logo-scrolled {
    opacity: 1 !important;
  }

  .header.scrolled .menu-line {
    background-color: #000 !important;
  }

  .header.scrolled .nav-item-main {
    color: #000 !important;
  }
}

@media screen and (max-width: 480px) {
  .nav-container {
    padding: 0 2%;
    height: 64px;
    margin-right: 2%;
  }

  /* 仅禁用hover时的背景变化，不影响滚动状态 */
  .header:hover {
    background: transparent !important;
  }

  /* 恢复小屏移动端滚动时的白色背景 */
  .header.scrolled {
    background-color: #fff !important;
    color: #000 !important;
    height: 64px;
  }

  /* 小屏移动端滚动时，Logo和菜单线条同步变色 */
  .header.scrolled .logo-default {
    opacity: 0 !important;
  }

  .header.scrolled .logo-scrolled {
    opacity: 1 !important;
  }

  .header.scrolled .menu-line {
    background-color: #000 !important;
  }

  .header.scrolled .nav-item-main {
    color: #000 !important;
  }
}

/* Logo 样式 */
.logo-wrapper {
  position: relative;
  margin-left: 26px;
  width: 168px;
  height: 45px;
  overflow: visible;
}

@media screen and (max-width: 1023px) {
  .logo-wrapper {
    margin-left: 0;
    width: 168px;
    height: 32px;
  }

  .logo-default,
  .logo-scrolled {
    height: 32px;
  }
}

@media screen and (max-width: 480px) {
  .logo-wrapper {
    width: 168px;
    height: 28px;
  }

  .logo-default,
  .logo-scrolled {
    height: 28px;
  }
}

.logo-link {
  display: inline-block;
  height: 100%;
  width: auto;
  position: relative;
}

.logo-default,
.logo-scrolled {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  transition: opacity 0.3s ease-in-out;
  display: block !important;
  visibility: visible !important;
}

.logo-default {
  opacity: 1;
  z-index: 2;
}

.logo-scrolled {
  opacity: 0;
  z-index: 1;
}

.header.scrolled .logo-default {
  opacity: 0;
  z-index: 1;
}

.header.scrolled .logo-scrolled {
  opacity: 1;
  z-index: 2;
}

/* 桌面端导航 */
.desktop-nav {
  display: none;
  flex: 1;
  justify-content: center;
}

@media (min-width: 1024px) {
  .desktop-nav {
    display: flex;
    margin-left: 180px;
  }
}

.nav-items {
  display: flex;
  justify-content: center;
  gap: 68px;
  padding: 24px 0;
}

.nav-items>li {
  position: relative;
  height: 100%;
  white-space: nowrap;
  /* 关键：给父元素添加 text-align 确保子元素居中基准 */
  text-align: center;
}

.nav-item-main {
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  padding: 8px 0;
  color: #fff;
  transition: color 0.3s ease;
}

/* ===== 核心修改：纯CSS隐藏空的子菜单 + 子菜单居中优化 ===== */
/* 子菜单容器基础样式 - 重点优化居中 */
.sub-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  /* 核心： translateX(-50%) 确保水平居中 */
  transform: translateX(-50%) translateY(20px);
  background-color: #fff;
  /* 去掉透明度，纯空白底 */
  /* 优化：设置固定宽度 + 自动宽度兼容，确保居中效果 */
  width: 200px;
  min-width: 200px;
  padding-top: 28px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  /* 关键：子菜单内部内容居中 */
  text-align: center;
}

/* 2. 只有子菜单有li元素时，hover才显示（核心）- 仅桌面端生效 */
@media (min-width: 1024px) {
  .nav-items>li:hover .sub-nav:not(:empty) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* 保持居中：只移除垂直位移，水平位移仍为 -50% */
    transform: translateX(-50%) translateY(0);
  }
}

/* 3. 兼容：如果子菜单只有空白/换行，也视为空（可选增强） */
.sub-nav:only-child:empty,
.sub-nav:has(> li:empty) {
  display: none !important;
}

/* 子菜单其他样式 */
.header.scrolled .sub-nav {
  background-color: #fff;
}

/* 核心修改：子菜单li去掉半透明背景 + 居中 */
.sub-nav li {
  /* 优化：内边距调整，让内容更居中 */
  padding: 18px 16px;
  transition: background-color 0.3s ease;
  background-color: #fff;
  /* 纯空白底 */
  /* 关键：li 宽度100%，确保内容占满容器 */
  width: 100%;
}

.sub-nav li a {
  display: block;
  font-size: 15px;
  color: #717171;
  text-transform: uppercase;
  transition: color 0.3s ease;
  margin-bottom: 10px;
  /* 关键：a 标签居中显示 */
  text-align: center;
}

/* 仅桌面端子菜单hover效果 */
@media (min-width: 1024px) {
  .sub-nav li:hover {
    background-color: #f8f5f2;
  }

  .sub-nav li:hover a {
    color: #8b572a !important;
  }
}

.header:not(.scrolled) .sub-nav li a {
  color: #000;
}

/* 移动端导航 */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 28px;
  cursor: pointer;
  align-items: flex-end;
}

@media screen and (max-width: 480px) {
  .mobile-menu-btn {
    width: 24px;
    gap: 4px;
  }

  .menu-line {
    height: 1.5px;
  }
}

.header.scrolled .menu-line {
  background-color: #000 !important;
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
}

.menu-line {
  display: block;
  height: 2px;
  background-color: #fff;
  transition: all 0.3s ease;
  width: 100%;
}

.mobile-menu-btn.isopen .menu-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.isopen .menu-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.isopen .menu-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media screen and (max-width: 480px) {
  .mobile-menu-btn.isopen .menu-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-btn.isopen .menu-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

.mobile-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  padding-top: 74px;
}

@media screen and (max-width: 480px) {
  .mobile-menu {
    padding-top: 64px;
  }
}

.mobile-menu.show {
  opacity: 1;
  pointer-events: auto;
}

/* 移动端关闭按钮 */
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transform: rotate(90deg);
  transition: all 0.3s ease 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu.show .mobile-menu-close {
  opacity: 1;
  transform: rotate(0);
}

@media screen and (max-width: 480px) {
  .mobile-menu-close {
    width: 28px;
    height: 28px;
    top: 16px;
    right: 16px;
  }
}

.close-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 480px) {
  .close-line {
    height: 1.5px;
  }
}

.close-line-1 {
  transform: translateY(-50%) rotate(45deg);
}

.close-line-2 {
  transform: translateY(-50%) rotate(-45deg);
}

/* 仅桌面端关闭按钮hover效果 */
@media (min-width: 1024px) {
  .mobile-menu-close:hover .close-line {
    background-color: #8b572a;
  }
}

/* 移动端菜单内容 */
.mobile-menu-content {
  padding: 64px 20px;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 480px) {
  .mobile-menu-content {
    padding: 30px 16px;
  }
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-logo {
  width: auto;
  height: 35px;
}

/* 修改移动端顶部的布局 */
.mobile-top {
  display: flex;
  /* 核心：两端对齐 */
  justify-content: space-between;
  /* 让元素在垂直方向居中 */
  align-items: center;
  /* 增加内边距，让内容不贴边 */
  padding: 0 20px;
}

/* 适配小屏幕高度 */
@media screen and (max-width: 480px) {
  .mobile-top {
    height: 1px;
    padding: 0 16px;
  }
}

.mobile-nav-item {
  border-bottom: 1px solid #efeeed;
  padding: 20px 24px;
  color: #333;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.3s ease;
}

.mobile-nav-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav-item:nth-child(1) {
  transition-delay: 0.1s;
}

.mobile-nav-item:nth-child(2) {
  transition-delay: 0.15s;
}

.mobile-nav-item:nth-child(3) {
  transition-delay: 0.2s;
}

.mobile-nav-item:nth-child(4) {
  transition-delay: 0.25s;
}

.mobile-nav-item:nth-child(5) {
  transition-delay: 0.3s;
}

@media screen and (max-width: 480px) {
  .mobile-nav-item {
    padding: 16px 0;
  }

  .mobile-nav-link {
    font-size: 16px;
  }
}

.mobile-nav-link {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  width: 100%;
}

/* 移动端交互优化 */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

.mobile-nav-link,
.mobile-menu-btn,
.logo-link,
.mobile-menu-close {
  -webkit-tap-highlight-color: transparent;
}