/* TOC Spacing Fix - High Priority Overrides */

/* Force proper spacing between article and TOC */
@media (min-width: 1024px) {
  /* Main container with forced gap */
  div.container div.lg\:flex {
    display: flex !important;
    gap: 0 !important; /* Reset gap to handle manually */
  }
  
  /* Article content area - add right margin */
  div.lg\:flex-1 {
    margin-right: 4rem !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
  
  /* TOC sidebar - explicit positioning */
  aside.lg\:w-80 {
    width: 20rem !important;
    margin-left: 2rem !important;
    padding-left: 1rem !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }
  
  /* TOC navigation box */
  aside .toc-nav {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1.5rem !important;
    background-color: var(--b2) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.5rem !important;
  }
  
  /* TOC heading */
  aside .toc-nav h3 {
    margin-bottom: 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }
  
  /* TOC content spacing */
  #TableOfContents {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Force spacing on very specific selectors */
  .container .lg\:flex .lg\:flex-1 + aside {
    margin-left: 3rem !important;
  }
  
  /* Alternative approach - use transform if needed */
  body.has-toc aside.lg\:w-80 {
    transform: translateX(2rem) !important;
  }
}

/* Add body class for debugging */
body {
  position: relative;
}


/* Force TOC to right side with absolute positioning if flexbox fails */
@media (min-width: 1024px) {
  .container {
    position: relative !important;
  }
  
  aside.lg\:w-80 {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 20rem !important;
    z-index: 10 !important;
  }
  
  /* Adjust main content to not overlap */
  .lg\:flex-1 {
    margin-right: 22rem !important;
  }
}