@charset "utf-8";
/* ==========================================================================
   顶部导航菜单（仅 4-3.html 引用，不影响 main.css 与其他页面）
   1) 布局：logo 居左 / 菜单居中 / 圆形按钮居右（三列网格）
   2) 交互：点击右侧圆形按钮展开收起菜单（.header-wrap.menu-closed）
   3) 断点：≤960px 收成按钮控制的下拉面板（与 js/top-menu.js 的 NAV_BP 一致）
   ========================================================================== */

/* ---------------- 1. 布局 ---------------- */
.header-wrap.has-menu { grid-template-columns: auto 1fr auto; }

.header-wrap.has-menu .menu { display: flex; justify-content: center; align-items: center; }
.header-wrap.has-menu .menulist { justify-content: center; gap: 2.5vw; }

.header-wrap.has-menu .menulist.white .cn,
.header-wrap.has-menu .menulist.white .en { color: #fff; }

.header-wrap.has-menu .item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2px 0; font-family: var(--font-sy-l); }
.header-wrap.has-menu .item .cn { font-size: clamp(12px, 1vw, 16px); line-height: 1.25; color: var(--text-c222); white-space: nowrap; transition: color .4s ease; }
.header-wrap.has-menu .item .en { margin-top: 1px; font-size: 12px; line-height: 1.2; text-transform: capitalize; color: var(--text-c999); white-space: nowrap; transition: color .4s ease; }

/* 悬浮 / 当前项：香槟金下划线由中间展开（呼应 4-3 暖金主题） */
.header-wrap.has-menu .item:hover .cn,
.header-wrap.has-menu .item.active .cn{ color: var(--text-c222); font-family: var(--font-sy-b); }
.header-wrap.has-menu .item:hover .en,
.header-wrap.has-menu .item.active .en { color: var(--text-c222); }
.header-wrap.has-menu .item:hover::after,
.header-wrap.has-menu .item.active::after { width: 100%; }

/* 页面滚动后 header 变白底 → 菜单反色为深色 */
.site-header.scrolled .menu .item .cn { color: var(--text-c222); text-shadow: none; }
.site-header.scrolled .menu .item .en { color: #999; text-shadow: none; }
.site-header.scrolled .menu .item:hover .cn,
.site-header.scrolled .menu .item.active .cn { color: #b0913f; }
.site-header.scrolled .menu .item::after { background-color: #c9ae72; }

/* ---------------- 2. 显隐效果 ---------------- */
.header-wrap.has-menu .menu { transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility .45s linear; }
.header-wrap.menu-closed .menu { opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; }

/* 右侧圆形按钮：透明底（压在 hero 图上），图标白色 */
.h-menu-inner { border: 1px solid rgba(201, 174, 114, 0.2); padding: 0; margin: 0; cursor: pointer; background-color: #fff; color: #c9ae72; -webkit-appearance: none; appearance: none; transition: color .4s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.h-menu-inner:hover { transform: scale(1.06); }
.h-menu-inner:active { transform: scale(.95); }
.h-menu-inner:focus-visible { outline: 2px solid #efce77; outline-offset: 3px; }

/* 汉堡图标：hover 补齐宽度，展开时三横线变叉号 */
.header-wrap.has-menu .menu-icon { gap: 4px; }
.header-wrap.has-menu .menu-icon span { transition: width .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); }
.h-menu-inner.is-open .menu-icon span:nth-child(1) { width: 20px; transform: translateY(6px) rotate(45deg); }
.h-menu-inner.is-open .menu-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.h-menu-inner.is-open .menu-icon span:nth-child(3) { width: 20px; transform: translateY(-6px) rotate(-45deg); }

/* ---------------- 3. 窄屏：按钮控制的下拉面板 ---------------- */
@media (max-width: 1200px) {
	.header-wrap.has-menu .menulist { justify-content: center; gap: 10px; }
}
@media (max-width: 960px) {
.header-wrap.has-menu .menulist { justify-content: center; gap: 10px; }
  .header-wrap.has-menu { grid-template-columns: 1fr auto; grid-template-rows: auto; row-gap: 0; }
  .header-wrap.has-menu .header-logo { grid-column: 1; grid-row: 1; }
  .header-wrap.has-menu .h-menu-inner { grid-column: 2; grid-row: 1; justify-self: end; }
  /* 绝对定位：展开时不撑高 header */
  .header-wrap.has-menu .menu { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 2; padding: 0 5vw; }
  .header-wrap.has-menu .menulist { flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 8px 6px; background-color: rgba(255, 255, 255, .95); border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: 0 20px 44px rgba(21, 20, 21, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-sizing: border-box; }
  .header-wrap.has-menu .item { align-items: flex-start; text-align: left; width: 100%; padding: 12px 16px; border-radius: 12px; transition: background-color .3s ease; box-sizing: border-box; }
  .header-wrap.has-menu .menulist.white .cn,
  .header-wrap.has-menu .menulist.white .en { color: var(--text-c222); }
  .header-wrap.has-menu .item .cn { font-size: 15px; text-shadow: none; }
  .header-wrap.has-menu .item .en { font-size: 11px; text-shadow: none; }
  .header-wrap.has-menu .item::after { display: none; }
  .header-wrap.has-menu .item:hover,
  .header-wrap.has-menu .item.active { background-color: rgba(239, 206, 119, .18); }
  .header-wrap.has-menu .item:hover .cn,
  .header-wrap.has-menu .item.active .cn,
  .header-wrap.has-menu .item:hover .en,
  .header-wrap.has-menu .item.active .en { color: #a98a3c; }
  .site-header.scrolled .menu .item .cn { color: var(--text-c222); }
  .site-header.scrolled .menu .item .en { color: #a89a76; }
  .header-wrap.menu-closed .menu { transform: translateY(-10px); }
}