/**
 * Expand/Collapse Arrow Direction Styles - UPDATED VERSION
 * This version uses higher specificity to override theme defaults
 */

/* =================================================================
   CRITICAL: Use !important to override all existing CSS
   ================================================================= */

/* Target all possible arrow implementations */
.expand-collapse-btn:after,
.expand-collapse-btn::after,
button.expand-collapse-btn:after,
button.expand-collapse-btn::after,
a.expand-collapse-btn:after,
a.expand-collapse-btn::after,
.cta__link.expand-collapse-btn:after,
.cta__link.expand-collapse-btn::after {
    display: inline-block !important;
    transition: transform 0.3s ease-in-out !important;
    transform-origin: center center !important;
}

/* =================================================================
   COLLAPSED STATE - DOWN ARROW (↓)
   When content is hidden, arrow should point DOWN
   ================================================================= */

.expand-collapse-btn.state-collapsed:after,
.expand-collapse-btn.state-collapsed::after,
button.expand-collapse-btn.state-collapsed:after,
a.expand-collapse-btn.state-collapsed:after,
.cta__link.expand-collapse-btn.state-collapsed:after {
    transform: rotate(90deg) !important; /* Vertical down arrow */
}

/* =================================================================
   EXPANDED STATE - UP ARROW (↑)  
   When content is visible, arrow should point UP
   ================================================================= */

.expand-collapse-btn.state-expanded:after,
.expand-collapse-btn.state-expanded::after,
button.expand-collapse-btn.state-expanded:after,
a.expand-collapse-btn.state-expanded:after,
.cta__link.expand-collapse-btn.state-expanded:after {
    transform: rotate(-90deg) !important; /* Vertical up arrow */
}

/* =================================================================
   ALTERNATIVE: If arrows are pointing right by default
   Use these values instead (uncomment if needed)
   ================================================================= */

/*
.expand-collapse-btn.state-collapsed:after {
    transform: rotate(180deg) !important; 
}

.expand-collapse-btn.state-expanded:after {
    transform: rotate(0deg) !important;
}
*/

/* =================================================================
   THEME-SPECIFIC OVERRIDES
   Target specific theme classes
   ================================================================= */

/* Override any cta__link styles */
.cta__link.cta--space.state-collapsed:after,
.cta__link.cta--space.state-collapsed::after {
    transform: rotate(90deg) !important; /* Down arrow */
}

.cta__link.cta--space.state-expanded:after,
.cta__link.cta--space.state-expanded::after {
    transform: rotate(-90deg) !important; /* Up arrow */
}

/* =================================================================
   ENSURE HIDDEN CONTENT STARTS HIDDEN
   ================================================================= */

.expandable-content {
    display: none;
    overflow: hidden;
}

.expandable-content.active {
    display: block;
}

/* =================================================================
   ADDITIONAL VISUAL FEEDBACK
   ================================================================= */

/* Hover effect */
.expand-collapse-btn:hover:after,
.expand-collapse-btn:hover::after {
    opacity: 0.7;
}

/* Active/clicking effect */
.expand-collapse-btn:active:after,
.expand-collapse-btn:active::after {
    transform: scale(0.95);
}

/* Focus state for accessibility */
.expand-collapse-btn:focus {
    outline: 2px solid #0468b1 !important;
    outline-offset: 2px !important;
}

/* =================================================================
   DEBUG MODE - Temporarily add borders to verify selectors
   Comment out after testing
   ================================================================= */

/*
.expand-collapse-btn {
    border: 2px solid red !important;
}

.expand-collapse-btn.state-collapsed {
    border: 2px solid blue !important;
}

.expand-collapse-btn.state-expanded {
    border: 2px solid green !important;
}
*/

/* =================================================================
   MOBILE RESPONSIVE
   ================================================================= */

@media screen and (max-width: 768px) {
    .expand-collapse-btn {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
    
    .expand-collapse-btn:after,
    .expand-collapse-btn::after {
        font-size: 14px !important;
    }
}

/* =================================================================
   PRINT STYLES - Hide expand/collapse in print
   ================================================================= */

@media print {
    .expand-collapse-btn {
        display: none !important;
    }
    
    .expandable-content {
        display: block !important;
    }
}