/* =====================================================
   FEEDWAY · 全站通栏公共样式
   包含：按钮、顶部导航、移动端导航、底部通栏
   ===================================================== */

/* ---- 通栏按钮（只影响 header-cta / mobile-cta，不影响页面主体按钮） ---- */
.header-cta,
.mobile-cta .btn {
  min-height: 44px;
  padding: 10px 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(165deg, #00aa5b 0%, #00864c 40%, #004732 100%);
  box-shadow: inset 0 1px 0 #ffffff30, 0 5px 14px #00543c12;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.header-cta:hover,
.mobile-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #00543c25;
}

.mobile-cta .btn {
  display: flex;
  width: 100%;
}
.mobile-cta .arrow { font-size: 1.15em; }

/* ---- 顶部通栏 ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 80px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #ddeee5;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.header-inner {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img { width: 168px; height: auto; display: block; }

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(14px, 1.6vw, 26px);
}
.desktop-nav a,
.desktop-nav button {
  position: relative;
  padding: 10px 0;
  border: 0;
  background: none;
  color: #063e30;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: #007b48;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.desktop-nav a:hover { color: #007b48; }
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: #007b48; font-weight: 700; }

.header-cta { flex-shrink: 0; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: #eef8f2;
  border: 1px solid #ddeee5;
  border-radius: 10px;
  color: #0e4d2d;
  font-size: 24px;
  line-height: 1;
}
.mobile-nav { display: none; }
.mobile-nav:not([hidden]) {
  position: absolute;
  inset: 100% 0 auto;
  z-index: 29;
  background: #fff;
  padding: 14px 24px 22px;
  box-shadow: 0 18px 25px rgb(0 0 0 / 8%);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.mobile-nav a,
.mobile-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 12px;
  border: 0;
  border-bottom: 1px solid #eef4f0;
  background: none;
  color: #063e30;
  font-size: 15px;
  cursor: pointer;
}
.mobile-nav a[aria-current="page"] {
  color: #007b48;
  font-weight: 800;
  background: #f0faf4;
}

/* ---- 修正：高亮下划线紧贴文字下方 ---- */
.site-header .desktop-nav a[aria-current="page"]::after,
.site-header .desktop-nav a:hover::after {
  bottom: 2px;
  height: 2px;
}
.site-header .desktop-nav a[aria-current="page"] {
  font-weight: 700;
}

/* ---- 底部通栏样式已迁移至 assets/css/footer.css ---- */

/* ---- 移动端固定试用条 ---- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #ddeee5;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
}
/* ---- 响应式 ---- */
@media (min-width: 1200px) {
  .mobile-nav { display: none !important; }
}
@media (max-width: 1199px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; }
}
@media (max-width: 767px) {
  .site-header { height: 66px; }
  .header-inner { width: calc(100% - 28px); gap: 12px; }
  .brand img { width: 140px; }
  .header-cta { display: none; }
  .mobile-cta { display: block; }
}

@media (max-width: 999px) and (min-width: 768px) {
  .site-header { height: 80px; }
}