/* ==========================================================================
   CXOU 内页页脚
   --------------------------------------------------------------------------
   背景：首页 front-page.php 自带一套 <footer>，.foot* 样式内联在它自己的
   <style> 里，只在首页加载。内页没有 footer.php，13 个模板的 get_footer()
   全部回退到 Astra 默认页脚 —— 而主题的 #cxou-global-ui 又把 Astra 页脚
   display:none 掉了（当初是为换自定义页脚预留的，但自定义页脚一直没建）。
   结果就是内页只剩一行被隐藏的版权，也就是"没有页脚"。

   这里把首页那套规则原样搬过来：token 同值、类名相同、栅格相同，
   首页与内页共用同一个视觉实现，不另起一套。

   作用域：全部锁在 .cxou-foot 之下。
   --w2/--w3/--gold-lt/--red-lt/--hair 这些 token 在首页定义于 :root，
   内页的子主题 style.css 里根本没有。定义在 .cxou-foot 自身而不是 :root，
   是为了让 var() 只在页脚内部生效，不会顺着继承影响页面其他部分。
   ========================================================================== */

.cxou-foot {
  /* 与首页 :root 完全同值 */
  --w2: rgba(255,255,255,.86);
  --w3: rgba(255,255,255,.68);
  --gold-lt: #C9A83A;
  --red-lt: #E0655F;
  --hair: rgba(255,255,255,.16);
  --max: 2400px;

  background: #12100E;
  color: var(--w2);
  padding: 60px 0 30px;
  font-size: 14.5px;
  line-height: 1.8;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Segoe UI", sans-serif;
  border-top: 1px solid var(--hair);
  -webkit-font-smoothing: antialiased;
}

/* 容器与首页 .wrap 同度：内容宽度跟视口走，两侧只留随屏缩放的安全边距 */
.cxou-foot-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 3.4vw, 96px);
  position: relative;
  z-index: 2;
}

/* 5 个子项（品牌 + 会员 / 奖项 / 活动 / 关于我们）。
   原来只给 4 列时「关于我们」会被挤到第二行独占一行，所以必须是 5 列。 */
.cxou-foot .foot-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: 44px;
  margin-bottom: 42px;
}

.cxou-foot .foot-brand {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.cxou-foot .foot-year {
  font-size: 11px;
  letter-spacing: 2.2px;
  color: var(--gold-lt);
  margin-bottom: 15px;
}

.cxou-foot .foot-meta { line-height: 2.1; }

.cxou-foot .foot h4 {
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
}

/* h4 显式给了 color，不靠继承 —— 否则会被 Astra 的裸标签规则
   (h1..h6{color:var(--ast-global-color-2)}) 打回深色，在 #12100E 上隐形。 */
.cxou-foot .foot a {
  color: var(--w2);
  transition: color .25s;
}

.cxou-foot .foot a:hover { color: var(--red-lt); }

.cxou-foot .foot li { padding: 7px 0; }

.cxou-foot ul { margin: 0; padding: 0; list-style: none; }
.cxou-foot .foot-meta a { color: var(--w2); transition: color .25s; }
.cxou-foot .foot-meta a:hover { color: var(--red-lt); }

.cxou-foot .foot-btm {
  border-top: 1px solid var(--hair);
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--w3);
}

@media (max-width: 900px) {
  .cxou-foot { padding: 48px 0 26px; }
  .cxou-foot-wrap { padding: 0 20px; }
  /* 2 列时 5 项会剩 1 个孤儿，让品牌块横跨两列 → 2 行正好填满 */
  .cxou-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .cxou-foot .foot-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .cxou-foot .foot-grid { grid-template-columns: 1fr; }
  .cxou-foot .foot-grid > div:first-child { grid-column: auto; }
  .cxou-foot .foot-btm { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cxou-foot .foot a,
  .cxou-foot .foot-meta a { transition: none; }
}