/* ─────────────────────────────────────────────────────────────────────
   bdc_share_buttons — inline share row.

   Icons in soft-grey ghost buttons; hover raises to each network's
   brand tint (subtle, not neon). Reused for both a top byline row
   and a bottom-of-article "keep sharing" region — the same widget
   fits both surfaces so we don't build two.
   ───────────────────────────────────────────────────────────────────── */

.bdc-share {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bdc-share__label {
    font: 500 13px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-3, #6b6b68);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bdc-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.bdc-share__item {
    margin: 0;
    padding: 0;
}

.bdc-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--bdc-ink-6, #eeece5);
    color: var(--bdc-ink-2, #4a4a48);
    text-decoration: none;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}

.bdc-share__link svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Visually hide the network name but keep it for screen readers. */
.bdc-share__srtext {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Hover (per-network brand tints, muted) ─── */
.bdc-share__link:hover {
    transform: translateY(-1px);
}
.bdc-share__link--twitter:hover  { background: #000000;    border-color: #000000;    color: #ffffff; }
.bdc-share__link--facebook:hover { background: #1877F2;    border-color: #1877F2;    color: #ffffff; }
.bdc-share__link--linkedin:hover { background: #0A66C2;    border-color: #0A66C2;    color: #ffffff; }
.bdc-share__link--whatsapp:hover { background: #25D366;    border-color: #25D366;    color: #ffffff; }
.bdc-share__link--copy:hover     { background: var(--bdc-sage, #3d5844); border-color: var(--bdc-sage, #3d5844); color: #ffffff; }

/* ─── "Copied!" feedback state ─── */
.bdc-share__link--copied {
    background: var(--bdc-sage, #3d5844);
    border-color: var(--bdc-sage, #3d5844);
    color: #ffffff;
}
.bdc-share__link--copied::after {
    content: "Copied!";
    position: absolute;
    margin-top: -48px;
    padding: 4px 10px;
    background: var(--bdc-ink, #1a1a1a);
    color: #ffffff;
    border-radius: 6px;
    font: 500 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    animation: bdc-share-fade 1.2s ease forwards;
}
@keyframes bdc-share-fade {
    0%   { opacity: 0; transform: translateY(4px); }
    15%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

/* ─── Focus ring ─── */
.bdc-share__link:focus-visible {
    outline: 2px solid var(--bdc-sage, #3d5844);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   Sticky rail variant — vertical stack, pinned to the LEFT gutter
   on widescreen. Mirror of the TOC on the right side. Below the
   1280px breakpoint we hide the rail entirely because there's no
   space — users can still share via the inline byline row that
   the meta band exposes near the article title.
   ───────────────────────────────────────────────────────────────── */

/* Default: hide the rail wrapper below the widescreen threshold. */
.bdc-share-rail-wrap {
    display: none;
}

.bdc-share--rail {
    /* Vertical layout inside the rail */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bdc-share--rail .bdc-share__list {
    flex-direction: column;
    gap: 10px;
}

.bdc-share__label--rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 8px;
    font: 500 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bdc-ink-3, #6b6b68);
}

/* ─── Widescreen: pin rail to article left gutter ───

   Same "static reset" trick as the TOC — Elementor wraps every
   widget in a `.elementor-widget-container` with position:relative
   which would otherwise capture our absolute positioning and
   collapse the rail to widget-height. */
@media (min-width: 1280px) {
    .elementor-widget-bdc_share_buttons:has(.bdc-share-rail-wrap),
    .elementor-widget-bdc_share_buttons:has(.bdc-share-rail-wrap) .elementor-widget-container {
        position: static;
    }

    .bdc-share-rail-wrap {
        display: block;
        position: absolute;
        /* Absolute inside the .bdc-content-region container that
           begins BELOW the meta row. `top: 0` anchors to the top of
           that region (start of the reading area), NOT the top of
           the whole article — so the rail no longer overlaps the
           hero banner. */
        top: 0;
        bottom: 0;
        /* Position INSIDE the 1360px article container's left edge,
           mirroring the TOC's `right: 24px` on the other side. */
        left: 24px;
        width: 44px;
        margin: 0;
        pointer-events: none;
    }

    .bdc-share--rail {
        pointer-events: auto;
        position: sticky;
        /* Matches the TOC's sticky offset — both clear the site's
           fixed header (120px on desktop, ~107px on mobile) with a
           small breathing gap. Kept as a hard value here rather than
           a CSS var so the rail works even without the TOC widget
           on the page. */
        top: 140px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        padding: 8px 0;
    }
}