/**
 * Red-C Share Buttons — front-end styles.
 *
 * Colour, size, gap and alignment are driven by CSS custom properties set on
 * the .red-c-share <nav> (inline) and resolved per colour mode below.
 *
 * NOTE ON !important: this is an embeddable widget that must render correctly
 * on any theme. Themes routinely set `a { color: … }` (often via theme.json),
 * which would otherwise bleed into the button text/icons. The colour-critical
 * declarations are therefore marked !important so the component always owns its
 * own appearance. These still read from CSS variables, so per-item brand
 * colours and the custom colour picker continue to work.
 */
.red-c-share {
    --rcs-neutral: #1f2937;
    --rcs-size: 40px;
    --rcs-icon: 22px;
    --rcs-font: 0.9rem;
    --rcs-gap: 8px;
    --rcs-radius: 6px;
    margin: 1.5rem 0;
}

.red-c-share__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.red-c-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rcs-gap);
}

.red-c-share__item {
    margin: 0;
    padding: 0;
}

/* Alignment — applies to both the heading and the button row */
.red-c-share--align-left .red-c-share__list {
    justify-content: flex-start;
}
.red-c-share--align-center .red-c-share__list {
    justify-content: center;
}
.red-c-share--align-right .red-c-share__list {
    justify-content: flex-end;
}
.red-c-share--align-left .red-c-share__title {
    text-align: left;
}
.red-c-share--align-center .red-c-share__title {
    text-align: center;
}
.red-c-share--align-right .red-c-share__title {
    text-align: right;
}

/* Shared button box model — normalised so <a> and <button> match exactly. */
.red-c-share__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--rcs-size);
    margin: 0;
    padding: 0 calc(var(--rcs-size) * 0.34);
    border: 2px solid transparent;
    border-radius: var(--rcs-radius);
    font-family: inherit;
    font-size: var(--rcs-font);
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.red-c-share__icon {
    flex: 0 0 auto;
    display: block;
    width: var(--rcs-icon);
    height: var(--rcs-icon);
}

.red-c-share__link:hover,
.red-c-share__link:focus-visible {
    opacity: 0.9;
}
.red-c-share__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --- Accent resolution per colour mode --- */
.red-c-share--brand .red-c-share__link {
    --rcs-accent: var(--rcs-brand, var(--rcs-neutral));
    --rcs-on: #fff;
}
.red-c-share--mono .red-c-share__link {
    --rcs-accent: var(--rcs-neutral);
    --rcs-on: #fff;
}
.red-c-share--custom .red-c-share__link {
    --rcs-accent: var(--rcs-bg, var(--rcs-neutral));
    --rcs-on: var(--rcs-fg, #fff);
}

/* --- Style: Solid / Rounded / Roundel (filled) --- */
.red-c-share--solid .red-c-share__link,
.red-c-share--rounded .red-c-share__link,
.red-c-share--roundel .red-c-share__link {
    background-color: var(--rcs-accent) !important;
    color: var(--rcs-on) !important;
}
.red-c-share--rounded .red-c-share__link {
    border-radius: 999px;
}

/* --- Style: Outline --- */
.red-c-share--outline .red-c-share__link {
    background-color: transparent !important;
    color: var(--rcs-accent) !important;
    border-color: var(--rcs-accent) !important;
}
.red-c-share--outline .red-c-share__link:hover,
.red-c-share--outline .red-c-share__link:focus-visible {
    background-color: var(--rcs-accent) !important;
    color: var(--rcs-on) !important;
    opacity: 1;
}

/* --- Style: Minimal (icon only, no chrome) --- */
.red-c-share--minimal .red-c-share__link {
    color: var(--rcs-accent) !important;
}

/* --- Icon-only styles (Minimal + Roundel): square, label hidden --- */
.red-c-share--minimal .red-c-share__link,
.red-c-share--roundel .red-c-share__link {
    width: var(--rcs-size);
    height: var(--rcs-size);
    padding: 0;
}
.red-c-share--roundel .red-c-share__link {
    border-radius: 50%;
}
.red-c-share--minimal .red-c-share__label,
.red-c-share--roundel .red-c-share__label {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* Copy-link confirmation */
.red-c-share__link--copy.is-copied {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .red-c-share__link {
        transition: none;
    }
}