/**
 * Mobile Accordion Styles
 * Collapses group sections with headings on mobile devices
 */

/* Desktop - No accordion behavior */
@media (min-width: 769px) {
    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle {
        /* Button acts as transparent wrapper on desktop */
        all: unset;
        display: contents;
        cursor: default;
    }

    .sierra-mobile-accordion-wrapper .sierra-accordion-caret {
        display: none;
    }

    .sierra-mobile-accordion-wrapper .sierra-accordion-content {
        display: block !important;
        opacity: 1 !important;
        max-height: none !important;
    }
}

/* Mobile - Accordion behavior */
@media (max-width: 768px) {
    /* Toggle button styling */
    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle {
        /* Reset button styles */
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;

        /* Match heading styles */
        font: inherit;
        color: inherit;
        text-align: inherit;
        width: 100%;

        /* Flex layout for heading text + caret */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        /* Touch target */
        min-height: 44px;

        /* Smooth interaction */
        transition: opacity 0.2s ease;
    }

    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle:hover {
        opacity: 0.8;
    }

    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle:active {
        opacity: 0.6;
    }

    /* Caret icon */
    .sierra-accordion-caret {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
        display: block;
        margin-left: auto;
    }

    /* Rotate caret when open */
    .sierra-accordion-caret.is-open {
        transform: rotate(180deg);
    }

    /* Collapsible content */
    .sierra-accordion-content {
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hidden state (default on mobile) */
    .sierra-accordion-content.is-hidden {
        max-height: 0;
        opacity: 0;
    }

    /* Visible state */
    .sierra-accordion-content:not(.is-hidden) {
        max-height: 1000px; /* Large enough for content */
        opacity: 1;
    }

    /* Ensure accordion wrapper takes full width */
    .sierra-mobile-accordion-wrapper {
        flex: auto;
        width: 100%;
    }

    /* Ensure headings inside accordion take full width */
    .sierra-mobile-accordion-wrapper h1,
    .sierra-mobile-accordion-wrapper h2,
    .sierra-mobile-accordion-wrapper h3,
    .sierra-mobile-accordion-wrapper h4,
    .sierra-mobile-accordion-wrapper h5,
    .sierra-mobile-accordion-wrapper h6 {
        width: 100%;
    }

    /* Add spacing between accordion items */
    .sierra-mobile-accordion-wrapper + .sierra-mobile-accordion-wrapper {
        margin-top: var(--wp--preset--spacing--small, 24px);
    }

    /* Focus styles for accessibility */
    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Remove any unwanted tap highlight on mobile */
    .sierra-mobile-accordion-wrapper .sierra-accordion-toggle {
        -webkit-tap-highlight-color: transparent;
    }
}