/* Icon Font Replacements using Unicode Symbols */
/* Original icons referenced doorsteps-icons font which is not available */
/* These use Unicode symbols and emoji as fallbacks */

/* Social Media Icons - using Unicode symbols */
.icon-font-social-facebook::before {
    content: "f";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

.icon-font-social-twitter::before {
    content: "X";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
}

.icon-font-social-pinterest::before {
    content: "P";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

.icon-font-social-vimeo::before {
    content: "V";
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

/* Contact Icons */
.icon-font-email::before {
    content: "\2709"; /* Envelope symbol */
    font-size: 1.2em;
}

.icon-font-phone::before {
    content: "\260E"; /* Telephone symbol */
    font-size: 1.2em;
}

/* Navigation Icons - using Unicode/Emoji */
.nav-icon__image {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nav-icon__image--homebase::before {
    content: "\2302"; /* House symbol */
}

.nav-icon__image--listings::before {
    content: "\2630"; /* Trigram for Heaven - looks like list */
}

.nav-icon__image--profile::before {
    content: "\263A"; /* Smiley face - represents person */
}

.nav-icon__image--map::before {
    content: "\25A6"; /* Square with diagonal crosshatch - represents map */
}

/* Footer social link styling */
.nav-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 5px;
    text-decoration: none;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.nav-footer-social-link:hover {
    color: #333;
    border-color: #999;
    background-color: #f5f5f5;
}

/* Make icons display inline-block when needed */
[class^="icon-font-"]::before,
[class*=" icon-font-"]::before {
    display: inline-block;
    text-align: center;
}