/* =========================================================
   大地安亲 · nav.css
   设计令牌 + 作用域重置 + 基础排版 + 顶部导航（含响应式/抽屉）
   ========================================================= */

/* ---------- 设计令牌 ---------- */
body {
  /* 品牌色 */
  --color-primary: #7BC91E;
  --color-primary-hover: #8BD039;
  --color-primary-dark: #69AB1A;
  --color-primary-tint: rgba(123, 201, 30, .12);
  --color-ink: #315E46;
  --color-ink-strong: #22433A;
  --color-ink-deep: #1C3830;
  --color-ink-border: #3D6B51;
  --color-cream: #FDFBF6;
  --color-ivory: #FFFBEB;
  --color-gold: #EDCF72;
  --color-peach: #E6AA78;
  --color-tint-green: #EFF7E2;
  --color-tint-gold: #FBF4DE;
  --color-tint-peach: #FBEDE3;
  --color-white: #FFFFFF;

  --color-text: #33443B;
  --color-text-secondary: #5F7066;
  --color-card-line: #ECE7DB;

  /* 阴影 / 圆角 */
  --shadow-card: 0 10px 30px rgba(49, 94, 70, .08);
  --shadow-card-hover: 0 22px 48px rgba(49, 94, 70, .16);
  --shadow-nav: 0 8px 24px rgba(49, 94, 70, .10);
  --shadow-dropdown: 0 18px 44px rgba(49, 94, 70, .14);
  --radius-card: 22px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* 字体 / 容器 */
  --font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  --container: 1200px;

  /* 导航高度 */
  --nav-h1: 92px;
  --nav-h2: 54px;
  --nav-h: 146px;

  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-cream);
}

/* ---------- 作用域重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; border: 0; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

.abcm-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================
   顶部导航
   ========================================================= */
.abcm-nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.abcm-nav-row1 {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--color-card-line);
  overflow: visible;
  max-height: var(--nav-h1);
  opacity: 1;
  transform: translateY(0);
  transition: max-height .38s cubic-bezier(.22,.8,.3,1), opacity .26s ease, transform .38s cubic-bezier(.22,.8,.3,1);
}
.abcm-nav.is-stuck .abcm-nav-row1 {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-bottom-color: transparent;
  pointer-events: none;
  overflow: hidden;
}
.abcm-nav-inner {
  height: var(--nav-h1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.abcm-nav-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
/* 主站顶部条（对应 ziwangzhan_top_nav）：右上角按钮行上方的 8 个文字链接 */
.abcm-topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text);
}
.abcm-topnav a {
  color: var(--color-text);
  white-space: nowrap;
  transition: color .2s ease;
}
.abcm-topnav a:hover { color: var(--color-primary-dark); }
.abcm-topnav i {
  font-style: normal;
  color: rgba(49, 94, 70, .26);
}
.abcm-nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.abcm-nav-logo { height: 44px; width: auto; }
.abcm-nav-name { font-size: 20px; font-weight: 800; color: var(--color-ink); }

.abcm-nav-actions { display: flex; align-items: center; gap: 12px; }

.abcm-btn-pill.abcm-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.abcm-btn-ghost.abcm-btn-ghost {
  background: #fff;
  color: var(--color-ink);
  border: 1.5px solid rgba(123, 201, 30, .55);
}
.abcm-btn-ghost:hover { background: var(--color-primary-tint); border-color: var(--color-primary); }
.abcm-btn-solid.abcm-btn-solid {
  background: var(--color-primary);
  color: #fff;
  border: 1.5px solid var(--color-primary);
}
.abcm-btn-solid:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.abcm-caret { font-size: 11px; color: var(--color-primary-dark); }

/* 语言切换（对应 new_login_dropdown）：胶囊按钮 + 悬浮/点击展开的两项菜单 */
.abcm-lang { position: relative; display: inline-flex; z-index: 3; }
.abcm-lang-btn { gap: 6px; }
.abcm-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 126px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-card-line);
  border-radius: 14px;
  box-shadow: var(--shadow-dropdown);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.abcm-lang:hover .abcm-lang-menu,
.abcm-lang:focus-within .abcm-lang-menu,
.abcm-lang.is-open .abcm-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.abcm-lang-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  text-align: center;
  transition: background .18s ease, color .18s ease;
}
.abcm-lang-menu a:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.abcm-lang-menu a.is-current { color: var(--color-primary-dark); font-weight: 700; }

/* 汉堡 */
.abcm-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1.5px solid rgba(123, 201, 30, .45);
  background: #fff;
}
.abcm-nav-burger span { display: block; width: 20px; height: 2.2px; margin: 0 auto; border-radius: 2px; background: var(--color-ink); transition: .3s; }

