/* ═══════════════════════════════════════════════
   Web Toolkit — Share Bar (Frontend)
   ═══════════════════════════════════════════════ */

.wt-share-bar {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.wt-shb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.wt-shb-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.wt-shb-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Small visual feedback when "Copy Link" succeeds */
.wt-shb-copy.wt-shb-copied {
    color: #10b981 !important;
}

/* ─── Row layout — shared with Reading Time ─────
   When both Reading Time and Share Bar render into the same
   "after_meta" row, this wraps them on a single flex line with
   space between, matching the reference: [icons] ... [Min Read] */
.wt-rt-shb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

/* Variant when Share Bar sits in the post-meta row (after_meta position) */
.wt-share-bar.wt-shb-meta-row {
    margin-right: auto;
}

/* Variant when Share Bar is auto-injected above the content
   (before_content position) — own row with bottom border, the
   Reading Time module adds its own border so we skip a duplicate
   one here when both are active in before_content together. */
.wt-share-bar.wt-shb-before-content {
    margin-bottom: 12px;
}

/* ─── Mobile ─────────────────────────────────── */
@media (max-width: 480px) {
    .wt-share-bar {
        gap: 8px;
    }
    .wt-shb-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}

/* ─── Print ──────────────────────────────────────
   Hide the share bar itself when the page is actually printed. */
@media print {
    .wt-share-bar {
        display: none !important;
    }
}