/* 站点页脚：覆盖父主题 Twenty Twenty-Four 的 parts/footer.html 所引用的
   pattern「twentytwentyfour/footer」。
   原 pattern 末尾硬编码了「Designed with WordPress」署名行，无任何设置可关闭；
   且三列链接（Team / History / Careers / Privacy Policy / Terms and Conditions /
   Contact Us / Facebook / Instagram / Twitter/X）全是 url="#" 的占位死链。
   故整段替换为：品牌标识 + 社交主页 + 真实课程链接 + 版权行。
   配色不再硬编码：全部走 tokens.css 的 --ht-* 变量（页面底 surface、正文 ink、次要文字 muted）。

   无障碍：站内链接行高统一 44px（Google 移动端可用性指引 44–48px），
   社交图标为 44×44 圆形点击区，均带 :focus-visible 描边。 */

/* 原本这里有一条 border-top 细线。其上方是砖红色 CTA 带，砖红→白色的强对比
   已经把边界表达得很清楚，再叠一条浅灰线属冗余，故移除。 */
.ht-footer {
  margin-top: 0;
  background: var(--ht-surface);
  border-top: 0;
}
/* 兜底：页脚是 block 部件，外层由 WP 渲染成 .wp-block-template-part 包裹层。
   若父主题 Twenty Twenty-Four 给这层补了顶部线，上面的规则够不到它，线就会残留。
   这里只清「直接包含本页脚」的那层，不动页脚内部版权条的分隔线。
   :has() 在旧浏览器中被忽略（线仍在，但不会误伤其他容器），属渐进增强。 */
.wp-block-template-part:has(> .ht-footer) { border-top: 0; }
.ht-footer-inner {
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  padding: var(--ht-s-7) 0 var(--ht-s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ht-s-6);
  justify-content: space-between;
  align-items: flex-start;
}

/* 左：品牌 + 一句话定位 + 社交主页（沿用顶部导航的「龙」字标识） */
.ht-footer-brand { flex: 1 1 300px; min-width: 0; }
.ht-footer-brandlink {
  display: inline-flex; align-items: center; gap: var(--ht-s-3);
  min-height: var(--ht-tap);
  text-decoration: none; color: var(--ht-ink);
}
.ht-footer-brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ht-footer-cn { font-size: var(--ht-fs-md); font-weight: 500; letter-spacing: .01em; }
.ht-footer-en {
  font-size: var(--ht-fs-xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ht-muted); margin-top: var(--ht-s-1);
}
.ht-footer-tag { margin: var(--ht-s-1) 0 0; font-size: var(--ht-fs-sm); line-height: 1.6; color: var(--ht-muted); }

/* 社交主页：44×44 圆形点击区，图标 + 平台名 */
.ht-social {
  list-style: none; margin: var(--ht-s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ht-s-2);
}
.ht-social-link {
  display: inline-flex; align-items: center; gap: var(--ht-s-2);
  min-height: var(--ht-tap); padding: 0 var(--ht-s-4);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-r-pill);
  font-size: var(--ht-fs-sm); font-weight: 500;
  color: var(--ht-muted); text-decoration: none;
  transition: color .18s, border-color .18s, background-color .18s, transform .18s;
}
.ht-social-link svg { flex: 0 0 auto; }
.ht-social-link:hover, .ht-social-link:focus-visible {
  color: var(--ht-brand);
  border-color: rgba(184, 68, 46, .45);
  background: rgba(184, 68, 46, .05);
  transform: translateY(-1px);
}
.ht-social-link:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }

