/* Topic List → "flat_filter_new": simple topic filter with pill links.
   Theme tokens come from styles.css. Selectors are specific enough to win
   over the theme's global rules (which load after block CSS on the live site). */

#pagewrap .list-topic-filter { margin: 0 0 16px; text-align: left; }

#pagewrap .list-topic-filter .list-topic-filter__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: uppercase;
  color: #1d3029;
}

/* Topics as pills */
#pagewrap .list-topic-filter .list-topic-filter__content { padding: 0; }
#pagewrap .list-topic-filter .list-topic-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#pagewrap .list-topic-filter .list-topic-filter__list li { margin: 0; padding: 0; }
#pagewrap .list-topic-filter .list-topic-filter__link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid #a3acb6;
  border-radius: 1px;
  font-family: var(--font-button);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1d3029;
  transition: background-color .2s, color .2s, border-color .2s;
}
#pagewrap .list-topic-filter .list-topic-filter__link:hover,
#pagewrap .list-topic-filter .list-topic-filter__link:focus-visible {
  background: rgba(54, 78, 70, 0.25);
  border-color: #a3acb6;
  color: #1d3029;
}
#pagewrap .list-topic-filter .list-topic-filter__link:focus-visible {
  outline: 2px solid var(--main-lighter);
  outline-offset: 2px;
}
/* Current topic */
#pagewrap .list-topic-filter .list-topic-filter__link.active,
#pagewrap .list-topic-filter .list-topic-filter__link.active:hover {
    background: #a3acb6;
    border-color: #a3acb6;
    color: #fff;
}

/* Dark sections */
#pagewrap .is-dark .list-topic-filter .list-topic-filter__title { color: var(--main-subtle); }
#pagewrap .is-dark .list-topic-filter .list-topic-filter__link { border-color: var(--main-lighter); color: var(--main-subtle); }
#pagewrap .is-dark .list-topic-filter .list-topic-filter__link:hover { background: rgba(29, 122, 215, .25); color: var(--white); }

/* Steel section: the theme underlines links there; not on pills
   (:not(#_) outranks that rule's specificity) */
#pagewrap .section--bg-steel .list-topic-filter .list-topic-filter__link:not(#_) { text-decoration: none; color: #1d3029; }
#pagewrap .section--bg-steel .list-topic-filter .list-topic-filter__link.active:not(#_) { color: var(--white); }