/* ==============================================
   COLLAPSIBLE COMPONENT
   Reusable expand/collapse pattern for accordions,
   advanced options, and progressive disclosure.
   ============================================== */

.collapsible-header {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: var(--space-md-dense) 0;
    color: var(--text-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapsible-header:hover {
    background-color: var(--bg-secondary);
}

.collapsible-arrow {
    width: var(--text-base);
    height: var(--text-base);
    transition: transform var(--transition-fast);
    opacity: 0.6;
}

.collapsible-header[aria-expanded="true"] .collapsible-arrow {
    transform: rotate(90deg);
}

.collapsible-content {
    transition: all var(--transition-normal);
    overflow: hidden;
    padding-left: var(--space-md);
    margin-top: var(--space-md);
}

.collapsible-content.show {
    display: block !important;
}