/**
 * Table of Contents Styles
 * 
 * BEM Naming Convention:
 * - Block: .toc
 * - Elements: .toc__title, .toc__list, .toc__item, .toc__bullet, .toc__link
 * - Modifiers: .toc--compact, .toc--dark (examples for extension)
 * 
 * CSS Custom Properties enable easy theming without modifying the stylesheet.
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Colors */
    --toc-bg: #ffffff;
    --toc-border: #e5e5e5;
    --toc-title-color: #1a1a1a;
    --toc-text-color: #444444;
    --toc-accent: #e85d04;
    --toc-divider: #f0f0f0;
    
    /* Spacing */
    --toc-padding-x: 32px;
    --toc-padding-y: 24px;
    --toc-item-gap: 14px;
    --toc-bullet-gap: 14px;
    
    /* Typography */
    --toc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --toc-title-size: 20px;
    --toc-text-size: 15px;
    --toc-line-height: 1.5;
    
    /* Dimensions */
    --toc-max-width: 500px;
    --toc-border-radius: 8px;
    --toc-bullet-size: 8px;
    
    /* Effects */
    --toc-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --toc-transition: 0.2s ease;
    
    /* Anchor offset (adjust for fixed headers) */
    --toc-anchor-offset: -80px;
}


/* ============================================
   Block: .toc
   ============================================ */
.toc {
    background-color: var(--toc-bg);
    border: 1px solid var(--toc-border);
    border-radius: var(--toc-border-radius);
    padding: var(--toc-padding-y) var(--toc-padding-x);
    max-width: var(--toc-max-width);
    font-family: var(--toc-font-family);
    box-shadow: var(--toc-shadow);
}


/* ============================================
   Element: .toc__title
   ============================================ */
.toc__title {
    font-size: var(--toc-title-size);
    font-weight: 600;
    color: var(--toc-title-color);
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--toc-divider);
}


/* ============================================
   Element: .toc__list
   ============================================ */
.toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ============================================
   Element: .toc__item
   ============================================ */
.toc__item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--toc-item-gap);
    line-height: var(--toc-line-height);
}

.toc__item:last-child {
    margin-bottom: 0;
}

.toc__item::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: var(--toc-bullet-size);
    height: var(--toc-bullet-size);
    background-color: var(--toc-accent);
    margin-right: var(--toc-bullet-gap);
    margin-top: 7px;
}


/* ============================================
   Element: .toc__link
   ============================================ */
.toc__link {
    color: var(--toc-text-color);
    text-decoration: none;
    font-size: var(--toc-text-size);
    transition: color var(--toc-transition);
}

.toc__link:hover,
.toc__link:focus {
    color: var(--toc-accent);
}

.toc__link:focus {
    outline: 2px solid var(--toc-accent);
    outline-offset: 2px;
}


/* ============================================
   Element: .toc__anchor
   ============================================ */
.toc__anchor {
    display: block;
    position: relative;
    top: var(--toc-anchor-offset);
    visibility: hidden;
    pointer-events: none;
}


/* ============================================
   Modifier: .toc--compact
   ============================================ */
.toc--compact {
    --toc-padding-x: 20px;
    --toc-padding-y: 16px;
    --toc-item-gap: 10px;
    --toc-text-size: 14px;
    --toc-title-size: 18px;
}


/* ============================================
   Modifier: .toc--dark
   ============================================ */
.toc--dark {
    --toc-bg: #1a1a2e;
    --toc-border: #2d2d44;
    --toc-title-color: #ffffff;
    --toc-text-color: #b8b8c8;
    --toc-accent: #ff6b35;
    --toc-divider: #2d2d44;
    --toc-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* ============================================
   Modifier: .toc--borderless
   ============================================ */
.toc--borderless {
    border: none;
    box-shadow: none;
    padding: 0;
}