/* ============================================================
   Hermeticus Share-Strip — base styles (canonical).
   Each site overrides via CSS custom properties in its own
   tokens block. See per-site base.html for palette overrides.

   Variables:
     --share-fg        text + icon colour
     --share-bg        strip background
     --share-border    button + strip border
     --share-accent    hover / active fill, native-button fill
     --share-on-accent text colour on accent
     --share-font      typography (defaults to inherit)
     --share-radius    border-radius for buttons
   ============================================================ */
.share-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 2.5rem 0;
  padding: 1rem 1.1rem;
  background: var(--share-bg, transparent);
  border-top: 1px solid var(--share-border, currentColor);
  border-bottom: 1px solid var(--share-border, currentColor);
  font-family: var(--share-font, inherit);
  font-size: 0.85rem;
  color: var(--share-fg, inherit);
}

.share-strip__label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  opacity: 0.7;
  margin-right: 0.4rem;
}

.share-strip__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.78rem;
  border: 1px solid var(--share-border, currentColor);
  border-radius: 1px;
  background: transparent;
  color: var(--share-fg, inherit);
  font: inherit;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.share-strip__btn:hover,
.share-strip__btn:focus-visible {
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
  border-color: var(--share-accent, currentColor);
  outline: none;
}

.share-strip__btn.is-copied {
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
  border-color: var(--share-accent, currentColor);
}

/* Primary native-share button — sits first, visually filled. */
.share-strip__btn--native {
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
  border-color: var(--share-accent, currentColor);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.share-strip__btn--native:hover,
.share-strip__btn--native:focus-visible {
  filter: brightness(1.08);
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
  border-color: var(--share-accent, currentColor);
}
/* Hide visibility helper for [hidden] attribute (some resets break it). */
.share-strip__btn[hidden] { display: none !important; }

/* ─── Standalone inline share button ───
   Same token pool as the strip. Place anywhere via share_button() macro.
   Uses accent colour subtly (outlined) so it doesn't compete with the
   filled native button at the bottom of the article.
*/
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--share-accent, currentColor);
  border-radius: 1px;
  background: transparent;
  color: var(--share-accent, inherit);
  font-family: var(--share-font, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.share-button::before {
  content: "↗";
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.85;
}
.share-button:hover,
.share-button:focus-visible {
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
  outline: none;
}
.share-button.is-copied {
  background: var(--share-accent, currentColor);
  color: var(--share-on-accent, #fff);
}

@media (max-width: 600px) {
  .share-strip {
    gap: 0.4rem;
    padding: 0.85rem;
    font-size: 0.8rem;
  }
  .share-strip__label {
    flex-basis: 100%;
    margin-bottom: 0.15rem;
  }
}