/* /assets/css/share.css — styles for the reusable share row.
 * Pairs with /assets/js/share.js. Include both anywhere you want to offer
 * "share this on X/FB/LinkedIn" buttons for a short snippet of text.
 */

.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.12s ease;
    line-height: 1;
    user-select: none;
}
.share-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.share-btn:active { transform: translateY(0); }
.share-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }

.share-btn-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-family: ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0;
}

.share-btn-x        { background: #000; box-shadow: inset 0 0 0 1px #2a2a2a; }
.share-btn-facebook { background: #1877f2; }
.share-btn-linkedin { background: #0a66c2; }
.share-btn-native   {
    background: rgba(255,255,255,0.08);
    color: #fafafa;
    border: 1px solid rgba(255,255,255,0.18);
}
.share-btn-native .share-btn-icon { background: rgba(255,255,255,0.12); }

@media (max-width: 420px) {
    .share-btn { flex: 1 1 auto; justify-content: center; }
}