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

.wt-share-bar {
    display: flex;
    align-items: center;
    gap: var(--wt-shb-gap, 14px);
    width: 100%;
}

.wt-share-bar.wt-shb-meta-row {
    width: auto;
    flex: 1 1 auto;
}

/* More button — lives inside .wt-shb-icons-more-group (below) so it shares
   that group's `gap`, the same value the Icons Gap slider controls. This
   replaces the old margin-left:auto "pin to far right edge" behavior: that
   auto-margin absorbed any change to Icons Gap (it just ate more/less of
   the container's free space), so moving the slider never visibly changed
   the space before More. Now the gap before More always matches the gap
   between the other icons, exactly. */
.wt-shb-more-wrap {
    display: inline-flex;
    align-items: center;
}

/* Groups the share icons + More together so they share one `gap` value —
   used for both the internal icon-to-icon spacing (via .wt-shb-icons-group
   below) and the icon-to-More spacing (this wrapper). In split layout
   (.wt-shb-split, justify-content:space-between) this is the single
   right-hand item balanced against .wt-shb-text-group on the left. Also
   carries the Group Position translateX offset, so that slider shifts
   icons + More together as one block. */
.wt-shb-icons-more-group {
    display: flex;
    align-items: center;
    gap: inherit;
}

.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;
}

/* ─── Leading Icon — compact icon-only glyph, works in every context
   including the tight meta-row (no text, so it never breaks that
   row's spacing). ── */
/* Wraps Leading Icon + its Text together — deliberately NOT given a
   gap value (defaults to 0), so the outer row's Icons Gap slider can
   never reach in and affect icon-to-text spacing. That spacing is
   controlled solely by the dedicated Icon ↔ Text Gap slider
   (margin-right on .wt-shb-leading-icon below). */
.wt-shb-lead-group {
    display: inline-flex;
    align-items: center;
}

.wt-shb-leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px !important;
    margin-right: 2px;
    transition: transform 0.2s ease;
}

.wt-shb-leading-icon svg {
    width: 1em;
    height: 1em;
}

/* Optional text next to the Leading Icon, inside the same row as the
   share icons (no separate heading row). */
.wt-shb-leading-text {
    font-size: 14px !important;
    font-weight: 600;
    color: #111827;
    margin-right: 6px;
    white-space: nowrap;
    line-height: 1;
}

/* "Text Left / Icons Right" split layout — the leading icon+text sit
   in their own group on the left, share icons in their own group on
   the right, with the natural gap between them pushed to the middle.

   Standalone placements (before_content/shortcode) are the only ones
   in their row, so the bar can safely take the full row width.
   In the meta-row (shared with Reading Time), width:100% would push
   Reading Time off to a new line — so there it flex-grows to fill
   just the space up to Reading Time instead, leaving that badge
   exactly where it already sits. */
.wt-share-bar.wt-shb-split {
    justify-content: space-between;
}

.wt-shb-text-group,
.wt-shb-icons-group {
    display: flex;
    align-items: center;
    gap: inherit;
}

/* 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;
}

/* NOTE: no margin-right:auto here — the parent .wt-rt-shb-row above
   already positions this bar left / Reading Time right via its own
   justify-content:space-between, so this selector doesn't need to set
   its own margin-right. (A margin-right:auto rule used to live here;
   it was redundant with the parent's space-between AND had higher
   CSS specificity than the admin's Padding/Margin panel, so it was
   silently overriding any custom Right margin the admin set — fixed
   by removing it.) */

/* 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;
    }
}