/* Custom CSS */
:root {
  --font: "Nunito", sans-serif;
  --mono: "Nunito", sans-serif;
  --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 26px;
  --topbar-h: 56px; --left-w: 220px; --right-w: 280px; --gap: 24px; --container: 1280px;
  --page-x: 20px; /* the page's side margin: 20px, 16px on tablets, 12px on phones. Everything lines up on it; a strip that runs
                     edge to edge (the category bar, a notice bar) pulls out by exactly this much: margin-inline: calc(-1 * var(--page-x)) */
}

.side-link:hover {  transform: translateX(2px);}
.side-link.active { font-weight:bold;}

.topic-row.unread .row-title a {
    font-weight: 700;
    position: relative;
}

/* Adds a small theme-colored dot right before the title text */
.topic-row.unread .row-title a::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--bs-primary, #0d6efd); /* Matches theme primary color */
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.cat-badge .icon, .cat-link .icon { width: 20px; height: 20px; }

.topic-title {
    font-size: var(--font-size-2xl);
}

.post-stream { gap: 5px; }
.post.first { margin-bottom: 12px; }

.row-cat
 {
    float: inline-end;
  }

@media (max-width: 640px) {
  /* 1. Scale up base body font size for phones */
  body {
    font-size: 16px!important; /* Adjust this to your liking (e.g., 15px or 16px) */
  }

  /* 2. Scale up discussion/post contents so they are super readable on mobile */
  .post-content, .xstyle-text {
    font-size: 16px!important; 
    line-height: 1.5!important;
  }

  /* 3. Slightly larger row titles in topic lists */
  .row-title {
    font-size: 18px!important;
  }
}

@media (max-width: 640px) {
  :root { --page-x: 5px; }
}