/* integration.css — fit WordPress content into the NickThai design + the live
   stats / trending widgets. Loaded after skin.css. */

/* Centered, comfortably wide article column (avoids the narrow, left-hugging,
   "empty right side" look). All children share one left edge. */
.nt-content { max-width: 940px; margin: 0 auto; padding: 8px 0 10px; }
.nt-content > *:first-child { margin-top: 0; }
.nt-content > p:empty { display: none; }

.nt-content h2,
.nt-content h3,
.nt-content h4 { font-weight: 800; line-height: 1.25; margin: 44px 0 14px; letter-spacing: -.2px; }
.nt-content h2 { font-size: clamp(22px, 3vw, 28px); }
.nt-content h3 { font-size: clamp(17px, 2.2vw, 20px); }
.nt-content h4 { font-size: 17px; }

.nt-content p { color: var(--ink-soft); line-height: 1.75; margin: 0 0 15px; font-size: 15.5px; }

/* WordPress lists: tidy, consistent indent (kills the jagged in/out edge). */
.nt-content ul,
.nt-content ol { margin: 0 0 16px; padding-left: 1.3em; color: var(--ink-soft); }
.nt-content ul { list-style: disc; }
.nt-content ol { list-style: decimal; }
.nt-content li { margin: 6px 0; line-height: 1.65; }
.nt-content li strong { color: var(--ink); }

.nt-content figure { margin: 20px 0; }
.nt-content figure.aligncenter { margin-left: 0; text-align: left; }
.nt-content figure img { border-radius: 16px; }
.nt-content figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; }

.nt-content .namegrid,
.nt-content .weekly,
.nt-content .trending,
.nt-content .tagcloud { margin: 18px 0 10px; }

/* ---------------- live behavioural stats strip ---------------- */
.livestats { max-width: 940px; margin: 0 auto 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lstat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 17px 14px; text-align: center; }
.lstat .lv { font-size: clamp(21px, 3vw, 30px); font-weight: 800; color: var(--accent); letter-spacing: .2px; }
.lstat .lk { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.35; }
@media (max-width: 640px) { .livestats { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ---------------- trending ranked list ---------------- */
.trending { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.trend-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 12px 15px; text-decoration: none; transition: .15s; }
.trend-item:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 30, 70, .06); }
.tr-rank { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(120, 130, 160, .14); color: var(--muted); font-weight: 800; font-size: 13px; }
.trend-item:nth-child(1) .tr-rank,
.trend-item:nth-child(2) .tr-rank,
.trend-item:nth-child(3) .tr-rank { background: var(--accent); color: #fff; }
.tr-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.trend { font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.trend.up { color: #0a7d3c; background: #e6f7ed; }
.trend.down { color: #c0392b; background: #fdecea; }
.trend.flat, .trend.new { color: var(--muted); background: rgba(120, 130, 160, .14); }
@media (max-width: 640px) { .trending { grid-template-columns: 1fr; } }

/* ---------------- category name cards (boy/girl/topview/recent) ---------------- */
.nt-content .nt-namecards { margin: 18px 0 10px; }
.nt-namecards .rk { display: inline-flex; align-items: center; gap: 6px; white-space: normal; }
.nc-badge { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted);
  background: rgba(120, 130, 160, .14); padding: 1px 7px; border-radius: 999px; }

/* ---------------- slim hero for generic content pages ---------------- */
.hero-slim .hero-inner { padding-top: 26px; padding-bottom: 22px; }
.hero-slim .hero-title { margin: 8px 0 0; }
.nt-page .nt-content { padding-top: 14px; }

/* ---------------- page feedback buttons ---------------- */
.feedback { display: flex; flex-wrap: wrap; gap: 12px; }
.fb-btn { flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 15px 18px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; transition: .15s; }
.fb-btn:hover { transform: translateY(-1px); }
.fb-btn .n { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.fb-btn.useful.on { border-color: #0a7d3c; background: #e6f7ed; color: #0a7d3c; }
.fb-btn.improve.on { border-color: #c0392b; background: #fdecea; color: #c0392b; }
.fb-btn.useful.on .n, .fb-btn.improve.on .n { color: inherit; }

/* ---------------- nickname cards: show FULL nickname, large & clear ----------------
   Override the design's truncated single-row card: nickname goes big and wraps
   to full width; vote +/- moves below so it never steals nickname space. */
.namegrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.nameitem { flex-direction: column; align-items: stretch; gap: 9px; padding: 15px 14px 11px; }
.nameitem .nm {
  flex: none; width: 100%; padding: 0;
  font-size: 21px; line-height: 1.45;
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: break-word; overflow-wrap: anywhere; text-align: center;
}
.nameitem .vote { justify-content: center; }
.nameitem .vbtn { font-size: 12.5px; padding: 5px 12px; }

@media (max-width: 640px) {
  .namegrid { grid-template-columns: 1fr; gap: 10px; }
  .nameitem .nm { font-size: 23px; line-height: 1.5; }
  .nameitem { padding: 16px 14px 12px; }
}