/**
 * Footer Mobile Accordion - Custom CSS
 *
 * Modern accordion styling for footer columns on mobile.
 * Collapsed by default with smooth animations.
 * Add this code via WordPress Code Snippets plugin as a CSS snippet.
 *
 * @package eRide
 * @version 1.0.0
 */

/* Mobile accordion styles - only apply on mobile breakpoint */
@media (max-width: 781px) {
    /* Target the footer columns container */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile {
        display: block !important;
    }

    /* Style each accordion section */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile > .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 !important;
    }

    /* Remove border from last section */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile > .wp-block-column:last-child {
        border-bottom: none;
    }

    /* Accordion header (h2 headings) - clickable */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-heading {
        cursor: pointer;
        position: relative;
        padding: 18px 40px 18px 0;
        margin: 0 !important;
        user-select: none;
        transition: color 0.2s ease;
    }

    /* Hover state for headings */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-heading:hover {
        opacity: 0.8;
    }

    /* Plus icon for closed state */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-heading::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }

    /* Minus icon for open state */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column.accordion-open .wp-block-heading::after {
        content: '−';
    }

    /* Accordion content wrapper - hidden by default */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column > *:not(.wp-block-heading) {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Show content when accordion is open */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column.accordion-open > *:not(.wp-block-heading) {
        max-height: 1500px;
        opacity: 1;
        padding-bottom: 18px;
    }

    /* Adjust spacing for nested groups */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column .wp-block-group {
        margin-top: 0 !important;
    }

    /* Ensure paragraphs and navigation maintain proper spacing when open */
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column.accordion-open .wp-block-paragraph,
    .footer .flex-sm-wrap.is-not-stacked-on-mobile .wp-block-column.accordion-open .wp-block-navigation {
        margin-bottom: 0 !important;
    }
}