/* Back to top button: fixed at the bottom right, shown by back-to-top.js once the visitor
   has scrolled past the middle of the page. Colours come from the dbim-theme tokens. */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;                       /* above the page, below the accessibility drawer */
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--key);
  color: var(--on-key);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;                 /* hidden buttons cannot be tabbed to or read out */
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.back-to-top::before {                /* arrow drawn in CSS, pointing up */
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.25rem;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(45deg);
}

.back-to-top:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.back-to-top:focus-visible { outline: 3px solid var(--key); outline-offset: 3px; }

/* After the button is used, focus moves to the top of the page without a ring */
body[tabindex="-1"]:focus { outline: 0; }

@media (max-width: 575.98px) {
  .back-to-top { right: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top.is-visible { transition: none; }
}
@media print {
  .back-to-top { display: none; }
}