/* Share rows on posts (partials/wootware-share.hbs): the full row after the
   content and a compact one under the title. Colours come from the theme's
   variables, which dark-mode.css overrides, so dark mode applies without extra
   rules. */
.ww-share {
    margin-top: 4.8rem;
}

.ww-share-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 20px 0;
    border-top: 1px solid var(--color-light-gray);
    border-bottom: 1px solid var(--color-light-gray);
}

.ww-share-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.ww-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ww-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--color-primary-text);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--color-light-gray);
    border-radius: 50%;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ww-share-btn:hover,
.ww-share-btn:focus-visible {
    color: var(--ghost-accent-color);
    border-color: var(--ghost-accent-color);
    opacity: 1;
}

.ww-share-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* The theme's display rule would otherwise beat the hidden attribute. */
.ww-share-btn[hidden] {
    display: none;
}

.ww-share-btn .ww-share-icon-done,
.ww-share-btn.is-done .ww-share-icon-default {
    display: none;
}

.ww-share-btn.is-done .ww-share-icon-done {
    display: block;
}

.ww-share-btn.is-done {
    color: #16a34a;
    border-color: #16a34a;
}

.ww-share-status {
    font-size: 1.4rem;
    color: var(--color-secondary-text);
}

.ww-share-status:empty {
    display: none;
}

/* Compact row under the title: smaller buttons, no label or rules. */
.ww-share-compact {
    margin-top: 2rem;
}

.ww-share-compact .ww-share-inner {
    gap: 8px 12px;
    padding: 0;
    border: 0;
}

.ww-share-compact .ww-share-buttons {
    gap: 6px;
}

.ww-share-compact .ww-share-btn {
    width: 34px;
    height: 34px;
}

.ww-share-compact .ww-share-btn svg {
    width: 16px;
    height: 16px;
}