/* blog.css - Specific styles for Tooliix Blog */

/* Reading Progress Bar */
#reading-progress {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Blog Prose Styling Overrides */
.blog-content p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.8;
}

.blog-content ul {
    margin-bottom: 2rem;
}

.blog-content li {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
}

.blog-content strong {
    color: white;
}

.blog-content code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    color: #06B6D4;
    font-size: 0.9em;
}

.blog-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Table of Contents */
#toc a {
    position: relative;
    padding-left: 12px;
    display: inline-block;
}

#toc a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: #2563EB;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}

#toc a:hover::before,
#toc a.active::before {
    opacity: 1;
}

#toc a.active {
    color: #F8FAFC;
    font-weight: 500;
}

/* FAQ Accordion */
.faq-btn {
    transition: background-color 0.2s;
}
.faq-btn:hover {
    background-color: rgba(255, 255, 255, 0.02);
}
.faq-btn.active svg {
    transform: rotate(180deg);
}

/* Code Blocks */
.code-block pre {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0F172A;
}

.code-block pre::-webkit-scrollbar {
    height: 8px;
}
.code-block pre::-webkit-scrollbar-track {
    background: #0F172A;
}
.code-block pre::-webkit-scrollbar-thumb {
    background-color: #334155;
    border-radius: 4px;
}

/* Filter Buttons */
.filter-btn.active {
    background-color: #2563EB;
    color: white;
    border-color: #2563EB;
}