/* Blog styles - plain CSS only (no Tailwind @apply) */

/* Fade-in animation helper used by JS */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }

/* Card/list hybrids for grid */
.article-title-link { color: var(--primary-text-color); font-weight:600; font-size:18px; line-height:1.4; text-decoration:none; transition: color .2s ease; }
.article-title-link:hover { color:#2563eb; }
.tw-dark .article-title-link:hover { color:#60a5fa; }
.article-excerpt-text { color:#4b5563; margin-top:8px; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tw-dark .article-excerpt-text { color:#d1d5db; }
.article-meta-row { margin-top:8px; font-size:14px; color:#6b7280; }
.tw-dark .article-meta-row { color:#9ca3af; }

/* Buttons and pagination (fallbacks if Tailwind not present) */
.category-button { padding:.5rem 1rem; border:1px solid #d1d5db; border-radius:9999px; background:#fff; color:#374151; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.category-button:hover { background:#f9fafb; }
.tw-dark .category-button { background:#17181b; color:#d1d5db; border-color:#4b5563; }
.tw-dark .category-button:hover { background:#1f2937; }
.category-button.active { background:#000; color:#fff; border-color:#000; }
.tw-dark .category-button.active { background:#fff; color:#000; border-color:#fff; }

.pagination-button { padding:.5rem .875rem; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#374151; cursor:pointer; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.pagination-button:hover { background:#f9fafb; }
.pagination-button.active { background:#000; color:#fff; border-color:#000; }
.tw-dark .pagination-button { background:#17181b; color:#d1d5db; border-color:#4b5563; }
.tw-dark .pagination-button:hover { background:#1f2937; }
.tw-dark .pagination-button.active { background:#fff; color:#000; border-color:#fff; }
.pagination-button[disabled] { opacity:.5; cursor:not-allowed; }

/* Loading skeletons */
.loading-skeleton { background:#e5e7eb; border-radius:8px; animation: skeletonPulse 1.2s ease-in-out infinite; }
.tw-dark .loading-skeleton { background:#374151; }
@keyframes skeletonPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Article link default color */
.article-link { color:#111827; text-decoration:none; transition: color .2s ease; }
.article-link:hover { color:#2563eb; }
.tw-dark .article-link { color:#fff; }
.tw-dark .article-link:hover { color:#60a5fa; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f3f4f6; }
.tw-dark ::-webkit-scrollbar-track { background:#1f2937; }
::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }
.tw-dark ::-webkit-scrollbar-thumb { background:#4b5563; }
::-webkit-scrollbar-thumb:hover { background:#9ca3af; }

/* Utility */
.regular-article-meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#6b7280; }
.tw-dark .regular-article-meta { color:#9ca3af; }

/* Consistent thumbnail sizing for article list */
.article-thumb { width:160px; height:112px; border-radius:12px; overflow:hidden; flex-shrink:0; display:block; }
@media (max-width: 768px){ .article-thumb { width:128px; height:96px; } }
.article-thumb img { width:100%; height:100%; object-fit:cover; }

input#blog-search:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}