/* 主题色（方案一：木生火） */
:root{
  --brand:#0F766E;         /* 主色 */
  --brand-hover:#0A5C55;   /* 悬停 */
  --accent:#E23D28;        /* 强调 */
  --bg:#F5F7FA;            /* 背景 */
  --text:#0B1220;          /* 正文 */
  --muted:#666;            /* 次要文字 */
  --neutral:#CBD5E1;       /* 边框/弱色 */
  --white:#FFFFFF;         /* 纯白 */
}

/* 基础 */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size: 18px; /* 默认 16px，改成 18px 整体文字变大 */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-hover); }

.container{ max-width:1100px; margin:0 auto; padding:24px; }

/* 头部导航 */
.site-header{ background:var(--white); border-bottom:1px solid #eaeaea; }
.nav{
  max-width:960px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ font-weight:700; color:var(--brand); }
.nav-links a{ margin-left:16px; color:var(--text); }
.nav-links a:hover{ color:var(--brand); }

/* 顶部区块 */
.hero{ padding:48px 0; }
.hero h1{ margin:0 0 8px; font-size:2.2rem; color:var(--brand); }
.hero p{ margin:0 0 16px; color:var(--muted); }

/* 按钮 */
.btn{
  display:inline-block; padding:10px 16px; border-radius:8px;
  background:var(--brand); color:var(--white);
}
.btn:hover{ background:var(--accent); }

/* 卡片 */
.card{
  background:var(--white);
  border:1px solid var(--neutral);
  border-radius:12px;
  padding:16px;
}
.card h3{ margin:0 0 8px; }
.card p{ margin:0 0 12px; color:var(--muted); }

/* 两栏通用（首页与关于页共用） */
.content-wrapper{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:nowrap;              /* 不换行，右栏不被挤到下一行 */
}

/* 左栏（首页用 .articles，关于/文章页用 .main-content） */
.articles,
.main-content{
  flex:1 1 0;                    /* 可增长可收缩 */
  min-width:0;                   /* 允许收缩，否则会把右栏挤瘪 */
  overflow-wrap:anywhere;        /* 长英文/URL 断词 */
  word-break:break-word;
}

/* 右栏 */
.sidebar{
  flex:0 0 260px;                /* 固定基础宽度，可按需改 240-320 */
  max-width:320px;
  background:var(--white);
  border:1px solid var(--neutral);
  border-radius:8px;
  padding:16px;
  position:sticky;
  top:16px;
}
.sidebar h3{ margin-top:0; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ margin-bottom:8px; }
.sidebar a:hover{ text-decoration:underline; }

/* 页脚：背景全宽，内容居中变窄 */
.site-footer{
  width:100%;
  border-top:1px solid #eaeaea;
  background:var(--white);
  padding:16px 0;
  text-align:center;
  margin:0;
}
.site-footer .container{
  max-width:600px;
  margin:0 auto;
  padding:0 16px;
}

/* 日期样式与紧凑 hero */
.post-date{
  font-size:0.9rem;
  color:var(--muted);
  margin-top:-8px;               /* 更靠近上方文案 */
}
.hero.with-date{ padding-bottom:24px; }
.hero.with-date p{ margin-bottom:8px; }
.hero .post-date{ margin:0; }

/* 响应式 */
@media (max-width:900px){
  .content-wrapper{ flex-direction:column; }
  .sidebar{
    position:static;
    order:-1;                    /* 想放下方就删掉这行 */
    flex:initial;
    max-width:none;
  }
}
@media (max-width:600px){
  .container{ padding:16px; }
}

/* 社交媒体按钮 */
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-social {
  padding: 8px 14px;
  border-radius: 6px;
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.3s;
}

/* 放在 .btn-social 里，或紧接其后 */
.btn-social {
  display: inline-block;          /* 让内边距/背景更稳定 */
  font-weight: 500;
  color: #fff;                    /* 覆盖默认链接色 */
}

/* 如果担心被前面的 a{ color: var(--brand) } 抢走，
   可加一条更具体的选择器（通常不需要）： */
.social-links .btn-social { color: #fff; }


.btn-social:hover {
  opacity: 0.85;
}

/* 平台颜色 */
.btn-social.redbook { background: #ff2442; } /* 小红书 */
.btn-social.threads { background: #000000; } /* Threads */
.btn-social.email { background: #0F766E; } /* 邮箱（用主题色） */



/* 评论区域外层容器：让内盒水平居中 */
#comments {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 评论内盒：控制整体“宽度”与外观 */
#comments .comments-box {
  width: 100%;
  max-width: 900px;      /* 想更窄改 720/780 等 */
  border: 1px solid var(--neutral);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  padding: 8px;
}

/* giscus 容器本身，去掉多余外边距 */
#comments .giscus {
  margin: 0;
}

/* 只在这里控制“高度”和“宽度填满” */
/* 让 giscus 自动调整高度：只管宽度，给个最小高度兜底 */
#comments iframe.giscus-frame {
  display: block;
  width: 100% !important;
  border: 0;
  height: auto;          /* 不要固定高度 */
  min-height: 520px;     /* 兜底高度：可改 500~560 之间 */
}

/* 小屏也不要再强制高度 */
@media (max-width: 600px) {
  #comments .comments-box { max-width: 100%; padding: 6px; }
  #comments iframe.giscus-frame {
    height: auto;
    min-height: 480px;
  }
}