/* ===============
   Bloons Wiki (bloons-wiki/index.html) – Page-specific Styles
   =============== */

.toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}
.toc-list li {
  margin-bottom: var(--space-2);
}
.toc-list a {
  display: inline-block;
  padding: 0.25em 1em;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.toc-list a:hover,
.toc-list a:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* Card section icons / highlight headings for engagement */
main .card > h2 {
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
}
main .card > h2::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: var(--space-3);
  background-size: contain;
  background-repeat: no-repeat;
}
#bloons-basics > h2::before {
  background-image: url('../images/bloon-red.svg');
}
#bloons-characters > h2::before {
  background-image: url('../images/monkey.svg');
}
#bloons-strategies > h2::before {
  background-image: url('../images/strategy.svg');
}
#bloons-challenges > h2::before {
  background-image: url('../images/trophy.svg');
}
#bloons-community > h2::before {
  background-image: url('../images/community.svg');
}
#bloons-updates > h2::before {
  background-image: url('../images/update.svg');
}
#bloons-merchandise > h2::before {
  background-image: url('../images/merch.svg');
}
#bloons-support > h2::before {
  background-image: url('../images/support.svg');
}

/* Merch list stylization */
.merch-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  list-style-type: disc;
  margin-left: var(--space-5);
}

/* Responsive TOC stack for mobile */
@media (max-width: 600px) {
  .toc-list {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Visually highlight CTA buttons in each card */
.card .button {
  margin-top: var(--space-4);
}