/**
 * Social Links - Shared Component Styles
 *
 * Follows the same pattern as .boost-styled-icon:
 * - Uses CSS variables set INLINE by PHP (--social-container-size, --social-icon-size, --social-radius)
 * - Colors come from Color Scheme (--boost-icon-bg, --boost-icon-color)
 * - Falls back to --boost-primary when --boost-icon-bg is not defined
 *
 * @package Boost Theme Framework
 * @since 3.6.0
 */

/* /assets/css/tokens/social.css */

/* =============================================================================
   BASE LAYOUT
   ============================================================================= */

.boost-social-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.boost-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Dimensions from CPT icon-style (set inline by PHP) */
    width: var(--social-container-size, 40px);
    height: var(--social-container-size, 40px);
    border-radius: var(--social-radius, 50%);
    /* Colors from Color Scheme (fallback to --boost-primary) */
    background: var(--boost-icon-bg, var(--boost-primary, #3b82f6));
    color: var(--boost-icon-color, #ffffff);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    overflow: visible;
}

.boost-social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.boost-social-links a:focus-visible {
    outline: 2px solid var(--boost-icon-color, var(--boost-primary, #3b82f6));
    outline-offset: 2px;
}

.boost-social-links svg {
    width: var(--social-icon-size, 18px) !important;
    height: var(--social-icon-size, 18px) !important;
    flex-shrink: 0;
    overflow: visible;
}

/* =============================================================================
   VARIANT STYLES (from CPT icon-style, same as boost-styled-icon)
   ============================================================================= */

/* Filled variant (default) */
.boost-social-links--filled a {
    background: var(--boost-icon-bg, var(--boost-primary, #3b82f6));
    color: var(--boost-icon-color, #ffffff);
}

/* Circle variant */
.boost-social-links--circle a {
    background: var(--boost-icon-bg, var(--boost-primary, #3b82f6));
    color: var(--boost-icon-color, #ffffff);
    border-radius: 50% !important;
}

/* Outlined variant */
.boost-social-links--outlined a {
    background: transparent;
    color: var(--boost-icon-bg, var(--boost-primary, #3b82f6));
    border: var(--social-border-width, 2px) solid var(--boost-icon-bg, var(--boost-primary, #3b82f6));
}

/* Minimal variant (no container) */
.boost-social-links--minimal a {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.5rem;
    color: var(--boost-icon-bg, var(--boost-primary, #3b82f6));
}

.boost-social-links--minimal a:hover {
    transform: scale(1.1);
}

/* =============================================================================
   ALIGNMENT VARIANTS
   ============================================================================= */

.boost-social-links--center {
    justify-content: center;
}

.boost-social-links--end {
    justify-content: flex-end;
}