/* 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)) */
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] { --text-muted:#adb8c7; color-scheme: dark; }
}

[data-theme="dark"] {
--text-muted:#adb8c7; color-scheme: dark;
 }


.logo img.logo-icon
 {
    width: 40px;
    height: 40px;
}

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

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

.topic-bar .topic-meta .icon
 {
    width: 16px;
    height: 16px;
}

.row-icon .icon-pin {
    width: 12px;
    height: 12px;
}

.row-icon-pin {
    vertical-align: .05px;
}

.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; }
}



/* Reset general unread row weight */
.topic-row.unread {
    font-weight: normal;
}

/* Ensure the heading, header metadata, author links, and action buttons are explicitly not bold */
.topic-row.unread .row-title {
    font-weight: normal !important;
}

/* Make ONLY the main title anchor link bold */
.topic-row.unread .row-title > a:not(.row-cat) {
    font-weight: bold !important;
}

/* Place the unread dot exclusively before the main title link and exclude category links */
.topic-row.unread .row-title > a:not(.row-cat):first-child::before {
   content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: middle;
    transform: scaleX(-1); /* Flips the arrow horizontally to point right */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300BA7C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 10 4 15 9 20'%3E%3C/polyline%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: -6px;
}

.row-cat {
    color:var(--text-muted)!important;
}

@media (max-width: 640px) {
    .post-actions {
        gap: 10px;
    }
}