/* ==========================================================================
   blocks/toc/toc.css
   ========================================================================== */

.toc {
  background: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card-padding);
  /* Zgoraj polovičen razmik, ker TOC vedno sledi ".section" bloku, ki že
     doda svoj padding-bottom — brez tega bi se razmik podvojil. Spodaj
     poln razmik do naslednje vsebine. */
  margin-top: calc(var(--space-section) / 2);
  margin-bottom: var(--space-section);
}

.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-heading-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body);
}

.toc__arrow {
  transition: transform var(--transition-base);
}

.toc[data-open="true"] .toc__arrow {
  transform: rotate(180deg);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), margin-top var(--transition-base);
}

.toc[data-open="true"] .toc__list {
  margin-top: 16px;
  max-height: 1000px;
}

.toc__list a {
  display: block;
  color: var(--color-text-main);
  font-size: var(--fs-small);
  padding: 4px 0;
}

.toc__list a:hover {
  color: var(--color-heading-gold);
}

/* Preden se JS zažene, element [data-toc] še nima atributa data-open, kar bi
   na desktopu za trenutek prikazalo strnjen seznam (ker je privzeto strnjen).
   To pravilo ga do takrat prikaže razširjenega — a samo dokler JS ne nastavi
   data-open="true"/"false" (glej toggleTOC v toc.js), zato po tem ne
   preglasi več eksplicitnega "false" ob kliku na preklopnik. */
@media (min-width: 768px) {
  .toc:not([data-open]) .toc__list {
    margin-top: 16px;
    max-height: 1000px;
  }
}