/*
 * Table of Contents Component Styles
 * Created for USFleetTracking.com
 * Following theme system
 */

/* Table of Contents Container */
.toc-container {
  background-color: var(--color-bg-light) !important;
  border-radius: var(--border-radius-lg) !important;
  border: var(--border-width) solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--spacing-lg) !important;
  padding-left: calc(var(--spacing-lg) * 1.5) !important; /* Increase left padding */
  margin: var(--spacing-lg) 0 !important;
  transition: all var(--transition-speed) ease !important;
  box-sizing: border-box !important;
}

.toc-container:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-dark);
}

/* Table of Contents Heading */
.toc-heading {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--spacing-md) !important;
  padding-bottom: var(--spacing-sm) !important;
  padding-left: 1.5rem !important; /* Match the inline style we used */
  border-bottom: var(--border-width) solid var(--color-border) !important;
}

/* Table of Contents List */
.toc-list {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: var(--spacing-md);
}

/* Table of Contents List Item */
.toc-list li {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

/* Table of Contents Link */
.toc-list a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-speed) ease;
  display: block;
  padding: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 3px solid transparent;
  font-weight: var(--font-weight-medium);
}

.toc-list a:hover {
  color: var(--color-primary-dark);
  border-left-color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.05);
  transform: translateX(3px);
}

/* Nested Table of Contents */
.toc-list .toc-list {
  margin-top: var(--spacing-sm);
  margin-left: var(--spacing-md);
  margin-bottom: 0;
}

.toc-list .toc-list li {
  margin-bottom: var(--spacing-xs);
}

.toc-list .toc-list a {
  font-size: 0.9em;
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .toc-container {
    padding: var(--spacing-md) !important;
    padding-left: calc(var(--spacing-md) * 1.5) !important; /* Maintain increased left padding */
  }

  .toc-heading {
    font-size: var(--font-size-md) !important;
    padding-left: 1rem !important; /* Smaller padding on mobile */
  }

  .toc-list li {
    padding-left: var(--spacing-xs) !important;
  }

  .toc-list a {
    padding: var(--spacing-xs) !important;
    padding-left: var(--spacing-xs) !important;
  }
}