/* --- Footer Social Icons --- */

/* 1. Perfectly center the icons */
footer nav.socials {
    width: 100%;
    justify-content: center;
}

footer nav.socials ul {
    justify-content: center !important; /* Forces the list items to the middle */
    width: 100%;
    gap: 0.6rem !important; /* Adds some nice breathing room between icons */
}

/* Match the navigation's icon sizes, surfaces, and contrast. */
footer .social {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--icon-button-background);
    box-shadow: inset 0 0 0 1px var(--icon-button-border);
    color: var(--icon-color);
}

footer .social:hover,
footer .social:focus-visible {
    background-color: var(--icon-button-hover-background);
}

footer .social > img,
footer .social:hover > img {
    display: block;
    width: 24px;
    height: 24px;
    filter: var(--social-icon-filter);
}

footer .social:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}