<!-- Additional Menu Button plugin by opsquare.co --> 

<!-- JS --> 
<script>  
(function () {

    /*** Plugin options ***/
    const options = {
        text: 'Button text',
        url: 'https://google.com',
        type: 'secondary',  // primary / secondary / tertiary
        position: 'before', // before / after
        newTab: true,
        showOnMobile: true
    };
    /*** Stop editing ***/

    function opAdditionalButton() {
        const buttonClass = options.type
            ? `sqs-button-element--${options.type.toLowerCase()}`
            : 'sqs-button-element--primary';
        const targetAttr = options.newTab ? 'target="_blank"' : '';

        const buttonHTML = `<a class="btn btn--border theme-btn--primary-inverse 
                            op-added-button op-added-button--desktop 
                            ${buttonClass}" ${targetAttr} href="${options.url}">
                                ${options.text}
                            </a>`;

        const constMobileButtonHTML = `<a class="theme-btn--primary btn ${buttonClass} op-added-button op-added-button--mobile" ${targetAttr} href="${options.url}">
  ${options.text}
</a>`;

        document.body.classList.add('op-has-desktop-nav-menu-button');

        // Desktop insertion
        const desktopTarget = document.querySelector('.header-display-desktop .header-actions-action--cta');
        if (desktopTarget) {
            desktopTarget.insertAdjacentHTML(
                options.position === 'after' ? 'beforeend' : 'afterbegin',
                buttonHTML
            );
        }

        // Mobile insertion
        if (options.showOnMobile) {
            const mobileTarget = document.querySelector('.header-menu-cta');
            mobileTarget.classList.add('header-menu-cta--additional-btn');
            if (mobileTarget) {
                mobileTarget.insertAdjacentHTML(
                    options.position === 'after' ? 'beforeend' : 'afterbegin',
                    constMobileButtonHTML
                );
            }
        }
    }

    document.addEventListener('DOMContentLoaded', e => {
       opAdditionalButton();
    });
})();
</script>

<style>
:root {
  --op-additional-button-margin: 8px;
}
  
.header-actions-action--cta a + a {
  margin-left: var(--op-additional-button-margin) !important;
}
</style>

<!-- end Additional Menu Button plugin -->