/*
 * ============================================================
 * LIST BULLET DOTS  —  leaves.css
 * ============================================================
 * Replaces default list bullets with small filled dots.
 *
 * Usage: add class="leaf-list" to any <ul>
 *
 *   <ul class="leaf-list">
 *     <li>Item one</li>
 *     <li>Item two</li>
 *   </ul>
 *
 * To change the dot colour: update background in li::before.
 * To change the dot size:   update width/height in li::before.
 * ============================================================
 */

ul.leaf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.leaf-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.5;
}

ul.leaf-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rg-green-lime);
  opacity: 0.85;
}

/* Footer variant — slightly lighter against dark background */
.site-footer ul.leaf-list li::before {
  background: var(--rg-gold);
  opacity: 0.75;
}

.site-footer ul.leaf-list li {
  margin-bottom: 10px;
}