/*  ==========================================================  share row
 *
 *  includes/wfa_share.php. Pills that sit quiet in the page and take their
 *  network's color on hover, so the row reads as one component rather than
 *  four colored blocks fighting the copy around it.
 *
 *  --wfa-brand is set per button and is the only thing that changes between
 *  them, which is why the rules below never name a network.
 *
 *  It replaced the rrssb list on /resources. rrssb's stylesheet has not been
 *  loaded since the 2026 shell shipped, so those four buttons had been bare
 *  bulleted links with 28px black glyphs. Nothing here depends on a library.
 *
 *  WHY THIS IS ITS OWN FILE
 *
 *  It lived at the end of css/wfa.css until the row reached /m/, which is
 *  served by _media.php rather than by index.php and so builds its own head.
 *  That head loads bootstrap 3.3.7, default.min.css and popup.css, and
 *  wfa.css restyles body and every a, so dropping the whole sheet in would
 *  have redrawn the page around the row. This file is the row and nothing
 *  else. includes/wfa_share.php links it itself, once per request, so a page
 *  gets it by including the partial and nothing else has to know.
 *
 *  TWO THINGS THIS FILE DOES THAT THE BLOCK IN wfa.css DID NOT
 *
 *  Every token carries its literal as a fallback. On a page in the 2026
 *  shell the :root value in wfa.css wins; on a page without it the fallback
 *  does, and the row looks the same either way. The literals are copies, so
 *  a token that changes in wfa.css has to be changed here too.
 *
 *  Every button rule is written as .wfa-share .wfa-share-btn rather than
 *  .wfa-share-btn. popup.css carries ".seo_page a { display: block }", which
 *  is two values of specificity and beat a single class, so on /m/ the
 *  buttons were laid out as blocks and the icon fell off the label. Two
 *  classes beat it. Nothing here needs !important.
 */

.wfa-share { margin: 22px 0 26px; }

/*  For a page that ends on the share row: the hairline and the air above it
    that the blog, tips and sins articles drew around their own buttons. */
.wfa-share.has-rule {
    margin-top: clamp(32px, 4vw, 40px);
    padding-top: 26px;
    border-top: 1px solid var(--wfa-line, rgba(70,55,35,.14));
}

/*  For a page whose column is centered, which on /m/ is every one of them. */
.wfa-share.is-center .wfa-share-row { justify-content: center; }
.wfa-share.is-center .wfa-share-label { text-align: center; }

.wfa-share .wfa-share-label {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wfa-ink-mute-2, #7E7666);
}

.wfa-share .wfa-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wfa-share .wfa-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    margin: 0;
    /*  14/12 rather than 16/13. The article column on /m/ is 540px and the
        five buttons wanted 544, so Copy link dropped onto a line of its own
        by four pixels. Three pixels a button buys eleven back. */
    padding: 9px 14px 9px 12px;
    border: 1px solid var(--wfa-line, rgba(70,55,35,.14));
    border-radius: 999px;
    background: var(--wfa-bg-card, #ffffff);
    color: var(--wfa-ink, #211E1A);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.wfa-share .wfa-share-btn svg {
    width: 17px;
    height: 17px;
    max-width: 17px;
    flex: none;
    display: block;
    color: var(--wfa-brand, var(--wfa-ink-mute, #6E675C));
    transition: color .16s ease;
}

.wfa-share .wfa-share-btn:hover,
.wfa-share .wfa-share-btn:focus-visible {
    background: var(--wfa-brand, var(--wfa-ink, #211E1A));
    border-color: var(--wfa-brand, var(--wfa-ink, #211E1A));
    color: #fff;
    box-shadow: var(--wfa-shadow-pill, 0 8px 24px rgba(70,55,35,.10));
    transform: translateY(-1px);
    text-decoration: none;
}

.wfa-share .wfa-share-btn:hover svg,
.wfa-share .wfa-share-btn:focus-visible svg { color: #fff; }

.wfa-share .wfa-share-btn:focus-visible { outline: 2px solid var(--wfa-accent, #f58e1f); outline-offset: 2px; }

/*  display on the class beats the hidden attribute, so the native button
    has to be told twice. Without this it sat on a second line of its own
    on every desktop, which is the one place it is not meant to show. */
.wfa-share .wfa-share-btn[hidden] { display: none; }
.wfa-share .wfa-share-btn:active { transform: translateY(0); }

/*  Held for 1.8 seconds after Copy link, so the button answers instead of
    looking like it did nothing. */
.wfa-share .wfa-share-btn.is-done,
.wfa-share .wfa-share-btn.is-done:hover {
    background: var(--wfa-bg-accent-1, #FCEBD6);
    border-color: var(--wfa-accent, #f58e1f);
    color: var(--wfa-accent-deep, #A85708);
    box-shadow: none;
    transform: translateY(0);
}
.wfa-share .wfa-share-btn.is-done svg,
.wfa-share .wfa-share-btn.is-done:hover svg { color: var(--wfa-accent-deep, #A85708); }

.wfa-share .wfa-share-btn.is-facebook { --wfa-brand: #1877F2; }
.wfa-share .wfa-share-btn.is-x        { --wfa-brand: #16140F; }
.wfa-share .wfa-share-btn.is-linkedin { --wfa-brand: #0A66C2; }
.wfa-share .wfa-share-btn.is-email    { --wfa-brand: var(--wfa-link, #B4600C); }
.wfa-share .wfa-share-btn.is-copy     { --wfa-brand: var(--wfa-ink, #211E1A); }
.wfa-share .wfa-share-btn.is-native   { --wfa-brand: var(--wfa-accent-deep, #A85708); }

/*  The legacy bodies put a disc and 22px of padding on every ul and 8px
    under every li, which is what made the old row a bulleted column. */
.wfa-legacy .wfa-share .wfa-share-row { padding-left: 0; list-style: none; }
.wfa-legacy .wfa-share .wfa-share-row > * { margin-bottom: 0; }
.wfa-legacy .wfa-share .wfa-share-btn:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .wfa-share .wfa-share-btn,
    .wfa-share .wfa-share-btn svg { transition: none; }
    .wfa-share .wfa-share-btn:hover,
    .wfa-share .wfa-share-btn:focus-visible { transform: none; }
}