/* template/css/back-to-top.css
 *
 * Fixed bottom-right "back to top" button.  Injected by back-to-top.js
 * once the visitor has scrolled past the threshold; hidden otherwise.
 */
.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    z-index: 60;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.back-to-top:hover  { background: #f1f5f9; color: #0f172a; }
.back-to-top:focus  { outline: 2px solid #3b82f6; outline-offset: 2px; }
.back-to-top svg    { display: block; }

@media (min-width: 768px) {
    .back-to-top { right: 1.5rem; bottom: 1.5rem; }
}

/* Share FAB lives in the same corner — when present, lift the back-to-top
   button above it so they don't overlap. The share button is ~48-56px tall
   plus a 16px gap, so 70-72px of vertical offset clears it cleanly. */
body:has(.share-btn--floating) .back-to-top { bottom: 4.5rem; }
@media (min-width: 768px) {
    body:has(.share-btn--floating) .back-to-top { bottom: 5rem; }
}

[data-theme="dark"] .back-to-top {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .back-to-top:hover {
    background: #1e293b;
    color: #f1f5f9;
}

/* Print: never */
@media print { .back-to-top { display: none !important; } }

/* Stay clear of cookie banner / consent UI when shown */
body.has-consent-banner .back-to-top { bottom: 5rem; }