/**
 * Add .wm-pattern-accordion to a group or container block to create an accordion. 
 * Add .wm-toggle-btn to the toggle button and .wm-toggle-content to the content div that will be toggled.
 * Copy this file to your theme's assets/css/patterns directory to customize/extend the functionality. 
 * This file will automatically enqueue when .wm-pattern-accordion is detected.
 *
 * JS file: assets/js/patterns/wm-pattern-accordion.js
 *
 * @version 1.0.0
 * @since 2025-10-16
 */

.wm-accordion > div, .wmx-accordion-row > div {
        position: relative;
}
.wm-pattern-styles-accordion .wmx-accordion-row {
    margin-bottom: 12px !important;
}
/* Accordion Conntent Panel Inital State  using grid-template-rows: 0fr to animate a height change */
.wm-accordion .wm-toggle-content, .wmx-accordion-row .wm-toggle-content {   
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.3s ease !important;
    overflow: hidden !important;
    opacity: 0;
}

/* Accordion Conntent Panel Active State */
.wm-accordion .active .wm-toggle-content, .wm-pattern-styles-accordion .active .wm-toggle-content {
    grid-template-rows: 1fr !important;
    opacity: 1;
}

/* Remove SVG from toggle button and replace with default CSS plus icon to minus active state */
.uagb-svg-wrapper svg{
 display: none !important;
}   
/* Opt-out: keep the original SVG when .wm-accordion-keep-svg is on the accordion wrapper */
.wm-accordion-keep-svg .uagb-svg-wrapper svg{
 display: inline-block !important;
}
.wmx-accordion-row .wm-toggle-btn {
    padding-right: 16px;
}
/* Default Plus/Minus Icons */
.wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper:before,
.wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    height: 3px;
    width: 18px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease-in-out;
}

.primary-icon-color .wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper:before,
.primary-icon-color .wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper:after {
    background-color: var();

}

.wm-accordion-keep-svg .uagb-svg-wrapper:before, 
.wm-accordion-keep-svg .uagb-svg-wrapper:after {
    display:none !important;
}
.wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper:after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.wmx-accordion-row.active .wm-toggle-btn .uagb-svg-wrapper:after {
    opacity: 0;
}
.wmx-accordion-row .wm-toggle-btn .uagb-svg-wrapper {
  position: relative;
  background:none !important;
}
.wmx-accordion-row .services-list-heading {
    margin-bottom: 0;
}
.wmx-accordion-row  .services-toggle-list-heading {
    display: flex;
}

.wmx-accordion-row > div:first-of-type {
    cursor: pointer;
}


.wm-accordion .wm-toggle-content {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
.wm-accordion-force-inner-padding .wm-toggle-content .group-0 > .wp-block-group__inner-container > * {
    padding-left:20px !important;
    padding-right: 20px !important;
}
.wm-accordion .wm-toggle-content .group-0 > .wp-block-group__inner-container {
    padding-top:12px !important;
    padding-bottom: 12px !important;
    max-width: 100% !important;
}
.wm-accordion .wm-toggle-content > *, .wmx-accordion-row .wm-toggle-content > * {
    min-height: 0 !important;
}



.wm-toggle-btn {
    cursor: pointer;
    transition: transform 0.3s ease;

}
.rotate-icon .active .wm-toggle-btn {
    transform: rotate(180deg);
}


.flip-icon .wm-toggle-btn .uagb-svg-wrapper svg {
    display: inline-block !important;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
    transform-origin: center;
}
.flip-icon .active .wm-toggle-btn .uagb-svg-wrapper svg {
    transform: rotate(180deg);
}


.block-editor-block-list__layout .wm-toggle-content, .editor-styles-wrapper .wm-toggle-content, .wm-accordion .active .wm-toggle-content, .wm-pattern-styles-accordion .active .wm-toggle-content {
     grid-template-rows: 1fr !important;
     opacity: 1;
}


.wmx-accordion-row  .wm-toggle-btn {
  position: relative;
  cursor: pointer;
}