:root {
    --footer-link-color: rgba(148, 163, 184, 1);
    --footer-link-hover: rgba(248, 250, 252, 1);
    --footer-social-bg: rgba(30, 41, 59, 0.85);
    --footer-social-hover-bg: rgba(37, 99, 235, 0.85);
}

.footer-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--footer-link-color);
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-link::before {
    content: '\203A';
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size: 0.75rem;
    color: var(--footer-link-hover);
}

.footer-link:hover,
.footer-link:focus {
    color: var(--footer-link-hover);
    transform: translateX(2px);
}

.footer-link:hover::before,
.footer-link:focus::before {
    opacity: 1;
    transform: translateX(0);
}

.footer-social {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--footer-social-bg);
    border: 1px solid rgba(71, 85, 105, 0.6);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    color: rgba(226, 232, 240, 1);
}

.footer-social svg {
    height: 1.3rem;
    width: 1.3rem;
    fill: currentColor;
}

.footer-social:hover,
.footer-social:focus {
    transform: translateY(-2px);
    background-color: var(--footer-social-hover-bg);
    border-color: rgba(59, 130, 246, 0.8);
    color: rgba(248, 250, 252, 1);
}

@media (max-width: 640px) {
    #siteFooter .footer-columns {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }
}