/**
 * Social Media Icons with Font Awesome
 * Replaces default WordPress social icons with Font Awesome icons
 *
 * @package ChaletMontagne
 */

/* Hide screen reader text but keep accessible */
.social-navigation .screen-reader-text,
.social-links-menu .screen-reader-text,
.wp-block-social-links .screen-reader-text,
.social-links .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Social links container */
.social-navigation,
.social-links-menu,
.wp-block-social-links,
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Social link items */
.social-navigation a,
.social-links-menu a,
.wp-block-social-link a,
.social-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #333 !important;
    color: transparent !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0 !important;
}

/* Restore size and color for Font Awesome icons */
.social-navigation a::before,
.social-links-menu a::before,
.wp-block-social-link a::before,
.social-link::before {
    color: #fff !important;
    font-size: 18px !important;
}

.social-navigation a:hover,
.social-links-menu a:hover,
.wp-block-social-link a:hover,
.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hide original emoji icons and SVG */
.social-navigation a > *,
.social-links-menu a > *,
.wp-block-social-link a > *,
.social-link > *,
.social-link .social-icon,
.social-link .social-icon-svg,
.social-link .social-icon-text {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    opacity: 0 !important;
}

/* Keep screen reader text accessible but invisible */
.social-link .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* Add Font Awesome icons based on URL */
/* Facebook */
.social-navigation a[href*="facebook.com"]::before,
.social-links-menu a[href*="facebook.com"]::before,
.wp-block-social-link-facebook a::before,
.social-link-facebook::before,
a.social-link[href*="facebook.com"]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f39e";
    font-weight: 400;
}

.social-navigation a[href*="facebook.com"]:hover,
.social-links-menu a[href*="facebook.com"]:hover,
.wp-block-social-link-facebook a:hover,
.social-link-facebook:hover,
a.social-link[href*="facebook.com"]:hover {
    background: #1877f2 !important;
}

/* Twitter / X */
.social-navigation a[href*="twitter.com"]::before,
.social-navigation a[href*="x.com"]::before,
.social-links-menu a[href*="twitter.com"]::before,
.social-links-menu a[href*="x.com"]::before,
.wp-block-social-link-twitter a::before,
.wp-block-social-link-x a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\e61b";
    font-weight: 400;
}

.social-navigation a[href*="twitter.com"]:hover,
.social-navigation a[href*="x.com"]:hover,
.social-links-menu a[href*="twitter.com"]:hover,
.social-links-menu a[href*="x.com"]:hover,
.wp-block-social-link-twitter a:hover,
.wp-block-social-link-x a:hover {
    background: #000;
}

/* Instagram */
.social-navigation a[href*="instagram.com"]::before,
.social-links-menu a[href*="instagram.com"]::before,
.wp-block-social-link-instagram a::before,
.social-link-instagram::before,
a.social-link[href*="instagram.com"]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f16d";
    font-weight: 400;
}

.social-navigation a[href*="instagram.com"]:hover,
.social-links-menu a[href*="instagram.com"]:hover,
.wp-block-social-link-instagram a:hover,
.social-link-instagram:hover,
a.social-link[href*="instagram.com"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

/* LinkedIn */
.social-navigation a[href*="linkedin.com"]::before,
.social-links-menu a[href*="linkedin.com"]::before,
.wp-block-social-link-linkedin a::before,
.social-link-linkedin::before,
a.social-link[href*="linkedin.com"]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f08c";
    font-weight: 400;
}

.social-navigation a[href*="linkedin.com"]:hover,
.social-links-menu a[href*="linkedin.com"]:hover,
.wp-block-social-link-linkedin a:hover,
.social-link-linkedin:hover,
a.social-link[href*="linkedin.com"]:hover {
    background: #0077b5 !important;
}

/* YouTube */
.social-navigation a[href*="youtube.com"]::before,
.social-navigation a[href*="youtu.be"]::before,
.social-links-menu a[href*="youtube.com"]::before,
.social-links-menu a[href*="youtu.be"]::before,
.wp-block-social-link-youtube a::before,
.social-link-youtube::before,
a.social-link[href*="youtube.com"]::before,
a.social-link[href*="yt.com"]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f167";
    font-weight: 400;
}

.social-navigation a[href*="youtube.com"]:hover,
.social-navigation a[href*="youtu.be"]:hover,
.social-links-menu a[href*="youtube.com"]:hover,
.social-links-menu a[href*="youtu.be"]:hover,
.wp-block-social-link-youtube a:hover,
.social-link-youtube:hover,
a.social-link[href*="youtube.com"]:hover,
a.social-link[href*="yt.com"]:hover {
    background: #ff0000 !important;
}

/* Pinterest */
.social-navigation a[href*="pinterest.com"]::before,
.social-links-menu a[href*="pinterest.com"]::before,
.wp-block-social-link-pinterest a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f231";
    font-weight: 400;
}

.social-navigation a[href*="pinterest.com"]:hover,
.social-links-menu a[href*="pinterest.com"]:hover,
.wp-block-social-link-pinterest a:hover {
    background: #e60023;
}

/* TikTok */
.social-navigation a[href*="tiktok.com"]::before,
.social-links-menu a[href*="tiktok.com"]::before,
.wp-block-social-link-tiktok a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\e07b";
    font-weight: 400;
}

