/* =====================================================
   toc.css  ·  Índice del post (template-parts/toc.php)
   Bloque grafito con los títulos del artículo numerados.
   ===================================================== */

#post-toc {
  --grafito:        #34383D;
  --naranja:        #F26B1D;
  --naranja-hover:  #FF8238;
  --texto-claro:    #F3F1EE;
  --texto-claro-suave: #B9BCC0;

  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 48px;
  padding: 36px 40px;
  border-radius: 24px;
  background: var(--grafito);
  color: var(--texto-claro);
}
#post-toc *,
#post-toc *::before,
#post-toc *::after { box-sizing: border-box; }

/* Título del índice con rayita naranja */
#post-toc h3 {
  width: auto;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  font-size: 30px;
  font-weight: 400;              /* Bebas Neue solo tiene 400 */
  line-height: 1.05;
  letter-spacing: .5px;
  color: var(--blanco, #FFFFFF);
}
#post-toc h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--naranja);
}

/* ----- Lista ----- */
#post-toc ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
#post-toc li {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--texto-claro);
}

/* Cada título del artículo (h2) numerado en naranja */
#post-toc > ul > li { counter-increment: toc; }
#post-toc > ul > li > a::before {
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 28px;
  font-size: 14px;
  font-weight: 700;
  color: var(--naranja);
}

#post-toc ul a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--texto-claro);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: background .2s, color .2s;
}
#post-toc ul a:hover,
#post-toc ul a:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: var(--naranja-hover);
  outline: none;
}

/* Subtítulos (h3): más adentro, con rayita en vez de número.
   Sirve si vienen como lista anidada o como <li> con clase de h3. */
#post-toc li ul {
  margin: 2px 0 6px 38px;
  counter-reset: none;
}
#post-toc li li > a,
#post-toc li[class*="h3"] > a,
#post-toc li[class*="level-3"] > a,
#post-toc li[class*="sub"] > a {
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-claro-suave);
}
#post-toc li[class*="h3"],
#post-toc li[class*="level-3"],
#post-toc li[class*="sub"] {
  margin-left: 38px;
  counter-increment: none;
}
#post-toc li li > a::before,
#post-toc > ul > li[class*="h3"] > a::before,
#post-toc > ul > li[class*="level-3"] > a::before,
#post-toc > ul > li[class*="sub"] > a::before {
  content: "";
  flex-shrink: 0;
  min-width: 0;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--naranja);
  transform: translateY(-4px);
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
  #post-toc {
    margin-bottom: 36px;
    padding: 26px 20px;
    border-radius: 20px;
  }
  #post-toc h3 { font-size: 26px; margin-bottom: 18px; }
  #post-toc ul a { padding: 9px 8px; font-size: 15px; gap: 10px; }
  #post-toc li ul,
  #post-toc li[class*="h3"],
  #post-toc li[class*="level-3"],
  #post-toc li[class*="sub"] { margin-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  #post-toc * { transition: none !important; }
}