/* Editor and Frontend Styles for Social Icons Block */

/* Main block styles */
.wp-block-tonyteo-social-icons,
.site-social-icons {
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center;
}

.wp-block-tonyteo-social-icons a,
.site-social-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 0 5px;
    line-height: 35px;
    text-align: center;
    background-color: #343434;
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.wp-block-tonyteo-social-icons a:hover,
.site-social-icons a:hover {
    background-color: #daa520;
}

/* Font Awesome specific styles */
.wp-block-tonyteo-social-icons i,
.site-social-icons i {
    font-size: 16px;
    line-height: 35px;
    vertical-align: middle;
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Ensure Font Awesome icons are properly aligned */
.wp-block-tonyteo-social-icons .fa-brands,
.site-social-icons .fa-brands {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}