/**
 * Article Sidebar - Sticky sidebar for TOC / related / CTA widgets
 * Brand: cyclingapparelfactory.com (navy #0B3D5C / orange #E8541E)
 */

.article-sidebar,
.blog-sidebar,
[data-article-sidebar] {
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .article-sidebar,
  .blog-sidebar,
  [data-article-sidebar] {
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  /* Custom scrollbar */
  .article-sidebar::-webkit-scrollbar,
  .blog-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .article-sidebar::-webkit-scrollbar-thumb,
  .blog-sidebar::-webkit-scrollbar-thumb {
    background: rgba(11, 61, 92, 0.3);
    border-radius: 3px;
  }
  .article-sidebar::-webkit-scrollbar-thumb:hover,
  .blog-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--brand-color, #0B3D5C);
  }
}

/* Sidebar widget container */
.sidebar-widget {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #DDE3E8;
  border-radius: 10px;
}

.sidebar-widget-title {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0B3D5C;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-color, #E8541E);
}

/* Inline sidebar CTA block (used by assets/includes/article-sidebar.html) */
.sidebar-cta {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0B3D5C 0%, #082C42 100%);
  border-radius: 10px;
  color: #fff;
  text-align: center;
}

.sidebar-cta h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}

.sidebar-cta p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1rem;
}

.sidebar-cta .btn-primary {
  background: #ffc107;
  border-color: #ffc107;
  color: #16222C;
  font-weight: 700;
}

.sidebar-cta .btn-primary:hover {
  background: #e6ae06;
  border-color: #e6ae06;
  color: #16222C;
}

@media (max-width: 991.98px) {
  .article-sidebar,
  .blog-sidebar {
    margin-top: 2rem;
  }
}