/* Tony Rei – Blog Table of Contents
   Applies to manually created Gutenberg TOCs that use
   <h2 id="inhaltsverzeichnis"> followed by a list. */

.single-post .entry-content #inhaltsverzeichnis {
  position: relative;
  margin: 2.75rem 0 0 !important;
  padding: 1.35rem 1.25rem 1rem 3.7rem;
  border: 1px solid var(--tr-border-gold);
  border-bottom: 0;
  border-radius: var(--tr-r-xl) var(--tr-r-xl) 0 0;
  background:
    radial-gradient(circle at top right, rgba(212, 168, 75, 0.13), transparent 42%),
    var(--tr-surface-el);
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--tr-fg);
  box-shadow: var(--tr-shadow-sm);
}

.single-post .entry-content #inhaltsverzeichnis::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 1.55rem;
  height: 1.55rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    linear-gradient(var(--tr-gold-700), var(--tr-gold-700)) 50% 35% / 54% 2px no-repeat,
    linear-gradient(var(--tr-gold-700), var(--tr-gold-700)) 50% 50% / 54% 2px no-repeat,
    linear-gradient(var(--tr-gold-700), var(--tr-gold-700)) 50% 65% / 54% 2px no-repeat,
    var(--tr-gold-100);
  border: 1px solid var(--tr-border-gold);
}

.single-post .entry-content #inhaltsverzeichnis::after {
  content: "Schnellnavigation";
  display: block;
  margin-top: 0.4rem;
  font-family: var(--tr-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tr-gold-700);
}

.single-post .entry-content #inhaltsverzeichnis + ul,
.single-post .entry-content #inhaltsverzeichnis + ol,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list {
  counter-reset: tr-toc;
  margin: 0 0 2.75rem !important;
  padding: 0.55rem 1.25rem 1.25rem !important;
  list-style: none !important;
  border: 1px solid var(--tr-border-gold);
  border-top: 0;
  border-radius: 0 0 var(--tr-r-xl) var(--tr-r-xl);
  background: var(--tr-surface-el);
  box-shadow: var(--tr-shadow-sm);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li,
.single-post .entry-content #inhaltsverzeichnis + ol > li,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li {
  counter-increment: tr-toc;
  position: relative;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(212, 168, 75, 0.18);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li:first-child,
.single-post .entry-content #inhaltsverzeichnis + ol > li:first-child,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li:first-child {
  border-top: 0;
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.15rem;
  color: var(--tr-fg);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  text-underline-offset: 0;
  transition: color var(--tr-ease), transform var(--tr-ease), background var(--tr-ease);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a::before,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a::before,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a::before {
  content: counter(tr-toc, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tr-gold-50);
  border: 1px solid var(--tr-border-gold);
  color: var(--tr-gold-800);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a::after,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a::after,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a::after {
  content: "↘";
  justify-self: end;
  color: var(--tr-gold-600);
  font-size: 0.95rem;
  transition: transform var(--tr-ease), color var(--tr-ease);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a:hover,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a:hover,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a:hover {
  color: var(--tr-gold-800);
  transform: translateX(3px);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a:hover::after,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a:hover::after,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a:hover::after {
  color: var(--tr-gold-800);
  transform: translate(2px, 2px);
}

.single-post .entry-content #inhaltsverzeichnis + ul > li > a:focus-visible,
.single-post .entry-content #inhaltsverzeichnis + ol > li > a:focus-visible,
.single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a:focus-visible {
  outline: 2px solid var(--tr-gold-500);
  outline-offset: 3px;
  border-radius: var(--tr-r-md);
}

.single-post .entry-content h2[id],
.single-post .entry-content h3[id] {
  scroll-margin-top: calc(var(--tr-header-h) + 1.5rem);
}

@media (min-width: 700px) {
  .single-post .entry-content #inhaltsverzeichnis {
    padding: 1.55rem 1.65rem 1.15rem 4.4rem;
  }

  .single-post .entry-content #inhaltsverzeichnis::before {
    left: 1.6rem;
    width: 1.8rem;
    height: 1.8rem;
  }

  .single-post .entry-content #inhaltsverzeichnis + ul,
  .single-post .entry-content #inhaltsverzeichnis + ol,
  .single-post .entry-content #inhaltsverzeichnis + .wp-block-list {
    padding: 0.65rem 1.65rem 1.45rem !important;
  }

  .single-post .entry-content #inhaltsverzeichnis + ul > li > a,
  .single-post .entry-content #inhaltsverzeichnis + ol > li > a,
  .single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a {
    grid-template-columns: 2.35rem minmax(0, 1fr) 1.5rem;
    padding: 1rem 0.3rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-post .entry-content #inhaltsverzeichnis + ul > li > a,
  .single-post .entry-content #inhaltsverzeichnis + ol > li > a,
  .single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a,
  .single-post .entry-content #inhaltsverzeichnis + ul > li > a::after,
  .single-post .entry-content #inhaltsverzeichnis + ol > li > a::after,
  .single-post .entry-content #inhaltsverzeichnis + .wp-block-list > li > a::after {
    transition: none;
  }
}