/* ============================================
 * scroll-top.css — fixed back-to-top button
 *
 * Used on every page. Hidden until the user has scrolled down past
 * a threshold, then fades in at the bottom-right of the viewport.
 * Click scrolls smoothly back to the top.
 *
 * Visibility toggled by an inline script in the page (sets
 * .is-visible on scroll past 400px).
 * ============================================ */

.tlm-scroll-top {
  position: fixed;
  right: var(--space-md);                 /* 24 from viewport right (mobile) */
  bottom: var(--space-md);                /* 24 from viewport bottom */
  z-index: 30;                            /* above page content, below navbar (50) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: var(--color-navy);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-on-dark);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    background-color 150ms ease;
}

.tlm-scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tlm-scroll-top:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-button-hover);
}

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

.tlm-scroll-top svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 1024px) {
  .tlm-scroll-top {
    right: var(--space-lg);               /* 32 from viewport right (desktop) */
    bottom: var(--space-lg);
    width: 56px;
    height: 56px;
  }

  .tlm-scroll-top svg {
    width: 28px;
    height: 28px;
  }
}