<script>
/* Aligned Buttons plugin by opsquare.co */

function opAlignedButtons(...args) {
    const positions = ['left', 'right'];
    const position  = positions.includes(args[args.length - 1]) ? args.pop() : null;
    const isSection = args.length === 1;

    function setupPair(feBlock1, feBlock2) {
        const colStart = getComputedStyle(feBlock1).gridColumnStart;
        const colEnd   = getComputedStyle(feBlock2).gridColumnEnd;
        const savedGridColumn = feBlock1.style.gridColumn;
        let clone = null;

        function apply() {
            if (clone) return;
            if (colStart && colEnd) feBlock1.style.gridColumn = `${colStart} / ${colEnd}`;
            clone = feBlock2.cloneNode(true);
            feBlock1.appendChild(clone);
            feBlock2.style.display = 'none';
            feBlock1.classList.add('op-has-aligned-buttons');
            if (position) feBlock1.classList.add(`op-aligned-${position}`);
        }

        function revert() {
            if (!clone) return;
            clone.remove();
            clone = null;
            feBlock1.style.gridColumn = savedGridColumn;
            feBlock2.style.display = '';
            feBlock1.classList.remove('op-has-aligned-buttons');
            if (position) feBlock1.classList.remove(`op-aligned-${position}`);
        }

        const mq = window.matchMedia('(min-width: 768px)');
        mq.matches ? apply() : revert();
        mq.addEventListener('change', e => e.matches ? apply() : revert());
    }

    function processSection(section) {
        const blocks = section.querySelectorAll('[data-sqsp-block="button"]');
        if (blocks.length < 2) return;
        const feBlock1 = blocks[0].closest('[class*="fe-block-"]');
        const feBlock2 = blocks[1].closest('[class*="fe-block-"]');
        if (!feBlock1 || !feBlock2) return;
        setupPair(feBlock1, feBlock2);
    }

    function process() {
        if (isSection) {
            document.querySelectorAll(args[0]).forEach(processSection);
        } else {
            const feBlock1 = document.querySelector(args[0]);
            const feBlock2 = document.querySelector(args[1]);
            if (!feBlock1 || !feBlock2) return;
            setupPair(feBlock1, feBlock2);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        if (window.frameElement !== null) return;
        process();
    });
}

// Run by default on all sections with ID op-double-buttons
opAlignedButtons('[id*="op-double-buttons"]');
</script>

<style>
.op-has-aligned-buttons {
  display: flex;
  gap: 16px;
}
.op-has-aligned-buttons > * {
  min-width: unset !important;
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
}
.op-has-aligned-buttons a {
  white-space: nowrap;
}
</style>