/* Blog post typography classes for clean markdown writing */

/* Numbered list class - use with markdown like:
   <div class="numbered-list">
   
   1. First rule
   2. Second rule
   
   </div>
*/
.numbered-list {
  margin: 1rem 0;
}

.numbered-list ol {
  counter-reset: list-counter;
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbered-list ol li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.numbered-list ol li:last-child {
  margin-bottom: 0;
}

.numbered-list ol li::before {
  content: counter(list-counter) ".";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.75rem;
  color: #2c3e50;
  min-width: 2rem;
}

/* Rules list variant - cleaner spacing for quote/rule lists */
.rules-list {
  margin: 1.5rem 0;
  background: #fafafa;
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid #2c3e50;
}

/* Alternative styling options */

/* Clean list - just numbered, no borders or backgrounds */
.clean-list {
  margin: 1.5rem 0;
}

.clean-list ol {
  counter-reset: list-counter;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clean-list ol li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.clean-list ol li:last-child {
  margin-bottom: 0;
}

.clean-list ol li::before {
  content: counter(list-counter) ".";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #2c3e50;
  min-width: 2rem;
}

/* Subtle list - light background, no border */
.subtle-list {
  margin: 1.5rem 0;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
}

.subtle-list ol {
  counter-reset: list-counter;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subtle-list ol li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.subtle-list ol li:last-child {
  margin-bottom: 0;
}

.subtle-list ol li::before {
  content: counter(list-counter) ".";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #2c3e50;
  min-width: 2rem;
}

/* Minimal rules - thin left border, no background */
.minimal-rules {
  margin: 1.5rem 0;
  border-left: 2px solid #e0e0e0;
  padding-left: 1.5rem;
}

.minimal-rules ol {
  counter-reset: list-counter;
  margin: 0;
  padding: 0;
  list-style: none;
}

.minimal-rules ol li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.minimal-rules ol li:last-child {
  margin-bottom: 0;
}

.minimal-rules ol li::before {
  content: counter(list-counter) ".";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #2c3e50;
  min-width: 2rem;
}

.rules-list ol {
  counter-reset: list-counter;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-list ol li {
  counter-increment: list-counter;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.rules-list ol li:last-child {
  margin-bottom: 0;
}

.rules-list ol li::before {
  content: counter(list-counter) ".";
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: #2c3e50;
  min-width: 2rem;
}