/* ============================================
   FOOTER - WHITE TEXT STYLING
   Match footer design from image
   All text white, proper spacing
   ============================================ */

/* Desktop view */
@media (min-width: 768px) {
    
    /* ============================================
       1. FOOTER LINKS - ORIGINAL GRAY COLOR
       ============================================ */
    
    /* Footer links - original gray color (restored) */
    footer .footer-links li a,
    .footer-links li a,
    footer .footer-col ul:not(.contact-list) li a {
        color: #b0b0b0 !important;
    }
    
    /* Footer links hover - white on hover */
    footer .footer-links li a:hover,
    .footer-links li a:hover,
    footer .footer-col ul:not(.contact-list) li a:hover {
        color: #ffffff !important;
    }
    
    /* ============================================
       2. ABOUT SECTION - ORIGINAL GRAY COLOR
       ============================================ */
    
    /* About paragraph - original gray color (restored) */
    footer .footer-col p {
        color: #b0b0b0 !important;
    }
    
    /* ============================================
       3. CONTACT LIST - ORIGINAL GRAY COLOR, RED ICONS
       ============================================ */
    
    /* Contact list text - original gray color (restored) */
    footer .contact-list li,
    footer .contact-list li a,
    footer .contact-list li span {
        color: #b0b0b0 !important;
    }
    
    /* Contact list hover - white on hover */
    footer .contact-list li a:hover {
        color: #ffffff !important;
    }
    
    /* Contact icons - red (already set in footer-professional.css) */
    footer .contact-list li i {
        color: var(--primary-red, #c62828) !important;
    }
    
    /* ============================================
       4. SOCIAL ICONS - WHITE COLOR
       ============================================ */
    
    /* Social media icons - white color (override inline styles) */
    footer .footer-col:last-child a[href*="facebook"],
    footer .footer-col:last-child a[href*="instagram"],
    footer .footer-col:last-child a[href*="twitter"],
    footer .footer-col:last-child a[href*="x.com"],
    footer .footer-col:last-child a[href*="youtube"],
    footer .footer-col:last-child a[href*="pinterest"],
    footer div[style*="display: flex"] a[href*="facebook"],
    footer div[style*="display: flex"] a[href*="instagram"],
    footer div[style*="display: flex"] a[href*="twitter"],
    footer div[style*="display: flex"] a[href*="x.com"],
    footer div[style*="display: flex"] a[href*="youtube"],
    footer div[style*="display: flex"] a[href*="pinterest"],
    footer a[style*="color: #aaa"][href*="facebook"],
    footer a[style*="color: #aaa"][href*="instagram"],
    footer a[style*="color: #aaa"][href*="twitter"],
    footer a[style*="color: #aaa"][href*="x.com"],
    footer a[style*="color: #aaa"][href*="youtube"],
    footer a[style*="color: #aaa"][href*="pinterest"] {
        color: #ffffff !important;
    }
    
    /* Social icons hover - maintain white or brand colors */
    footer .footer-col:last-child a[href*="facebook"]:hover {
        color: #1877f2 !important;
    }
    
    footer .footer-col:last-child a[href*="instagram"]:hover {
        color: #e4405f !important;
    }
    
    footer .footer-col:last-child a[href*="twitter"]:hover,
    footer .footer-col:last-child a[href*="x.com"]:hover {
        color: #1da1f2 !important;
    }
    
    footer .footer-col:last-child a[href*="youtube"]:hover {
        color: #ff0000 !important;
    }
    
    footer .footer-col:last-child a[href*="pinterest"]:hover {
        color: #bd081c !important;
    }
}