/* Topic hero */
.hero--topic{background:#3a3a3a;color:#fff;padding:48px 0;margin:0 0 20px}
.hero--topic .hero__title{font-size:44px;line-height:1.1;margin:0}
.hero--topic .hero__desc{opacity:.85;margin:8px 0 0}

/* Topic list cards */
.joke-card{box-shadow:0 1px 0 rgba(0,0,0,.06)}
.joke-card__head{margin-bottom:6px}
.joke-card__title{font-size:20px;margin:0}
.joke-card__title a{color:inherit}
.joke-card__preview{margin:10px 0 0}

/* Actions row (up/down/report) */
.joke-card__actions{
  display:flex;gap:18px;align-items:center;justify-content:flex-end;
  font-size:13px;color:#6b7280;margin-top:10px
}
.act{background:none;border:0;padding:0;cursor:pointer;color:#6b7280}
.act:hover{color:#111}

/* NSFW blur gate */
.joke-card__body{position:relative}
.joke-card__body.is-blurred{
  filter:blur(6px);user-select:none
}
.joke-card__body.is-blurred .nsfw-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(255,255,255,.8);backdrop-filter:saturate(120%) blur(1px);filter:none
}
.nsfw-overlay p{margin:0;font-size:16px;color:#111}
.btn{border:1px solid #ddd;border-radius:6px;padding:6px 10px;background:#fff;cursor:pointer}
.btn:hover{border-color:#ccc}

/* Page background like screenshot */
body{background:#efefef;color:#1f2937}

/* Cards: thin gray border + soft shadow */
.card{
  background:#fff;border:1px solid #dcdcdc;border-radius:4px;padding:14px 16px;
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}

/* Title look */
.joke-card__title{font-size:18px;line-height:1.3;margin:0 0 6px;font-weight:700}
.joke-card__title a{color:#111}

/* Preview paragraph */
.joke-card__preview{margin:6px 0 0}
.chip-readmore{
  display:inline-block;margin-left:8px;padding:3px 8px;font-size:12px;
  border:1px solid #cfcfcf;border-radius:4px;background:#f8f8f8;color:#374151;text-decoration:none
}
.chip-readmore:hover{background:#f3f3f3}

/* Actions row on the right */
.joke-card__actions{
  display:flex;gap:16px;justify-content:flex-end;align-items:center;
  margin-top:8px;padding-top:8px;border-top:1px solid #e6e6e6;font-size:12px;color:#6b7280
}
.act{display:inline-flex;gap:6px;align-items:center;background:transparent;border:0;padding:0;cursor:pointer;color:inherit}
.act:hover{color:#111}

/* Tiny monochrome icons using CSS only */
.ico{display:inline-block;width:12px;height:12px;position:relative}
.ico-up::before{content:"";border:6px solid transparent;border-bottom-color:currentColor;position:absolute;left:0;right:0;top:-1px;margin:auto;width:0;height:0}
.ico-down::before{content:"";border:6px solid transparent;border-top-color:currentColor;position:absolute;left:0;right:0;bottom:-1px;margin:auto;width:0;height:0}
.ico-flag::before{
  content:"";position:absolute;left:1px;top:1px;width:7px;height:6px;background:currentColor
}
.ico-flag::after{
  content:"";position:absolute;left:1px;bottom:0;width:1px;height:12px;background:currentColor
}

/* Topic hero bar (if using category.php or list template) */
.hero--topic{background:#4a4a4a;color:#fff;padding:42px 0;margin:0 0 16px}
.hero--topic .hero__title{font-size:40px;margin:0}

/* NSFW blur overlay centered between cards */
.joke-card__body{position:relative}
.joke-card__body.is-blurred{filter:blur(6px)}
.joke-card__body.is-blurred .nsfw-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(255,255,255,.85);filter:none
}
.btn{border:1px solid #d0d0d0;border-radius:4px;background:#fff;padding:6px 10px;cursor:pointer}
.btn:hover{border-color:#bdbdbd}