/* MolTrust — share bar under a post, follow bar above the footer.
 *
 * The page's own <style> block defines --orange, --navy and the slate ramp;
 * every value here carries a literal fallback so the file also works on a page
 * that does not, and on the blog index while its template still lags.
 */

.share-bar,
.follow-bar {
  border-top: 1px solid var(--slate-200, #E2E8F0);
  padding: 24px 0;
}

.share-bar__inner,
.follow-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.share-bar__label,
.follow-bar__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange, #E85D26);
  margin-right: 4px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  color: var(--slate-600, #475569);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.share-btn:hover,
.share-btn:focus-visible {
  border-color: var(--orange, #E85D26);
  color: var(--orange, #E85D26);
}

.share-btn svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

/* The copy button reports back in place. aria-live announces it too, so the
 * confirmation is not colour and motion only. */
.share-btn[data-copied="1"] {
  border-color: var(--orange, #E85D26);
  color: var(--orange, #E85D26);
}

.follow-bar__text {
  font-size: 14px;
  color: var(--slate-600, #475569);
  margin-right: 4px;
}

@media (max-width: 560px) {
  .share-bar__inner,
  .follow-bar__inner { gap: 8px; }
  .share-btn { padding: 7px 11px; font-size: 13px; }
}

/* ── dark theme ───────────────────────────────────────────────────── */
[data-theme="dark"] .share-bar,
[data-theme="dark"] .follow-bar { border-top-color: #334155; }
[data-theme="dark"] .share-btn { border-color: #334155; color: #CBD5E1; }
[data-theme="dark"] .share-btn:hover,
[data-theme="dark"] .share-btn:focus-visible,
[data-theme="dark"] .share-btn[data-copied="1"] {
  border-color: var(--orange, #E85D26);
  color: var(--orange, #E85D26);
}
[data-theme="dark"] .follow-bar__text { color: #CBD5E1; }