/* =========================================================
   MandarinMiles · 站点页脚（后台可配置）
   ---------------------------------------------------------
   作用域：#footer.mm-sf。
   配色全部走 CSS 变量，由后台「Footer Settings → 外观」驱动：
     · --mm-sf-bg / --mm-sf-accent  ← 后台直接配置
     · 文字色 / 边框 / 浮层色      ← 随「配色模式（深色 / 浅色）」整套切换
   布局：品牌区 + N 组链接列（--sfc 由 PHP 内联），底栏在法律链接上方。
   ========================================================= */

.mm-sf {
  /* —— 深色（默认）—— */
  --mm-sf-bg-user: #152340;      /* 后台配置值（PHP 内联覆盖） */
  --mm-sf-accent-user: #1166F0;
  --mm-sf-bg: var(--mm-sf-bg-user);
  --mm-sf-accent: var(--mm-sf-accent-user);
  --mm-sf-fg: rgba(255, 255, 255, .66);
  --mm-sf-fg-strong: #fff;
  --mm-sf-fg-dim: rgba(255, 255, 255, .48);
  --mm-sf-line: rgba(255, 255, 255, .11);
  --mm-sf-surface: rgba(255, 255, 255, .06);
  --mm-sf-surface-strong: rgba(255, 255, 255, .12);
  --mm-sf-ring: rgba(255, 255, 255, .16);
  --mm-sf-shadow: 0 4px 14px rgba(0, 0, 0, .22);

  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mm-sf-line);
  background: var(--mm-sf-bg);
  color: var(--mm-sf-fg);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* —— 浅色页脚（后台「配色模式 = 浅色」时由 PHP 加此类）——
   与首页 V2 的浅底系统一致：墨色文字 + 品牌蓝强调 + 淡蓝分隔线。 */
.mm-sf.mm-sf--light {
  --mm-sf-bg: var(--mm-sf-bg-user, #F7F9FD);
  --mm-sf-accent: var(--mm-sf-accent-user, #1166F0);
  --mm-sf-fg: rgba(20, 26, 46, .68);
  --mm-sf-fg-strong: #141A2E;
  --mm-sf-fg-dim: rgba(20, 26, 46, .52);
  --mm-sf-line: rgba(17, 102, 240, .14);
  --mm-sf-surface: rgba(17, 102, 240, .06);
  --mm-sf-surface-strong: rgba(17, 102, 240, .12);
  --mm-sf-ring: rgba(17, 102, 240, .18);
  --mm-sf-shadow: 0 4px 14px rgba(31, 42, 68, .12);
}

/* 暗色主题下浅色页脚**整块**回退深底（背景 + 文字一起换）。
   注意：PHP 内联的 --mm-sf-bg / --mm-sf-accent 是「用户配置值」，
   自定义属性的内联值优先级高于样式表，无法被这里覆盖，
   故 PHP 改为内联 --mm-sf-bg-user / --mm-sf-accent-user，
   由下面的规则派生实际生效值。 */
:root[data-theme="dark"] .mm-sf.mm-sf--light {
  --mm-sf-bg: #0C1426;
  --mm-sf-accent: var(--mm-sf-accent-user, #5B97F9);
  --mm-sf-fg: rgba(255, 255, 255, .66);
  --mm-sf-fg-strong: #fff;
  --mm-sf-fg-dim: rgba(255, 255, 255, .48);
  --mm-sf-line: rgba(255, 255, 255, .11);
  --mm-sf-surface: rgba(255, 255, 255, .06);
  --mm-sf-surface-strong: rgba(255, 255, 255, .12);
  --mm-sf-ring: rgba(255, 255, 255, .16);
  --mm-sf-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.mm-sf a {
  color: var(--mm-sf-fg);
  text-decoration: none;
  transition: color .16s ease, opacity .16s ease;
}
.mm-sf a:hover,
.mm-sf a:focus-visible {
  color: var(--mm-sf-fg-strong);
}
.mm-sf a:focus-visible {
  outline: 2px solid var(--mm-sf-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.mm-sf-inner {
  max-width: var(--maxw, 1290px);
  margin: 0 auto;
  padding: 56px 24px 24px;
}

/* ---------- 栅格 ---------- */
.mm-sf-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(var(--sfc, 3), minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}
/* 品牌区置顶：整行占满，链接列在下方平铺 */
.mm-sf--top .mm-sf-grid {
  grid-template-columns: repeat(var(--sfc, 3), minmax(0, 1fr));
  gap: 34px 32px;
}
.mm-sf--top .mm-sf-brand {
  grid-column: 1 / -1;
}

/* ---------- 品牌区 ---------- */
.mm-sf-brand .mm-sf-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--mm-sf-fg-strong);
}
.mm-sf-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--mm-sf-ring), var(--mm-sf-shadow);
}
.mm-sf-name {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--mm-sf-fg-strong);
}
.mm-sf-tag {
  margin: 14px 0 0;
  max-width: 300px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--mm-sf-fg);
  white-space: normal;
}
/* 品牌区置顶时副文案可用整行宽度 */
.mm-sf--top .mm-sf-tag {
  max-width: 540px;
}

/* ---------- 链接列 ---------- */
.mm-sf-col h5 {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-sf-fg-strong);
}
.mm-sf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.mm-sf-col li {
  margin: 0;
}
.mm-sf-col li > a {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
}
.mm-sf-col li > a:hover {
  transform: translateX(2px);
}
.mm-sf-ico {
  display: inline-block;
  margin-right: 7px;
  font-size: 13px;
  line-height: 1;
  opacity: .9;
  transform: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}

/* ---------- 底栏 ---------- */
.mm-sf-bottom {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-sf-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  font-size: 12.5px;
  color: var(--mm-sf-fg-dim);
}
.mm-sf-copy {
  margin: 0;
  color: var(--mm-sf-fg-dim);
}
.mm-sf-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.mm-sf-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.mm-sf-links a {
  color: var(--mm-sf-fg-dim);
  font-size: 12.5px;
}
.mm-sf-links a:hover {
  color: var(--mm-sf-fg-strong);
}

/* 底栏简繁切换：把头部的大号图标按钮压成页脚尺寸 */
.mm-sf-script .mm-theme-toggle--icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border-width: 1px;
  border-color: var(--mm-sf-line);
  background: var(--mm-sf-surface);
  color: var(--mm-sf-fg);
  font-size: 12px;
}
.mm-sf-script .mm-theme-toggle--icon .ico {
  font-size: 12px;
}
.mm-sf-script .mm-theme-toggle--icon:hover {
  border-color: var(--mm-sf-accent);
  background: var(--mm-sf-surface-strong);
  color: var(--mm-sf-fg-strong);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1040px) {
  .mm-sf-grid,
  .mm-sf--top .mm-sf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 22px;
  }
  .mm-sf-brand {
    grid-column: 1 / -1;
  }
  .mm-sf-brand .mm-sf-tag {
    max-width: 460px;
  }
}
@media (max-width: 760px) {
  .mm-sf-inner {
    padding: 40px 20px 20px;
  }
  .mm-sf-grid,
  .mm-sf--top .mm-sf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .mm-sf-bottom {
    margin-top: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
@media (max-width: 420px) {
  .mm-sf-col li > a {
    font-size: 13px;
  }
  .mm-sf-meta {
    gap: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-sf a,
  .mm-sf-col li > a:hover {
    transition: none;
    transform: none;
  }
}