/* ==========================================================================
   Social Media Links
   ========================================================================== */

.rw-social-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    justify-content: flex-end;
}

/* ==========================================================================
   Individual Link — 40px circle, 22px icon
   ========================================================================== */

.rw-social-media__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var( --rw-primary );
    color: #ffffff;
    font-size: 22px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.rw-social-media__link:hover {
    background: var( --rw-secondary );
    color: #ffffff;
    text-decoration: none;
    transform: translateY( -2px );
}


.rw-social-media__link:focus {
    background: var( --rw-secondary );
    color: #ffffff;
}
/* ==========================================================================
   Dark section override
   ========================================================================== */

.rw-dark-section .rw-social-media__link {
    background: rgba( 255, 255, 255, 0.15 );
    color: #ffffff;
}

.rw-dark-section .rw-social-media__link:hover {
    background: #ffffff;
    color: var( --rw-primary );
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 992px ) {
    .rw-social-media__link {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ==========================================================================
   Podcast Listen — Icon Tweaks
   Base styles inherited from social-media.css (.rw-social-media)
   Use these classes for podcast-specific overrides only.
   ========================================================================== */

.rw-social-media.rw-podcast-listen {
    justify-content: flex-start;
}

/* Image icons (Overcast, Pocket Cast) — invert to white inside red circle */
.rw-podcast-listen__img-icon {
    width:      22px;
    height:     22px;
    object-fit: contain;
    filter:     brightness( 0 ) invert( 1 );
}

@media ( max-width: 992px ) {
    .rw-podcast-listen__img-icon {
        width:  18px;
        height: 18px;
    }
}