/* ============================
   INFO-YELLOW banner — based around #f3ba4c (golden yellow)
   ============================ */
#topic-body .banner.info-yellow {
  color: #a06c00;
  background-color: #fff4df;
  border: 1px solid #fce8c6;
  border-left: 3px solid #b88700; /* ~30% darker than #f3ba4c */
  padding-left: 15px; /* shift text right to balance */
}
#topic-body .banner.info-yellow a {
  color: #a06c00;
  text-decoration: underline;
}
#topic-body .banner.info-yellow a:hover {
  color: #f6c769; /* ~25% lighter than #f3ba4c */
}

/* ============================
   INFO-PINK banner — based around #fd8abd
   ============================ */
#topic-body .banner.info-pink {
  color: #a82655;
  background-color: #ffe9f3;
  border: 1px solid #ffd1e5;
  border-left: 3px solid #b3516f; /* ~30% darker than #fd8abd */
  padding-left: 15px;
}
#topic-body .banner.info-pink a {
  color: #a82655;
  text-decoration: underline;
}
#topic-body .banner.info-pink a:hover {
  color: #fe9dbd; /* ~25% lighter than #fd8abd */
}

/* ============================
   INFO-BLUE banner — based around #4148ff
   ============================ */
#topic-body .banner.info-blue {
  color: #1a1f99;
  background-color: #e7e8ff;
  border: 1px solid #c7c9ff;
  border-left: 3px solid #2e34b3; /* ~30% darker than #4148ff */
  padding-left: 15px;
}
#topic-body .banner.info-blue a {
  color: #1a1f99;
  text-decoration: underline;
}
#topic-body .banner.info-blue a:hover {
  color: #6b72ff; /* ~25% lighter than #4148ff */
}

/* ============================
   INFO-GREEN banner — based around #48cd8f
   ============================ */
#topic-body .banner.info-green {
  color: #267456;
  background-color: #e6f9f1;
  border: 1px solid #c4f0dd;
  border-left: 3px solid #2f8c65; /* ~30% darker than #48cd8f */
  padding-left: 15px;
}
#topic-body .banner.info-green a {
  color: #267456;
  text-decoration: underline;
}
#topic-body .banner.info-green a:hover {
  color: #67d9a6; /* ~25% lighter than #48cd8f */
}

/* ============================
   INFO-CYAN banner — based around #73c6d9
   ============================ */
#topic-body .banner.info-cyan {
  color: #2b5c66;
  background-color: #edf9fb;
  border: 1px solid #d3eef5;
  border-left: 3px solid #4e9aaa; /* ~30% darker than #73c6d9 */
  padding-left: 15px;
}
#topic-body .banner.info-cyan a {
  color: #2b5c66;
  text-decoration: underline;
}
#topic-body .banner.info-cyan a:hover {
  color: #91d3e1; /* ~25% lighter than #73c6d9 */
}

/* ============================
   INFO-ORANGE banner — based around #f77c58
   ============================ */
#topic-body .banner.info-orange {
  color: #802d18;
  background-color: #fff0eb;
  border: 1px solid #ffd7cd;
  border-left: 3px solid #b34f2f; /* ~30% darker than #f77c58 */
  padding-left: 15px;
}
#topic-body .banner.info-orange a {
  color: #802d18;
  text-decoration: underline;
}
#topic-body .banner.info-orange a:hover {
  color: #f9967b; /* ~25% lighter than #f77c58 */
}

/* ============================
   INFO-PURPLE banner — based around #ad90ff
   ============================ */
#topic-body .banner.info-purple {
  color: #432b80;
  background-color: #f5f1ff;
  border: 1px solid #e0d5ff;
  border-left: 3px solid #7a61c4; /* ~30% darker than #ad90ff */
  padding-left: 15px;
}
#topic-body .banner.info-purple a {
  color: #432b80;
  text-decoration: underline;
}
#topic-body .banner.info-purple a:hover {
  color: #bda8ff; /* ~25% lighter than #ad90ff */
}

/* ============================
   Bullet List Spacing
   ============================ */

#topic-body ul {
  margin: 0.8em 0 1.2em 1.2em; /* top, right, bottom, left */
  padding-left: 0;
}

#topic-body li {
  margin-bottom: 0.4em;  /* smaller gap between items */
  line-height: 1.45;     /* subtle tightening */
}