/* Typography for headings */
.htmlContent h2,
.htmlContent h3,
.htmlContent p,
.htmlContent figcaption,
.htmlContent > ol > li,
.htmlContent > ul > li,
.htmlContent strong {
  @apply font-noto text-black dark:text-white;
}

.htmlContent a {
  @apply cursor-pointer underline underline-offset-2 decoration-dotted text-midnightBlue dark:text-pfrBasicBlue font-semibold;
}

.htmlContent p em {
  @apply italic;
}

.htmlContent hr {
  @apply relative border-0 h-8;
}

.htmlContent iframe {
  @apply w-full min-h-[500px] rounded outline-dashed outline-1 outline-offset-4 outline-midnightBlue dark:outline-pfrBasicBlue;
}

.htmlContent hr::before {
  @apply absolute left-0 w-full h-px bg-gray-200;
  content: "";
  top: 50%;
  transform: translateY(-50%);
}

.htmlContent h2 {
  @apply font-black text-2xl sm:text-3xl;
}

.htmlContent h3 {
  @apply font-black text-xl;
}

.htmlContent p,
.htmlContent > ol > li,
.htmlContent > ul > li {
  @apply leading-6 text-sm sm:leading-7 sm:text-base;
}

.htmlContent figcaption {
  @apply font-noto text-xs text-gray-500 text-center mt-1 before:px-1;
}

.htmlContent strong {
  @apply font-bold;
}

/* Ordered list styling */
.htmlContent ol {
  list-style-type: none;
  counter-reset: item;
  color: black;
}

.htmlContent ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 1.5em;
}

.htmlContent ol > li:before {
  content: counters(item, ".") ". ";
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Unordered list styling */
.htmlContent ul {
  list-style-type: disc;
  padding-left: 1.5em; /* Ensure that bullets are correctly indented */
}

.htmlContent ul > li {
  position: relative;
}

/* Nested ordered list padding */
.htmlContent ol > li > ol > li,
.htmlContent ul > li > ul > li {
  padding-left: 2em;
}

.htmlContent ol > li > ol > li > ol > li,
.htmlContent ul > li > ul > li > ul > li {
  padding-left: 2.5em;
}