/* =====================================================================
   CIVIC THEME  —  Step 3b: per-topic accent dots
   ---------------------------------------------------------------------
   Additive. Loads AFTER civic-theme-step3-posts.css. Adds a colored dot
   to each topic pill, keyed off  data-topic  on the .post-topic span.

   REQUIRES the one-line markup hook in post.html:
     <span class="post-topic" data-topic="{{ post.topic }}">{{ post.get_topic_display }}</span>

   INSTALL
     1. Save as:  tappet/static/css/civic-theme-step3b-topics.css
     2. base_index.html, after the step-3 link:
          <link rel="stylesheet" href="{% static '/css/civic-theme-step3b-topics.css' %}" />
     3. Hard-refresh.
   ===================================================================== */

/* Dot before the label; color set per topic below. */
.post-topic::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: #64748b;          /* default / General */
}

.post-topic[data-topic="General"]::before             { background: #64748B; }
.post-topic[data-topic="Economic Stability"]::before  { background: #2563EB; }
.post-topic[data-topic="Education"]::before           { background: #9333EA; }
.post-topic[data-topic="Environment"]::before         { background: #16A34A; }
.post-topic[data-topic="Health Care"]::before         { background: #DC2626; }
.post-topic[data-topic="Food Security"]::before       { background: #F59E0B; }
.post-topic[data-topic="Housing"]::before             { background: #0D9488; }