/* SLU Toolkit — Back to Top button
   ---------------------------------------------------------------------------
   Fixed, smooth-scrolling back-to-top button with an optional scroll-progress
   ring. All appearance is driven by CSS variables set inline on #slu-btt by the
   PHP renderer (see class-back-to-top.php), so this file only carries structure
   and behaviour. */

#slu-btt {
    position: fixed;
    z-index: 9990;
    width: var(--btt-size, 48px);
    height: var(--btt-size, 48px);
    padding: 0;
    border: none;
    border-radius: var(--btt-radius, 50%);
    background: var(--btt-bg, #111);
    color: var(--btt-icon, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);

    /* Hidden until the visitor scrolls past the offset. The .is-visible class
       is toggled by back-to-top.js. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}

#slu-btt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#slu-btt:hover {
    background: var(--btt-bg-hover, #000);
    color: var(--btt-icon-hover, #fff);
}

#slu-btt:focus-visible {
    outline: 2px solid var(--btt-ring, #34d399);
    outline-offset: 3px;
}

/* Position variants — vertical margin is shared; horizontal differs. */
#slu-btt.slu-btt--right  { bottom: var(--btt-mv, 30px); right: var(--btt-mh, 30px); }
#slu-btt.slu-btt--left   { bottom: var(--btt-mv, 30px); left:  var(--btt-mh, 30px); }
#slu-btt.slu-btt--center { bottom: var(--btt-mv, 30px); left: 50%; transform: translateX(-50%) translateY(14px); }
#slu-btt.slu-btt--center.is-visible { transform: translateX(-50%) translateY(0); }

/* Icon */
#slu-btt .slu-btt__icon {
    position: relative;
    z-index: 2;
    width: var(--btt-icon-size, 22px);
    height: var(--btt-icon-size, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    line-height: 0;
}
#slu-btt .slu-btt__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Progress ring — sits just inside the button edge. For a circular button the
   fill is a <circle> rotated -90deg so its stroke starts at 12 o'clock and
   fills clockwise. For square/rounded buttons the fill is a <rect>, whose
   stroke naturally begins at the top-left corner and runs clockwise — so it is
   NOT rotated (rotating a rect would start the fill from a side instead). */
#slu-btt .slu-btt__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
#slu-btt .slu-btt__track {
    stroke: var(--btt-track, rgba(255,255,255,.18));
    stroke-width: var(--btt-ring-size, 3);
}
#slu-btt .slu-btt__fill {
    stroke: var(--btt-ring, #34d399);
    stroke-width: var(--btt-ring-size, 3);
    stroke-linecap: round;
    transition: stroke-dashoffset .1s linear;
}
/* Circle fill only: rotate so the stroke starts at the top (12 o'clock). */
#slu-btt circle.slu-btt__fill {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* When the ring is present, the icon sits slightly smaller so it doesn't crowd
   the stroke. */
#slu-btt.has-ring .slu-btt__icon { transform: scale(.92); }

/* Respect reduced-motion: no slide-in transform, no ring easing. */
@media (prefers-reduced-motion: reduce) {
    #slu-btt,
    #slu-btt.slu-btt--center { transition: opacity .2s ease, visibility .2s ease; transform: none; }
    #slu-btt.slu-btt--center.is-visible { transform: translateX(-50%); }
    #slu-btt .slu-btt__fill { transition: none; }
}