<!-- Back to All plugin by opsquare.co -->

<!-- CSS -->
<style>
:root {
  --op-back-to-all-color: currentColor; /* Button color */
  --op-back-to-all-icon-gap: 4px; /* Gap between icon and text */
  --op-back-to-all-bottom-margin: 48px;
}

.op-back-to-all-wrap {
  margin-bottom: var(--op-back-to-all-bottom-margin);
}

.op-back-to-all-wrap .op-back-to-all {
  display: inline-flex;
  align-items: center;
  gap: var(--op-back-to-all-icon-gap);
  text-decoration: none;
  color: var(--op-back-to-all-color);
  opacity: 1;
  transition: opacity 0.25s;
}
.op-back-to-all-wrap .op-back-to-all:hover {
  opacity: 0.7;
}
.op-back-to-all-wrap svg,
.op-back-to-all-wrap img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.op-back-to-all-wrap--portfolio {
  box-sizing: border-box;
  max-width: calc(100% - (var(--sqs-site-gutter, 4vw) - 11px) * 2);
  margin-left: calc(var(--sqs-site-gutter, 4vw) - 11px);
}
@media (max-width: 767px) {
  .op-back-to-all-wrap--portfolio {
    max-width: calc(100% - (var(--sqs-mobile-site-gutter, 6vw) - 11px) * 2);
    margin-left: calc(var(--sqs-mobile-site-gutter, 6vw) - 11px);
  }
}

/*** Optional additional styling ***/
.op-back-to-all {
  padding: 3px 8px 5px 3px;
  border: 1px solid currentColor;
  border-radius: 4px;
}
</style>

<!-- JS -->
<script>
/* Back to All plugin by opsquare.co */
(function () {

    /*** Plugin options ***/
    const options = {
        blog:      'Back to all posts',
        portfolio: 'Back to all projects',
        class:     '', // extra class(es)
        icon:      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M10 13L5 8l5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
    };
    /*** Stop editing ***/

    const COLLECTION_TYPE = { blog: 1, portfolio: 23 };

    function getPostType() {
        try {
            if (!document.body.classList.contains('view-item')) return null;
            const type = window.Static.SQUARESPACE_CONTEXT.collection.type;
            if (type === COLLECTION_TYPE.blog) return 'blog';
            if (type === COLLECTION_TYPE.portfolio) return 'portfolio';
        } catch (_) {}
        return null;
    }

    function getCollectionUrl() {
        try {
            return window.Static.SQUARESPACE_CONTEXT.collection.fullUrl;
        } catch (_) {
            const parts = window.location.pathname.split('/').filter(Boolean);
            return parts.length > 1 ? '/' + parts[0] : '/';
        }
    }

    const insertionTargets = {
        blog: {
            el: () => document.querySelector('.blog-item-wrapper article.entry .blog-item-top-wrapper'),
            position: 'afterbegin'
        },
        portfolio: {
            el: () => document.querySelector('#sections .page-section .content'),
            position: 'afterbegin'
        },
    };

    function opBackToAll() {
        const postType = getPostType();
        if (!postType) return;

        const { el, position } = insertionTargets[postType];
        const target = el();
        if (!target) return;

        const href = getCollectionUrl();
        const extraClass = options.class ? ' ' + options.class : '';

        target.insertAdjacentHTML(position,
            `<div class="op-back-to-all-wrap op-back-to-all-wrap--${postType}">
                <a class="op-back-to-all${extraClass}" href="${href}">
                    ${options.icon}
                    <span>${options[postType]}</span>
                </a>
            </div>`
        );

        document.body.classList.add('op-has-back-to-all');
    }

    document.addEventListener('DOMContentLoaded', () => {
        opBackToAll();
    });

})();
</script>

<!-- end Back to All plugin -->