.scherzo-social-links {
    /* Defaults are desktop. Tablet/mobile overrides at the bottom of the file.
       Override any of these from Elementor → Site Settings → Custom CSS if
       you want different proportions without editing the plugin file. */
    --scherzo-social-size: 0.95em;
    --scherzo-social-gap-x: 0.9em;
    --scherzo-social-gap-y: 0.4em;

    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--scherzo-social-gap-y) var(--scherzo-social-gap-x);
}

.scherzo-social-links li {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/*
 * Tap-target expansion: padding adds clickable area, negative margin keeps
 * the visual layout unchanged. Result is a ~44px hit-box on a 16px root
 * font while icons still appear compact.
 */
.scherzo-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
    padding: 0.7em 0.4em;
    margin: -0.7em -0.4em;
}

.scherzo-social-links a:hover,
.scherzo-social-links a:focus-visible {
    opacity: 0.6;
}

.scherzo-social-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.scherzo-social-links svg {
    height: var(--scherzo-social-size);
    width: auto;
    display: block;
    overflow: visible;
}

/* Tablet — Elementor's default tablet breakpoint */
@media (max-width: 1024px) {
    .scherzo-social-links {
        --scherzo-social-size: 0.75em;
        --scherzo-social-gap-x: 0.7em;
    }
}

/* Mobile — Elementor's default mobile breakpoint */
@media (max-width: 767px) {
    .scherzo-social-links {
        --scherzo-social-size: 0.65em;
        --scherzo-social-gap-x: 0.6em;
		justify-content: center;
    }
}

/* Touch devices: even larger tap targets */
@media (pointer: coarse) {
    .scherzo-social-links a {
        padding: 1em 0.6em;
        margin: -1em -0.6em;
    }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .scherzo-social-links a {
        transition: none;
    }
}