/**
 * Social Connect Pro - Frontend Styles
 * Stili per visualizzazione pubblica delle icone social
 * Autore: Maryline Honkah - Finlandia
 * Versione: 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* Dimensioni icone */
    --scp-icon-size-s: 24px;
    --scp-icon-size-m: 32px;
    --scp-icon-size-l: 48px;
    --scp-icon-size-xl: 64px;
    
    /* Spaziatura */
    --scp-spacing-compact: 6px;
    --scp-spacing-normal: 12px;
    --scp-spacing-wide: 20px;
    
    /* Transizioni */
    --scp-transition-fast: 0.2s ease;
    --scp-transition-normal: 0.3s ease;
    --scp-transition-slow: 0.4s ease;
    
    /* Ombre */
    --scp-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --scp-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --scp-shadow-glow: 0 0 20px rgba(0, 0, 0, 0.3);
    
    /* Border radius */
    --scp-radius-rounded: 8px;
    --scp-radius-circle: 50%;
}

/* ==========================================================================
   Container Base
   ========================================================================== */

.scp-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scp-spacing-normal);
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

.scp-social-links * {
    box-sizing: border-box;
}

/* ==========================================================================
   Allineamento
   ========================================================================== */

.scp-align-left {
    justify-content: flex-start;
}

.scp-align-center {
    justify-content: center;
}

.scp-align-right {
    justify-content: flex-end;
}

/* ==========================================================================
   Spaziatura
   ========================================================================== */

.scp-spacing-compact {
    gap: var(--scp-spacing-compact);
}

.scp-spacing-normal {
    gap: var(--scp-spacing-normal);
}

.scp-spacing-wide {
    gap: var(--scp-spacing-wide);
}

/* ==========================================================================
   Singolo Link Social
   ========================================================================== */

.scp-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all var(--scp-transition-normal);
    position: relative;
    outline: none;
}

.scp-social-link:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.scp-social-link:hover {
    text-decoration: none;
}

/* ==========================================================================
   Dimensioni Icone
   ========================================================================== */

.scp-size-s .scp-social-link {
    width: var(--scp-icon-size-s);
    height: var(--scp-icon-size-s);
}

.scp-size-s .scp-icon {
    width: calc(var(--scp-icon-size-s) * 0.6);
    height: calc(var(--scp-icon-size-s) * 0.6);
}

.scp-size-m .scp-social-link {
    width: var(--scp-icon-size-m);
    height: var(--scp-icon-size-m);
}

.scp-size-m .scp-icon {
    width: calc(var(--scp-icon-size-m) * 0.6);
    height: calc(var(--scp-icon-size-m) * 0.6);
}

.scp-size-l .scp-social-link {
    width: var(--scp-icon-size-l);
    height: var(--scp-icon-size-l);
}

.scp-size-l .scp-icon {
    width: calc(var(--scp-icon-size-l) * 0.6);
    height: calc(var(--scp-icon-size-l) * 0.6);
}

.scp-size-xl .scp-social-link {
    width: var(--scp-icon-size-xl);
    height: var(--scp-icon-size-xl);
}

.scp-size-xl .scp-icon {
    width: calc(var(--scp-icon-size-xl) * 0.6);
    height: calc(var(--scp-icon-size-xl) * 0.6);
}

/* ==========================================================================
   Stili Icone
   ========================================================================== */

/* Cerchio */
.scp-style-circle .scp-social-link {
    border-radius: var(--scp-radius-circle);
    padding: 8px;
}

/* Quadrato */
.scp-style-square .scp-social-link {
    border-radius: 0;
    padding: 8px;
}

/* Arrotondato */
.scp-style-rounded .scp-social-link {
    border-radius: var(--scp-radius-rounded);
    padding: 8px;
}

/* Minimale (solo icona) */
.scp-style-minimal .scp-social-link {
    background: transparent !important;
    padding: 4px;
}

/* Contorno */
.scp-style-outline .scp-social-link {
    background: transparent !important;
    border: 2px solid currentColor;
    border-radius: var(--scp-radius-circle);
    padding: 6px;
}

/* ==========================================================================
   Modalità Colore
   ========================================================================== */

/* Brand Colors (default) */
.scp-color-brand .scp-social-link {
    color: #ffffff;
}

/* Monocromatico */
.scp-color-mono .scp-social-link {
    background-color: #333333 !important;
    color: #ffffff;
}

.scp-color-mono .scp-social-link:hover {
    background-color: #555555 !important;
}

/* Custom Color (set via inline style) */
.scp-color-custom .scp-social-link {
    color: #ffffff;
}

