/* ═══════════════════════════════════════════════════════════════════
   Sprasa Media CMS — Sidebar widgets (shared by every theme)

   Only the widgets added alongside the configurable sidebar live here.
   The older ones (.sidebar-widget shell, .most-viewed-list, .tag-cloud,
   .newsletter-widget, poll bars) are still styled by each theme, so a
   theme keeps its own look for them.

   Loaded before the theme stylesheet, so a theme can override anything.
   Colours come from the theme's own variables where possible.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ad slot ───────────────────────────────────────────────────── */
.sidebar-ad { margin-bottom: 24px; }
.sidebar-ad .ad-zone { margin: 0; }

/* The sticky rail follows the reader down the column. Clear of the stuck
   category bar, and only where there's height to scroll past — on a phone
   the sidebar sits under the article, where sticking achieves nothing. */
.sidebar-sticky-ad { margin-bottom: 24px; }
.sidebar-sticky-ad .ad-zone { margin: 0; }

@media (min-width: 992px) {
  .sidebar-sticky-ad { position: sticky; top: 72px; }
}

/* ── Category block in the sidebar ─────────────────────────────────
   The same block the homepage renders, collapsed to one column. Keeps
   the section header so the category's colour and icon still read. */
.cat-block-narrow { margin-bottom: 24px; }
.cat-block-narrow .section-header { margin-bottom: 10px; }
.cat-block-narrow .section-title { font-size: 15px; }
.cat-block-narrow .section-link { font-size: 11.5px; }

.cat-narrow-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.cat-narrow-item:first-child { padding-top: 0; }
.cat-narrow-item:last-child { border-bottom: none; padding-bottom: 0; }

.cat-narrow-thumb {
  flex-shrink: 0;
  width: 66px; height: 48px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.cat-narrow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cat-narrow-body { min-width: 0; flex: 1; }
.cat-narrow-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0 0 3px; }
.cat-narrow-title a { color: var(--text, #1e293b); text-decoration: none; }
.cat-narrow-title a:hover { color: var(--primary, #2563eb); }

/* The "list" style keeps its numbering — it reads well in a column. */
.cat-narrow-num {
  flex-shrink: 0;
  width: 22px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--border, #e2e8f0);
  -webkit-text-stroke: 1px var(--text-light, #94a3b8);
}
.cat-narrow.is-numbered .cat-narrow-item:nth-child(-n+3) .cat-narrow-num {
  color: var(--primary, #2563eb);
  -webkit-text-stroke: 0;
}

/* ── Categories ────────────────────────────────────────────────── */
.cat-widget-list { list-style: none; margin: 0; padding: 0; }
.cat-widget-list li { border-bottom: 1px solid var(--border-light, #f1f5f9); }
.cat-widget-list li:last-child { border-bottom: none; }

.cat-widget-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text, #1e293b);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.cat-widget-list a:hover { background: var(--border-light, #f1f5f9); color: var(--primary, #2563eb); }

.cat-widget-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-widget-name { flex: 1; min-width: 0; }
.cat-widget-count {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  background: var(--border-light, #f1f5f9);
  border-radius: 20px;
  padding: 1px 9px;
}

/* Sub-categories: indented, lighter, and no colour dot of their own. */
.cat-widget-list li.is-child a {
  padding-left: 32px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}
.cat-widget-list li.is-child a::before {
  content: '';
  width: 6px; height: 1px;
  background: var(--text-light, #94a3b8);
  flex-shrink: 0;
}

/* The category being read right now. */
.cat-widget-list li.is-current > a { background: var(--border-light, #f1f5f9); color: var(--primary, #2563eb); }
.cat-widget-list li.is-current > a .cat-widget-count { background: var(--primary, #2563eb); color: #fff; }

/* ── Latest News ───────────────────────────────────────────────── */
.sidebar-post-list { list-style: none; margin: 0; padding: 0; }
.sidebar-post-list li {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.sidebar-post-list li:last-child { border-bottom: none; }

.sidebar-post-list .spl-thumb {
  flex-shrink: 0;
  width: 62px; height: 46px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.sidebar-post-list .spl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sidebar-post-list .spl-body { min-width: 0; }
.sidebar-post-list .spl-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text, #1e293b);
  text-decoration: none;
}
.sidebar-post-list .spl-title:hover { color: var(--primary, #2563eb); }
.sidebar-post-list .spl-meta { font-size: 11px; color: var(--text-light, #94a3b8); margin-top: 3px; }

/* ── Recent Comments ───────────────────────────────────────────── */
.sidebar-comment-list { list-style: none; margin: 0; padding: 0; }
.sidebar-comment-list li {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.sidebar-comment-list li:last-child { border-bottom: none; }

.scl-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.scl-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.scl-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.scl-name { font-size: 12.5px; font-weight: 700; color: var(--text, #1e293b); }
.scl-time { font-size: 11px; color: var(--text-light, #94a3b8); margin-left: auto; flex-shrink: 0; }

.scl-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #64748b);
  margin: 0 0 5px;
}
.scl-on {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary, #2563eb);
  text-decoration: none;
}
.scl-on:hover { text-decoration: underline; }

/* ── About / text box ──────────────────────────────────────────── */
.sidebar-about-text { font-size: 13.5px; line-height: 1.65; color: var(--text-muted, #64748b); }
.sidebar-about-text a { color: var(--primary, #2563eb); }

/* ── Follow us ─────────────────────────────────────────────────── */
.sidebar-social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-social a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #1e293b);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.sidebar-social a i { font-size: 15px; color: var(--brand); }
.sidebar-social a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.sidebar-social a:hover i { color: #fff; }

@media (max-width: 400px) {
  .sidebar-social { grid-template-columns: 1fr; }
}