/* Additional overrides to better match the target site */
.tags-container{ position:relative; }
.tags-scroll{ display:flex; gap:6px; overflow:auto; white-space:nowrap; scrollbar-width:none; }
.tags-scroll::-webkit-scrollbar{ display:none; }
.tag-nav-button{ position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; background:var(--card-bg); color:#fff; }
.tag-nav-button.prev{ left:12px; }
.tag-nav-button.next{ right:12px; }
.hidden{ display:none; }

.search-results{ display:none; }
.search-results.active{ display:block; }

.box{ background: var(--card-bg); border: 1px solid var(--border); }

/* Typography */
.has-text-light{ color: var(--text-color) !important; }

/* Pagination (match target UI) */
.navigation.pagination{ display:flex; justify-content:center; margin: 24px 0; }
.navigation.pagination .nav-links{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--border); border-radius: 10px;
  background: #211126; /* dark purple card */
  color: var(--text-color); text-decoration:none; font-weight:600; font-size:14px;
  transition: all .15s ease;
}
.navigation.pagination .page-numbers:hover{
  border-color:#6b2b7e; color:#fff; box-shadow: 0 0 0 2px rgba(107,43,126,.15) inset;
}
.navigation.pagination .page-numbers.current{
  background:#301439; border-color:#8a3aa5; color:#fff;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next{
  width:auto; padding:0 12px; gap:6px; font-weight:600;
}
.navigation.pagination .page-numbers.dots{
  background: transparent; border-color: transparent; min-width:auto; height:auto; padding:0; color: var(--muted-text);
}
.navigation.pagination .page-numbers:disabled,
.navigation.pagination .page-numbers.disabled{
  opacity:.5; pointer-events:none;
}

/* Accessibility: improve contrast on inverted buttons */
.button.is-info.is-inverted{
  background-color:#209cee; border-color:#209cee; color:#fff;
}
.button.is-info.is-inverted:hover,
.button.is-info.is-inverted:focus{
  background-color:#118fe4; border-color:#118fe4; color:#fff;
}

.button.is-danger.is-inverted{
  background-color:#ff3860; border-color:#ff3860; color:#fff;
}
.button.is-danger.is-inverted:hover,
.button.is-danger.is-inverted:focus{
  background-color:#ff2b56; border-color:#ff2b56; color:#fff;
}

/* Single: responsive player and badges */
.responsive-player iframe,
.responsive-player embed,
.responsive-player video,
.responsive-player img{ width:100%; height:auto; aspect-ratio:16/9; display:block; border-radius:10px; }

.thumb-block .post-thumbnail{ position:relative; overflow:hidden; border-radius:10px; }
.thumb-block .post-category{ position:absolute; left:10px; top:10px; background:#ff2b56; color:#fff; font-size:12px; padding:2px 8px; border-radius:8px; }
.thumb-block .post-duration{ position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; }
.thumb-block .post-views{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.7); color:#fff; font-size:12px; padding:2px 6px; border-radius:6px; display:flex; align-items:center; gap:6px; }

/* Single meta line wraps nicely on mobile */
.level.is-mobile{ flex-wrap:wrap; }
.level.is-mobile .level-left, .level.is-mobile .level-right{ flex-wrap:wrap; gap:8px; min-width:0; }
.level.is-mobile .level-right{ margin-left:auto; }
.level.is-mobile .buttons{ display:flex; flex-wrap:wrap; gap:8px; }
.level.is-mobile .buttons .button{ margin:0; }
.site-content .box{ overflow-x:hidden; }
.video-categories .tag{ margin-right:6px; margin-bottom:6px; }

/* Titles and card spacing */
.post-card .post-content{ padding:8px 0; }
.post-card h3{ line-height:1.3; }

@media (max-width: 768px){
  .site-content .box{ padding:14px; }
}

/* Ultra-small devices: stack meta blocks to avoid overflow */
@media (max-width: 400px){
  .level.is-mobile .level-left,
  .level.is-mobile .level-right{ width:100%; justify-content:flex-start; }
  .level.is-mobile .level-right{ margin-left:0; }
}