/* =====  Joke Card  ===== */
.sbj-card{
  max-width: 640px;
  margin: 1.5rem auto;
  padding: 1.25rem 1.75rem;
  border: 2px solid #e3493b;        /* brand accent */
  border-radius: 10px;
  background:#fffaf7;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-family: system-ui, sans-serif;
}

.sbj-head h2{
  margin:0 0 .75rem;
  font-size:1.25rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#e3493b;
}

.sbj-body{
  font-size:1.05rem;
  line-height:1.55;
}

/* =====  Archive  ===== */
.sbj-archive{
  max-width:760px;
  margin:2rem auto;
}

.sbj-archive-item{
  margin-bottom:2rem;
  padding-bottom:1.5rem;
  border-bottom:1px dashed #ddd;
}

.sbj-archive-item h3{
  margin:.25rem 0;
  font-size:1.15rem;
  color:#222;
}

.sbj-date{
  font-size:.9rem;
  color:#777;
  margin-bottom:.75rem;
}

/* ===== Pagination ===== */
.page-numbers{
  display:inline-block;
  margin:0 .25rem;
  padding:.4rem .7rem;
  border:1px solid #e3493b;
  border-radius:4px;
  text-decoration:none;
}
.page-numbers.current,
.page-numbers:hover{
  background:#e3493b;
  color:#fff;
}
/*----*/
/* === Rant‑Wall‑style list for joke archive === */
.sbj-rant-list{
  list-style-type: disc;    /* classic bullet */
  margin: 1rem 0 2rem 1.3rem;
  padding: 0;
}

.sbj-rant-item{
  margin-bottom: 1.4rem;
  line-height: 1.55;
  font-size: 1.05rem;
}

.sbj-rant-text{
  font-weight: 500;
}

.sbj-rant-meta{
  font-style: italic;
  color:#666;
}
/*-----*/
/* Space between jokes */
.sbj-rant-item{
  margin-bottom: 1.5rem;      /* vertical gap */
  line-height: 1.55;
  font-size: 1.05rem;
}

/* Put the date on its own line & soften it */
.sbj-rant-meta{
  display: block;             /* forces line break */
  margin-top: .30rem;
  font-style: italic;
  color: #666;
}
/*-----*/
/* =========================================================
   POLISHED PAGINATION — no dots, centred, brand accent
   ========================================================= */
.sbj-pagination{                /* wrapper we added in PHP */
  margin: 2.5rem 0 0;
  display: flex;
  justify-content: center;
}

.sbj-pagination ul.page-numbers{
  list-style: none !important;  /* kill bullets */
  padding: 0;
  margin: 0;
  display: flex;
  gap: .45rem;
}

.sbj-pagination ul.page-numbers li{
  list-style: none !important;  /* double‑tap for themes that add dots via li */
  margin: 0;
}

/* generic fallback if some other area prints <ul class="page-numbers"> without the wrapper */
ul.page-numbers{
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .45rem;
}

/* buttons */
a.page-numbers,
span.page-numbers{
  display: inline-block;
  min-width: 42px;
  padding: .42rem .9rem;
  border: 1px solid #e3493b;
  border-radius: 4px;
  font-size: .95rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: #222;
  transition: background .15s ease, color .15s ease;
}

a.page-numbers:hover{
  background: #e3493b;
  color:#fff;
}

/* current page */
span.page-numbers.current{
  background: #e3493b;
  color: #fff;
  cursor: default;
}

/* optional: shrink « Prev / Next » arrows a bit
   remove if you like full‑size */
a.page-numbers.prev, 
a.page-numbers.next{
  min-width: auto;
  padding: .42rem .75rem;
}
/* Kill the unwanted red frame around the whole pagination block */
.sbj-pagination ul.page-numbers{
  border: none !important;
}