/* Floating Table of Contents Styles */
#floating-toc {
    position: fixed;
    left: 20px;
    top: 150px;
    width: 280px; /* Increased from 250px to 280px */
    max-height: 70vh;
    overflow-y: hidden; /* Changed from auto to hidden to prevent scrolling the entire TOC */
    background-color: #1a1a1a;
    border: 2px solid #6d105a;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    color: #fff;
    font-size: 14px;
    scrollbar-width: thin;
    scrollbar-color: #6d105a #1a1a1a;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
}


#toc-header {
    padding: 12px 15px;
    font-weight: 600;
    border-bottom: 2px solid #fff;
    background-color: #6d105a;
    border-radius: 4px 4px 0 0;
    position: sticky;
    top: 0;
    z-index: 1001;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#toc-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fff 0%, #9c1f8c 100%);
    border-radius: 4px 4px 0 0;
}

#toc-content {
    padding: 10px 0;
    max-height: calc(40vh - 45px); /* Reduced to make room for key terms */
    overflow-y: auto;
}

#toc-content a {
    display: block;
    padding: 5px 15px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
    border-left: 3px solid transparent;
}

#toc-content a:hover {
    background-color: #2a2a2a;
}

#toc-content a.active {
    background-color: #2a2a2a;
    border-left: 3px solid #9c1f8c;
}

#toc-content .toc-h2 {
    padding-left: 15px;
    font-weight: 600;
}

#toc-content .toc-h3 {
    padding-left: 30px;
    font-size: 13px;
}

#toc-content .toc-h4 {
    padding-left: 45px;
    font-size: 12px;
    color: #ccc;
}

/* Responsive TOC styles */
@media (max-width: 1400px) {
    #floating-toc {
        width: 230px; /* Increased from 200px to 230px */
        font-size: 13px;
    }
    
    #toc-content {
        max-height: calc(35vh - 45px); /* Adjust for smaller screens */
    }
}

@media (max-width: 1200px) {
    #floating-toc {
        left: 10px;
        width: 210px; /* Increased from 180px to 210px */
    }
}

/* Mobile TOC Styles */
.mobile-toc-toggle {
    display: none;
    position: fixed;
    top: 80px;
    right: 20px;
    background-color: #6d105a;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 992px) {
    .mobile-toc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #floating-toc {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border: none;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 1002;
    }
    
    #floating-toc.mobile-open {
        transform: translateX(0);
    }
    
    #toc-content {
        max-height: calc(100vh - 200px); /* Leave room for header and key terms */
        overflow-y: auto;
    }
    
    /* Add close button to mobile TOC */
    #toc-header::after {
        content: '×';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        cursor: pointer;
    }
    
    /* Mobile overlay */
    #floating-toc.mobile-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    
    /* Ensure body doesn't scroll when mobile TOC is open */
    body.mobile-toc-open {
        overflow: hidden;
    }
}

/* RTL Support for Arabic */
:root[lang="ar"] {
    direction: rtl;
}

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .container {
    direction: rtl;
}

/* Keep header elements in LTR layout */
[dir="rtl"] header {
    direction: ltr; /* Keep header layout unchanged */
}

[dir="rtl"] header h1,
[dir="rtl"] header p {
    text-align: right; /* Only text alignment changes */
    direction: rtl;
}

/* Keep navigation in original order */
[dir="rtl"] nav {
    direction: ltr;
}

[dir="rtl"] nav ul {
    direction: ltr; /* Keep navigation items in original order */
}

/* Keep site logo in original position */
[dir="rtl"] .site-logo-container {
    /* Keep original positioning - no changes */
}

/* Keep social icons in original layout */
[dir="rtl"] .social-icons {
    direction: ltr; /* Prevent icon order reversal */
}

/* Keep language switcher unchanged */
[dir="rtl"] .language-switcher {
    direction: ltr;
}

/* Apply RTL to content areas only */
[dir="rtl"] .blog-post,
[dir="rtl"] .blog-content,
[dir="rtl"] article,
[dir="rtl"] main {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] main ul,
[dir="rtl"] main ol,
[dir="rtl"] article ul,
[dir="rtl"] article ol {
    padding-right: 20px;
    padding-left: 0;
}

[dir="rtl"] blockquote {
    border-left: none;
    border-right: 3px solid #f84ef8;
    padding-left: 0;
    padding-right: 15px;
}

/* Keep floating TOC in original position */
[dir="rtl"] #floating-toc {
    direction: ltr; /* Keep TOC layout unchanged */
}

[dir="rtl"] #floating-toc .toc-content {
    text-align: right; /* Only change text alignment */
    direction: rtl;
}

/* RTL specific adjustments for forms */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Footer adjustments */
[dir="rtl"] footer {
    text-align: center; /* Keep footer centered */
}

/* Keep dropdown in original position */
[dir="rtl"] .dropdown {
    direction: ltr;
}

[dir="rtl"] .dropdown-content {
    direction: ltr;
    text-align: left; /* Keep dropdown items left-aligned */
}

/* Dropdown open state (toggled via JS classList instead of inline display) */
.dropdown-menu.is-open {
    display: flex;
}

/* SomaFM player relocated to bottom on collision/mobile (toggled via classList) */
.somafm-player--bottom {
    top: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 320px;
}