.abcm-nav-row2 {
  background: var(--color-cream);
  border-bottom: 1px solid rgba(236, 231, 219, .8);
  padding-top: var(--nav-h1);
  transition: padding-top .38s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, background .3s ease;
}
.abcm-nav.is-stuck .abcm-nav-row2 {
  padding-top: 0;
  background: rgba(253, 251, 246, .97);
  box-shadow: var(--shadow-nav);
}
.abcm-nav-menu {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: var(--nav-h2);
}
.abcm-nav-item { position: relative; }
.abcm-nav-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--nav-h2);
  padding: 0 17px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-ink-strong);
  transition: color .22s ease;
}
.abcm-nav-item > a::after {
  content: "";
  position: absolute;
  left: 17px; right: 17px; bottom: 9px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .24s ease;
}
.abcm-nav-item:hover > a,
.abcm-nav-item.is-active > a,
.abcm-nav-item:focus-within > a { color: var(--color-primary-dark); }
.abcm-nav-item:hover > a::after,
.abcm-nav-item.is-active > a::after,
.abcm-nav-item:focus-within > a::after { transform: scaleX(1); }
.abcm-nav-arrow { font-size: 10px; color: var(--color-primary); }

/* 下拉面板 */
.abcm-nav-dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 188px;
  background: #fff;
  border: 1px solid var(--color-card-line);
  border-radius: 18px;
  box-shadow: var(--shadow-dropdown);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.abcm-nav-item:hover > .abcm-nav-dropdown,
.abcm-nav-item:focus-within > .abcm-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.abcm-nav-dropdown > a,
.abcm-nav-l2 > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.abcm-nav-dropdown > a:hover,
.abcm-nav-l2:hover > a,
.abcm-nav-dropdown a:focus-visible { background: var(--color-primary-tint); color: var(--color-primary-dark); }

.abcm-nav-l2 { position: relative; }
.abcm-nav-l2 > a { justify-content: space-between; }
.abcm-nav-more { color: var(--color-primary); font-size: 14px; line-height: 1; }

/* 三级 flyout */
.abcm-nav-flyout {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--color-card-line);
  border-radius: 16px;
  box-shadow: var(--shadow-dropdown);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.abcm-nav-flyout a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.abcm-nav-flyout a:hover { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.abcm-nav-l2:hover .abcm-nav-flyout,
.abcm-nav-l2:focus-within .abcm-nav-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* ---------- 移动端抽屉 ---------- */
.abcm-drawer-mask {
  position: fixed; inset: 0;
  background: rgba(28, 56, 48, .45);
  z-index: 200;
  opacity: 0;
  transition: opacity .3s ease;
}
.abcm-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(330px, 84vw);
  background: var(--color-cream);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .36s cubic-bezier(.22,.8,.3,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(28, 56, 48, .18);
}
body:has(.abcm-drawer.is-open) { overflow: hidden; }
.abcm-drawer.is-open { transform: translateX(0); }
.abcm-drawer-mask.is-show { opacity: 1; }

.abcm-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-card-line);
  background: #fff;
}
.abcm-drawer-logo { height: 38px; width: auto; }
.abcm-drawer-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-primary-tint); color: var(--color-ink);
  font-size: 15px;
}
.abcm-drawer-actions {
  display: grid; gap: 10px;
  padding: 18px 20px 6px;
}
.abcm-drawer-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.abcm-drawer-actions .abcm-btn-pill { justify-content: center; height: 42px; }
.abcm-drawer-menu { padding: 8px 12px 28px; }
.abcm-drawer-menu > li { border-bottom: 1px solid rgba(236, 231, 219, .7); }
.abcm-drawer-menu a, .abcm-drawer-parent {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 15px 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink-strong);
  text-align: left;
}
.abcm-drawer-menu a.is-current { color: var(--color-primary-dark); }
.abcm-drawer-parent span { color: var(--color-primary); font-size: 20px; transition: transform .25s ease; }
.abcm-drawer-parent.is-open span { transform: rotate(45deg); }
.abcm-drawer-sub {
  max-height: 0; overflow: hidden;
  transition: max-height .32s ease;
  padding-left: 14px;
}
.abcm-drawer-sub a {
  padding: 11px 10px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--color-text-secondary);
  border: 0;
}
.abcm-drawer-parent.is-open + .abcm-drawer-sub { max-height: 420px; }
/* 三级 */
.abcm-drawer-l2-parent {
  padding: 10px 10px 10px 22px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
}
.abcm-drawer-l2-parent.is-open + .abcm-drawer-l3 { max-height: 300px; }
.abcm-drawer-l3 { padding-left: 30px; }
.abcm-drawer-l3 a {
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}

/* ---------- 响应式（导航部分） ---------- */
@media (max-width: 1279px) {
  .abcm-nav-inner { gap: 16px; }
  .abcm-topnav { font-size: 13px; gap: 0 6px; }
}
@media (max-width: 1023px) {
  body { --nav-h1: 70px; --nav-h: 70px; }
  .abcm-topnav { display: none; }
  .abcm-nav-row2 { display: none; }
  .abcm-nav-row1 {
    position: relative;
    max-height: none;
    transform: none;
  }
  .abcm-nav-burger { display: inline-flex; }
  .abcm-nav-actions .abcm-btn-pill,
  .abcm-nav-actions .abcm-lang { display: none; }
  .abcm-nav-logo { height: 40px; }
  .abcm-nav.is-stuck .abcm-nav-row1 {
    max-height: none;
    opacity: 1;
    transform: none;
    border-bottom-color: var(--color-card-line);
    box-shadow: var(--shadow-nav);
    pointer-events: auto;
  }
}
@media (min-width: 1024px) {
  .abcm-drawer, .abcm-drawer-mask { display: none !important; }
}
@media (max-width: 480px) {
  .abcm-container { padding: 0 20px; }
}