/* ==============================
   布局相关：页眉 / 导航 / 页尾（全站通用）
   对应模板：app/templates/base.html
   
   你要求的页眉结构（从上到下）：
   1) 很窄的天蓝色分界线
   2) 淡绿色主区域（从左到右：logo -> 公司名 -> 导航栏）
   3) 很窄的天蓝色分界线
   ============================== */

/* ===== 页眉整体容器 ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 由于页眉固定了，需要给主体内容添加上边距，避免被页眉遮挡 */
.page {
  margin-top: 0px;
  /* 或者使用 padding-top */
  padding-top: 80px;
}

/* 为了更精确的计算，可以添加一个JS辅助类或者使用CSS变量 */
:root {
  --header-line-height: 4px;    /* 分界线高度 */
  --header-main-height: 80px;   /* 主区域高度（根据实际调整） */
  --header-total: calc(var(--header-line-height) * 2 + var(--header-main-height));
}

body {
  margin: 0;  /* 移除 body 默认边距 */
  padding: 0;
}

.page {
  padding-top: var(--header-height);
}

/* 响应式调整 */
@media (max-width: 768px) {
  :root {
    --header-height: auto; /* 移动端可能需要不同的高度 */
  }
  
  .page {
    padding-top: 120px; /* 移动端页眉可能更高，适当增加 */
  }
}

/* 1 & 3) 分界线（很窄） */
.header-line {
  height: 4px;
  background: #e5e5e5; /* 天蓝色（可自行调整） */
}

/* 2) 中间主区域：淡绿色底色 + 横向排布 */
.header-main {
  background: #fff; /* 改为白色底 */
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
}

/* 左侧品牌区：logo + 公司名（整体放在屏幕左 1/8 附近） */
.header-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 10vw;
  padding-top: 1px;
  padding-bottom: 1px;
}

.header-logo {
  width: 180px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 导航栏：位于右侧，横向排列 */
.header-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center; 
  gap: 40px;
  min-height: 56px;
  margin-left: -85px; /* 整体向左移动 ，不要动！！*/
}

/* 右侧 CTA 容器：立刻购买，距右侧 10vw */
.header-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10vw; /* 离屏幕右侧 10vw */
  min-width: 0;
}

/* 普通导航项：默认黑字，白底 */
.nav-item {
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  margin: 0 -20px;
  font-size: 18px;
  font-weight: 500;
  color: #000;         /* 黑色字体 */
  background: #fff;    /* 白底 */
  border-radius: 0;
  line-height: 1;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* 普通项 active：深灰底色 + 白字 */
.nav-item.active {
  background: #3f3f40;
  color: #fff;
  font-weight: 700;
}

.nav-item.active::after {
  display: none;
}

/* 立刻购买 CTA：保持按钮样式（蓝底白字），不扩展宽度、不撑满高度 */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: auto;
  padding: 10px 14px;
  margin: 0;

  background: var(--cta);
  color: #fff;
  border-radius: 8px;
}

.nav-cta:hover {
  background: #0956b2;
}

.nav-cta.active {
  background: var(--cta);
  color: #fff;
}

.nav-cta.active::after {
  display: none;
}

/* ===== 页尾（新样式）===== */
.site-footer {
  position: relative;
  margin-top: 24px;
  width: 100%;
}

/* 移除绿色长条 */
.footer-green-bar {
  display: none;
}

/* 使用 footing.png 作为背景的区域 - 无高度限制 */
.footer-dark {
  width: 100%;
  background-image: url('/static/product_data/general/footing.png');
  background-size: cover; /* 覆盖整个区域 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  min-height: 370px; /* 最小高度，防止内容为空时太矮，可以根据需要调整 */
  aspect-ratio: auto; /* 保持图片原始比例 */
}

/* 完全移除版权文字容器 */
.footer-dark-bottom {
  display: none;
}

/* 版权文字容器 - 保持原有样式，但添加半透明背景提高可读性 */
.footer-dark-bottom {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 12px 10px 12px;
  color: #e6e6e6;
  font-size: 12px;
  line-height: 1.2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景，提高文字可读性 */
  padding: 8px 12px;
}

/* 如果不需要绿色长条，可以这样修改 */
.site-footer.no-green-bar .footer-green-bar {
  display: none;
}