.social-navigation a[href*="tiktok.com"]:hover,
.social-links-menu a[href*="tiktok.com"]:hover,
.wp-block-social-link-tiktok a:hover {
    background: #000;
}

/* WhatsApp */
.social-navigation a[href*="whatsapp.com"]::before,
.social-navigation a[href*="wa.me"]::before,
.social-links-menu a[href*="whatsapp.com"]::before,
.social-links-menu a[href*="wa.me"]::before,
.wp-block-social-link-whatsapp a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f232";
    font-weight: 400;
}

.social-navigation a[href*="whatsapp.com"]:hover,
.social-navigation a[href*="wa.me"]:hover,
.social-links-menu a[href*="whatsapp.com"]:hover,
.social-links-menu a[href*="wa.me"]:hover,
.wp-block-social-link-whatsapp a:hover {
    background: #25d366;
}

/* Telegram */
.social-navigation a[href*="telegram.org"]::before,
.social-navigation a[href*="t.me"]::before,
.social-links-menu a[href*="telegram.org"]::before,
.social-links-menu a[href*="t.me"]::before,
.wp-block-social-link-telegram a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f2c6";
    font-weight: 400;
}

.social-navigation a[href*="telegram.org"]:hover,
.social-navigation a[href*="t.me"]:hover,
.social-links-menu a[href*="telegram.org"]:hover,
.social-links-menu a[href*="t.me"]:hover,
.wp-block-social-link-telegram a:hover {
    background: #0088cc;
}

/* Snapchat */
.social-navigation a[href*="snapchat.com"]::before,
.social-links-menu a[href*="snapchat.com"]::before,
.wp-block-social-link-snapchat a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f2ab";
    font-weight: 400;
}

.social-navigation a[href*="snapchat.com"]:hover,
.social-links-menu a[href*="snapchat.com"]:hover,
.wp-block-social-link-snapchat a:hover {
    background: #fffc00;
    color: #000;
}

/* Email */
.social-navigation a[href^="mailto:"]::before,
.social-links-menu a[href^="mailto:"]::before,
.wp-block-social-link-mail a::before {
    font-family: "Font Awesome 6 Free";
    content: "\f0e0";
    font-weight: 900;
}

.social-navigation a[href^="mailto:"]:hover,
.social-links-menu a[href^="mailto:"]:hover,
.wp-block-social-link-mail a:hover {
    background: #ea4335;
}

/* Phone */
.social-navigation a[href^="tel:"]::before,
.social-links-menu a[href^="tel:"]::before,
.wp-block-social-link-phone a::before {
    font-family: "Font Awesome 6 Free";
    content: "\f095";
    font-weight: 900;
}

.social-navigation a[href^="tel:"]:hover,
.social-links-menu a[href^="tel:"]:hover,
.wp-block-social-link-phone a:hover {
    background: #34a853;
}

/* Hide non-standard social platforms */
.social-navigation a[href*="booking.com"],
.social-navigation a[href*="airbnb.com"],
.social-navigation a[href*="chalet-montagne.com"],
.social-links-menu a[href*="booking.com"],
.social-links-menu a[href*="airbnb.com"],
.social-links-menu a[href*="chalet-montagne.com"],
.social-link[href*="booking.com"],
.social-link[href*="airbnb.com"],
.social-link[href*="chalet-montagne.com"] {
    display: none !important;
}

/* Website / Link */
.social-navigation a[href*="http"]:not([href*="facebook"]):not([href*="twitter"]):not([href*="instagram"]):not([href*="linkedin"]):not([href*="youtube"]):not([href*="pinterest"]):not([href*="tiktok"]):not([href*="whatsapp"]):not([href*="telegram"]):not([href*="snapchat"]):not([href*="x.com"]):not([href*="youtu.be"]):not([href*="wa.me"]):not([href*="t.me"]):not([href*="booking.com"]):not([href*="airbnb.com"]):not([href*="chalet-montagne.com"])::before,
.social-links-menu a[href*="http"]:not([href*="facebook"]):not([href*="twitter"]):not([href*="instagram"]):not([href*="linkedin"]):not([href*="youtube"]):not([href*="pinterest"]):not([href*="tiktok"]):not([href*="whatsapp"]):not([href*="telegram"]):not([href*="snapchat"]):not([href*="x.com"]):not([href*="youtu.be"]):not([href*="wa.me"]):not([href*="t.me"]):not([href*="booking.com"]):not([href*="airbnb.com"]):not([href*="chalet-montagne.com"])::before,
.wp-block-social-link-chain a::before {
    font-family: "Font Awesome 6 Free";
    content: "\f0c1";
    font-weight: 900;
}

/* Footer contact information - reduce spacing */
.footer-widget-1 p.footer-phone,
.footer-widget-1 p.footer-email,
.footer-widget-1 p.footer-address,
.footer-widget-1 p.footer-hours {
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
}

.footer-widget-1 p.footer-phone:last-child,
.footer-widget-1 p.footer-email:last-child,
.footer-widget-1 p.footer-address:last-child,
.footer-widget-1 p.footer-hours:last-child {
    margin-bottom: 0 !important;
}

.footer-widget-1 p strong {
    display: inline-block;
    margin-bottom: 2px;
}

/* Responsive design */
@media (max-width: 768px) {
    .social-navigation a,
    .social-links-menu a,
    .wp-block-social-link a {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}