/* ==========================================================================
   Pixel Academy — Floating WhatsApp support action

   Built by pixel-support.js. Restrained on purpose: a single circular action
   in the corner furthest from the reading edge, no badge, no pulse, no label
   that grows on hover. It is a way out for a stuck student, not a promotion.
   ========================================================================== */

:root {
  /* Height of any fixed bottom bar on this page, measured and published by
     pixel-support.js. Zero when there is none. */
  --px-support-bar: 0px;
  /* A page with its own bottom-fixed CTA can raise the button further. */
  --px-support-lift: 0px;
  --px-support-gap: 16px;
}

.px-support {
  position: fixed;
  z-index: 95;
  /* Lower-left. In this RTL layout that is the side away from where the eye
     starts, so it interrupts nothing. */
  left: var(--px-support-gap);
  right: auto;
  bottom: calc(
    var(--px-support-gap) + var(--px-support-bar) + var(--px-support-lift) +
      env(safe-area-inset-bottom, 0px)
  );

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Comfortably past the 44px minimum target. */
  width: 54px;
  height: 54px;

  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;

  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(6, 5, 26, 0.28), 0 2px 6px rgba(6, 5, 26, 0.2);

  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.24, 1),
    box-shadow 200ms cubic-bezier(0.22, 0.61, 0.24, 1);
}

.px-support:hover,
.px-support:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 5, 26, 0.34), 0 3px 8px rgba(6, 5, 26, 0.24);
}

.px-support:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.px-support:active {
  transform: translateY(0);
}

/* Pages whose own fixed bottom bar the button has to clear. These bars are
   page-specific, so rather than teaching the module about each one, each page
   declares its bar with data-px-bottombar (measured at runtime) and this block
   covers the ones that were already built without it. */
.pxe-bottombar ~ .px-support,
.lp-actions ~ .px-support {
  --px-support-lift: 8px;
}

/* Slightly smaller on the narrowest phones, where the corner is scarcer. */
@media (max-width: 380px) {
  .px-support {
    width: 48px;
    height: 48px;
    font-size: 1.45rem;
    --px-support-gap: 12px;
  }
}

/* Printing a page should not print a chat button. */
@media print {
  .px-support {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-support {
    transition: none;
  }

  .px-support:hover,
  .px-support:focus-visible {
    transform: none;
  }
}