/* ==========================================================================
   TUOIL — back to top
   Appears once a full screen has been scrolled past, steps aside for the
   cookie notice while that is on screen.
   ========================================================================== */

.c-to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-to-top);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-cream);
  color: var(--c-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.c-to-top[hidden] { display: none; }

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

.c-to-top:hover {
  background: var(--c-surface-2);
  border-color: var(--c-ink);
}

/* --cookie-height is published by the cookie notice while it is on screen */
body.is-cookie-open .c-to-top {
  bottom: calc(var(--cookie-height, 0px) + var(--sp-2));
}

@media (max-width: 768px) {
  .c-to-top { right: var(--sp-2); bottom: var(--sp-2); width: 48px; height: 48px; }
}