/* =============================================================
   CONVERSION ELEMENTS (Phase 9)
   Fixed bottom-right stack: a desktop "Join" button (revealed on
   scroll, expands on hover) above a WhatsApp chat button.
   Brand blue only (no WhatsApp green) — see note in the plan.
   ============================================================= */

.float-actions {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 200;                 /* above content, below modals */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

/* ── WhatsApp button (all viewports) ─────────────────────────── */
.float-wa {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;          /* official WhatsApp green */
  color: #fff;                  /* white glyph — WhatsApp's own logo lockup */
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease, background 0.2s ease;
}
.float-wa:hover { background: #1EBE57; transform: translateY(-2px); }   /* darker green */
.float-wa:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ── Floating Join — desktop only, hidden until scrolled ─────── */
.float-join { display: none; }

@media (min-width: 1024px) {
  .float-join {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 16px;
    max-width: 56px;            /* collapsed = circle */
    overflow: hidden;
    white-space: nowrap;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;       /* not interactive until revealed */
    transition: max-width 0.32s ease, opacity 0.3s ease,
                transform 0.3s ease, background 0.2s ease;
  }
  .float-join.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .float-join:hover,
  .float-join:focus-visible {
    max-width: 320px;
    background: var(--color-primary-light);
    color: var(--color-white);   /* keep the label white — beats the global a:hover colour */
  }
  .float-join:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

  .float-join__icon { flex-shrink: 0; display: inline-flex; }
  .float-join__label {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    opacity: 0;
    transition: opacity 0.2s ease 0.06s;
  }
  .float-join:hover .float-join__label,
  .float-join:focus-visible .float-join__label { opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .float-wa { transition: background 0.2s ease; }
  .float-wa:hover { transform: none; }
  .float-join { transition: opacity 0.2s ease; transform: none; }
}