/* Pin buttons on images (v0.3.908) — its own stylesheet, and the whole of the feature.
 *
 * THERE IS NO pin-buttons.js. Hubbub adds its buttons with JavaScript, which is why a fetch of the
 * page reports none of them — and on this site scripts are delayed until the reader's first
 * interaction. A pin button is a link; it needs nothing. The hover is CSS.
 *
 * Colours come from the settings variables with a literal fallback, so Settings → Colors reaches
 * them. Pinterest red is Pinterest's and stays literal — it is their brand, not hers, and a reader
 * recognises the button by it.
 */

.jcp-pinnable {
    position: relative;
    display: inline-block;
    max-width: 100%;
    /* Without this the wrapper sits on the text baseline and leaves a gap under every image. */
    line-height: 0;
}

/* The wrapper must not change how the image was laid out. An image WordPress centred, floated or
   stretched keeps doing that, because the span inherits nothing of its own. */
.jcp-pinnable > img,
.jcp-pinnable > picture,
.jcp-pinnable > picture > img {
    max-width: 100%;
    height: auto;
}

.jcp-pin-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    /* PINTEREST RED ON A PHOTO, HER GREY ON THE ROW — her call (v0.3.914). On a photo the
       button has to read as "pin this" against whatever colours her image happens to carry, and
       Pinterest’s own red is what a reader recognises; in her text the red shouted. Both are
       settings, so #e60023 is only what a fresh install starts with. */
    background: var(--jcp-pin-btn-bg, #e60023);
    color: var(--jcp-pin-btn-text, #ffffff) !important;
    /* `em`, never `rem`: her body is 20px and `rem` is 16, so a rem-sized button comes out smaller
       than she expects. The face is the theme's. */
    font-size: 0.72em;
    font-weight: bold;
    line-height: 1;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0;               /* no rounded corners anywhere in this plugin */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    /* ALWAYS THERE, on every device — her call once she saw it. A button that appears on hover is a
       button most readers never learn exists, and on a phone there is no hover to reveal it with. */
    z-index: 2;
}

.jcp-pin-btn svg { flex: none; }

/* LIGHTER on hover, not darker — her call. Darkening read as "pressed" on a button that is always
   there; lifting it reads as "this is live". Pinterest's own red stays the resting colour. */
.jcp-pin-btn:hover,
.jcp-pin-btn:focus-visible {
    /* LIGHTER on hover, not darker — her call. Darkening read as "pressed" on a button that is
       always there; lifting it reads as live. A translucent white over whatever colour she picks,
       so it keeps working if she changes the button to something else entirely. */
    background: var(--jcp-pin-btn-bg, #e60023);
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.18);
}

.jcp-pin-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

/* Small screens: the label goes and the mark stays, so the button cannot cover the photo it is
   meant to help someone save. */
@media (max-width: 600px) {
    .jcp-pin-btn {
        top: 8px;
        right: 8px;
        padding: 8px;
    }
    .jcp-pin-btn span { display: none; }
}

/* Paper cannot be pinned. */
@media print {
    .jcp-pin-btn { display: none !important; }
}

/* ── The share row ────────────────────────────────────────────────────
   One Pinterest button at the top and bottom of the post. Part of this feature rather than its own,
   because it is the same job in a different place and she would never want one without the other —
   two near-identical stylesheets would be a second copy of the truth.

   The count Hubbub shows beside it is not here yet; the row is laid out so it can slot in on the
   left without anything moving. */

.jcp-share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0;
}

.jcp-share-count {
    /* The slot the row was laid out for. Her readers have seen a number here for years, so it sits
       left of the button exactly where Hubbub put it. */
    font-size: 0.8em;
    line-height: 1.2;
    color: var(--jcp-text, #555557);
    white-space: nowrap;
}

.jcp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    background: var(--jcp-share-btn-bg, #555557);
    color: var(--jcp-share-btn-text, #ffffff) !important;
    /* Sized down to sit beside her text rather than shout over it — her call, seeing it next to
       Hubbub's. `em` against her 20px body, so 0.8em is 16px. */
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0;
}

.jcp-share-btn:hover,
.jcp-share-btn:focus-visible {
    background: var(--jcp-share-btn-bg, #555557);
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.18);
}

.jcp-share-btn:focus-visible {
    outline: 2px solid var(--jcp-text, #555557);
    outline-offset: 2px;
}

.jcp-share-btn svg { flex: none; }

@media (max-width: 600px) {
    /* Full width on a phone, where a button floating in the left half reads as unfinished. */
    .jcp-share-btn { flex: 1; justify-content: center; }
}

@media print {
    .jcp-share-row { display: none !important; }
}