/* ===========================================================================
   DeutschMaak — shared social icons (Instagram · WhatsApp Channel · Discord)
   ---------------------------------------------------------------------------
   Minimal, logo-only row of three buttons. Shared by every public page.
   Placement — one clean rule:
     · HOME (index.html): the dock sits at the TOP, first element of <main>,
       centred horizontally right under the fixed navbar.
     · EVERY other page: the dock lives in the BOTTOM zone, directly above the
       page's footer (or at the end of the content when there is no footer).
   The buttons themselves are identical on every page (same size, spacing,
   borders, hover animations); only the anchor differs, driven by
   dm-social-icons.js. Each logo floats gently (translateY, staggered) and
   performs a single 360° spin + brand colour on hover/focus. Light + dark
   aware via html.dark. No JS library, no external asset.
   =========================================================================== */

.dm-social-dock {
  --dm-si-hit: 44px;              /* clickable area (>= 40px)               */
  --dm-si-ico: 20px;              /* visible logo size                      */
  --dm-si-fg: #5b6470;           /* sober at rest (light theme)            */
  --dm-si-bd: rgba(16, 20, 26, .14);
  --dm-si-bg: rgba(16, 20, 26, .045);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Top placement (home page only), right under the fixed navbar. The page's
   own offset (on <body> or on its main wrapper) already places it below the
   bar; this small margin is the one uniform gap between the navbar and the
   icons, and the 16px below separate the icons from the page content. */
.dm-social-dock--top { justify-content: center; margin: 8px auto 16px; }

/* Bottom placement (every other page), above the footer, on the page
   background. The 30px above separate the icons from the content that ends
   the page; the 24px below sit between the icons and the footer. The footer's
   own top margin is neutralised so every footer family (.sp-footer,
   .dm-footer, legacy…) yields the same offset from icons to footer. */
.dm-social-dock--bottom { justify-content: center; margin: 30px auto 24px; }
.dm-social-dock--bottom + footer { margin-top: 0; }

/* ── Button shell (only the logo moves; the shell stays aligned) ────────── */
.dm-social-btn {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  box-sizing: border-box;
  width: var(--dm-si-hit);
  height: var(--dm-si-hit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--dm-si-bd);
  background: var(--dm-si-bg);
  color: var(--dm-si-fg);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: color .28s ease, background-color .28s ease,
              border-color .28s ease, box-shadow .28s ease;
}

/* ── Independent continuous float (outer span) ─────────────────────────── */
.dm-social-floater {
  display: inline-flex;
  animation: dmSocialFloat 2.6s ease-in-out infinite;
  will-change: transform;
}
.dm-social-btn:nth-child(1) .dm-social-floater { animation-delay: 0s; }
.dm-social-btn:nth-child(2) .dm-social-floater { animation-delay: .42s; }
.dm-social-btn:nth-child(3) .dm-social-floater { animation-delay: .84s; }

@keyframes dmSocialFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── 360° spin on hover/focus (inner span) ─────────────────────────────── */
.dm-social-rotate {
  display: inline-flex;
  transform-origin: 50% 50%;
}
.dm-social-ico {
  display: block;
  width: var(--dm-si-ico);
  height: var(--dm-si-ico);
  transition: transform .3s ease;
}
.dm-social-btn:hover .dm-social-ico,
.dm-social-btn:focus-visible .dm-social-ico { transform: scale(1.08); }

.dm-social-btn:hover .dm-social-rotate,
.dm-social-btn:focus-visible .dm-social-rotate {
  animation: dmSocialSpin .62s cubic-bezier(.34, .9, .36, 1) 1;
}
@keyframes dmSocialSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Brand colours on hover / keyboard focus ───────────────────────────── */
.dm-social-btn[data-net="instagram"]:hover,
.dm-social-btn[data-net="instagram"]:focus-visible {
  color: #d6249f;
  border-color: rgba(214, 36, 159, .45);
  background: rgba(214, 36, 159, .10);
  box-shadow: 0 0 0 1px rgba(214, 36, 159, .18), 0 10px 24px rgba(214, 36, 159, .30);
}
.dm-social-btn[data-net="instagram"]:hover .dm-social-ico path,
.dm-social-btn[data-net="instagram"]:focus-visible .dm-social-ico path {
  fill: url(#dmSocialIgGradient);   /* pink → purple → orange gradient */
}

.dm-social-btn[data-net="whatsapp"]:hover,
.dm-social-btn[data-net="whatsapp"]:focus-visible {
  color: #25D366;
  border-color: rgba(37, 211, 102, .50);
  background: rgba(37, 211, 102, .12);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, .22), 0 10px 24px rgba(37, 211, 102, .32);
}

.dm-social-btn[data-net="discord"]:hover,
.dm-social-btn[data-net="discord"]:focus-visible {
  color: #5865F2;
  border-color: rgba(88, 101, 242, .50);
  background: rgba(88, 101, 242, .12);
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .22), 0 10px 24px rgba(88, 101, 242, .34);
}

/* Discord destination not wired yet: discreet, still floats/glows, never
   navigates. Once the URL is set in dm-social-icons.js it renders as a real
   <a target="_blank"> and this state disappears. */
.dm-social-btn--soon { opacity: .7; cursor: default; }
.dm-social-btn--soon:hover,
.dm-social-btn--soon:focus-visible { opacity: .95; }

/* ── Visible keyboard focus ring ───────────────────────────────────────── */
.dm-social-btn:focus-visible {
  outline: 2px solid #E11D2E;
  outline-offset: 2px;
}

/* ── Dark theme ────────────────────────────────────────────────────────── */
html.dark .dm-social-dock {
  --dm-si-fg: #c7ced6;
  --dm-si-bd: rgba(255, 255, 255, .15);
  --dm-si-bg: rgba(255, 255, 255, .05);
}
html.dark .dm-social-btn:focus-visible { outline-color: #ff5c6a; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .dm-social-dock { --dm-si-hit: 42px; gap: 10px; }
}

/* ── Reduced motion: keep colour/glow, drop continuous + spin ───────────── */
@media (prefers-reduced-motion: reduce) {
  .dm-social-floater { animation: none; }
  .dm-social-btn:hover .dm-social-rotate,
  .dm-social-btn:focus-visible .dm-social-rotate { animation: none; }
  .dm-social-ico { transition: none; }
  .dm-social-btn:hover .dm-social-ico,
  .dm-social-btn:focus-visible .dm-social-ico { transform: none; }
}