/* ==========================================================================
   Social Icons Dock — Polymath360Studio standard component
   Floating, fixed bottom-right vertical stack of brand-colored social icons.
   ========================================================================== */

:root {
  --dock-icon-size: 48px;
  --dock-gap: 12px;
  --dock-right-offset: 24px;
  /* Raise this if a cookie-consent bar, "back to top" button, or
     anything else floats bottom-right on this site — keeps the dock
     clear of it without touching any other rule below. WhatsApp no
     longer needs this treatment since it's built into the dock itself. */
  --dock-bottom-offset: 24px;
}

.p360-social-dock {
  position: fixed;
  right: var(--dock-right-offset);
  bottom: calc(var(--dock-bottom-offset) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--dock-gap);
  z-index: 999; /* below modal/overlay layers (typically 1000+), above page content */
  transition: opacity 0.4s ease;
}

/* Mobile-only: added/removed by the script below after a period of
   scroll inactivity, so the dock doesn't sit over content a visitor
   is trying to read on a small screen. Reappears the moment they
   scroll again, tap it, or focus into it via keyboard.
   The min-width rule is a safety net — even if the class were ever
   applied outside mobile, it has no visual effect on larger screens. */
.p360-social-dock.p360-idle {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 601px) {
  .p360-social-dock.p360-idle {
    opacity: 1;
    pointer-events: auto;
  }
}

.p360-social-icon {
  width: var(--dock-icon-size);
  height: var(--dock-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}

.p360-social-icon svg {
  width: 55%;
  height: 55%;
}

/* Tasteful default hover: lift + slight scale + deeper shadow.
   Applies per-icon so each one lifts independently, not the whole stack. */
.p360-social-icon:hover,
.p360-social-icon:focus-visible {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.p360-social-icon:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Brand colors — kept true to each platform's official palette */
.p360-instagram {
  background: radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.p360-facebook   { background: #1877F2; }
.p360-youtube    { background: #FF0000; }
.p360-x          { background: #000000; }
.p360-linkedin   { background: #0A66C2; }
.p360-whatsapp   { background: #25D366; }

/* No approved profile destination has been supplied for these networks. */
.p360-social-dock a.p360-x[href="#"],
.p360-social-dock a.p360-linkedin[href="#"] { display: none; }

/* ==========================================================================
   Mobile: shrink the footprint rather than resizing 1:1.
   A 48px stack sitting in the thumb zone crowds a narrow screen; this
   keeps icons comfortably tappable (WCAG target size) without dominating
   the viewport.
   ========================================================================== */
@media (max-width: 600px) {
  :root {
    --dock-icon-size: 40px;
    --dock-gap: 10px;
    --dock-right-offset: 16px;
    --dock-bottom-offset: 16px;
  }
}