/* ----------------------------------------
   Container Principale e Layout
---------------------------------------- */
.social-container {
    width: 75%;
    margin: 10vh auto;
    text-align: center;
}

.social-icons {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin-top: 1em;
}

.social-icons li {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------
   Link e Icone - Stili Base
---------------------------------------- */
.social-icons a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.social-icons a:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 1;
    transition: transform 265ms ease-out;
}

.social-icons i {
    display: inline-block;
    font-size: 1.5em;
    color: white;
    z-index: 2;
    transition: transform 265ms ease-out;
}

/* ----------------------------------------
   Effetti Hover
---------------------------------------- */
/* Background cerchio scompare */
.social-icons a:hover:before {
    transform: scale(0);
}

/* Icona ingrandita */
.social-icons a:hover i {
    transform: scale(2.2);
}

/* ----------------------------------------
   Background specifici per ogni social
---------------------------------------- */
#instagram a:before {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

#youtube a:before {
    background: #ff0000;
}

#discord a:before {
    background: #5865F2;
}

#github a:before {
    background: #000000;
}

#facebook a:before {
    background: #3b5998;
}

#twitter a:before {
    background: #1da1f2;
}

#linkedin a:before {
    background: #0077b5;
}

#tiktok a:before {
    background: #000000;
}

#snapchat a:before {
    background: #fffc00;
}

#pinterest a:before {
    background: #bd081c;
}

#reddit a:before {
    background: #ff4500;
}

#telegram a:before {
    background: #0088cc;
}

#medium a:before {
    background: #000000;
}

#twitch a:before {
    background: #9146ff;
}

#threads a:before {
    background: #000000;
}

/* ----------------------------------------
   Hover: colore icona con effetto clip
---------------------------------------- */
#instagram a:hover i {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#youtube a:hover i {
    background: #ff0000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#discord a:hover i {
    background: #5865F2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#github a:hover i {
    background: #000000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#facebook a:hover i {
    background: #3b5998;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#twitter a:hover i {
    background: #1da1f2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#linkedin a:hover i {
    background: #0077b5;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#tiktok a:hover i {
    background: #000000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#snapchat a:hover i {
    background: #fffc00;
    color: #000000; /* testo nero rimane */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#pinterest a:hover i {
    background: #bd081c;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#reddit a:hover i {
    background: #ff4500;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telegram a:hover i {
    background: #0088cc;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#medium a:hover i {
    background: #000000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#twitch a:hover i {
    background: #9146ff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#threads a:hover i {
    background: #000000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ----------------------------------------
   Modalità Scura - Override colori icone nere
---------------------------------------- */
body.dark-mode #github a i,
body.dark-mode #tiktok a i,
body.dark-mode #medium a i,
body.dark-mode #threads a i {
    color: white;
    -webkit-text-fill-color: white;
    background: none;
}

body.dark-mode #github a:hover i,
body.dark-mode #tiktok a:hover i,
body.dark-mode #medium a:hover i,
body.dark-mode #threads a:hover i {
    background: none;
    color: white;
    -webkit-text-fill-color: white;
}


dark-mode #github a i,
dark-mode #tiktok a i,
dark-mode #medium a i,
dark-mode #threads a i {
    color: white;
    -webkit-text-fill-color: white;
    background: none;
}

dark-mode #github a:hover i,
dark-mode #tiktok a:hover i,
dark-mode #medium a:hover i,
dark-mode #threads a:hover i {
    background: none;
    color: white;
    -webkit-text-fill-color: white;
}