/* ============================================
   Scroll to Top Button
   ============================================ */

.scroll-to-top {
    --scroll-to-top-offset-right: var(--spacing-md);
    --scroll-to-top-offset-bottom: var(--spacing-md);
    --scroll-to-top-cookie-offset: 0px;
    --scroll-to-top-cookie-gap: var(--spacing-sm);
    --scroll-to-top-chat-offset: 0px;

    position: fixed;
    right: calc(env(safe-area-inset-right, 0px) + var(--scroll-to-top-offset-right));
    bottom: calc(
        env(safe-area-inset-bottom, 0px) +
        var(--scroll-to-top-offset-bottom) +
        var(--scroll-to-top-cookie-offset) +
        var(--scroll-to-top-chat-offset)
    );
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background-color: color-mix(in srgb, var(--color-white) 30%, transparent);
    backdrop-filter: blur(var(--spacing-xs));
    border: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-mobile-menu);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--spacing-sm) + (var(--spacing-xs) / 2)));
    transition: opacity var(--transition-base),
                visibility var(--transition-base),
                transform var(--transition-base),
                background-color var(--transition-base),
                border-color var(--transition-base);
    box-shadow: 0
        calc(var(--spacing-xs) / 2)
        calc(var(--spacing-sm) - (var(--spacing-xs) / 2))
        color-mix(in srgb, var(--color-black) 30%, transparent);
}

/* When HubSpot chat is present, move the button UP so it doesn't overlap the chat bubble.
   JS may override `--scroll-to-top-chat-offset` and `--scroll-to-top-offset-right` for perfect centering. */
.hubspot-chat-ready .scroll-to-top {
    --scroll-to-top-chat-offset: calc(var(--touch-target-min) + var(--spacing-sm));
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background-color: color-mix(in srgb, var(--color-white) 40%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
    transform: translateY(calc(0px - (var(--spacing-xs) / 2)));
    box-shadow: 0
        calc(var(--spacing-xs) - (var(--spacing-xs) / 4))
        calc(var(--spacing-lg) - (var(--spacing-xs) / 2))
        color-mix(in srgb, var(--color-black) 40%, transparent);
}

.scroll-to-top:active {
    transform: translateY(calc(0px - (var(--spacing-xs) / 4)));
}

.scroll-to-top:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.scroll-to-top-icon {
    width: calc(var(--spacing-md) - (var(--spacing-xs) / 2));
    height: calc(var(--spacing-xs) + (var(--spacing-xs) / 2));
    stroke: var(--color-white);
    transition: transform var(--transition-base);
}

.scroll-to-top:hover .scroll-to-top-icon {
    transform: translateY(calc(0px - (var(--spacing-xs) / 4)));
}

@media (min-width: 768px) {
    .scroll-to-top {
        --scroll-to-top-offset-right: var(--spacing-lg);
        --scroll-to-top-offset-bottom: var(--spacing-lg);
        --scroll-to-top-cookie-gap: var(--spacing-md);
    }
    
    .scroll-to-top-icon {
        width: calc(var(--spacing-md) - (var(--spacing-xs) / 2));
        height: calc(var(--spacing-xs) + (var(--spacing-xs) / 2));
    }

    .hubspot-chat-ready .scroll-to-top {
        --scroll-to-top-chat-offset: calc(var(--touch-target-min) + var(--spacing-md));
    }
}