/* 右：三组真实链接（只放确实存在的页面/锚点，不用占位符） */
.ht-footer-nav { display: flex; flex-wrap: wrap; gap: var(--ht-s-7); flex: 0 1 auto; }
.ht-footer-col { display: flex; flex-direction: column; gap: 0; min-width: 120px; }
.ht-footer-h {
  margin: 0 0 var(--ht-s-1);
  min-height: var(--ht-tap); display: flex; align-items: center;
  font-size: var(--ht-fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ht-ink);
}
.ht-footer-col a {
  display: flex; align-items: center;
  min-height: var(--ht-tap);                 /* 触摸目标：Google 建议 ≥44px */
  font-size: var(--ht-fs-sm); color: var(--ht-muted); text-decoration: none;
  transition: color .18s;
}
.ht-footer-col a:hover, .ht-footer-col a:focus-visible { color: var(--ht-brand); }
.ht-footer-col a:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; border-radius: var(--ht-r-sm); }

/* 邮件订阅（欧美 SaaS 页脚标配的 lead magnet）。
   flex: 1 1 100% 让它独占一行、落在品牌区与链接列下方。 */
.ht-subscribe {
  flex: 1 1 100%;
  margin: var(--ht-s-1) 0 0; padding-top: var(--ht-s-5);
  border-top: 1px solid var(--ht-line);
}
.ht-subscribe-label {
  display: block; margin-bottom: var(--ht-s-2);
  font-size: var(--ht-fs-sm); font-weight: 600; color: var(--ht-ink);
}
/* align-items: stretch 是默认值，但显式写出来：一旦父主题或后续规则把它改成 flex-start，
   按钮就会与输入框顶对齐而不再等高 —— 那个错位很难从代码上看出原因。 */
.ht-subscribe-row {
  display: flex; align-items: stretch;
  gap: var(--ht-s-2); flex-wrap: wrap; max-width: 520px;
}
.ht-subscribe-row input[type="email"] {
  flex: 1 1 240px;
  /* height 固定而非只写 min-height：min-height 只保下限，父主题给 input 的 line-height /
     padding 一旦更大，输入框就会比按钮高一截 → 视觉错位。两者都锁死 44px 才必然等高。 */
  height: var(--ht-tap); min-height: var(--ht-tap);
  box-sizing: border-box; line-height: 1;
  padding: 0 var(--ht-s-4);
  /* 圆角跟随按钮（12px）：输入框与订阅按钮并排，一个胶囊一个圆角矩形会明显不协调 */
  border: 1px solid var(--ht-line-strong); border-radius: var(--ht-r-btn);
  background: var(--ht-surface); color: var(--ht-ink); font-size: var(--ht-fs-sm);
}
.ht-subscribe-row input[type="email"]:focus-visible {
  outline: 2px solid var(--ht-brand); outline-offset: 1px; border-color: var(--ht-brand);
}
.ht-subscribe-btn {
  flex: none;
  height: var(--ht-tap); min-height: var(--ht-tap);
  box-sizing: border-box; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--ht-s-5);
  /* v1.7.0 修正：上一轮误把这里当成深墨底，改成了米白反白按钮（--ht-btn-invert-bg）。
     但页脚底色是 --ht-surface(#fff)，米白 #f7f2ea 落在白底上对比仅 1.06 ——
     按钮几乎融进背景，只剩阴影勾边。页脚是白底，实心品牌红 vs 白 = 4.83，正常。
     反白按钮只保留给真正的深底：Hero 与主推定价卡。 */
  border: 1px solid var(--ht-brand); border-radius: var(--ht-r-btn);
  background: var(--ht-brand); color: var(--ht-on-brand);
  font-size: var(--ht-fs-sm); font-weight: var(--ht-fw-btn); cursor: pointer;
  box-shadow: var(--ht-sh-btn);
  transition: background .18s var(--ht-ease), transform .18s var(--ht-ease), box-shadow .18s var(--ht-ease);
}
.ht-subscribe-btn:hover { background: var(--ht-brand-dark); transform: translateY(-1px); box-shadow: var(--ht-sh-btn-hover); }
.ht-subscribe-btn:active { transform: translateY(0); box-shadow: var(--ht-sh-btn-active); }
.ht-subscribe-btn:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
.ht-subscribe-note { margin: var(--ht-s-2) 0 0; font-size: var(--ht-fs-xs); color: var(--ht-muted); }
.ht-subscribe-note a { color: var(--ht-muted); text-decoration: underline; }
.ht-subscribe-note a:hover { color: var(--ht-brand); }
.ht-subscribe-msg { margin: var(--ht-s-3) 0 0; font-size: var(--ht-fs-xs); font-weight: 600; color: var(--ht-success); }
.ht-subscribe-msg[hidden] { display: none; }

