/* =====================================================
   Social Icons Font
   ===================================================== */

@font-face {
    font-family: 'masterblank-social';
    src: url('../fonts/social-share.eot');
    src:
        url('../fonts/social-share.eot?#iefix') format('embedded-opentype'),
        url('../fonts/social-share.woff') format('woff'),
        url('../fonts/social-share.ttf') format('truetype'),
        url('../fonts/social-share.svg#social-share') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =====================================================
   Base Icon Styling
   ===================================================== */

.masterblank-social-icons {
    display: flex;
    gap: 10px;
}

.masterblank-social-icons .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.masterblank-social-icons .social-icon {
    font-family: 'masterblank-social';
    font-style: normal;
    font-weight: normal;
    speak: none;
    line-height: 1;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   Glyph Mapping
   ===================================================== */

.icon-facebook::before {
    content: "\f39e";
}

.icon-twitter::before {
    content: "\f099";
}

/* Instagram uses instapaper glyph in this font */
.icon-instagram::before {
    content: "\ue903";
}

.icon-wordpress::before {
    content: "\uf19a";
}

/* =====================================================
   STYLE 1 — Plain Icons
   ===================================================== */

.masterblank-social-icons.style-1 .social-icon {
    color: currentColor;
}

/* =====================================================
   STYLE 2 — Boxed Icons
   ===================================================== */

.masterblank-social-icons.style-2 .social-link {
    background: #f2f2f2;
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.masterblank-social-icons.style-2 .social-icon {
    color: #333;
}

/* =====================================================
   STYLE 3 — Rounded / Filled
   ===================================================== */

.masterblank-social-icons.style-3 .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #111;
}

.masterblank-social-icons.style-3 .social-icon {
    color: #fff;
}

/* Optional hover effect */
.masterblank-social-icons .social-link:hover {
    opacity: 0.8;
}