/* ── Mazmazika social icons — THE single source of truth ─────────────────────
 * One stylesheet for every placement of the Facebook + email icons:
 *   .mz-foot-social                 → footer variant (51px circles)
 *   .mz-topbar-social (modifier)    → topbar variant beside the brand (38px)
 *   .mz-social-home (wrapper)       → home page top-left fixed placement
 * Markup comes from exactly two reusable sources:
 *   PHP pages:   php/social-icons.php  → mz_social_icons('topbar'|'footer')
 *   React pages: MzFootSocial (js/landing/mz-ui.jsx), <MzFootSocial topbar />
 * Both self-inject a <link> to this file, so no page carries its own copy of
 * the styles or the markup. NEVER inline these rules per page again.
 */

.mz-foot-social { display: inline-flex; align-items: center; gap: 10px; }
.mz-foot-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 51px; height: 51px; border-radius: 50%; border: 0; color: #fff;
  transition: filter .2s ease, transform .2s ease;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
.mz-foot-social a:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mz-foot-social a svg { width: 24px; height: 24px; }
.mz-foot-social a.mz-soc-fb { background: #1877F2; }
.mz-foot-social a.mz-soc-mail { background: #16a34a; }

/* Topbar variant: sits right of the brand; the auto right margin keeps
   brand+icons grouped left while the nav stays on the far right. Sized to the
   38px avatar/login control so every topbar reads as one row. */
.mz-topbar-social { margin-left: 12px; margin-right: auto; }
.mz-topbar-social.mz-foot-social a { width: 38px; height: 38px; }
.mz-topbar-social.mz-foot-social a svg { width: 18px; height: 18px; }

/* Home page: fixed top-left, mirroring the login avatar's top-right spot.
   Always ONE row, shrinking with the viewport so the pair never runs under
   the centered hero title. On phones the smaller pair tucks up beside the
   "WELCOME TO" line, clear of the title in both axes. */
/* This block and .mz-auth-home (css/landing.css) are ONE row: same --home-chrome-top
   and the same --home-chrome-h, with the icons centred inside that fixed height.
   The height is what keeps them level — the social icons scale down with the
   viewport (clamp below) while the login control stays ~40px, so matching `top`
   alone would still leave the two pairs visibly off by a few px. Do not give
   either side its own `top` in a media query: a 480px override that moved only
   this one is exactly what knocked them out of line. */
.mz-social-home { position: fixed; top: var(--home-chrome-top, 26px);
  left: max(84px, calc((100vw - 1080px) / 2 + 26px)); z-index: 6000;
  height: var(--home-chrome-h, 40px); display: flex; align-items: center; }
.mz-social-home .mz-foot-social { flex-direction: row; gap: clamp(6px, 1.2vw, 10px); }
.mz-social-home .mz-foot-social a { width: clamp(26px, 6.5vw, 38px); height: clamp(26px, 6.5vw, 38px); }
.mz-social-home .mz-foot-social a svg { width: clamp(13px, 3.2vw, 18px); height: clamp(13px, 3.2vw, 18px); }
/* Narrower rail below 480px (56px, not 66) — the LEFT inset tracks it. Both
   sides keep the shared top. */
@media (max-width: 480px) {
  .mz-social-home { left: 74px; }
}