/* ## Table of Contents ## */

:root {
  --toc-padding: var(--df-padding-unit, var(--padding-df-unit, 3rem));
  --toc-padding-half: var(--hf-padding-unit, var(--padding-hf-unit, 1.5rem));
  --toc-margin: var(--df-margin-unit, var(--margin-df-unit, 3rem));
  --toc-arrow-icon: var(
    --menu-arrow-handler-icon,
    url("data:image/svg+xml,%3Csvg width='13' height='7' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.99' d='M6.5 0c.321-.003.63.114.857.322l5.288 4.8a1.03 1.03 0 0 1 0 1.556 1.3 1.3 0 0 1-1.713 0L6.5 2.653 2.068 6.678a1.3 1.3 0 0 1-1.713 0 1.03 1.03 0 0 1 0-1.556l5.288-4.8C5.87.114 6.18-.003 6.5 0z' /%3E%3C/svg%3E")
  );
  --toc-max-height: calc(100vh - 56rem);
  --toc-border: 1px solid rgb(0 0 0 / 5%);
}

.table-of-contents {
  position: relative;
  clear: both;
  margin-bottom: var(--toc-margin);
  text-align: left;
}

body:not(.sh-iframe-preview) .table-of-contents.toc-items-0 {
  display: none;
}

.table-of-contents.hf-pd {
  --toc-padding: var(--toc-padding-half);
}

body[data-resizable-iframe-connected] .table-of-contents.hidden,
body[data-resizable-iframe-connected] .table-of-contents.hidden-mobile {
  display: inherit !important;
  visibility: visible !important;
  opacity: 0.8 !important;
}

.table-of-contents.loading {
  min-height: 15px;
  background: url("../img/loading.gif") no-repeat center center !important;
  background-size: auto 2rem !important;
  opacity: 1;
}

.table-of-contents.loading * {
  display: none !important;
}

.table-of-contents .title {
  margin-bottom: 0;
  line-height: 1;
}

.table-of-contents .holder ul {
  position: relative;
  margin: var(--toc-padding) calc(var(--toc-padding) * -1)
    calc(var(--toc-padding) * -1) !important;
  padding: 0 0 1px;
  width: calc(100% + (var(--toc-padding) * 2));
  max-height: var(--toc-max-height);
  overflow: hidden auto;
  border-top: var(--toc-border);
  list-style: none;
  scrollbar-width: thin;
}

.widget-title + .textwidget .table-of-contents .holder ul {
  border-top: none;
  margin-top: calc(var(--toc-padding) * -1);
}

.table-of-contents ul li {
  font-size: inherit !important;
  padding-left: var(--toc-padding);
  padding-right: 1.5rem;
  line-height: 1.4;
  border-top: var(--toc-border);
  margin: 0;
}

.table-of-contents ul li.sub-item,
.table-of-contents ul li:is([data-target-tag="H3"], [data-target-tag="H4"]) {
  font-size: 90% !important;
}

.table-of-contents ul li:first-child {
  border-top: none;
}

.table-of-contents ul li.active {
  font-weight: bold;
}

.table-of-contents ul li::before {
  content: "";
  width: 0.3rem;
  height: 100%;
  background: transparent;
}

.table-of-contents ul li.active::before {
  background: var(--highlight-color);
}

.table-of-contents ul li a {
  display: block;
  color: var(--text-color);
  padding: 1.1rem 0;
  text-decoration: none !important;
}

.table-of-contents ul li.sub-item a,
.table-of-contents ul li:is([data-target-tag="H3"]) a {
  padding-left: 1rem;
}

.table-of-contents ul li:is([data-target-tag="H4"]) a {
  padding-left: 2rem;
}

.table-of-contents ul li a:hover {
  color: var(--highlight-color-hover);
}

@media (width <= 992px) {
  .table-of-contents .holder ul {
    max-height: none;
  }

  .table-of-contents ul li.active {
    font-weight: normal;
  }

  .table-of-contents ul li.active::before {
    display: none;
  }
}

/* Non-scrollable */
.table-of-contents.full-height .holder ul,
.table-of-contents.non-scrollable .holder ul,
.table-of-contents.show-full .holder ul {
  max-height: 200vh;
  overflow: hidden;
}

/* Expandable */
.table-of-contents.expandable .holder ul {
  transition:
    max-height 0.15s ease,
    margin 0.15s ease;
  margin-top: var(--toc-padding);
}

.table-of-contents.expandable:not(.expanded) .holder > ul {
  max-height: 0 !important;
  overflow: hidden;
  border-top: none;
  margin-top: 0;
}

.table-of-contents.expandable > .title {
  position: relative;
  cursor: pointer;
}

.table-of-contents.expandable > .title::after {
  --size: 1.5rem;

  position: absolute;
  top: 0;
  right: 0;
  content: "";
  float: right;
  display: block;
  width: var(--size);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-image: var(--toc-arrow-icon);
  background-size: contain;
  background-position: center;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.table-of-contents.expandable > .title:hover::after {
  opacity: 1;
}

.table-of-contents.expandable:not(.expanded) > .title::after {
  transform: rotate(180deg);
}