/* ===== ICON FIX CSS - Force icon display ===== */

/* Force all contact-item icons to display */
.contact-item i,
body.index-page .contact-item i,
body.contact-page .contact-item i {
    width: 50px !important;
    height: 50px !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--font-size-lg) !important;
    flex-shrink: 0 !important;
    box-shadow: var(--shadow-md) !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: auto !important;
    text-align: center !important;
}

/* Force pseudo-element to show icon */
.contact-item i::before,
body.index-page .contact-item i::before,
body.contact-page .contact-item i::before {
    content: attr(data-icon) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: inherit !important;
    color: inherit !important;
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .contact-item i,
    body.index-page .contact-item i,
    body.contact-page .contact-item i {
        width: 40px !important;
        height: 40px !important;
        font-size: var(--font-size-base) !important;
        margin: 0 auto !important;
    }
    
    .contact-item,
    body.index-page .contact-item,
    body.contact-page .contact-item {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .contact-item div,
    body.index-page .contact-item div,
    body.contact-page .contact-item div {
        text-align: center !important;
        width: 100% !important;
    }
    
    .contact-item h4,
    body.index-page .contact-item h4,
    body.contact-page .contact-item h4 {
        text-align: center !important;
        margin: 0 auto var(--spacing-xs) auto !important;
    }
    
    .contact-item p,
    body.index-page .contact-item p,
    body.contact-page .contact-item p {
        text-align: center !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .contact-item i,
    body.index-page .contact-item i,
    body.contact-page .contact-item i {
        width: 40px !important;
        height: 40px !important;
        font-size: var(--font-size-base) !important;
        margin: 0 auto !important;
    }
    
    .contact-item,
    body.index-page .contact-item,
    body.contact-page .contact-item {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
    }
    
    .contact-item div,
    body.index-page .contact-item div,
    body.contact-page .contact-item div {
        text-align: center !important;
        width: 100% !important;
    }
    
    .contact-item h4,
    body.index-page .contact-item h4,
    body.contact-page .contact-item h4 {
        text-align: center !important;
        margin: 0 auto var(--spacing-xs) auto !important;
    }
    
    .contact-item p,
    body.index-page .contact-item p,
    body.contact-page .contact-item p {
        text-align: center !important;
        margin: 0 auto !important;
    }
}

/* Debug styles - removed after successful testing */