/* =========================================================
   PERFRIG — Social Share Buttons
   Two variants: inline (after article body) + float (fixed left)
   Platform hover colours: X #fff|bg, Reddit #ff4500, WhatsApp #25d366, Copy var(--primary)
========================================================= */

/* ── Design tokens ──────────────────────────────────────── */
:root {
    --share-bg      : rgba(255, 255, 255, 0.05);
    --share-border  : rgba(255, 255, 255, 0.10);
    --share-radius  : 8px;
    --share-btn-size: 38px;
    --share-gap     : 6px;
    --share-color   : rgba(255, 255, 255, 0.65);
    --share-twitter : #000;
    --share-reddit  : #ff4500;
    --share-whatsapp: #25d366;
    --share-copy    : var(--primary, #00FF9C);
}

/* ── Base button ──────────────────────────────────────────── */
.pf-share__btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    width           : var(--share-btn-size);
    height          : var(--share-btn-size);
    border-radius   : var(--share-radius);
    background      : var(--share-bg);
    border          : 1px solid var(--share-border);
    color           : var(--share-color);
    text-decoration : none;
    cursor          : pointer;
    font-size       : 12px;
    font-family     : var(--font-body, inherit);
    font-weight     : 500;
    transition      : background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    flex-shrink     : 0;
    line-height     : 1;
    padding         : 0;
}

.pf-share__btn:focus-visible {
    outline        : 2px solid var(--share-copy);
    outline-offset : 2px;
}

/* Platform hover colours */
.pf-share__btn--twitter:hover  { background: #000;     color: #fff;     border-color: #000; }
.pf-share__btn--reddit:hover   { background: #ff4500;  color: #fff;     border-color: #ff4500; }
.pf-share__btn--whatsapp:hover { background: #25d366;  color: #fff;     border-color: #25d366; }
.pf-share__btn--copy:hover     { background: rgba(0, 255, 156, 0.12); color: var(--share-copy); border-color: var(--share-copy); }

/* Copied state */
.pf-share__btn--copy.is-copied { color: var(--share-copy); border-color: var(--share-copy); }

/* ─────────────────────────────────────────────────────────
   INLINE BAR — horizontal, between content and author bio
───────────────────────────────────────────────────────── */
.pf-share--inline {
    display      : flex;
    align-items  : center;
    gap          : var(--share-gap);
    margin       : 32px 0 24px;
    padding      : 14px 16px;
    background   : rgba(255, 255, 255, 0.03);
    border       : 1px solid var(--share-border);
    border-radius: 10px;
}

.pf-share__label {
    font-size   : 12px;
    font-weight : 600;
    color       : rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
    white-space : nowrap;
    flex-shrink : 0;
}

/* Copy button in inline bar has text label → wider */
.pf-share--inline .pf-share__btn--copy {
    width   : auto;
    padding : 0 12px;
    gap     : 6px;
}

.pf-share__copy-label {
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────
   FLOATING BAR — fixed left side, desktop only
   Shown/hidden via JS class .is-visible on scroll.
   Hidden entirely on mobile + tablet.
───────────────────────────────────────────────────────── */
.pf-share--float {
    display          : none; /* JS makes it flex on desktop */
    flex-direction   : row;
    align-items      : center;
    justify-content  : space-evenly;
    position         : fixed;
    left             : 0;    /* JS overrides with TOC left */
    top              : 95px; /* JS overrides with TOC bottom + gap */
    width            : 180px; /* JS overrides with TOC width */
    transform        : translateY(-6px);
    z-index          : 900;
    padding          : 8px 6px;
    background       : #06d7f65e;
    border           : 1px solid var(--share-border);
    border-radius    : 12px;
    backdrop-filter  : blur(10px);
    opacity          : 0;
    pointer-events   : none;
    transition       : opacity 0.25s ease, transform 0.25s ease;
}

/* Show state — toggled by JS */
.pf-share--float.is-visible {
    opacity       : 1;
    pointer-events: auto;
    transform     : translateY(0);
}

/* No text label in floating bar — icon only */
.pf-share--float .pf-share__copy-label { display: none; }
.pf-share--float .pf-share__btn--copy  { width: var(--share-btn-size); padding: 0; }

/* Buttons inside float bar — dark background to contrast the cyan container */
.pf-share--float .pf-share__btn {
    background  : rgba(6, 8, 14, 0.88);
    border-color: rgba(0, 0, 0, 0.25);
    color       : rgba(255, 255, 255, 0.80);
}

/* Hover scale on floating buttons — override translateY */
.pf-share--float .pf-share__btn:hover  { transform: scale(1.1); }

/* Only show floating bar when there is enough horizontal space */
@media (min-width: 1200px) {
    .pf-share--float {
        display: flex;
    }
}

/* ── Dark/light media — inline bar adjustments ─────────── */
@media (prefers-color-scheme: light) {
    :root {
        --share-bg    : rgba(0, 0, 0, 0.04);
        --share-border: rgba(0, 0, 0, 0.10);
        --share-color : rgba(0, 0, 0, 0.55);
    }
    .pf-share--float {
        background: #06d7f65e;
    }
}