/* Blog social share bar (loaded only on blog pages) */

/* Blog table of contents (left sidebar) */
.blog-toc-layout{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items:start;
}

.blog-toc{
  position: sticky;
  top: 120px;
  align-self: start;
  max-height: calc(100vh - 150px);
  overflow:auto;
  padding: 14px 14px;
  border-radius: 5px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86)) padding-box,
    linear-gradient(135deg, rgba(0,106,255,0.35), rgba(168,85,247,0.25), rgba(34,197,94,0.20)) border-box;
  box-shadow:
    0 16px 44px rgba(10, 5, 35, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

.blog-toc__title{
  font-family: var(--fonts--display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(10, 5, 35, 0.88);
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.blog-toc__title::after{
  content:"";
  height:2px;
  flex:1;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,106,255,0.35), rgba(168,85,247,0.22), transparent);
}

.blog-toc__list,
.blog-toc__sublist{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.blog-toc__sublist{
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(0, 106, 255, 0.16);
}

.blog-toc__link{
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(10, 5, 35, 0.84);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  background: transparent;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    color 0.18s ease;
}

.blog-toc__link:hover{
  text-decoration: none;
  color: rgba(0, 106, 255, 1);
  background: rgba(0, 106, 255, 0.08);
  box-shadow: 0 10px 22px rgba(0, 106, 255, 0.10);
  transform: translateY(-1px);
}

.blog-toc__link:active{
  transform: translateY(0);
}

.blog-toc__link.is-active{
  color: #0b2a66;
  background: linear-gradient(90deg, rgba(0, 106, 255, 0.16), rgba(168, 85, 247, 0.10));
  box-shadow:
    0 12px 26px rgba(0, 106, 255, 0.14),
    0 0 0 1px rgba(0, 106, 255, 0.16) inset;
}

.blog-toc__item.is-h3 .blog-toc__link{
  font-size: 13px;
  color: rgba(10, 5, 35, 0.78);
}

/* Nicer scrollbars (webkit) */
.blog-toc::-webkit-scrollbar{width:10px}
.blog-toc::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(0,106,255,0.35), rgba(168,85,247,0.22));
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.72);
}
.blog-toc::-webkit-scrollbar-track{background: transparent}

/* Firefox */
.blog-toc{scrollbar-width: thin; scrollbar-color: rgba(0,106,255,0.35) transparent;}

.blog-toc-content{min-width:0}

/* Published / Last Modified line in blog hero */
.blog-dates-line{white-space:nowrap}
.blog-date-item{white-space:nowrap}
.blog-date-label{font-weight:700}
.blog-date-sep{opacity:.65;padding:0 6px}

@media (max-width: 520px){
  .blog-dates-line{white-space:normal;line-height:1.45}
  .blog-date-item{display:block}
  .blog-date-sep{display:none}
}

/* Ensure anchor scrolling doesn't hide headings behind the sticky header */
.main.blog-post .rich-text h2,
.main.blog-post .rich-text h3{
  scroll-margin-top: 120px;
}

@media (max-width: 980px){
  .blog-toc-layout{grid-template-columns: 1fr;gap: 18px;}
  .blog-toc{position: relative;top: auto;max-height: none;}
}

@media (max-width: 768px){
  /* Hide TOC on mobile to prevent layout issues */
  .blog-toc{display:none}
}

.blog-share {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.blog-share__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(10, 5, 35, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(10, 5, 35, 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

.blog-share__label {
  font-family: var(--fonts--display);
  font-weight: 700;
  font-size: 16px;
  color: rgba(10, 5, 35, 0.85);
  letter-spacing: 0.2px;
  user-select: none;
}

.blog-share__btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(10, 5, 35, 0.88);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.blog-share__btn:hover {
  transform: translateY(-1px);
  background: rgba(0, 106, 255, 0.08);
  color: #006aff;
}

.blog-share__btn:active {
  transform: translateY(0);
}

.blog-share__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 106, 255, 0.18);
}

.blog-share__icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
  flex: 0 0 auto;
}

.blog-share__text-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-family: var(--fonts--display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.blog-share__btn.is-copied {
  background: rgba(22, 163, 74, 0.12);
  color: rgba(22, 163, 74, 1);
}

@media (max-width: 480px) {
  .blog-share__bar {
    gap: 10px;
    padding: 10px 12px;
  }
  .blog-share__label {
    font-size: 13px;
  }
  .blog-share__btn {
    width: 38px;
    height: 38px;
  }
  .blog-share__icon {
    width: 21px;
    height: 21px;
  }
}

/* "Link copied" dialog */
.blog-share__dialog {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  background: rgba(10, 5, 35, 0.08);
}

.blog-share__dialog[hidden] {
  display: none;
}

.blog-share__dialog-inner {
  max-width: 92vw;
  border-radius: 14px;
  border: 1px solid rgba(10, 5, 35, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px rgba(10, 5, 35, 0.14);
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

.blog-share__dialog-title {
  font-family: var(--fonts--display);
  font-weight: 700;
  color: var(--berry-black-60);
}

.blog-share__dialog-btn {
  border: 1px solid rgba(10, 5, 35, 0.14);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

.blog-share__dialog-btn:hover {
  background: rgba(0, 106, 255, 0.06);
}

/* Print-friendly layout ("Save as PDF") */
@media print {
  #site-header,
  #site-footer,
  .blog-toc,
  .blog-share {
    display: none !important;
  }

  body,
  .main {
    background: #fff !important;
  }

  .main {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
  }
}