/**
 * NoSpace Social Share Bar
 * Styles for mod_social_share — responsive icon bar with light/dark support.
 * Depends on theme.css variables.
 */

.social-share-bar {
    text-align: center;
    margin: 1.5rem 0;
}

.social-share-bar .share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social-share-bar .share-link:hover,
.social-share-bar .share-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    outline: none;
}

.social-share-bar .share-link svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    flex-shrink: 0;
}

.social-share-bar .share-x:hover,
.social-share-bar .share-x:focus-visible {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

.social-share-bar .share-linkedin:hover,
.social-share-bar .share-linkedin:focus-visible {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #ffffff;
}

.social-share-bar .share-facebook:hover,
.social-share-bar .share-facebook:focus-visible {
    background: #1877f2;
    border-color: #1877f2;
    color: #ffffff;
}

[data-theme="dark"] .social-share-bar .share-link {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}


[data-theme="dark"] .social-share-bar .share-x:hover,
[data-theme="dark"] .social-share-bar .share-x:focus-visible {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-body);
}