/* ==========================================================================
   Social Buttons — Shared Component
   Used by: Article Header (large), Author About (large), Profile Card (small)
   ========================================================================== */


/* Group wrapper
   ========================================================================== */

.r-social-group {
    display: flex;
    align-items: center;
    gap: 4px;
}


/* Base button — Large variant (24px icon, padding 12px)
   Double-class trick (0,2,0 specificity) to override .elementor-kit-6 a { color }
   ========================================================================== */

.r-social-btn.r-social-btn,
.r-social-btn.r-social-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 4px;
    background-color: var(--r-color-secondary-14);
    color: var(--r-color-secondary);
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.r-social-btn:hover {
    background-color: var(--r-color-secondary-10);
}

.r-social-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}


/* Small variant — modifier (20px icon, padding 4px 8px)
   ========================================================================== */

.r-social-btn--sm.r-social-btn--sm,
.r-social-btn--sm.r-social-btn--sm:visited {
    padding: 4px 8px;
    background-color: var(--r-color-secondary-10);
}

.r-social-btn--sm:hover {
    opacity: 0.75;
    background-color: var(--r-color-secondary-10);
}

.r-social-btn--sm svg {
    width: 20px;
    height: 20px;
}