/*
 * Moretify Newspaper RedNote 1.1.5
 * Text-only RedNote / Xiaohongshu mark.
 *
 * Behaviour:
 * - Mobile menu: inherits Newspaper's mobile icon colour (normally white).
 * - Desktop Cloud Library header: inherits configured icon colour.
 * - Hover: inherits configured hover colour.
 *
 * v1.1.4:
 * - Raises the RedNote mark slightly so its optical centre matches the other icons.
 * - Adds a little extra desktop breathing room around the wider text logo.
 */
.td-icon-font.td-icon-rednote:before,
.td-icon-rednote:before {
    content: "" !important;
    display: inline-block !important;
    width: 2.25em;
    height: 0.8em;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-image: url("../images/rednote-text-mask.svg");
    mask-image: url("../images/rednote-text-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* Optical alignment for both desktop and mobile. */
    position: relative;
    top: -0.15em;
    vertical-align: middle;
}

/* Keep the icon aligned in Newspaper's classic/mobile and Composer wrappers. */
.td-social-icon-wrap .td-icon-rednote,
.td-header-menu-social .td-icon-rednote,
.td-menu-socials .td-icon-rednote,
.tdm-social-item .td-icon-rednote,
.tdm-social-wrapper .td-icon-rednote {
    display: inline-block;
}

/*
 * Desktop Cloud Library social block:
 * RedNote is a wide wordmark, so give its item some extra space on both sides.
 * :has() is supported by current Chrome/Safari/Edge and does not affect older
 * browsers if unsupported; the icon will simply fall back to the normal spacing.
 */
@media (min-width: 768px) {
    .tdm-social-item-wrap:has(.td-icon-rednote) {
        margin-left: 10px;
        margin-right: 10px;
    }
}