/* Gradiente */
.scp-color-gradient .scp-social-link {
    background: linear-gradient(135deg, var(--scp-gradient-start, #667eea), var(--scp-gradient-end, #764ba2)) !important;
    color: #ffffff;
}

/* ==========================================================================
   Colori Brand dei Social Networks
   ========================================================================== */

.scp-color-brand .scp-network-facebook { background-color: #1877F2; }
.scp-color-brand .scp-network-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.scp-color-brand .scp-network-x { background-color: #000000; }
.scp-color-brand .scp-network-twitter { background-color: #1DA1F2; }
.scp-color-brand .scp-network-youtube { background-color: #FF0000; }
.scp-color-brand .scp-network-tiktok { background-color: #000000; }
.scp-color-brand .scp-network-linkedin { background-color: #0A66C2; }
.scp-color-brand .scp-network-linktree { background-color: #43E660; }
.scp-color-brand .scp-network-whatsapp { background-color: #25D366; }
.scp-color-brand .scp-network-telegram { background-color: #26A5E4; }
.scp-color-brand .scp-network-pinterest { background-color: #BD081C; }
.scp-color-brand .scp-network-snapchat { background-color: #FFFC00; color: #000000; }
.scp-color-brand .scp-network-discord { background-color: #5865F2; }
.scp-color-brand .scp-network-twitch { background-color: #9146FF; }
.scp-color-brand .scp-network-spotify { background-color: #1DB954; }
.scp-color-brand .scp-network-github { background-color: #181717; }
.scp-color-brand .scp-network-behance { background-color: #1769FF; }
.scp-color-brand .scp-network-dribbble { background-color: #EA4C89; }
.scp-color-brand .scp-network-medium { background-color: #000000; }
.scp-color-brand .scp-network-threads { background-color: #000000; }
.scp-color-brand .scp-network-mastodon { background-color: #6364FF; }
.scp-color-brand .scp-network-email { background-color: #EA4335; }
.scp-color-brand .scp-network-website { background-color: #4285F4; }
.scp-color-brand .scp-network-rss { background-color: #FFA500; }

/* ==========================================================================
   Effetti Hover
   ========================================================================== */

/* Scale */
.scp-hover-scale .scp-social-link:hover {
    transform: scale(1.15);
}

/* Rotate */
.scp-hover-rotate .scp-social-link:hover {
    transform: rotate(15deg);
}

/* Bounce */
.scp-hover-bounce .scp-social-link:hover {
    animation: scp-bounce 0.5s ease;
}

@keyframes scp-bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(-4px); }
    75% { transform: translateY(-6px); }
}

/* Shake */
.scp-hover-shake .scp-social-link:hover {
    animation: scp-shake 0.5s ease;
}

@keyframes scp-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Pulse */
.scp-hover-pulse .scp-social-link:hover {
    animation: scp-pulse 0.8s ease infinite;
}

@keyframes scp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Glow */
.scp-hover-glow .scp-social-link:hover {
    box-shadow: 0 0 25px currentColor;
}

/* Flip */
.scp-hover-flip .scp-social-link {
    perspective: 1000px;
}

.scp-hover-flip .scp-social-link:hover {
    animation: scp-flip 0.6s ease;
}

@keyframes scp-flip {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/* ==========================================================================
   Animazione al Caricamento
   ========================================================================== */

.scp-animate-load .scp-social-link {
    opacity: 0;
    transform: translateY(20px);
    animation: scp-fade-in-up 0.5s ease forwards;
}

.scp-animate-load .scp-social-link:nth-child(1) { animation-delay: 0.05s; }
.scp-animate-load .scp-social-link:nth-child(2) { animation-delay: 0.1s; }
.scp-animate-load .scp-social-link:nth-child(3) { animation-delay: 0.15s; }
.scp-animate-load .scp-social-link:nth-child(4) { animation-delay: 0.2s; }
.scp-animate-load .scp-social-link:nth-child(5) { animation-delay: 0.25s; }
.scp-animate-load .scp-social-link:nth-child(6) { animation-delay: 0.3s; }
.scp-animate-load .scp-social-link:nth-child(7) { animation-delay: 0.35s; }
.scp-animate-load .scp-social-link:nth-child(8) { animation-delay: 0.4s; }
.scp-animate-load .scp-social-link:nth-child(9) { animation-delay: 0.45s; }
.scp-animate-load .scp-social-link:nth-child(10) { animation-delay: 0.5s; }
.scp-animate-load .scp-social-link:nth-child(n+11) { animation-delay: 0.55s; }

@keyframes scp-fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Icona SVG
   ========================================================================== */

.scp-icon {
    display: inline-block;
    fill: currentColor;
    transition: fill var(--scp-transition-fast);
}

.scp-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Label (Opzionale)
   ========================================================================== */

.scp-with-labels .scp-social-link {
    width: auto !important;
    padding: 8px 16px !important;
    gap: 8px;
}

.scp-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.scp-size-s.scp-with-labels .scp-label { font-size: 12px; }
.scp-size-m.scp-with-labels .scp-label { font-size: 13px; }
.scp-size-l.scp-with-labels .scp-label { font-size: 14px; }
.scp-size-xl.scp-with-labels .scp-label { font-size: 16px; }

/* ==========================================================================
   Widget Styles
   ========================================================================== */

.widget_scp_widget .widget-title {
    margin-bottom: 15px;
}

.widget_scp_widget .scp-social-links {
    padding: 0;
}

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

@media (max-width: 768px) {
    :root {
        --scp-icon-size-s: 28px;
        --scp-icon-size-m: 36px;
        --scp-icon-size-l: 44px;
        --scp-icon-size-xl: 52px;
        --scp-spacing-normal: 10px;
    }
    
    .scp-social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    :root {
        --scp-spacing-compact: 8px;
        --scp-spacing-normal: 12px;
        --scp-spacing-wide: 16px;
    }
}

/* ==========================================================================
   Accessibilità
   ========================================================================== */

/* Screen Reader Only */
.scp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible per tastiera */
.scp-social-link:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .scp-social-link,
    .scp-animate-load .scp-social-link {
        animation: none !important;
        transition: none !important;
    }
    
    .scp-hover-bounce .scp-social-link:hover,
    .scp-hover-shake .scp-social-link:hover,
    .scp-hover-pulse .scp-social-link:hover,
    .scp-hover-flip .scp-social-link:hover {
        animation: none !important;
        transform: scale(1.1);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .scp-social-link {
        border: 2px solid currentColor !important;
    }
    
    .scp-style-minimal .scp-social-link {
        border: none !important;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .scp-color-mono .scp-social-link {
        background-color: #e0e0e0 !important;
        color: #121212;
    }
    
    .scp-color-mono .scp-social-link:hover {
        background-color: #ffffff !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .scp-social-links {
        display: block;
    }
    
    .scp-social-link {
        display: inline;
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
    }
    
    .scp-social-link::after {
        content: " (" attr(href) ") ";
        font-size: 10px;
    }
    
    .scp-icon {
        display: none;
    }
}

/* ==========================================================================
   Tooltip (Opzionale)
   ========================================================================== */

.scp-with-tooltip .scp-social-link {
    position: relative;
}

.scp-with-tooltip .scp-social-link::before {
    content: attr(data-network);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 10px;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--scp-transition-fast);
    pointer-events: none;
    z-index: 1000;
}

.scp-with-tooltip .scp-social-link::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all var(--scp-transition-fast);
    pointer-events: none;
}

.scp-with-tooltip .scp-social-link:hover::before,
.scp-with-tooltip .scp-social-link:hover::after {
    opacity: 1;
    visibility: visible;
}

.scp-with-tooltip .scp-social-link:hover::before {
    transform: translateX(-50%) translateY(-4px);
}

.scp-with-tooltip .scp-social-link:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   Varianti Layout Speciali
   ========================================================================== */

/* Verticale */
.scp-layout-vertical {
    flex-direction: column;
    align-items: center;
}

.scp-layout-vertical.scp-align-left {
    align-items: flex-start;
}

.scp-layout-vertical.scp-align-right {
    align-items: flex-end;
}

/* Griglia */
.scp-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, max-content));
    justify-content: center;
}

/* Fixed Sidebar */
.scp-fixed-sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    z-index: 9999;
}

.scp-fixed-sidebar.scp-fixed-left {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.scp-fixed-sidebar.scp-fixed-right {
    right: 0;
    border-radius: 8px 0 0 8px;
}

.scp-fixed-sidebar .scp-social-link {
    margin: 2px 0;
}

/* ==========================================================================
   Skeleton Loading
   ========================================================================== */

.scp-skeleton .scp-social-link {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: scp-skeleton-loading 1.5s infinite;
}

@keyframes scp-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Lazy Load Placeholder
   ========================================================================== */

.scp-lazy-placeholder {
    background-color: #f0f0f0;
    transition: background-color var(--scp-transition-fast);
}

.scp-lazy-loaded {
    background-color: transparent;
}