/* ============================================================
   THE BIGG PULL, shared "share this" control
   One set of styles for the button + menu that appears on BOTH the
   Facebook feed cards and the In The Press cards. Paired with
   assets/js/share.js. Uses the site's existing tokens from styles.css.
   ============================================================ */

.shr{position:relative;margin-left:auto;flex:none}

.shr__btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--txt-on-dark);
  font-family:inherit;font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;
  cursor:pointer;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.shr__btn svg{width:13px;height:13px;flex:none}
.shr__btn:hover{border-color:var(--red);color:var(--red-bright)}
.shr__btn[aria-expanded="true"]{
  border-color:var(--red);color:var(--red-bright);background:rgba(201,162,39,.1)}

/* The menu expands INSIDE the card rather than floating over it. Both .fbc and
   .pc set overflow:hidden to round their media corners, so an absolutely
   positioned popover would be clipped, and a one-third column is too narrow to
   place one safely anyway. It must be a SIBLING of the footer row, never a
   child of .shr, or it inherits the button's width. */
.shr__menu{
  display:flex;flex-direction:column;gap:8px;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line)}
.shr__menu[hidden]{display:none}

.shr__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* An odd number of channels leaves the last one stranded in a half-width cell,
   which reads as a mistake. Let it take the row. */
.shr__grid > :last-child:nth-child(odd){grid-column:1/-1}

.shr__item{
  display:flex;align-items:center;justify-content:center;
  padding:9px 10px;border-radius:8px;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--txt-on-dark);
  font-family:inherit;font-weight:700;font-size:.76rem;
  text-align:center;cursor:pointer;
  transition:border-color .16s ease,color .16s ease}
.shr__item:hover{border-color:var(--red);color:var(--red-bright)}
.shr__item--native{
  background:rgba(201,162,39,.13);
  border-color:rgba(201,162,39,.42);
  color:var(--red-bright)}
.shr__item--copy.is-copied{
  border-color:var(--red-bright);color:var(--red-bright);
  background:rgba(201,162,39,.13)}

/* A card with its share menu open gets the same gold edge as a hovered one, so
   it stays visually "active" while the reader picks a channel. */
.fbc.is-sharing,
.pc.is-sharing{border-color:rgba(201,162,39,.55)}

/* Visible focus, WCAG AA, matching the cards' own rings. */
.shr__btn:focus-visible,
.shr__item:focus-visible{
  outline:3px solid var(--red-bright);
  outline-offset:3px;
  border-radius:4px}

/* Light-background variant, for .fb-feed-app--light sections. */
.fb-feed-app--light .shr__btn,
.fb-feed-app--light .shr__item{
  background:var(--paper-2);border-color:var(--line-dark);color:var(--txt-dark)}
.fb-feed-app--light .shr__btn:hover,
.fb-feed-app--light .shr__item:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.fb-feed-app--light .shr__menu{border-top-color:var(--line-dark)}

@media (prefers-reduced-motion: reduce){
  .shr__btn,
  .shr__item{transition:none !important}
}