/* =========================================
   JUDGE SOCIAL MEDIA ICONS
========================================= */

.judge-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 18px;
}


    /* Base icon button */
    .judge-social-icons a {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        border: 1px solid #ff9900;
        border-radius: 50%;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
        text-decoration: none;
        /* Hide text added only to prevent TinyMCE
       from removing empty <a> tags */
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        overflow: hidden;
        box-sizing: border-box;
        transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
    }


    /* =========================================
   INDIVIDUAL ICONS
========================================= */

    /* Website */
    .judge-social-icons .website {
        background-image: url('/Content/Web/images/social/website.svg');
    }


    /* Instagram */
    .judge-social-icons .instagram {
        background-image: url('/Content/Web/images/social/instagram.svg');
    }


    /* Facebook */
    .judge-social-icons .facebook {
        background-image: url('/Content/Web/images/social/facebook.svg');
    }


    /* X / Twitter */
    .judge-social-icons .twitter-x {
        background-image: url('/Content/Web/images/social/x-twitter.svg');
    }


    /* LinkedIn */
    .judge-social-icons .linkedin {
        background-image: url('/Content/Web/images/social/linkedin.svg');
    }


    /* YouTube */
    .judge-social-icons .youtube {
        background-image: url('/Content/Web/images/social/youtube.svg');
    }


    /* =========================================
   HOVER
========================================= */

    /*
   IMPORTANT:
   Do not make the background orange because
   the SVG icons are already orange.
*/

    .judge-social-icons a:hover {
        background-color: transparent;
        border-color: #ffffff;
        transform: translateY(-2px);
    }


    /* Keep background image visible on hover */
    .judge-social-icons .website:hover {
        background-image: url('/Content/Web/images/social/website.svg');
    }

    .judge-social-icons .instagram:hover {
        background-image: url('/Content/Web/images/social/instagram.svg');
    }

    .judge-social-icons .facebook:hover {
        background-image: url('/Content/Web/images/social/facebook.svg');
    }

    .judge-social-icons .twitter-x:hover {
        background-image: url('/Content/Web/images/social/x-twitter.svg');
    }

    .judge-social-icons .linkedin:hover {
        background-image: url('/Content/Web/images/social/linkedin.svg');
    }

    .judge-social-icons .youtube:hover {
        background-image: url('/Content/Web/images/social/youtube.svg');
    }


    /* =========================================
   KEYBOARD ACCESSIBILITY
========================================= */

    .judge-social-icons a:focus {
        outline: none;
    }

    .judge-social-icons a:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }


/* =========================================
   RTL / ARABIC
========================================= */

html[dir="rtl"] .judge-social-icons,
body.rtl .judge-social-icons {
    direction: rtl;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .judge-social-icons {
        gap: 9px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

        .judge-social-icons a {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            background-size: 16px 16px;
        }
}