/*
  Footer layout — modelled on perplex's demo:
  multi-column row of columns, each with a small uppercase heading
  and a list of links beneath. Columns are equal-width via flex,
  collapse to single-column stack on mobile.
*/

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  max-width: 90rem;
  color: var(--c-text-medium);
}

/* ── Columns row ───────────────────────────────────────────── */
/* 永远横排：移动 / 桌面都是多列 grid。minmax 在窄屏上够紧，
   字也跟着主题的 vw 缩放，不会真的撑不下。 */
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem;
  align-items: start;
  width: 100%;
}

.site-footer__col {
  width: auto;
  max-width: none;
  min-width: 0;
}

@media screen and (min-width: 48em) {
  .site-footer__columns {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 2rem 3rem;
  }
}

.site-footer__col-title {
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-high, var(--c-text-normal));
}


/* ── Link lists (text + socials) ──────────────────────────── */
.site-footer__links,
.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links li,
.site-footer__socials li {
  margin: 0.4rem 0;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 2rem;
  transition: color 200ms;
}

.site-footer__link:hover,
.site-footer__link:focus {
  color: var(--c-frame-border-active);
}

.site-footer__link--placeholder {
  opacity: 0.4;
  cursor: not-allowed;
}

.site-footer__link--placeholder:hover {
  color: inherit;
}

.site-footer__socials .brand-icon,
.site-footer__socials svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  flex: 0 0 auto;
}


/* ── Copyright ────────────────────────────────────────────── */
.site-footer__copyright {
  margin: 1.5rem 0 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--c-text-low, var(--c-text-medium));
  text-align: center;
}


/* ── Brand-icon SVGs (used here + in share buttons) ───────── */
/* simple-icons ship without a fill attribute, so default to black
   and disappear in dark mode. Force currentColor. */
.brand-icon svg,
.brand-icon svg path {
  fill: currentColor;
}


/* ── Column-top image（栏目标题下方的图片，CMS 可上传） ───── */
.site-footer__col-image {
  margin: 0.5rem 0 1rem;
}

.site-footer__col-image img {
  display: block;
  max-width: 12rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Per-item image（每条目的 logo / 徽章，从 admin 媒体库挑选） ─── */
/* 与 perplex 原版 footer 的「Generated by Hugo logo」「Creative Commons logo」
   样式呼应:图片在前,文字在后(若 name 也填了);只填图片则只显示图片. */
.site-footer__link-img {
  display: inline-block;
  max-width: 5rem;
  max-height: 1.6rem;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.35em;
}

.site-footer__link-img:last-child {
  margin-right: 0;
}


/* ── 链接列表项目符号 (links / friends 类型) ────────────── */
/* perplex 全局 ul {list-style:none}，这里特意把 footer 的链接列恢复
   带 disc 项目符号，模仿 perplex 主题 demo footer 的视觉风格。 */
.site-footer__links {
  list-style: disc;
  padding-left: 1.4em;
}

.site-footer__links li {
  list-style-position: outside;
  padding: 0.15em 0;
}

.site-footer__links li::marker {
  color: var(--c-frame-text-low, currentColor);
}


/* ── 外链 ↗ 箭头（icon-link-ext 由 perplex 提供 fill 颜色） ── */
/* perplex 的 .icon-link-ext 默认就有颜色规则，但没自动加 ↗ 字符。
   这里用 ::after 给链接末尾追加箭头标记，跟 perplex demo 一致。 */
.site-footer__link.icon-link-ext::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.85em;
  vertical-align: 0.05em;
  color: var(--c-frame-text-link-ext, var(--c-frame-text-link, currentColor));
  text-decoration: none;
}


/* ── A11y helper ──────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}