/**
 * Social Media Links Styles
 *
 * Styling for social media icons component
 *
 * @package DoItAllDemo
 * @since 1.0.0
 */

/* ==========================================================================
   Social Links Base
   ========================================================================== */

.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.social-links__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-text-secondary, #64748b);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0.375rem;
}

.social-links__link:hover,
.social-links__link:focus {
    color: var(--color-amber-600, #D97706);
    transform: translateY(-2px);
}

.social-links__link:focus {
    outline: 2px solid var(--color-amber-500, #f59e0b);
    outline-offset: 2px;
}

.social-links__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.social-links__label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/* Small */
.social-links--sm .social-links__link {
    font-size: 1rem;
}

.social-links--sm .social-links__icon svg {
    width: 1rem;
    height: 1rem;
}

/* Medium (default) */
.social-links--md .social-links__link {
    font-size: 1.25rem;
}

.social-links--md .social-links__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Large */
.social-links--lg .social-links__link {
    font-size: 1.5rem;
}

.social-links--lg .social-links__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ==========================================================================
   Style Variants
   ========================================================================== */

/* Default - Gray icons, amber hover */
.social-links--default .social-links__link {
    color: var(--color-text-secondary, #64748b);
}

.social-links--default .social-links__link:hover {
    color: var(--color-amber-600, #D97706);
}

/* Light - White icons, amber hover (for dark backgrounds) */
.social-links--light .social-links__link {
    color: rgba(255, 255, 255, 0.8);
}

.social-links--light .social-links__link:hover {
    color: var(--color-amber-400, #fbbf24);
}

/* Dark - Navy icons, amber hover */
.social-links--dark .social-links__link {
    color: var(--color-navy-700, #1B365D);
}

.social-links--dark .social-links__link:hover {
    color: var(--color-amber-600, #D97706);
}

/* ==========================================================================
   With Labels Variant
   ========================================================================== */

.social-links--with-labels .social-links__link {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-secondary, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
}

.social-links--with-labels .social-links__link:hover {
    background: var(--color-amber-50, #fffbeb);
    border-color: var(--color-amber-300, #fcd34d);
}

.social-links--with-labels.social-links--light .social-links__link {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.social-links--with-labels.social-links--light .social-links__link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-amber-400, #fbbf24);
}

/* ==========================================================================
   Platform-Specific Colors (optional branded hover)
   ========================================================================== */

.social-links__link--facebook:hover {
    color: #1877F2;
}

.social-links__link--instagram:hover {
    color: #E4405F;
}

.social-links__link--youtube:hover {
    color: #FF0000;
}

.social-links__link--tiktok:hover {
    color: #000000;
}

.social-links__link--linkedin:hover {
    color: #0A66C2;
}

.social-links__link--twitter:hover {
    color: #000000;
}

.social-links__link--google:hover {
    color: #4285F4;
}

.social-links__link--nextdoor:hover {
    color: #00B246;
}

.social-links__link--yelp:hover {
    color: #FF1A1A;
}

/* Override platform colors for light variant (keep amber) */
.social-links--light .social-links__link:hover {
    color: var(--color-amber-400, #fbbf24);
}

/* ==========================================================================
   Contact Page Specific
   ========================================================================== */

.contact-info__social {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.contact-info__social-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.contact-info__social .social-links {
    gap: 1rem;
}

/* ==========================================================================
   Footer Specific
   ========================================================================== */

.site-footer__social {
    margin-top: 1.5rem;
}

.site-footer__social .social-links {
    gap: 1rem;
}

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

@media (max-width: 768px) {
    .social-links {
        justify-content: center;
    }
    
    .social-links--lg .social-links__icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}