/* =============================================================
 * public.css —— 全站公共样式（头部导航 + 页脚 + 公共变量）
 * 数据来源：Figma 设计稿 node 471:1835 (Slide 16:9 - 17)
 * 说明：
 *   1. 所有主题颜色均使用 CSS 变量定义，后续统一改色只需修改 :root 即可。
 *   2. 公共头部、公共底部写在本文件，各页面只需 <link> 引入即可复用。
 *   3. 依赖：Bootstrap 5（栅格/容器）、animate.css、wow.js（入场动效）。
 * ============================================================= */

/* ---------- 1. 公共变量（统一修改入口） ---------- */
:root {
  --color-primary: #BE000A;        /* 主色：中国红（导航底）—— 来自 Figma */
  --color-primary-dark: #A80009;   /* 主色按下/吸顶时的微调 */
  --color-accent: #B81C22;         /* 强调色：诗句关键字（来自 Figma） */
  --color-white: #fff;             /* 文字白 */
  --color-black: #000;             /* 页脚纯黑底 */
  --color-gray: #6F6F6F;           /* 搜索框/标签描边与文字灰（来自 Figma） */
  --color-gold: #E0B873;           /* 金色点缀 */
  --color-text: #333;              /* 正文默认色 */

  --nav-height: 90px;              /* PC 端导航高度（原始需求：90px） */
  --nav-height-scrolled: 72px;     /* 滚动吸顶后的高度（细微变化） */
  --footer-height: 400px;          /* PC 端页脚高度（原始需求：400px） */
  --divider-height: 105px;         /* 页脚中间竖线高度（原始需求：105px） */

  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-sans: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #fff;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* =============================================================
 * 公共头部 / 导航
 * 数据：Figma 469:521 红底 1920x92，469:566 logo 在左侧 ~260px,
 *      469:528~958 导航文字 18px Noto Serif SC Bold 白色 top:31px,
 *      469:960 选中下划线 3px 圆角 12px 宽 36px 在首页下 top:59px
 * 结构：.site-header > .container > .nav-inner(.logo + .nav-list + .nav-toggle)
 * ============================================================= */
.site-header {
  position: sticky;          /* 向下滚动时吸顶 */
  top: 0;
  z-index: 1030;
  background: var(--color-primary);
  transition: background .35s ease, box-shadow .35s ease;
}
/* 滚动吸顶后的细微动效：加深底色 + 投影 + 高度收缩 */
.site-header.is-scrolled {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.nav-inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height .35s ease;
  will-change: height;      /* 提示浏览器优化，避免 sticky 抖动 */
}
.site-header.is-scrolled .nav-inner { height: var(--nav-height-scrolled); }

/* 左侧 logo —— Figma: 260px, top 31px, 高度约 37px */
.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 37px;
  transition: height .35s ease;
}
.nav-logo img,
.nav-logo svg {
  height: 37px;
  width: auto;
  display: block;
  transition: height .35s ease;
}
.site-header.is-scrolled .nav-logo,
.site-header.is-scrolled .nav-logo img,
.site-header.is-scrolled .nav-logo svg { height: 32px; }

/* 右侧导航列表 —— Figma: 间距约 67~67px（基于位置 1124/991=133, 1257/1124=133 等） */
.nav-list {
  display: flex;
  align-items: center;
  gap: 67px;                          /* 与设计稿栏目间距一致 */
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item .nav-link {
  display: inline-block;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 18px;                    /* Figma: 18px */
  font-weight: 700;                   /* Figma: Bold */
  line-height: 1;
  white-space: nowrap;
}
/* 文字包裹层：下划线宽度 = 文字宽度（含字数的等宽） */
.nav-text {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}
/* 下划线：3px 高、圆角 12px（Figma 469:960 rounded-[12px]）；默认从中间向两边收起 */
.nav-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;                      /* Figma: top:59px，文字 top:31px，下划线距文字 ~28px，按钮层 padding 8px 后约 -10px */
  height: 3px;
  border-radius: 12px;                /* Figma: rounded-[12px] */
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: center;           /* 从中间到两边 */
  transition: transform .35s ease;
}
/* 悬停非当前栏目：下划线从中间向两边展开 */
.nav-item:hover .nav-text::after { transform: scaleX(1); }
/* 当前页面：常驻下划线选中态 */
.nav-item.active .nav-text::after { transform: scaleX(1); }

/* 移动端汉堡按钮（PC 隐藏） */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 26px;
  height: 2px;
  background: var(--color-white);
  transition: .3s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

/* =============================================================
 * 公共页脚
 * 数据：Figma 469:839 1920x399 黑底，
 *      469:842 竖线 1px 宽 105.5px 高 left:962px top:3627px,
 *      469:840 宣传语 20px Noto Serif SC Medium 居中宽 560px top:3695px,
 *      469:841 联系方式 20px Medium leading 42px left:1140px top:3615px 宽 389px
 * 结构：.site-footer > .container > .footer-inner(.footer-col + .footer-divider + .footer-col)
 * ============================================================= */
.site-footer { background: var(--color-black); }
.footer-inner {
  min-height: var(--footer-height);
  display: flex;
  align-items: stretch;
}
/* 左右各 50% */
.footer-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}
/* 中间竖线：1px 宽、105.5px 高、竖向居中 —— Figma 469:842 */
.footer-divider {
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: var(--divider-height);
  background: rgba(255, 255, 255, .4);    /* Figma 实际为白色线，浅灰在黑底上更柔和 */
}

/* 左侧：logo + 宣传语 —— Figma: logo 在 ~424px top:3627px, 宣传语 top:3695px */
.footer-logo {
  display: inline-flex;
  align-items: center;
  height: 45px;
  margin-bottom: 22px;
}
.footer-logo img,
.footer-logo svg { height: 45px; width: auto; }

.footer-slogan {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 20px;                  /* Figma: 20px */
  font-style: normal;
  font-weight: 500;                 /* Figma: Medium */
  line-height: normal;
}

/* 右侧：联系方式 —— Figma: left:1140px top:3615px width:389px */
.footer-contact {
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 20px;                  /* Figma: 20px */
  font-style: normal;
  font-weight: 500;                 /* Figma: Medium */
  line-height: 42px;                /* Figma: 42px (约 210%) */
  text-align: left;
}
.footer-contact a { color: var(--color-white); }
.footer-contact a:hover { color: var(--color-gold); }

/* =============================================================
 * 响应式
 * ============================================================= */
@media (max-width: 991.98px) {
  body { min-width: 0; }
  .nav-toggle { display: block; }
  .nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-primary-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .site-header .nav-list.open { max-height: 70vh; }
  .nav-item { width: 100%; text-align: center; }
  .nav-item .nav-link { display: block; padding: 14px 0; }
  .nav-text { padding: 0; }

  /* 页脚：移动端改为上下堆叠，竖线转为横线 */
  .footer-inner { flex-direction: column; }
  .footer-col { flex: none; padding: 36px 24px; }
  .footer-divider { width: 60%; height: 1px; flex: 0 0 1px; }
}