/**
 * ISEEA Blog — Supplemental CSS (Tailwind handles layout)
 * Only custom styles that Tailwind CDN cannot provide
 */

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 4px; }

/* Reading progress bar */
.reading-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 3px;
  background: linear-gradient(to right, #F9DC5C, #f0c800);
  z-index: 9999; transition: width .1s;
}

/* Ticker animation */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lazy image fade */
img[loading="lazy"] { opacity: 0; transition: opacity .3s; }
img[loading="lazy"].loaded { opacity: 1; }

/* Share button hover */
.share-button { transition: transform .2s, box-shadow .2s; }
.share-button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Category badge */
.category-badge {
  display: inline-block;
  background: #F9DC5C; color: #1a1a1a;
  font-size: .68rem; font-weight: 800;
  padding: .22rem .7rem; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .05em;
  transition: background .2s;
}
.category-badge:hover { background: #f0c800; }

/* Post content prose */
.prose { color: #374151; line-height: 1.75; }
.prose p  { margin-bottom: 1.2em; }
.prose h2 { font-size: 1.75em; font-weight: 700; margin: 1.8em 0 .8em; color: #111; }
.prose h3 { font-size: 1.4em;  font-weight: 600; margin: 1.5em 0 .6em; color: #111; }
.prose h4 { font-size: 1.15em; font-weight: 600; margin: 1.3em 0 .5em; color: #111; }
.prose ul, .prose ol { margin: 1.2em 0; padding-left: 1.5em; }
.prose li { margin: .45em 0; }
.prose a  { color: #1a1a1a; text-decoration: underline; font-weight: 600; }
.prose a:hover { color: #444; }
.prose img { margin: 1.8em 0; border-radius: 8px; max-width: 100%; }
.prose blockquote {
  border-left: 4px solid #F9DC5C; padding: .9em 1.4em;
  margin: 1.5em 0; color: #6b7280; background: #fffbea;
  border-radius: 0 8px 8px 0; font-style: italic;
}
.prose code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px; font-size: .88em; }
.prose pre  { background: #1a1a1a; color: #F9DC5C; padding: 1.25em; border-radius: 8px; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: .55em .9em; text-align: left; }
.prose th { background: #f9f9f9; font-weight: 700; }

/* Post card hover (category/search pages) */
.post-card { transition: transform .3s, box-shadow .3s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.1); }

/* Print */
@media print {
  .no-print { display: none !important; }
  body { font-size: 12pt; background: #fff; }
}