/**
 * Component: Accordion
 * 
 * Styles for the Accordion component matching Market News design.
 * Uses Bootstrap 5 accordion with custom SCDA styling.
 *
 * @package SCDA-2025
 */

/* Component wrapper */
:where(body, .is-preview) .accordion-component {
    /* Inherits global accordion styles from global.css */
}

/* Additional component-specific overrides if needed */
:where(body, .is-preview) .accordion-component .accordion {
    /* Global styles already handle:
     * - Border bottom
     * - Accordion item borders
     * - Button typography and spacing
     * - Plus/minus icons
     * - Accordion body padding
     */
}

/* Ensure proper spacing for button groups and text within accordion */
:where(body, .is-preview) .accordion-component .accordion-body {
    .button-group {
        margin-bottom: var(--spacing-sm);
        
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    /* Text content spacing */
    p {
        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
    :where(body, .is-preview) .accordion-component .accordion-body {
        padding: 0 0 var(--spacing-md);
    }
}