/* ===============================
   Twenty Sixteen Social Icons v2.3
   White SVGs, transparent circles, dark mode borders, identical on mobile
   =============================== */

/* Hide old Genericons */
.social-links-menu li a .genericon,
.menu-social li a .genericon,
.social-links-menu li a:before,
.menu-social li a:before {
    display: none !important;
    content: none !important;
}

/* Menu <ul> layout */
.social-links-menu,
.menu-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Menu items (li) */
.social-links-menu li,
.menu-social li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 4px; /* spacing between circles */
}

/* Circular anchor button with transparent background */
.social-links-menu li a,
.menu-social li a {
    display: block;
    width: 40px;                /* circle diameter same as desktop */
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #444;     /* dark mode border */
    text-align: center;
    line-height: 0;             /* prevents SVG cropping */
    position: relative;         /* needed for absolute SVG positioning */
    color: white;               /* fallback */
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    padding: 0;
    box-sizing: border-box;
}

/* SVG inside the circle */
.svg-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;   /* icon size */
    height: 16px;
    display: block;
    pointer-events: none;
    fill: white !important; /* force white */
}

/* Hover effect */
.social-links-menu li a:hover,
.menu-social li a:hover {
    background: rgba(255, 255, 255, 0.1); /* subtle hover */
    transform: scale(1.1);
    border-color: #666;                   /* lighter on hover */
}

/* Focus effect for accessibility */
.social-links-menu li a:focus,
.menu-social li a:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ===============================
   Mobile: identical appearance to desktop
   =============================== */
@media screen and (max-width: 480px) {
    .social-links-menu,
    .menu-social {
        justify-content: center; /* center menu items */
    }
    .social-links-menu li,
    .menu-social li {
        margin: 0 4px;           /* same spacing as desktop */
    }
    .social-links-menu li a,
    .menu-social li a {
        width: 40px;             /* same size as desktop */
        height: 40px;
    }
    .svg-icon {
        width: 16px;             /* same size as desktop */
        height: 16px;
    }
}