/*
 * Social Media Icon Size Management System
 * Centralized configuration for consistent icon sizing across the website.
 */

:root {
    /* Standardized Dimensions */
    --social-icon-size-sm: 24px;  /* Mobile */
    --social-icon-size-md: 28px;  /* Tablet */
    --social-icon-size-lg: 32px;  /* Desktop */
    
    /* Spacing & Interaction */
    --social-icon-gap: 8px;
    --social-touch-target: 44px;
    --social-hover-scale: 1.1;
}

/* =========================================
   Base Classes
   ========================================= */

/* Container for grouping icons */
.social-icons-container {
    display: flex;
    align-items: center;
    gap: var(--social-icon-gap);
    flex-wrap: wrap;
}

/* Base Icon Link Wrapper */
.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--social-touch-target);
    min-height: var(--social-touch-target);
    padding: 8px;
    box-sizing: border-box;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    position: relative; /* For potential badges or overlays */
}

/* Icon Sizing (SVG & Image) */
.social-icon-link svg,
.social-icon-link img {
    width: var(--social-icon-size-sm); /* Default Mobile */
    height: var(--social-icon-size-sm);
    object-fit: contain;
    flex-shrink: 0;
    transition: width 0.3s ease, height 0.3s ease, fill 0.3s ease;
}

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

/* Tablet Breakpoint (768px+) */
@media (min-width: 768px) {
    .social-icon-link svg,
    .social-icon-link img {
        width: var(--social-icon-size-md);
        height: var(--social-icon-size-md);
    }
}

/* Desktop Breakpoint (1024px+) */
@media (min-width: 1024px) {
    .social-icon-link svg,
    .social-icon-link img {
        width: var(--social-icon-size-lg);
        height: var(--social-icon-size-lg);
    }
}

/* =========================================
   Utility Classes (Fixed Sizes)
   ========================================= */

.social-icon-sm .social-icon-link svg,
.social-icon-sm.social-icon-link svg {
    width: var(--social-icon-size-sm) !important;
    height: var(--social-icon-size-sm) !important;
}

.social-icon-md .social-icon-link svg,
.social-icon-md.social-icon-link svg {
    width: var(--social-icon-size-md) !important;
    height: var(--social-icon-size-md) !important;
}

.social-icon-lg .social-icon-link svg,
.social-icon-lg.social-icon-link svg {
    width: var(--social-icon-size-lg) !important;
    height: var(--social-icon-size-lg) !important;
}

/* =========================================
   Interactive Effects
   ========================================= */

/* Hover Scale */
.social-icon-link:hover {
    transform: scale(var(--social-hover-scale));
}

/* Focus State for Accessibility */
.social-icon-link:focus-visible {
    outline: 3px solid var(--primary-red, #9E1A1A); /* Fallback color if var missing */
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================
   Context-Specific Styles (Footer Integration)
   ========================================= */

/* Footer Social Icons (Circular Border Style) */
.site-footer .social-icon-link,
.footer .social-icon-link {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.site-footer .social-icon-link:hover,
.footer .social-icon-link:hover {
    background: var(--primary-red, #9E1A1A);
    border-color: var(--primary-red, #9E1A1A);
}

.site-footer .social-icon-link svg,
.footer .social-icon-link svg {
    fill: var(--light-grey, #E0E0E0);
}

.site-footer .social-icon-link:hover svg,
.footer .social-icon-link:hover svg {
    fill: var(--white, #FFFFFF);
}