/* ---------------------------------
    Social widget
--------------------------------- */
.bagels-social-icons-widget{
    position: relative;
    /* Single source of truth for the popup width — script.js reads this to work
       out whether there is room to open leftward. */
    --siw-qr-width: 204px;
    /* Width of a trigger icon, mirroring the font-size on .siw-list li a (the
       icon is 1em wide). The tail is centred on this, so it must track the
       icon's size at every breakpoint. */
    --siw-icon-size: 16px;
}

.bagels-social-icons-widget .siw-list{
    padding: 0;
    margin: 0 0 -16px 0;
    list-style-type: none;
    position: relative;   /* stacking context for the popups */
}

.bagels-social-icons-widget .siw-list li{
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
    /* Anchor for this item's own QR popup. Without it the popup resolves
       against .siw-list and every popup pins to the right edge of the whole
       row — i.e. to the last icon — instead of its own. */
    position: relative;
}

.bagels-social-icons-widget .siw-list li:last-child{
    margin-right: 0;
}

.bagels-social-icons-widget .siw-list li a{
    display: inline-block;
    font-size: 16px;
}

/* Icons for platforms Font Awesome has no glyph for (WeChat Channels,
   Bilibili). The image is used as a mask and painted with currentColor, so it
   matches the Font Awesome icons in both size and colour — hover included.
   Sized in em so it follows the font-size rules above automatically. */
.bagels-social-icons-widget .siw-list li a .siw-custom-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: var(--siw-icon);
            mask-image: var(--siw-icon);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    /* The source images carry padding inside their canvas, so at "contain"
       they read smaller than the Font Awesome glyphs. Scaling the mask up
       inside the same 1em box evens them out without changing the box itself,
       so spacing and alignment with the other icons stay untouched.
       Tune with --siw-icon-scale (per icon if ever needed). */
    -webkit-mask-size: var(--siw-icon-scale, 125%);
            mask-size: var(--siw-icon-scale, 125%);
}

/* ---------------------------------
    QR popup (WeChat Official Account / Channels — accounts with no URL)
--------------------------------- */
.bagels-social-icons-widget .siw-qr-popup,
.bagels-social-icons-widget.siw-locked .siw-list li:hover .siw-qr-popup,
.bagels-social-icons-widget.siw-locked .siw-list li:focus-within .siw-qr-popup{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Opens upwards from the icon. Anchored to the icon's RIGHT edge rather than
   centred, because the widget sits hard against the right of the footer and
   body has overflow-x:hidden — a centred popup would be clipped off-screen.
   The pointer below is positioned separately so it still points at the icon. */
.bagels-social-icons-widget .siw-qr-popup{
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 20;
    /* display: none; */
    opacity: 0;
    pointer-events: none;
    padding: 12px;
    background: #fff;
    border-radius: 8px 8px 0px 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    text-align: center;
    cursor: default;
    /* An explicit width is required. The popup's containing block is the <li>,
       which is only as wide as the icon (~16px), so with width:auto it
       shrink-to-fits against that and collapses into a narrow column — the QR
       squashes and the label wraps one word per line.
       180px QR + 12px padding on each side. */
    width: var(--siw-qr-width, 204px);
    /* Never wider than the viewport, however close to the edge the icon sits. */
    max-width: calc(100vw - 32px);
}

.bagels-social-icons-widget .siw-list li:hover .siw-qr-popup,
.bagels-social-icons-widget .siw-list li:focus-within .siw-qr-popup,
.bagels-social-icons-widget .siw-list li.is-open .siw-qr-popup{
    /* display: block; */
    opacity: 1;
    pointer-events: all;
}

/* While one popup is pinned open by a click/tap, hovering another must not
   open a second one. script.js puts .siw-locked on the widget for as long as
   something is pinned, so only the pinned popup stays visible. */
.bagels-social-icons-widget.siw-locked .siw-list li:hover .siw-qr-popup,
.bagels-social-icons-widget.siw-locked .siw-list li:focus-within .siw-qr-popup{
    /* display: none; */
    opacity: 0;
    pointer-events: none;
}

.bagels-social-icons-widget.siw-locked .siw-list li.is-open .siw-qr-popup{
    /* display: block; */
    opacity: 1;
    pointer-events: all;
}

/* Downward pointer, sitting under the icon at the popup's bottom-right.
   Offsets here resolve against the POPUP (its containing block), not the <li> —
   a percentage would centre it on the popup instead of the icon.
   The popup's right edge is flush with the icon's right edge, so the icon's
   horizontal centre lies half an icon width in from that edge. The arrow is
   16px wide (8px borders), so pulling it 8px back from that point puts its own
   horizontal centre on the icon's. */
.bagels-social-icons-widget .siw-qr-popup::after{
    content: "";
    position: absolute;
    /* 1px overlap so no hairline gap appears between box and tail at
       fractional zoom levels. */
    top: calc(100% - 0px);
    right: calc(var(--siw-icon-size, 16px) / 2 - 8px);
    border: 8px solid transparent;
    border-top-color: #fff;
}

/* Flipped state — opens rightward instead. script.js applies .siw-flip when
   there isn't room to the left of the icon, which happens on mobile where the
   icon row is centred and the first icons sit near the left edge. The tail
   moves to the bottom-left corner with it. */
.bagels-social-icons-widget .siw-item--qr.siw-flip .siw-qr-popup{
    right: auto;
    left: 0;
    border-radius: 8px 8px 8px 0px;
}

.bagels-social-icons-widget .siw-item--qr.siw-flip .siw-qr-popup::after{
    right: auto;
    left: calc(var(--siw-icon-size, 16px) / 2 - 8px);
}

.bagels-social-icons-widget .siw-qr-img{
    display: block;
    width: 180px;
    height: 180px;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 991px) {
    .bagels-social-icons-widget{
        --siw-icon-size: 18.3px;
    }

    .bagels-social-icons-widget .siw-list li a{
        font-size: 18.3px;
    }

    /* On mobile the popup's outer edge is pulled out to meet the tail's outer
       edge, so box and tail share a flush corner instead of the tail sitting
       inset. The tail keeps its position on the icon's centre — only the box
       moves — so the shift is exactly the tail's own inset. */
    .bagels-social-icons-widget .siw-qr-popup{
        right: calc(var(--siw-icon-size, 16px) / 2 - 8px);
    }

    .bagels-social-icons-widget .siw-qr-popup::after{
        right: 0;
    }

    .bagels-social-icons-widget .siw-item--qr.siw-flip .siw-qr-popup{
        right: auto;
        left: calc(var(--siw-icon-size, 16px) / 2 - 8px);
    }

    .bagels-social-icons-widget .siw-item--qr.siw-flip .siw-qr-popup::after{
        right: auto;
        left: 0;
    }
}