/* Page-specific styles for blog.php — uses Sqube theme variables from assets/css/theme.css */

/* Buttons */
.save-btn {
  transition: all .18s ease;
}
.save-btn.saved {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Card overlay used for related articles */
.card-overlay {
  transition: opacity .25s ease, transform .3s ease;
  pointer-events: none;
}
.related-article .card-overlay {
  opacity: 0;
}
.related-article:hover .card-overlay {
  opacity: 1;
}

/* Small toast/notification */
.blog-toast {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 60;
  background: rgba(17,24,39,0.95); /* near bg */
  color: #fff;
  padding: .6rem .9rem;
  border-radius: .5rem;
  box-shadow: 0 6px 24px rgba(2,6,23,0.2);
  font-size: .95rem;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.blog-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Table of contents link focus */
.toc-link:focus,
.toc-link:hover {
  outline: none;
  background: rgba(99,102,241,0.06); /* primary/5 effect without gradient */
}

/* Slightly increase readability for article prose on wide screens */
@media (min-width: 1024px) {
  article.prose {
    max-width: 72ch;
  }
}

/* Minor form niceties */
.comment-form input,
.comment-form textarea,
.newsletter-form input {
  transition: box-shadow .12s ease, border-color .12s ease;
}
.comment-form input:focus,
.comment-form textarea:focus,
.newsletter-form input:focus {
  box-shadow: 0 0 0 4px rgba(99,102,241,0.06);
  border-color: var(--primary);
}

/* Ensure sticky sidebar doesn't overflow on small viewports */
@media (max-width: 1023px) {
  .sticky { position: static !important; }
}