/*
 * HolDent — TOC per pagine long-form (audit UX 2026-05).
 *
 * - Mobile (<1280px): dropdown sticky-top sotto navbar, collassabile
 * - Desktop ≥1280px: aside fixed-left, sempre aperto
 * - Tutto hidden by default — JS aggiunge .is-visible quando l'utente
 *   scrolla oltre l'hero. Questo evita sovrapposizione visiva con l'H1.
 */

/* Hidden by default — JS attiva .is-visible al passaggio dell'hero. */
.holdent-toc {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.holdent-toc.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .holdent-toc {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   Mobile + tablet (default): dropdown FIXED-top sotto navbar.
   Position fixed (non sticky) per non rubare spazio dal flow del documento
   quando il TOC non è ancora visibile — fix audit UX 2026-05.
   ============================================================ */
.holdent-toc {
  position: fixed;
  top: 84px; /* sotto navbar pill mobile (68 + 12 top + 4 breathing) */
  left: var(--space-md);
  right: var(--space-md);
  z-index: 20;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: top 280ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease,
              transform 220ms ease;
}

/* Quando la pill HolDent è nascosta (scroll-down) e siamo su mobile/tablet,
   il TOC sale al top. Su desktop ≥1280px il TOC è fixed-left con top: 152px
   costante (override nel media query sotto), quindi questa regola va vincolata. */
@media (max-width: 1279.98px) {
  body:has(.holdent-nav__pill.is-hidden) .holdent-toc {
    top: 12px;
  }
}

.holdent-toc__summary {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ink);
  text-align: left;
  min-height: 48px;
}

.holdent-toc__summary-label {
  flex-shrink: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--color-text-muted);
}

.holdent-toc__summary-active {
  flex: 1;
  font-size: 13px;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.holdent-toc__summary-active:empty {
  display: none;
}

.holdent-toc__summary-chev {
  color: var(--color-text-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.holdent-toc.is-open .holdent-toc__summary-chev {
  transform: rotate(180deg);
}

.holdent-toc__panel {
  display: none;
  padding: 0 var(--space-lg) var(--space-lg);
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.holdent-toc.is-open .holdent-toc__panel {
  display: block;
}

.holdent-toc__list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  counter-reset: holdent-toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holdent-toc__item {
  counter-increment: holdent-toc;
}

.holdent-toc__link {
  display: block;
  padding: 10px 0 10px 44px;
  position: relative;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  min-height: 44px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.holdent-toc__link::before {
  content: counter(holdent-toc, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 11px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.holdent-toc__link:hover {
  color: var(--color-ink);
}

.holdent-toc__link.is-active {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 700;
}

.holdent-toc__link.is-active::before {
  color: var(--color-primary);
  opacity: 1;
}

/* I MASTER pages usano una gerarchia "flat" (tutti gli heading `**Text**`
   sono pari rango), quindi nel TOC trattiamo level 2 e level 3 in modo
   uniforme — niente indent visivo. */

/* ============================================================
   Desktop ≥1280px: fixed-left sempre aperto
   ============================================================ */
@media (min-width: 1280px) {
  .holdent-toc {
    position: fixed;
    left: var(--space-lg);
    top: 152px; /* sotto utility bar (40) + gap (12) + pill (68) + breathing (32) */
    width: 220px;
    max-height: calc(100svh - 180px);
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  .holdent-toc__summary {
    display: none; /* no toggle on desktop */
  }

  .holdent-toc__panel {
    display: block !important; /* sempre aperto desktop */
    padding: 0 0 0 var(--space-md);
    border-top: 0;
    border-left: 2px solid var(--color-border);
    max-height: calc(100svh - 180px);
    overflow-y: auto;
  }

  .holdent-toc__list {
    margin: 0;
  }

  .holdent-toc__link {
    padding: 6px 0 6px 36px;
    font-size: 12px;
    min-height: 0;
  }

  .holdent-toc__link::before {
    left: 4px;
    top: 6px;
    font-size: 9px;
  }

  /* level-3 trattato come level-2 — vedi commento nella zona mobile. */
}