/* =========================================================
   DALLAS MEDIA GROUP
   FOOTER SOCIAL ICONS
   FINAL VISIBILITY LAYER
   ========================================================= */

.dm-footer-socials {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}


/*
Inactive social accounts remain completely hidden.
*/

.dm-footer-social[hidden] {
    display: none !important;
}


/*
Every active social account is an unmistakable
solid badge. This overrides older footer SVG rules.
*/

.dm-site-footer
.dm-footer-socials
.dm-footer-social {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    flex: 0 0 42px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;

    text-decoration: none !important;

    overflow: visible !important;

    position: relative !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}


.dm-site-footer
.dm-footer-socials
.dm-footer-social[hidden] {
    display: none !important;
}


.dm-site-footer
.dm-footer-socials
.dm-footer-social:hover {
    transform: translateY(-3px) !important;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .16) !important;

    filter: brightness(.96);
}


/*
Critical SVG override.

Older Dallas footer CSS used:
stroke: #fff

Other later experiments used:
stroke: currentColor

This final layer explicitly makes every symbol white
against its branded background.
*/

.dm-site-footer
.dm-footer-socials
.dm-footer-social svg {
    width: 21px !important;
    height: 21px !important;

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    fill: none !important;

    stroke: #ffffff !important;
    color: #ffffff !important;

    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    filter: none !important;

    pointer-events: none;
}


.dm-site-footer
.dm-footer-socials
.dm-footer-social
.dm-social-fill {
    fill: #ffffff !important;
    stroke: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   BRAND BACKGROUNDS
   ========================================================= */


/* YouTube */

.dm-site-footer
.dm-footer-socials
.dm-social-youtube {
    background: #ff0000 !important;
    color: #ffffff !important;
}


/* WhatsApp */

.dm-site-footer
.dm-footer-socials
.dm-social-whatsapp {
    background: #25d366 !important;
    color: #ffffff !important;
}


/* Facebook */

.dm-site-footer
.dm-footer-socials
.dm-social-facebook {
    background: #1877f2 !important;
    color: #ffffff !important;
}


/* Instagram */

.dm-site-footer
.dm-footer-socials
.dm-social-instagram {
    background:
        linear-gradient(
            135deg,
            #833ab4 0%,
            #e1306c 48%,
            #f77737 100%
        ) !important;

    color: #ffffff !important;
}


/* TikTok */

.dm-site-footer
.dm-footer-socials
.dm-social-tiktok {
    background: #111111 !important;
    color: #ffffff !important;
}


/* X */

.dm-site-footer
.dm-footer-socials
.dm-social-x {
    background: #000000 !important;
    color: #ffffff !important;
}


/*
Instagram's small camera dot is filled.
*/

.dm-site-footer
.dm-footer-socials
.dm-social-instagram
circle.dm-social-fill {
    fill: #ffffff !important;
    stroke: none !important;
}