:root{
  --navbar-height: 0px;
  --share-height: 0px;
}

/* Make sure both bars stay visible at the top */
.site-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #ffffff; /* ensure legibility */
  border-bottom: 1px solid #e5e5e5;
}

/* Social bar fixed directly under the navbar */
.share-fixed{
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Prevent content from hiding behind the fixed bars */
body.has-fixed-navbar{
  padding-top: calc(var(--navbar-height) + var(--share-height) + 8px);
}

/* Center max width for share contents */
.share-fixed{
  display: flex;
  justify-content: center;
}

.share-fixed .share-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  margin: 0 6px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.share-fixed .share-btn:hover{
  opacity: 0.85;
  transform: scale(1.2);
}

.share-btn.twitter { background:#55acee; }
.share-btn.facebook { background:#3B5998; }
.share-btn.reddit { background:#ff5700; }
.share-btn.linkedin { background:#0077b5; }
.share-btn.email { background:#444; }