/* 1. The Container: Sets up the side-by-side layout */
.page-wrapper.with-toc {
  display: grid;
  grid-template-columns: 250px 1fr; /* Content takes space, TOC takes 250px */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.post-content { 
  grid-column: 2; 
  grid-row: 1;
} /* Force Content to the big slot */

.toc-sidebar  { 
  position: relative;
  grid-column: 1; 
  grid-row: 1;
} /* Force Sidebar to the small slot */

/* 2. Mobile Responsiveness: Stack them on small screens */
@media (max-width: 768px) {
  .page-wrapper.with-toc {
    grid-template-columns: 1fr; /* Single column */
  }
  .post-content, .toc-sidebar {
    grid-column: auto;
  }

  .toc-sidebar {
    display: none; /* Hide TOC on mobile, or move to top if preferred */
  }
}

.toc-sticky-container {
  /* This makes the element stick to the top of the window */
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* Distance from top of browser window */
  max-height: 90vh;
  overflow-y: auto; /* Scroll inside TOC if it's too long */
  padding-right: 1rem;
  border-right: 1px solid #eee; /* Optional: aesthetic separator line */
}

/* 4. Visual Styling for Hugo's generated TOC list */
.toc-sticky-container nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.toc-sticky-container nav ul li {
  margin-bottom: 0.5rem;
}

.toc-sticky-container nav ul ul {
  /* Indent sub-headings (Duties of Committee, etc.) */
  padding-left: 1rem;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #666;
}

.toc-sticky-container a {
  text-decoration: none;
  color: inherit;
}

.toc-sticky-container a:hover {
  color: #0056b3; /* Change to your club brand color */
  text-decoration: underline;
}