/* SYS Power Yoga – "Join Class" call-to-action (header + floating button)
   Shared by index.html (site.css) and the policy pages (compliance.css).
   Both stylesheets define the same :root tokens, so the colours match either theme. */

/* Shared pill look */
.join-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background: var(--accent, #c47a54);
  color:#fff !important;
  font-family: var(--sans, system-ui, sans-serif);
  font-weight:700;font-size:.86rem;letter-spacing:.03em;
  line-height:1.2;white-space:nowrap;
  border:0;text-decoration:none;
  box-shadow: 0 8px 20px rgba(196,122,84,.32);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.join-pill:hover,
.join-pill:focus-visible{
  background:#b26a45;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow: 0 12px 26px rgba(196,122,84,.42);
}
.join-pill:focus-visible{outline:2px solid var(--brand-dark, #3f5a3c);outline-offset:3px}
.join-pill svg{width:16px;height:16px;fill:currentColor;flex:none}

/* Top bar: WhatsApp pill + Join Class side by side */
.topbar-actions{display:flex;align-items:center;gap:10px;flex:none}

/* Compact variant for the thin top bar */
.topbar .join-pill{
  padding:6px 14px;font-size:.8rem;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* Floating button — fixed wrapper for pages without an existing .fab-stack */
.join-float{
  position:fixed;right:18px;bottom:18px;z-index:9000;
  display:flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Floating variant of the pill (both inside .fab-stack and .join-float) */
.join-pill.join-fab{
  padding:12px 20px;font-size:.9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.join-pill.join-fab:hover{box-shadow:0 16px 32px rgba(0,0,0,.30)}

/* Keep the floating pill readable but out of the way on phones */
@media (max-width:640px){
  .join-pill.join-fab{padding:11px 16px;font-size:.82rem}
  .join-pill.join-fab svg{width:15px;height:15px}
}

/* Homepage: full-width, centred inside the collapsed mobile menu */
@media (max-width:920px){
  .nav.open .join-pill{justify-content:center}
  .topbar-inner{flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){
  .join-pill{transition:none}
  .join-pill:hover,.join-pill:focus-visible{transform:none}
}