/* Expand/Collapse Styling Fixes (Bugfix #17) */

/* Fix #1: Add space between toggle icon and text */
.expandcollapse img.toggle {
    margin-right: 8px;
    vertical-align: middle;
}

/* Fix #2: Indent content to align with expand/collapse margin */
.section[name="collapseableSection"] {
    margin-left: 24px; /* Same as icon + margin width */
    padding-top: 10px;
}

/* Enhanced UX: Make expandcollapse clickable with hover effect */
.expandcollapse {
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.expandcollapse:hover {
    opacity: 0.8;
}

/* Accessibility: Focus outline for keyboard navigation */
.expandcollapse:focus {
    outline: 2px solid #0070c0;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Collapse All / Expand All toggle */
#collapseAllImage {
    cursor: pointer;
    transition: opacity 0.2s;
}

#collapseAllImage:hover {
    opacity: 0.8;
}

/* Bugfix #23/#26: Additional overflow protection for code in collapsible sections */
.section[name="collapseableSection"] .CodeContainerTable {
    max-width: calc(100% - 24px); /* Account for section indentation */
}

.section[name="collapseableSection"] .syntaxtable {
    max-width: calc(100% - 24px); /* Account for section indentation */
}