/* ============================================================
   MySportPulse — Custom CSS
   Tailwind handles most styling; this file covers:
   - Ticker animation
   - Typography for article content
   - Dark/Light mode overrides
   - Misc custom components
   ============================================================ */

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #dc2626; }

/* ── Breaking News Ticker ───────────────────────────────────── */
.ticker-wrap { overflow: hidden; }
.ticker-content {
    display: inline-flex;
    animation: ticker-scroll 40s linear infinite;
    white-space: nowrap;
}
.ticker-content:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Article Body Typography ────────────────────────────────── */
.article-body {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: #cbd5e1;
}
.article-body p          { margin-bottom: 1.5rem; }
.article-body h2         { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.75rem; color: #f1f5f9; margin: 2.5rem 0 1rem; line-height: 1.25; }
.article-body h3         { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.35rem; color: #f1f5f9; margin: 2rem 0 0.75rem; }
.article-body ul         { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.article-body ol         { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.article-body li         { margin-bottom: 0.4rem; }
.article-body blockquote { border-left: 4px solid #dc2626; padding: 1rem 1.5rem; margin: 2rem 0; background: #1e293b; border-radius: 0 0.75rem 0.75rem 0; color: #94a3b8; font-style: italic; }
.article-body a          { color: #ef4444; text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover    { color: #dc2626; }
.article-body img        { border-radius: 1rem; width: 100%; height: auto; margin: 2rem 0; }
.article-body strong     { color: #f1f5f9; font-weight: 600; }

/* Light mode article body */
html.light .article-body       { color: #334155; }
html.light .article-body h2,
html.light .article-body h3    { color: #0f172a; }
html.light .article-body blockquote { background: #f1f5f9; color: #475569; }
html.light .article-body strong { color: #0f172a; }

/* ── Light Mode Global Overrides ────────────────────────────── */
html.light body                { background-color: #f8fafc; color: #0f172a; }
html.light .bg-slate-950       { background-color: #f8fafc; }
html.light .bg-slate-900       { background-color: #ffffff; }
html.light .bg-slate-800       { background-color: #f1f5f9; }
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-white         { color: #0f172a; }
html.light .text-slate-300,
html.light .text-slate-400     { color: #475569; }
html.light .text-slate-500     { color: #94a3b8; }
html.light .border-slate-800   { border-color: #e2e8f0; }
html.light .border-slate-700   { border-color: #cbd5e1; }

/* ── Card Hover Glow ────────────────────────────────────────── */
.article-card:hover { box-shadow: 0 0 0 1px rgba(220,38,38,0.2), 0 8px 32px rgba(0,0,0,0.4); }

/* ── Skeleton Loading ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Score Card ─────────────────────────────────────────────── */
.score-card { transition: transform 0.2s, box-shadow 0.2s; }
.score-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }

/* ── Admin Sidebar Active ───────────────────────────────────── */
.admin-nav-link.active {
    background-color: rgba(220, 38, 38, 0.15);
    color: #ef4444;
    border-left: 3px solid #dc2626;
}

/* ── Gradient Text ──────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, #ef4444, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 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; }

/* ── Focus Styles ───────────────────────────────────────────── */
:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }

/* ── Smooth Scroll ──────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Search Highlight ───────────────────────────────────────── */
mark { background-color: rgba(220,38,38,0.3); color: inherit; border-radius: 2px; padding: 0 2px; }

/* ── Admin Table ────────────────────────────────────────────── */
.admin-table thead th { position: sticky; top: 0; z-index: 10; }

/* ── Status Badges ──────────────────────────────────────────── */
.badge-published { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.badge-draft     { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.2); }
.badge-review    { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.badge-archived  { background: rgba(239,68,68,0.1);  color: #ef4444;  border: 1px solid rgba(239,68,68,0.2); }

/* ── AI Badge ───────────────────────────────────────────────── */
.badge-ai { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.3); }

/* ── Toast notifications ────────────────────────────────────── */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.75rem; }
.toast { padding: 0.75rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; max-width: 360px; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: toast-in 0.3s ease; }
.toast-success { background: #0f3d2a; border: 1px solid #059669; color: #6ee7b7; }
.toast-error   { background: #3d0f0f; border: 1px solid #dc2626; color: #fca5a5; }
.toast-info    { background: #0f1f3d; border: 1px solid #3b82f6; color: #93c5fd; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }