.article-outline {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Responsive design for desktop */
@media (min-width: 1024px) {
    .article-outline {
        position: sticky;
        top: 20px;
        width: 280px;
        max-width: 280px;
        float: right;
        margin-left: 30px;
        margin-bottom: 30px;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 100;
    }

    /* Fix separators being squeezed by the floated outline.
       Removing BFC (Block Formatting Context) from separators that follow the outline
       allows them to span the full width of the parent and pass 'under' the floated element,
       restoring their normal appearance without creating gaps. */
    .article-outline ~ hr,
    .article-outline ~ .wp-block-separator,
    .article-outline ~ .separator,
    .article-outline ~ .divider,
    .article-outline ~ * hr,
    .article-outline ~ * .wp-block-separator,
    .article-outline ~ * .separator,
    .article-outline ~ * .divider {
        clear: none !important;
        overflow: visible !important;
        display: block !important;
        width: auto !important;
    }
    
    /* Custom scrollbar styling */
    .article-outline::-webkit-scrollbar {
        width: 6px;
    }
    
    .article-outline::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .article-outline::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .article-outline::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
    
    /* Firefox scrollbar styling */
    .article-outline {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }
}

/* Hide outline on mobile for better reading experience */
@media (max-width: 768px) {
    .article-outline {
        display: none;
    }
}

.article-outline-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.article-outline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-outline-item {
    margin: 8px 0;
    position: relative;
}

.article-outline-link {
    color: #495057;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.article-outline-link:hover {
    color: #28a745;
    font-weight: 600;
}

.article-outline-sublist {
    list-style: none;
    padding-left: 20px;
    margin: 5px 0 0 0;
}

.article-outline-sublist .article-outline-item {
    margin: 6px 0;
}

.article-outline-sublist .article-outline-link {
    font-size: 0.9rem;
    color: #6c757d;
}

.article-outline-sublist .article-outline-link:hover {
    color: #28a745;
    font-weight: 600;
}

/* Responsive design */
@media (max-width: 768px) {
    .article-outline {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .article-outline-title {
        font-size: 1.1rem;
    }
    
    .article-outline-link {
        font-size: 0.9rem;
    }
    
    .article-outline-sublist {
        padding-left: 15px;
    }
    
    .article-outline-sublist .article-outline-link {
        font-size: 0.85rem;
    }
}

/* Active state for scroll spy */
.article-outline-link.active {
    color: #28a745;
    font-weight: 600;
}

/* Remove outline on focus */
.article-outline-link:focus {
    outline: none;
    box-shadow: none;
}