/* single.css — หน้าบทความเดี่ยว (โทนมืดเข้าธีม) */

body.single-page {
  background: linear-gradient(160deg, var(--hero-bg) 0%, var(--hero-bg2) 55%, var(--hero-bg) 100%);
  min-height: 100vh;
}

#article-outer {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) 24px 100px;
}

.art-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hero-muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.art-breadcrumb a { color: var(--hero-muted); transition: color 0.15s; }
.art-breadcrumb a:hover { color: var(--primary); }
.art-breadcrumb .sep { color: var(--hero-border); }

.art-cat-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 18px;
}

.art-title {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--hero-text);
  margin-bottom: 18px;
}

.art-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.82rem;
  color: var(--hero-muted);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hero-border);
  margin-bottom: 36px;
  flex-wrap: wrap;
}

/* ── Article content typography ── */
.art-body { font-size: 1rem; color: var(--hero-muted); line-height: 1.9; }

.art-body h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--hero-text);
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hero-border);
}
.art-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--hero-text); margin: 30px 0 10px; }
.art-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--hero-muted); margin: 22px 0 8px; }

.art-body p { margin-bottom: 18px; }
.art-body ul, .art-body ol { margin: 0 0 18px 22px; }
.art-body li { margin-bottom: 6px; }

.art-body a { color: var(--primary); border-bottom: 1px solid rgba(251,191,36,0.35); transition: border-color 0.15s; }
.art-body a:hover { border-color: var(--primary); }
.art-body strong { color: var(--hero-text); font-weight: 700; }
.art-body em { color: var(--hero-muted); font-style: italic; }

.art-body blockquote {
  margin: 24px 0; padding: 16px 20px;
  border-left: 3px solid var(--primary);
  background: rgba(255,255,255,0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--hero-muted);
}

.art-body code {
  font-family: var(--mono); font-size: 0.9em;
  background: rgba(255,255,255,0.08);
  color: var(--primary);
  padding: 2px 7px; border-radius: 6px;
}
.art-body pre {
  background: rgba(0,0,0,0.5); border: 1px solid var(--hero-border);
  border-radius: var(--radius-sm);
  padding: 18px 20px; overflow-x: auto; margin: 20px 0;
}
.art-body pre code { background: none; padding: 0; color: var(--hero-text); font-size: 0.9rem; }

.art-body img { border-radius: var(--radius); margin: 24px 0; max-width: 100%; }

.art-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; }
.art-body th {
  background: rgba(255,255,255,0.06); color: var(--hero-text);
  font-size: 0.8rem; font-weight: 700;
  padding: 10px 14px; border-bottom: 1px solid var(--hero-border); text-align: left;
}
.art-body td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--hero-muted); }
.art-body tr:last-child td { border-bottom: none; }
.art-body hr { border: none; border-top: 1px solid var(--hero-border); margin: 36px 0; }

/* ── Article footer ── */
.art-foot {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--hero-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.art-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.92rem; font-weight: 600; color: var(--hero-muted);
  padding: 9px 22px; border: 1.5px solid var(--hero-border);
  border-radius: 999px; transition: 0.15s;
}
.art-back:hover { color: var(--hero-text); border-color: var(--primary); }