/* Fixed social strip — six independent blocks, right edge (component: social-float) */

.social-float {
  position: fixed;
  top: 50%;
  right: max(10px, env(safe-area-inset-right, 0px));
  transform: translateY(-50%);
  z-index: 1015;
  pointer-events: none;
}

/* Homepage: while hero video is visible, hide this bar */
body.is-hero-visible .social-float {
  display: none;
}

.social-float__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

/* Each icon = its own block (black tile + white icon) */
.social-float__block {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #00327e;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.social-float__block:hover {
  background: #00255e;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 44px rgba(0, 50, 126, 0.28);
  transform: translateY(-2px);
}

.social-float__block:focus-visible {
  outline: 2px solid #00327e;
  outline-offset: 2px;
}

.social-float__block i {
  font-size: 20px;
  line-height: 1;
}

/* Hide on small screens (mobile/tablet) */
@media (max-width: 1024px) {
  .social-float {
    display: none;
  }
}

@media (max-width: 480px) {
  .social-float__list {
    gap: 6px;
  }

  .social-float__block {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .social-float__block i {
    font-size: 18px;
  }
}