/* ============================================
   UNIFIED SOCIAL MEDIA ICONS SYSTEM
   ============================================
   Version: 1.0
   Purpose: Consistent social media styling across all locations
   Locations: Header, Mobile Menu, Footer
*/

/* CSS Variables for Social Media */
:root {
    /* Brand Colors - Orange Gold Theme Integration */
    --facebook-color: #1877F2;
    --instagram-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --whatsapp-color: #25D366;
    --twitter-color: #1DA1F2;
    --youtube-color: #FF0000;
    --linkedin-color: #0077B5;

    /* Theme Brand Colors */
    --brand-orange: #FF6B35;
    --brand-gold: #FFD700;
    --brand-gradient: linear-gradient(135deg, #FF6B35, #FFD700);

    /* Social Icon Sizes */
    --social-sm: 32px;
    /* Small - Mobile menu compact */
    --social-md: 40px;
    /* Medium - Header, footer */
    --social-lg: 48px;
    /* Large - Hero sections */
    --social-xl: 56px;
    /* Extra large - Special sections */

    /* Animation Settings */
    --social-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --social-hover-scale: 1.1;
    --social-active-scale: 0.95;
}

/* ============================================
   BASE SOCIAL ICON STYLES
   ============================================ */

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--social-md);
    height: var(--social-md);
    border-radius: 50%;
    background: white;
    color: var(--text-primary);
    text-decoration: none !important;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--social-transition);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
}

.social-icon:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    opacity: 0;
    transition: var(--social-transition);
    z-index: -1;
}

.social-icon:hover {
    transform: translateY(-2px) scale(var(--social-hover-scale));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.social-icon:active {
    transform: translateY(0) scale(var(--social-active-scale));
}

/* ============================================
   PLATFORM-SPECIFIC STYLES
   ============================================ */

/* Facebook */
.social-icon.facebook {
    background: white;
    color: var(--facebook-color);
}

.social-icon.facebook:hover {
    background: #166fe5;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
}

/* Instagram */
.social-icon.instagram {
    background: white;
    color: #E1306C;
}

.social-icon.instagram:hover {
    box-shadow: 0 4px 16px rgba(225, 48, 108, 0.4);
    filter: brightness(1.1);
}

/* WhatsApp */
.social-icon.whatsapp {
    background: white;
    color: var(--whatsapp-color);
}

.social-icon.whatsapp:hover {
    background: #128c7e;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

/* Twitter */
.social-icon.twitter {
    background: white;
    color: var(--twitter-color);
}

.social-icon.twitter:hover {
    background: #0d8bd9;
    box-shadow: 0 4px 16px rgba(29, 161, 242, 0.4);
}

/* YouTube */
.social-icon.youtube {
    background: var(--youtube-color);
    color: white;
}

.social-icon.youtube:hover {
    background: #cc0000;
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.4);
}

/* LinkedIn */
.social-icon.linkedin {
    background: var(--linkedin-color);
    color: white;
}

.social-icon.linkedin:hover {
    background: #005885;
    box-shadow: 0 4px 16px rgba(0, 119, 181, 0.4);
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */

.social-icon.sm {
    width: var(--social-sm);
    height: var(--social-sm);
    font-size: 14px;
}

.social-icon.md {
    width: var(--social-md);
    height: var(--social-md);
    font-size: 18px;
}

.social-icon.lg {
    width: var(--social-lg);
    height: var(--social-lg);
    font-size: 20px;
}

.social-icon.xl {
    width: var(--social-xl);
    height: var(--social-xl);
    font-size: 24px;
}

/* ============================================
   CONTAINER LAYOUTS
   ============================================ */

.social-icons-container {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.social-icons-container.horizontal {
    flex-direction: row;
}

.social-icons-container.vertical {
    flex-direction: column;
}

.social-icons-container.compact {
    gap: 8px;
}

.social-icons-container.spacious {
    gap: 16px;
}

/* ============================================
   LOCATION-SPECIFIC STYLES
   ============================================ */

/* Header Social Icons */
.header .social-icons-container {
    gap: 8px;
}

.header .social-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

/* Mobile Navigation Social Icons */
.mobile-nav-social {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 20px;
    margin-top: auto;
    /* Push to bottom of mobile menu */
}

.mobile-nav-social .social-icon {
    width: var(--social-md);
    height: var(--social-md);
    font-size: 18px;
}

/* Footer Social Icons */
.footer .social-icons-container {
    gap: 16px;
    justify-content: center;
}

.footer .social-icon {
    width: var(--social-lg);
    height: var(--social-lg);
    font-size: 20px;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

.social-icon:focus {
    outline: 2px solid #FF6B35;
    outline-offset: 2px;
}

.social-icon:focus:not(:focus-visible) {
    outline: none;
}

.social-icon[aria-label]:hover::after {
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 8px;
}

.social-icon[aria-label]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    margin-bottom: 4px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .social-icons-container {
        gap: 10px;
    }

    .header .social-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .footer .social-icon {
        width: var(--social-md);
        height: var(--social-md);
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .social-icons-container {
        gap: 8px;
    }

    .mobile-nav-social {
        gap: 10px;
    }
}

/* ============================================
   ANIMATION ENHANCEMENTS
   ============================================ */

@keyframes socialPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.social-icon.pulse {
    animation: socialPulse 2s ease-in-out infinite;
}

@keyframes socialBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.social-icon.bounce {
    animation: socialBounce 1s ease-in-out infinite;
}

/* Stagger animation for groups */
.social-icons-container.stagger .social-icon:nth-child(1) {
    animation-delay: 0s;
}

.social-icons-container.stagger .social-icon:nth-child(2) {
    animation-delay: 0.1s;
}

.social-icons-container.stagger .social-icon:nth-child(3) {
    animation-delay: 0.2s;
}

.social-icons-container.stagger .social-icon:nth-child(4) {
    animation-delay: 0.3s;
}

.social-icons-container.stagger .social-icon:nth-child(5) {
    animation-delay: 0.4s;
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    .social-icon {
        border: 2px solid currentColor;
    }

    .social-icon:hover {
        border-color: white;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .social-icon {
        transition: none;
    }

    .social-icon:hover {
        transform: none;
    }

    .social-icon.pulse,
    .social-icon.bounce {
        animation: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .social-icons-container {
        display: none;
    }
}