/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 64rem) {
  .topic-list-header.views,
  .topic-list-item .views { display: none; }
}

@media (max-width: 40rem) {
  html { font-size: 15px; }
  .header-inner { height: 48px; padding: 0 1rem; }
  .site-main { padding: 1rem 0; }
  .main-inner { padding: 0 1rem; }

  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 0.375rem;
    box-shadow: var(--shadow);
  }

  .site-nav.open { display: flex; }
  .nav-link { padding: 0.625rem 0.875rem; }

  .topic-list thead { display: none; }
  .topic-list, .topic-list tbody, .topic-list-item { display: block; width: 100%; }
  .topic-list-item { padding: 0.625rem 0; }
  .topic-list-item td { display: block; padding: 0; }
  .topic-list-item .main-link { padding-right: 0; margin-bottom: 0.25rem; }

  .topic-list-item .replies,
  .topic-list-item .views,
  .topic-list-item .activity { display: inline; text-align: left; font-size: 0.75rem; }

  .topic-list-item .replies::after { content: " replies \00B7 "; }

  .topic-title { font-size: 1.25rem; }
  .topic-meta { flex-direction: column; align-items: flex-start; }
  .topic-stats { margin-left: 0; }

  .post-header { flex-wrap: wrap; }
  .post-date { margin-left: 0; width: 100%; padding-left: calc(45px + 0.5rem); margin-top: -0.2rem; }

  .breadcrumb-current { max-width: 200px; }
  .pagination { flex-wrap: wrap; gap: 0.4rem; }

  .category-card-header { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .user-header { flex-direction: column; align-items: center; text-align: center; }
  .user-meta { justify-content: center; flex-wrap: wrap; }
  .user-topic-list li { flex-direction: column; gap: 0.2rem; }
  .user-topic-list time { margin-left: 0; }
}