/* =========================================================
   DaoEssence 全站页脚统一组件样式（单一事实源 / Single Source of Truth）
   ---------------------------------------------------------
   用法：任何页面只要在 </head> 前引入本文件
         <link rel="stylesheet" href="/footer-tools.css">
         并写入如下 DOM 骨架（见 scripts/footer-component.mjs 生成器）：
             <footer class="footer">
               <div class="container">
                 <div class="footer-content"> ... 品牌/探索/链接/联系 四列 ... </div>
                 <div class="footer-tools-row" aria-label="Tools">
                   <div class="footer-tool-groups" id="footer-tool-links"></div>
                 </div>
                 <div class="footer-bottom"> ... 版权行 ... </div>
               </div>
             </footer>
         即可与首页视觉/结构完全一致，无需页面各自的 CSS 参与。

   视觉基准（= 首页 index.html）：
     [ 金色分隔线 ]
     工具三栏（八字命理 1.4fr / 占卜问事 1fr / 风水相术 1fr）
     [ 金色分隔线 ]
     版权行
   字体：正文无衬线(var(--font-body))、类标题衬线(var(--font-display))、链接无下划线。
   本文件自带全部字体/颜色/下划线定义，绝不依赖 styles.min.css 或任何页面的局部 CSS
   —— 即「集中管理的样式定义」，改一处全站生效。
   ========================================================= */

/* ---------- 0) 容器/页脚基底（供未引 styles.min.css 的工具页兜底） ----------
   注意：页脚容器用 .footer-inner 而**不是** .container —— 有些工具页把 .container
   定义成窄容器(max-width:720px)给正文用，若页脚复用会被压窄、与首页(1400)不一致。
   另外这些页把 footer 放进了窄容器内，所以这里让页脚「视觉突破父容器」，
   居中铺满视口宽度（不改 DOM 结构），确保四列区能展开到 1400px，与头部 .g-container
   和首页 .container（均为 1400px）完全对齐。 */
