/* ===============================================
   FLOATING TOC OVERLAY - NON-INTRUSIVE DESIGN
   Does NOT affect content width
   =============================================== */

/* 1) REMOVE GRID LAYOUT - FULL WIDTH CONTENT */
.case-study-layout {
    display: block; /* Changed from grid */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

.case-content-main {
    width: 100%; /* Full width, no shrinkage */
    max-width: 100%;
}

/* 2) FLOATING OVERLAY TOC - DESKTOP ONLY */
.case-toc-sidebar {
    /* Fixed positioning - floats over content */
    position: fixed;
    right: 24px;
    top: 96px;
    width: 44px; /* Collapsed by default */
    max-width: 180px;
    z-index: 1000;
    
    /* Premium styling */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 142, 78, 0.2);
    border-radius: 24px; /* Pill shape */
    box-shadow: 0 4px 20px rgba(44, 66, 81, 0.12);
    
    /* Smooth transition */
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                visibility 0.3s ease;
    
    /* Collapsed state */
    padding: 12px;
    overflow: hidden;
    cursor: pointer;
    
    /* Initially hidden - will be shown by JS when in case study */
    opacity: 0;
    visibility: hidden;
}

/* 3) EXPANDED STATE */
.case-toc-sidebar.expanded {
    width: 180px;
    border-radius: 12px;
    padding: 16px 12px;
    cursor: default;
}

/* 4) COLLAPSE/EXPAND TOGGLE ICON */
.case-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    font-size: 18px;
    color: var(--accent-color, #6B8E4E);
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease;
}

.case-toc-sidebar.expanded .case-toc-toggle {
    justify-content: flex-end;
    font-size: 16px;
}

.case-toc-toggle:hover {
    transform: scale(1.1);
}

/* 5) TOC TITLE - HIDDEN WHEN COLLAPSED */
.case-toc-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-navy-light, #3D5563);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 142, 78, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.case-toc-sidebar.expanded .case-toc-title {
    opacity: 1;
    visibility: visible;
}

/* 6) TOC LIST - HIDDEN WHEN COLLAPSED */
.case-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.case-toc-sidebar.expanded .case-toc-list {
    opacity: 1;
    visibility: visible;
}

/* 7) COMPACT TOC ITEMS */
.case-toc-item {
    margin-bottom: 4px;
}

.case-toc-link {
    display: block;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--color-navy-light, #3D5563);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Truncate long text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-toc-link:hover {
    background: rgba(107, 142, 78, 0.08);
    color: var(--accent-color, #6B8E4E);
    border-left-color: var(--accent-border, rgba(107, 142, 78, 0.3));
    padding-left: 14px;
}

/* 8) ACTIVE SECTION HIGHLIGHTING */
.case-toc-link.active {
    background: rgba(107, 142, 78, 0.12);
    color: var(--accent-color, #6B8E4E);
    border-left-color: var(--accent-color, #6B8E4E);
    font-weight: 600;
    padding-left: 14px;
}

/* 9) SCROLLBAR STYLING (IF TOC IS TALL) */
.case-toc-sidebar {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 142, 78, 0.3) transparent;
}

.case-toc-sidebar::-webkit-scrollbar {
    width: 4px;
}

.case-toc-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.case-toc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(107, 142, 78, 0.3);
    border-radius: 2px;
}

/* 10) MOBILE & TABLET - REMOVE FLOATING TOC */
@media (max-width: 1023px) {
    .case-toc-sidebar {
        display: none; /* Hide floating TOC on mobile */
    }
    
    /* Show dropdown alternative instead */
    .mobile-toc-dropdown {
        display: block;
        margin-bottom: 24px;
        background: white;
        border: 1px solid rgba(107, 142, 78, 0.2);
        border-radius: 8px;
        padding: 12px 16px;
    }
    
    .mobile-toc-select {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
        border: 1px solid rgba(107, 142, 78, 0.2);
        border-radius: 6px;
        background: white;
        color: var(--color-navy, #2C4251);
        cursor: pointer;
    }
    
    .mobile-toc-label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-navy-light, #3D5563);
        margin-bottom: 8px;
        display: block;
    }
}

/* Desktop: Hide mobile dropdown */
@media (min-width: 1024px) {
    .mobile-toc-dropdown {
        display: none;
    }
}

/* 11) ENSURE TOC DOESN'T OVERLAP CONTENT ON SMALL SCREENS */
@media (min-width: 1024px) and (max-width: 1400px) {
    .case-toc-sidebar {
        right: 16px; /* Closer to edge on smaller desktop */
    }
}

/* 12) PREVENT TOC FROM BLOCKING INTERACTIVE ELEMENTS */
.case-toc-sidebar {
    pointer-events: auto;
}

.case-toc-sidebar:not(.expanded) .case-toc-title,
.case-toc-sidebar:not(.expanded) .case-toc-list {
    pointer-events: none;
}

/* 13) ACCESSIBILITY - FOCUS STATES */
.case-toc-link:focus {
    outline: 2px solid var(--accent-color, #6B8E4E);
    outline-offset: 2px;
}

.case-toc-toggle:focus {
    outline: 2px solid var(--accent-color, #6B8E4E);
    outline-offset: 2px;
}

/* 14) SMOOTH APPEARANCE CONTROLLED BY JS */
.case-toc-sidebar {
    /* Visibility controlled by JavaScript based on scroll position */
    /* No auto-animation on page load */
}