/**
 * File: assets/css/frontend/footer/social.css
 * Purpose: Styles Footer social-profile icon links using the shared HyperDAF icon family.
 * Scope: Footer social presentation only.
 * Related PHP: src/Frontend/Footer/Components/SocialLinks.php
 * Related CSS: assets/css/frontend/footer/main.css
 * Related JS: None
 * Package: HyperDAF Pro
 */

.hdf-footer-social {
    margin-top: var(--hdf-spacing-5);
}

.hdf-footer-social__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hdf-spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdf-footer-social__link {
    display: inline-flex;
    width: var(--hdf-component-footer-social-size);
    height: var(--hdf-component-footer-social-size);
    align-items: center;
    justify-content: center;
    border: var(--hdf-border-width-default) solid var(--hdf-color-border);
    border-radius: var(--hdf-radius-round);
    background: var(--hdf-color-surface);
    color: var(--hdf-color-text-secondary);
    text-decoration: none;
    transition:
        border-color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        color var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard),
        transform var(--hdf-motion-duration-fast) var(--hdf-motion-easing-standard);
}

.hdf-footer-social__link:hover {
    border-color: var(--hdf-color-primary);
    color: var(--hdf-color-primary-strong);
    transform: translateY(-0.0625rem);
}

.hdf-footer-social__link .hdf-icon {
    width: var(--hdf-component-footer-social-icon-size);
    height: var(--hdf-component-footer-social-icon-size);
}