/* Share control (social-sharing rollout, Stage 1, 2026-08-14).
 *
 * Spec: docs/SOCIAL-SHARING-ROLLOUT-PLAN-2026-08-13.md, "Visual design".
 * Owner decision 2026-08-14: required 2px gold border plus ordinary
 * hover/focus treatment, NO card-fx cursor glow. This stays a quiet utility
 * button, not a hero card.
 *
 * Colors come only from the tokens in main.css :root. That file already
 * redefines every token under BOTH dark-mode mechanisms
 * (:root[data-theme="dark"] and the @media (prefers-color-scheme: dark)
 * mirror), so this file needs no dark block of its own and must never
 * hardcode a hex value.
 *
 * ALIGNMENT, measured against the real pages 2026-08-14 rather than assumed:
 * article, report and hub heroes are centre-aligned (eyebrow, h1, lead, and on
 * articles the PDF download button), so a left-flush Share button under them
 * reads as misplaced. Guide pages are the opposite: their jump-nav pills and
 * "Collapse all sections" button run along the left edge, and the Share button
 * has to line up with those. Hence the per-type rule below. The wrapper spans
 * its parent and inherits that parent's own left edge, so the button lands on
 * the same line as the controls it sits with instead of on a band of its own.
 */

.rmv-share {
  margin: 1.5rem 0;
}

.rmv-share[data-share-type="article"],
.rmv-share[data-share-type="report"],
.rmv-share[data-share-type="hub"],
/* Set by the injector when the anchor block it chose is itself centred, even
 * though the content type normally sits left (the 7 guides on `.bva-hero`). */
.rmv-share.rmv-share-centered {
  text-align: center;
}

/* The button and its panel share this inline-block, so the panel opens against
 * the BUTTON wherever the button sits, not against the full-width wrapper.
 * text-align is reset here so a centred wrapper does not centre the menu rows. */
.rmv-share-anchor {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* ── Primary button ──────────────────────────────────────────────────────── */

.rmv-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rmv-share-btn:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.rmv-share-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.rmv-share-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Fallback disclosure ─────────────────────────────────────────────────── */

.rmv-share-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rmv-share-menu[hidden] {
  display: none;
}

.rmv-share-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rmv-share-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

.rmv-share-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.rmv-share-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Confirmation line ("Link copied"), announced politely to screen readers.
 * Reserves no space when empty so the panel does not jump on open. */
.rmv-share-status {
  display: block;
  padding: 0 0.65rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

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

/* Shown only when automatic copy fails or a popup is blocked. Always holds the
 * already-stripped canonical URL, so a veteran who copies it by hand gets the
 * same clean link the button would have given them. */
.rmv-share-fallback-link {
  display: block;
  width: 100%;
  margin: 0.35rem 0 0.15rem;
  padding: 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
}

.rmv-share-fallback-link[hidden] {
  display: none;
}

/* ── Motion + narrow screens ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rmv-share-btn {
    transition: none;
  }
  .rmv-share-btn:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .rmv-share {
    margin: 1.25rem 0;
  }
  /* On a narrow screen the button can sit far enough right that a panel
   * anchored to its left edge would run off screen. Anchor it to the right
   * edge instead and let it size to the viewport. */
  .rmv-share[data-share-type="article"] .rmv-share-menu,
  .rmv-share[data-share-type="report"] .rmv-share-menu,
  .rmv-share[data-share-type="hub"] .rmv-share-menu {
    left: auto;
    right: 0;
  }
}