/* 版权条。
   此前 .ht-footer-bar / .ht-footer-barinner 在 CSS 里连一条规则都没有 ——
   该块位于 .ht-footer-inner 之外，拿不到后者的 max-width 居中容器，
   于是内容直接贴到 .ht-footer 的左边缘（窄屏下「©」被裁掉），
   且与上方内容之间没有任何分隔。这里补上与 .ht-footer-inner 一致的居中容器。 */
.ht-footer-bar { border-top: 1px solid var(--ht-line); }
.ht-footer-barinner {
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  padding: var(--ht-s-5) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--ht-s-2) var(--ht-s-5);
  font-size: var(--ht-fs-xs); color: var(--ht-muted);
}
.ht-footer-barinner a {
  /* 触摸目标 44px：页脚其余站内链接统一为这个值，版权条里的 Log in 不能例外 */
  display: inline-flex; align-items: center; min-height: var(--ht-tap);
  color: var(--ht-muted); text-decoration: none;
}
.ht-footer-barinner a:hover { color: var(--ht-brand); text-decoration: underline; }
.ht-footer-barinner a:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
/* honeypot：移出视口但保留在 DOM 中（display:none 反而会被部分机器人跳过） */
.ht-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cookie 告知条（仅必要 cookie → 只需告知，不做接受/拒绝假选择）。
   无 JS 时元素保持 hidden，不遮挡内容。 */
.ht-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--ht-surface);
  border-top: 1px solid var(--ht-line);
  box-shadow: var(--ht-sh-up);
}
.ht-cookie[hidden] { display: none; }
.ht-cookie-inner {
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  padding: var(--ht-s-3) 0;
  display: flex; align-items: center; gap: var(--ht-s-4); flex-wrap: wrap;
}
.ht-cookie-text {
  margin: 0; flex: 1 1 320px;
  font-size: var(--ht-fs-sm); line-height: 1.5; color: var(--ht-ink-2);
}
.ht-cookie-text a { color: var(--ht-brand); text-decoration: underline; }
.ht-cookie-btn {
  /* 40px -> 44px：与页脚其余可点元素统一触摸目标（Google 44–48px 指引） */
  flex: none; min-height: var(--ht-tap); padding: 0 var(--ht-s-4);
  border: 1px solid var(--ht-brand); border-radius: var(--ht-r-btn);
  background: var(--ht-brand); color: var(--ht-on-brand);
  font-size: var(--ht-fs-sm); font-weight: var(--ht-fw-btn); cursor: pointer;
  box-shadow: var(--ht-sh-btn);
  transition: background .18s var(--ht-ease), transform .18s var(--ht-ease), box-shadow .18s var(--ht-ease);
}
.ht-cookie-btn:hover { background: var(--ht-brand-dark); transform: translateY(-1px); box-shadow: var(--ht-sh-btn-hover); }
.ht-cookie-btn:active { transform: translateY(0); box-shadow: var(--ht-sh-btn-active); }
.ht-cookie-btn:focus-visible { outline: 2px solid var(--ht-brand); outline-offset: 2px; }
@media (max-width: 480px) {
  /* 版权条：窄屏改为上下堆叠，避免 © 与 Log in 挤在一行 */
  .ht-footer-barinner { flex-direction: column; align-items: flex-start; gap: var(--ht-s-1); }
  .ht-cookie-inner { gap: var(--ht-s-3); }
  .ht-cookie-btn { width: 100%; }
  .ht-footer-inner { padding: var(--ht-s-6) 0 var(--ht-s-6); gap: var(--ht-s-6); }
  .ht-footer-nav { gap: var(--ht-s-6); }
  .ht-social { margin-top: var(--ht-s-4); }
}