.footer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  left: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.footer .footer-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg, 24px);
  box-sizing: border-box;
}
/* 兼容仍在用 .container 包裹页脚的页面（首页 index.html 等 900+ 页） */
.footer > .container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg, 24px);
  box-sizing: border-box;
}
.footer {
  background: var(--bg-dark, #1A1612);
  color: var(--bg-primary, #F5F0E6);
  padding: var(--spacing-4xl, 6rem) 0 var(--spacing-xl, 2rem);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: 1.8;
  /* 关键：移除页脚自身顶边线，避免与工具区金线叠成双线（首页只有两条金线） */
  border-top: none;
}

/* 工具页把 footer 塞进窄容器(.container / .fe-container)时：
   - margin-top：在表单卡片与页脚底色之间留出 3rem 页面底色间隔，避免表单卡紧贴页脚；
   - padding-top：页脚内部顶部留白收紧到 3rem，避免短内容下方出现一大段空白。
   两者相加 = 6rem，与其它页页脚顶部 6rem 观感一致。首页等内容多的页不受影响。 */
.container > footer.footer,
.fe-container > footer.footer {
  margin-top: var(--spacing-2xl, 3rem);
  padding-top: var(--spacing-2xl, 3rem);
}

/* ---------- 1) 页脚四列区 ---------- */
.footer .footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spacing-3xl, 4rem);
  /* 下方间距由工具区统一控制，避免与分隔线间距叠加过大 */
  margin-bottom: 0;
  text-align: left;
}
.footer .footer-title {
  font-family: var(--font-display, 'Georgia', 'Times New Roman', 'SimSun', 'STSong', serif);
  font-size: var(--text-lg, 1.125rem);
  margin-bottom: var(--spacing-lg, 1.5rem);
  color: var(--accent-color, #D4AF37);
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1.4;
}
.footer .logo-en {
  font-family: var(--font-english, 'Georgia', 'Times New Roman', serif);
  font-size: var(--text-xs, 0.75rem);
  color: rgba(245, 240, 230, 0.6);
  letter-spacing: 0.2em;
}

/* ---------- 2) 页脚四列链接（无下划线 + 统一悬停） ---------- */
.footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .footer-links li {
  color: rgba(245, 240, 230, 0.7);
  display: flex;
  align-items: center;
}
.footer .footer-links a,
.footer .footer-brand p {
  font-family: inherit;
  text-decoration: none;
  color: rgba(245, 240, 230, 0.7);
  transition: all var(--transition-fast, 200ms ease);
}
.footer .footer-links a:hover {
  color: var(--accent-color, #D4AF37);
  padding-left: var(--spacing-sm, 8px);
}

/* ---------- 3) 工具区通栏（方案A：独立一行，三大类横排三栏） ---------- */
.footer .footer-tools-row {
  /* 自带正文无衬线字体栈（与首页一致） */
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif);
  line-height: 1.7;
  /* 强制左对齐：避免落在 text-align:center 的页脚容器内时标题被居中 */
  text-align: left;
  margin-top: 1.25rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
}
.footer .footer-tool-groups {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.footer .footer-group-title {
  display: block;
  font-family: var(--font-display, 'Georgia', 'Times New Roman', 'SimSun', 'STSong', serif);
  font-size: var(--text-lg, 1.125rem);
  letter-spacing: 0.05em;
  line-height: 1.4;
  /* 深色站页=金；浅色工具页(--text-muted为深色)=深字；深色无变量页回退浅字 */
  color: var(--accent-color, #D4AF37);
  margin-bottom: 6px;
  font-weight: 600;
}
.footer .footer-sublinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}
.footer .footer-sublinks li {
  font-family: inherit;
  color: rgba(245, 240, 230, 0.7);
  display: flex;
  align-items: center;
}
/* 显式去下划线 + 继承无衬线，避免未引全局 CSS 的页面回退浏览器默认样式 */
.footer .footer-sublinks a {
  font-family: inherit;
  text-decoration: none;
  color: rgba(245, 240, 230, 0.7);
  transition: all var(--transition-fast, 200ms ease);
}
.footer .footer-sublinks a:hover {
  color: var(--accent-color, #D4AF37);
  padding-left: var(--spacing-sm, 8px);
}

/* 即将上线（不可点）项 + 「即将上线」金色徽标 —— 独立文件自带，避免只剩纯文字 */
.footer .footer-link-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-decoration: none;
  color: rgba(245, 240, 230, 0.7);
  cursor: default;
  font-size: 0.9rem;
  line-height: 1.5;
}
.footer .coming-badge {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.1);
  color: var(--accent-color, #D4AF37);
  white-space: nowrap;
}
.footer .footer-link-soon .coming-badge {
  margin-left: 2px;
  padding: 1px 6px;
  font-size: 0.58rem;
}

/* ---------- 4) 版权行（第二条金线所在） ---------- */
.footer .footer-bottom {
  text-align: center;
  padding-top: var(--spacing-xl, 2rem);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  color: rgba(245, 240, 230, 0.5);
  font-size: var(--text-sm, 0.875rem);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif);
}
.footer .footer-bottom p {
  margin: 0;
  font-family: inherit;
  color: inherit;
}
.footer .footer-legal-links {
  margin-top: var(--spacing-sm, 8px);
  font-size: var(--text-sm, 0.875rem);
}
.footer .footer-legal-links a {
  font-family: inherit;
  text-decoration: none;
  color: rgba(245, 240, 230, 0.5);
  transition: all var(--transition-fast, 200ms ease);
}
.footer .footer-legal-links a:hover { color: var(--accent-color, #D4AF37); }

/* ---------- 5) 兼容：精简页脚（无 .footer-content 的页面，如 almanac） ----------
   把裸版权 <p> 也做成「上方金线 + 居中 + 灰字」，
   使这类页面的金线数量与位置与首页一致（工具区金线 + 版权金线）。
   兼容 .footer 直接子 p、以及容器直接子 p（排除 .footer-bottom 内的 p）。 */
.footer > p,
.footer .container > p,
.footer .footer-inner > p {
  text-align: center;
  color: rgba(245, 240, 230, 0.5);
  font-size: var(--text-sm, 0.875rem);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  font-family: inherit;
}
.footer > p a,
.footer .container > p a,
.footer .footer-inner > p a {
  font-family: inherit;
  text-decoration: none;
  color: rgba(245, 240, 230, 0.5);
}
.footer > p a:hover,
.footer .container > p a:hover,
.footer .footer-inner > p a:hover { color: var(--accent-color, #D4AF37); }

/* ---------- 6) 分栏断点（与首页 styles.min.css 保持一致） ---------- */
@media (max-width: 1024px) {
  .footer .footer-content { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-2xl, 3rem); }
}
@media (max-width: 768px) {
  .footer .footer-content { grid-template-columns: 1fr; text-align: center; gap: var(--spacing-xl, 2rem); }
  .footer .footer-tool-groups { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer .footer-tools-row { margin-top: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* ---------- 7) 深色主题兜底（关键） ----------
   部分工具页（soulmate / almanac / favorable-element / five-elements-test 等）
   是「深底页」，其 --text-muted 是深色值(#6B6560)，若直接用于深色页脚会不可读。
   这里强制页脚内文字只用浅色（最高优先级用 :where() 之外的选择器确保覆盖），
   且页脚背景固定为深棕(与首页一致)，不跟随页面的 --bg-dark(近乎纯黑)。 */
.footer {
  background: #1A1612 !important;
}
.footer,
.footer .footer-brand p,
.footer .footer-links li,
.footer .footer-links a,
.footer .footer-sublinks li,
.footer .footer-sublinks a,
.footer .footer-link-soon,
.footer .footer-group-title {
  color: rgba(245, 240, 230, 0.7);
}
.footer .footer-title { color: #D4AF37; }
.footer .footer-group-title { color: #D4AF37; }
.footer .footer-link-soon .coming-badge,
.footer .coming-badge { color: #D4AF37; }
.footer .footer-bottom,
.footer .footer-bottom p,
.footer .footer-legal-links a,
.footer .footer-legal-links span,
.footer > p,
.footer .container > p,
.footer .footer-inner > p,
.footer > p a,
.footer .container > p a,
.footer .footer-inner > p a {
  color: rgba(245, 240, 230, 0.5);
}
.footer .footer-links a:hover,
.footer .footer-sublinks a:hover,
.footer .footer-bottom a:hover,
.footer .footer-legal-links a:hover,
.footer > p a:hover,
.footer .container > p a:hover,
.footer .footer-inner > p a:hover { color: #D4AF37; }