/* share.css — styling for the social share bar, wherever it appears.

   Lifted out of styles.css (which only index.html loads) when the share bar spread to
   the Policy Area, Misc. Filters, Floor Briefings and Bill Overviews pages. Those pages
   load measure.css for the palette; index.html loads styles.css. Both define the same
   custom properties, but the fallbacks below mean this sheet still renders correctly if
   it is ever pulled onto a page that defines neither. See share.js for the markup. */

/* ---- the row itself ------------------------------------------------------ */
.share-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
}
.share-btn {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(21,70,103,0.14);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.share-btn svg { width: 20px; height: 20px; }
.share-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 6px 16px rgba(21,70,103,0.22); }
.share-btn:active { transform: scale(0.94); }

.sb-fb { background: #1877f2; }
.sb-x  { background: #000; }
.sb-li { background: #0a66c2; }
.sb-rd { background: #ff4500; }
.sb-bs { background: #0285ff; }
.sb-wa { background: #25d366; }
.sb-tg { background: #229ed9; }
.sb-em { background: var(--brand, #1f5f8b); }
.sb-copy { background: var(--gold-deep, #a9781f); }

.share-copied {
  display: inline-block; margin-top: 10px;
  font-size: 0.85rem; font-weight: 700; color: var(--ok, #276749);
}
.share-copied[hidden] { display: none; }

/* The compact row — everything except the index hero uses this. */
.share-row-sm { gap: 8px; }
.share-row-sm .share-btn { width: 34px; height: 34px; box-shadow: none; }
.share-row-sm .share-btn svg { width: 17px; height: 17px; }

/* ---- hero callout (index only) ------------------------------------------- */
.share-callout { max-width: 560px; margin: 28px auto 0; text-align: center; }
.share-msg { margin: 0 0 12px; font-size: 0.98rem; font-weight: 600; color: var(--brand-dark, #164667); }

/* ---- slim bar in index's navy footer ------------------------------------- */
.foot-share {
  flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12);
}
.foot-share-label { font-size: 0.85rem; font-weight: 600; color: #cdd7e2; }
/* Pure black X vanishes on the navy footer — give it a faint ring so it reads. */
.foot-share .sb-x { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.foot-share .share-copied { margin-top: 0; }

/* ---- light page footer (the app pages, which have no navy footer) --------- */
.page-share {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 14px;
  max-width: 1100px; margin: 34px auto 28px; padding: 18px 16px 0;
  border-top: 1px solid var(--line, #e7e2d6);
}
.page-share .foot-share-label {
  color: var(--ink-soft, #55606f); font-size: 0.88rem;
}
.page-share .share-copied { margin-top: 0; }

/* ---- inline row inside the floating bill card ---------------------------- */
/* Stacked and width-capped ON PURPOSE. The card floats beside the content column and
   is only ~163px wide without this row; laid out in one line the nine icons dragged it
   out to 382px, wide enough to overlap the bill text at desktop widths. Capping the row
   wraps it to 5 + 4 instead, which keeps the card its original width and just makes it
   taller -- which is the one dimension there is room for. */
.card-share {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line, #e7e2d6);
}
.card-share .foot-share-label {
  color: var(--ink-soft, #55606f); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.card-share .share-row { gap: 5px; justify-content: flex-start; max-width: 152px; }
.card-share .share-btn { width: 26px; height: 26px; box-shadow: none; }
.card-share .share-btn svg { width: 13px; height: 13px; }
.card-share .share-copied { margin-top: 0; font-size: 0.76rem; }

/* ---- email popover ------------------------------------------------------- */
/* A bare mailto: does nothing for people with no mail handler, so the email button
   opens this instead. Appended to <body>, positioned in script. */
.share-mail-menu {
  position: absolute; z-index: 60; min-width: 170px; padding: 6px;
  background: #fff; border: 1px solid var(--line, #e7e2d6); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(21,70,103,0.22);
}
.share-mail-menu[hidden] { display: none; }
.share-mail-head {
  padding: 6px 12px 8px; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft, #55606f); font-weight: 700;
}
.share-mail-item {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink, #1b2330); font-size: 0.92rem; font-weight: 600;
}
.share-mail-item:hover { background: var(--marble, #f6f4ef); color: var(--brand-dark, #164667); }

@media (max-width: 560px) {
  .page-share { margin-top: 26px; }
  .page-share .share-row { justify-content: center; }
}