/**
 * Floating social menu — fixed bottom-right, desktop only.
 *
 * Mirrors react-src components/layout/social-menu values:
 *   - hidden on mobile (display: none)
 *   - position: fixed; right: 0; bottom: 3.02vw
 *   - width: 2.02vw (= unit.md.horizontalMargin - 1)
 *   - horizontal padding: 0.5vw
 *   - 0.75vw margin-top between icons
 *
 * The icons themselves use `currentColor` so a parent / hover rule can
 * tint them; default is black to match the original SPA.
 */

.social-menu {
    display: none;
}

@media (min-width: 769px) {
    .social-menu {
        display: block;
        position: fixed;
        right: 0;
        bottom: 3.02vw;
        width: 2.02vw;
        padding: 0 0.5vw;
        z-index: 5;
        color: #000;
        pointer-events: none; /* let clicks through except on the actual links */
    }

    .social-menu__link {
        pointer-events: auto;
        display: block;
        width: 100%;
        margin-top: 0.75vw;
        color: inherit;
        line-height: 0;
        transition: transform 500ms cubic-bezier(0.26, 1.04, 0.54, 1);
    }

    .social-menu__link:first-child {
        margin-top: 0;
    }

    .social-menu__link:hover,
    .social-menu__link:focus-visible {
        transform: scale(1.15);
    }

    .social-menu__link svg {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-menu__link {
        transition: none;
    }
}