/* ==========================================================================
   17 · FLOATING SOCIAL BUTTON
   Bottom-right on every page. Quiet by default, in the theme's hairline
   language rather than a loud brand-coloured circle.
   ========================================================================== */

.social-float {
  position: fixed;
  right: var(--s-5);

  /* env() keeps it clear of the iOS home indicator; the fallback in the first
     argument is what every other browser uses. */
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));

  /* Below the drawer (150) and the lightbox (200) so it is covered when either
     is open, above the page but under the sticky header (100). */
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 0 13px;
  overflow: hidden;

  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lift);
  color: var(--mulberry);

  transition:
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    gap 0.3s var(--ease);
}

.social-float__icon {
  flex: none;
  width: 22px;
  height: 22px;
}

/* The handle is revealed on hover by animating its width from zero, so the
   button is a plain icon at rest and never covers content it does not need to. */
.social-float__label {
  max-width: 0;
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.3s var(--ease),
    opacity 0.2s var(--ease);
}

.social-float:hover,
.social-float:focus-visible {
  gap: var(--s-2);
  background: var(--mulberry);
  border-color: var(--mulberry);
  color: #fff;
}

.social-float:hover .social-float__label,
.social-float:focus-visible .social-float__label {
  max-width: 12rem;
  opacity: 1;
}

.social-float:focus-visible {
  outline: 2px solid var(--mulberry);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .social-float {
    right: var(--s-4);
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    height: 44px;   /* stays at the 44px minimum tap target */
    padding: 0 11px;
  }
}

/* Touch devices have no hover, so the label would either never show or stick
   open after a tap. Keep it icon-only there — the aria-label still names it. */
@media (hover: none) {
  .social-float__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .social-float,
  .social-float__label { transition: none; }
}