/**
 * Fuelist SEO — Share-in-headings button.
 *
 * Style for the anchor element that `share-in-headings.js` injects into
 * each <h2> inside `.entry-content` / `.single-article__content` on single
 * post pages. Clicking the button copies the heading's deep-link URL
 * (page URL + #heading-id) to the clipboard.
 *
 * Design intent:
 *   - Invisible until the H2 is hovered (or the button itself is focused
 *     via keyboard), so it doesn't disrupt reading flow on a normal pass.
 *   - Sits to the right of the heading text on desktop (using absolute
 *     positioning against the JS-applied `position: relative` on the H2),
 *     and falls back inline beside the heading on narrow viewports where
 *     there's no room outside the heading box.
 *   - Theme-agnostic: uses `currentColor` and transparent backgrounds with
 *     low-opacity hover states, so it inherits whatever heading color the
 *     active theme uses.
 *   - Accessible: keyboard-focusable, has a visible focus state, and the
 *     hit target is at least ~20×20 px at typical heading sizes.
 */

.fuelist_h2_share_button {
    position: absolute;
    top: 50%;
    right: -1.6em;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    min-width: 20px;
    min-height: 20px;
    border-radius: 999px;
    background-color: transparent;
    color: inherit;
    font-size: 0.6em;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease-out, background-color 150ms ease-out;
    -webkit-user-select: none;
            user-select: none;
}

/* Reveal on heading hover or when the button itself is keyboard-focused. */
h2:hover > .fuelist_h2_share_button,
.fuelist_h2_share_button:focus,
.fuelist_h2_share_button:focus-visible {
    opacity: 1;
    outline: none;
    background-color: rgba( 0, 0, 0, 0.08 );
}

.fuelist_h2_share_button:hover {
    background-color: rgba( 0, 0, 0, 0.14 );
}

.fuelist_h2_share_button:active {
    background-color: rgba( 0, 0, 0, 0.22 );
}

/* Slight visual lift to the focus ring for keyboard users without an
 * obnoxious browser outline. */
.fuelist_h2_share_button:focus-visible {
    box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.18 );
}

/* Narrow viewports — abandon the absolute-right placement (no room outside
 * the heading box) and render inline beside the heading text, always
 * visible. */
@media ( max-width: 640px ) {
    .fuelist_h2_share_button {
        position: static;
        transform: none;
        margin-left: 0.5em;
        opacity: 1;
    }
}

/* High-contrast mode (Windows / accessibility tools) — use system colors. */
@media ( forced-colors: active ) {
    .fuelist_h2_share_button {
        opacity: 1;
        color: LinkText;
        background-color: transparent;
        border: 1px solid LinkText;
    }
}