/* Twitter → X rebrand (project-wide).
 *
 * The theme renders social icons as Material Design Icon font glyphs
 * (`<i class="mdi mdi-twitter">`), and MDI ships no X mark. Rather than editing
 * every social_links skin, page element and share button, this single rule
 * replaces the twitter bird glyph with the official X logo using a CSS mask, so
 * the mark inherits the surrounding text colour (X is black on light grounds,
 * white on dark) and keeps its mdi size class (mdi-24px, mdi-36px, …).
 *
 * Loaded globally after fame-style.css in header-scripts.php, so it wins on
 * equal specificity. The inline-SVG social-login buttons are handled separately
 * in _social-buttons.php + fame-auth.css.
 */
.mdi.mdi-twitter::before,
.mdi-twitter::before {
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.657l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: middle;
}

/* Legacy Microweber login-modal social button: X brand colour is black. */
.login-modal .socials-login .twitter {
    background-color: #000000 !important;
}