@charset "utf-8";
/* ============================================================
   FILE: /sites/mhl/assets/css/share.css
   The Share button and its menu — components/share_menu.php,
   assets/js/share.js (2.5.2.2)
   ------------------------------------------------------------
   DEV_PLAN_Stage3 §4.15 item 3 (Ben, 20 October 2026; boards R1,
   R2 state 5, R3): an icon segment in a reactions pill. On a
   computer it opens this small menu below it, right-aligned to the
   pill's edge; on a phone share.js opens the phone's share sheet
   and the menu is never shown.

   ⚠ JAVASCRIPT ONLY — hidden by .no-js (the layout's first <head>
   line swaps it to .js, so there is no flash). The button starts
   disabled until share.js enables it: NEVER style it on :disabled
   (it is above the fold). Its colour is set here because browsers
   grey out a disabled button's text.
   ⚠ The menu starts [hidden]; nothing here sets its display.
   ============================================================ */

.share {
  position: relative;
  display: inline-flex;
}
.no-js .share { display: none; }

.share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #20242b;
  cursor: pointer;
  transition: background-color .15s ease;
}
.share__btn:not(:disabled):hover,
.share__btn[aria-expanded="true"] { background: #eef2f7; }
.share__btn:focus-visible { outline: 2px solid var(--journal-mid, #0861c4); outline-offset: 1px; }
.reactions__pill--mini .share__btn { height: 34px; padding: 0 12px; }

/* Right-aligned to the pill: the pill's 5px padding and 1px border beyond the button */
.share__menu {
  position: absolute;
  top: calc(100% + 13px);
  right: -6px;
  z-index: 20;
  width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16, 32, 56, .18);
}
.reactions__pill--mini .share__menu { top: calc(100% + 12px); right: -5px; }
.share__menu li { margin: 0; padding: 0; }

.share__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #20242b;
  font: 500 14px/1.3 "Open Sans", Helvetica, Arial, sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share__item:hover,
.share__item:focus-visible { background: #f1f4f8; }
.share__item:focus-visible { outline: 2px solid var(--journal-mid, #0861c4); outline-offset: -2px; }
.share__item svg { flex: none; }

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