/* Mohamad Magdee theme: share (v1.0.9).
   Rules start with #p-post so they also win inside immersive Insight posts,
   whose own scoped resets use an ID selector. */

/* hidden until the script has wired everything (no dead buttons without JS) */
#p-post .mm-sh { display: none; font-family: inherit; }
#p-post .mm-sh.is-ready { display: block; }
#p-post .mm-sh-top.is-ready { display: inline-flex; position: relative; }
#p-post .mm-sh-icon { flex: none; display: inline-block; }

/* ---- top: compact link + menu ---- */
#p-post .meta:has(.mm-sh-top),
#p-post .mm-x-hero__meta:has(.mm-sh-top) { position: relative; z-index: 5; }
#p-post .mm-x-hero__meta .mm-sh-top { margin-left: 1.2rem; }
#p-post .mm-sh-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 0 .15rem; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--red, #e5251b);
  border-radius: 0; font: inherit; font-size: inherit; color: var(--bone, #ece5de); cursor: pointer;
  transition: color .3s var(--ease, ease);
}
#p-post .mm-sh-toggle:hover { color: var(--red, #e5251b); }
#p-post .mm-sh-menu {
  position: absolute; top: calc(100% + .75rem); left: 0; z-index: 10;
  min-width: 11rem; display: flex; flex-direction: column; padding: .4rem;
  background: rgba(14, 7, 6, .97); border: 1px solid rgba(236, 229, 222, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: mm-sh-in .25s var(--ease, ease) both;
}
#p-post .mm-sh-menu[hidden] { display: none !important; }
#p-post .mm-sh-menu a,
#p-post .mm-sh-menu button {
  display: block; width: 100%; margin: 0; padding: .55rem .75rem; text-align: left;
  background: none; border: 0; border-radius: 0; font: inherit; font-size: .92rem; letter-spacing: 0;
  color: rgba(236, 229, 222, .82); cursor: pointer; text-decoration: none;
  transition: color .2s, background-color .2s;
}
#p-post .mm-sh-menu a:hover,
#p-post .mm-sh-menu button:hover { color: var(--bone, #ece5de); background: rgba(236, 229, 222, .06); }
@keyframes mm-sh-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- end: full row ---- */
#p-post .mm-sh-end { max-width: 680px; margin: 0 auto; padding: 0 var(--pad, 24px) 10vh; text-align: center; }
#p-post .mm-sh-end.is-immersive { max-width: 72rem; padding: 0 var(--pad, 24px) clamp(3rem, 7vw, 5.5rem); }
#p-post .mm-sh-lead { margin: 0 0 1.4rem; padding: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ash, #938a88); }
#p-post .mm-sh-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
#p-post .mm-sh-row a,
#p-post .mm-sh-row button {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  padding: .7rem 1.15rem; background: none; border: 1px solid rgba(236, 229, 222, .3); border-radius: 999px;
  font: inherit; font-size: .92rem; letter-spacing: 0; color: var(--bone, #ece5de); cursor: pointer; text-decoration: none;
  transition: background-color .3s var(--ease, ease), color .3s var(--ease, ease), border-color .3s var(--ease, ease);
}
#p-post .mm-sh-row a:hover,
#p-post .mm-sh-row button:hover { background: var(--bone, #ece5de); color: var(--void, #050304); border-color: var(--bone, #ece5de); }
#p-post .mm-sh-row .mm-sh-native { display: none; border-color: var(--red, #e5251b); }
#p-post .mm-sh.has-native .mm-sh-native { display: inline-flex; }
#p-post .mm-sh-status { min-height: 1.5em; margin: 1rem 0 0; padding: 0; font-size: .88rem; color: var(--red, #e5251b); }