/* Fixed social icon bar, top-left on every page.
   Icons only, no labels. The Elsewhere section on the homepage keeps the labels. */

.sitesocial{
  position:fixed; top:14px; left:14px; z-index:900;
  display:flex; gap:6px; padding:6px;
  border-radius:999px;
  background:rgba(18,0,51,.62);
  border:1px solid rgba(191,192,209,.18);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.sitesocial a{
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  color:#d9c9ff;
  border:0;                       /* the page theme underlines links; not here */
  text-decoration:none;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}

.sitesocial a svg{ width:17px; height:17px; display:block; }

.sitesocial a:hover,
.sitesocial a:focus-visible{
  color:#fff;
  background:rgba(121,76,195,.5);
  box-shadow:0 0 10px rgba(154,114,224,.75), 0 0 20px rgba(121,76,195,.45);
  outline:none;
}

@media (max-width:620px){
  .sitesocial{ top:8px; left:8px; gap:2px; padding:4px; }
  .sitesocial a{ width:26px; height:26px; }
  .sitesocial a svg{ width:15px; height:15px; }
}

/* Anyone who has asked for reduced motion still gets the hover state, just not the fade. */
@media (prefers-reduced-motion: reduce){
  .sitesocial a{ transition:none; }
}