/* Article header styles */
.gh-article-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  margin-top: 12px;
}

.back-to-blog {
  align-self: flex-start;
}

.back-to-blog {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-darker-gray);
  text-decoration: none;
  padding: 4px 0;
}

.back-to-blog:hover {
  color: var(--color-darker-gray);
}

.back-to-blog svg {
  width: 20px;
  height: 20px;
}

.gh-article-title {
  font-size: 4.2rem;
  line-height: 1.2;
  margin: 0;
}

.article-meta-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.6rem;
  color: var(--color-secondary-text);
  margin: -8px 0 0 0;
}

.meta-bullet {
  color: var(--ghost-accent-color);
}

.article-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gh-article-tag {
  padding: 8px 16px;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-darker-gray);
  background: var(--color-lighter-gray);
  border-radius: 6px;
  text-decoration: none;
}

.gh-article-tag:hover {
  opacity: 0.85;
}

/* Three column layout */
.three-column-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: start;
  margin: 0 auto;
  max-width: var(--container-width);
  width: 100%;
  padding: 0 max(4vmin, 20px);
}

/* Left sidebar styles */
.left-sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.left-menu {
  padding: 16px;
  background: var(--color-bg, #fff);
}

.left-menu-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(115, 115, 115);
    margin-bottom: 0px;
    text-transform: uppercase;
}

.share-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.share-list li {
  margin: 16px 0;
}

.share-list a,
.share-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-darker-gray);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.share-list svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.share-list a:hover,
.share-list button:hover {
  opacity: 0.7;
}

@media (max-width: 1199px) {
  .three-column-layout {
    grid-template-columns: 180px minmax(0, 1fr) 220px;
    gap: 24px;
  }
}

@media (max-width: 999.98px) {
  .three-column-layout {
    display: block;
  }
  .left-sidebar {
    display: none; /* Hide left sidebar on mobile */
  }
  .post-toc {
    margin-top: 32px;
  }
}

/* Layout de dos columnas: TOC + contenido */
.post-body-grid {
    display: block;
  }
  
  /* Asegurarse de que no hay grid en móvil */
  @media (max-width: 999.98px) {
    .post-body-grid {
      display: block !important;
    }
  }
  
  /* Right sidebar styles */
  .right-sidebar {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  /* TOC styles */
  .post-toc {
    padding: 16px 0;
    margin: 0;
    background: var(--color-bg, #fff);
  }

  /* Sidebar CTA styles */
  .sidebar-cta {
    position: sticky;
    margin-top: 2rem;
    padding-top: 2rem;
    background: var(--color-bg, #fff);
    border-top: 1px solid rgb(229, 229, 229);
  }

  .sidebar-cta-title {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: var(--color-darker-gray);
  }

  .sidebar-cta-description {
    font-size: 1.2rem;
    line-height: 1.5;
    color: rgb(115, 115, 115);
    margin: 0 0 24px 0;
  }

  .sidebar-cta-button {
    display: inline-block;
    padding: 8px;
    background-color: rgb(0, 102, 255);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: background-color 0.2s ease;
  }

  .sidebar-cta-button:hover {
    background-color: rgb(0, 92, 230);
    opacity: 1;
  }

  /* Make both TOC and CTA sticky */
  @media (min-width: 1000px) {
    .left-sidebar { 
      top: 36rem;
    }
    .right-sidebar {
      position: sticky;
      top: 35rem;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }
  
  /* TOC Title */
  .post-toc__title {
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(115, 115, 115);
    text-transform: uppercase;
  }
  
  /* TOC List */
  .post-toc .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .post-toc .toc-list-item {
    margin: 0;
  }

  /* First level items */
  .post-toc .toc-link {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: var(--color-darker-gray);
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 500;
  }
  
  /* Second level items */
  .post-toc .toc-list .toc-list {
    margin-left: 16px;
    position: relative;
  }

  .post-toc .toc-list .toc-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgb(229, 229, 229);
  }

  .post-toc .toc-list .toc-list .toc-link {
    font-size: 1.4rem;
    color: rgb(115, 115, 115);
    padding: 6px 0 6px 16px;
  }
  
  /* Active state */
  .post-toc .is-active-link {
    color: #00d084 !important;
  }

  .post-toc .toc-list .toc-list .is-active-link {
    font-weight: 500;
  }
  
  /* Compensar ancla bajo header fijo */
  .gh-content h2, .gh-content h3 { scroll-margin-top: 96px; }
  
  /* Mobile: TOC arriba, ancho completo */
  @media (max-width: 999.98px) {
    .post-toc { position: static; max-height: none; }
  }
  

  /* === TOC a la derecha en desktop === */
@media (min-width: 1000px) {
    .post-body-grid {
      display: grid;
      grid-column: 1 / -1; /* Dos columnas iguales */
      gap: 32px;
      align-items: start;
    }
  
    /* El TOC está primero en el HTML, pero lo movemos a la 2da columna */
    .post-body-grid .gh-content {
      order: 1;
      min-width: 0; /* Ensure content can shrink if needed */
    }
    .post-body-grid .post-toc {
      order: 2;
      margin-left: 0; /* Remove left margin since we're on the right */
    }
  }
  
  /* Opcional: ajustar ancho del TOC en pantallas más grandes */
  @media (min-width: 1400px) {
    .three-column-layout {
      grid-template-columns: 220px minmax(0, 1fr) 260px; /* columnas más anchas pero manteniendo el centro amplio */
    }
  }
  
  /* Asegurar sticky correcto si el header es alto */
  .post-toc {
    position: sticky;
    top: 96px; /* ajustá si tu header es más alto/bajo */
  }
  
  /* En mobile sigue arriba del contenido (stacked) */
  @media (max-width: 999.98px) {
    .post-toc { position: static; max-height: none; }
  }