/* site-ui.css · 2026-09-03 · 导航折叠 + hero 按钮 · 首屏与转化路径子项目 */

/* 导航基础（与 25 页内联规则一致，首页没有内联这套所以必须在此定义） */
.top-nav { padding: 18px 24px; border-bottom: 0.5px solid var(--lo-border-hairline); display: flex; justify-content: space-between; align-items: center; background: var(--lo-bg-cream); }
.top-nav-brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.top-nav-wordmark { font-family: var(--lo-font-serif-display); font-weight: 600; font-size: 22px; letter-spacing: 4px; line-height: 1; background: var(--lo-gradient-oxidized); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.top-nav .top-nav-tag { font-family: var(--lo-font-sans); font-weight: 500; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lo-text-muted); } /* 原 --lo-text-meta 对比度 2.84，改 muted 10.4；选择器带 .top-nav 是为了压过 25 页内联 (0,1,0) 的同名规则 */
.top-nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
.top-nav-link { font-family: var(--lo-font-sans); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--lo-text-main); text-decoration: none; }
.top-nav-link:hover, .top-nav-link:focus { color: var(--lo-color-antique-copper); }

/* 首页变体：masthead 之下，无品牌行，居中 */
.top-nav--home { justify-content: center; }
.top-nav--home .top-nav-links { justify-content: center; gap: 32px; }

/* 折叠按钮：桌面隐藏；无 JS 时任何宽度都隐藏（链接照常显示） */
.top-nav-toggle { display: none; }

@media (max-width: 768px) {
  .top-nav { flex-wrap: wrap; }
  .js-nav .top-nav-toggle { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; padding: 8px 12px; border: 0.5px solid var(--lo-border-hairline); border-radius: 0; background: transparent; font-family: var(--lo-font-sans); font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--lo-text-main); cursor: pointer; }
  .js-nav .top-nav--home .top-nav-toggle { margin-left: 0; }
  /* 25 页的品牌行（LOCA + 小标签约 340px）加按钮放不进 372px 可用宽，会掉成第二行；≤480 隐藏小标签让 LOCA 与 Menu 同行，顶栏约 63px */
  @media (max-width: 520px) { .js-nav .top-nav .top-nav-tag { display: none; } } /* 481 宽只剩 3px 余量，放宽到 520 */
  .top-nav-toggle-icon { position: relative; display: inline-block; width: 14px; height: 10px; }
  .top-nav-toggle-icon::before, .top-nav-toggle-icon::after, .top-nav-toggle-icon span { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; }
  .top-nav-toggle-icon::before { top: 0; }
  .top-nav-toggle-icon span { top: 4.25px; }
  .top-nav-toggle-icon::after { bottom: 0; }
  /* 选择器带 .top-nav 是为了压过 spacing.css 第 91–108 行 (0,2,0) 的移动端规则；不要简化 */
  .js-nav .top-nav .top-nav-links { display: none; width: 100%; flex-basis: 100%; flex-direction: column; justify-content: flex-start; gap: 0; padding-top: 10px; }
  .js-nav .top-nav .top-nav-links.is-open { display: flex; }
  .js-nav .top-nav .top-nav-links.is-open .top-nav-link { padding: 12px 0; border-top: 0.5px solid var(--lo-border-hairline); }
  .js-nav .top-nav--home .top-nav-links.is-open { text-align: center; }
}

/* hero 按钮：主 WhatsApp 实底墨色，次 Register 描边。站内已有 .contact-cta（描边）与 .cta-primary（Cinzel 浅底）两种按钮，此处有意用实底墨色做最高层级；无渐变、Sans 字体，符合品牌规则 */
.hero-cta-row { display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap; margin: 24px auto 0; }
.hero-cta, .hero-cta-secondary { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 220px; padding: 14px 26px; text-decoration: none; font-family: var(--lo-font-sans); font-weight: 600; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.2; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.hero-cta { background: var(--lo-text-main); color: var(--lo-bg-cream); border: 1px solid var(--lo-text-main); }
.hero-cta:hover, .hero-cta:focus { background: var(--lo-color-antique-copper); border-color: var(--lo-color-antique-copper); color: var(--lo-bg-cream); }
.hero-cta-secondary { background: transparent; color: var(--lo-text-main); border: 1px solid var(--lo-text-main); }
.hero-cta-secondary:hover, .hero-cta-secondary:focus { background: rgba(126, 69, 42, 0.06); }
.hero-cta-cn { display: block; margin-top: 5px; font-weight: 400; font-size: 11px; letter-spacing: 0.5px; text-transform: none; opacity: 0.85; }
@media (max-width: 480px) {
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta, .hero-cta-secondary { min-width: 0; }
}