/* ============================================================
   Fikir oo Fahan — theme variables & small enhancements
   ============================================================ */

:root {
    --bg:          #f9fafb;
    --card:        #ffffff;
    --nav-bg:      #ffffff;
    --text:        #111827;
    --muted:       #6b7280;
    --border:      #e5e7eb;
    --hover:       #f3f4f6;
    --accent:      #2563EB;
    --accent-soft: #dbeafe;
}

html.dark {
    --bg:          #0b1120;
    --card:        #111a2e;
    --nav-bg:      #0e1626;
    --text:        #e5e7eb;
    --muted:       #94a3b8;
    --border:      #1e293b;
    --hover:       #1e293b;
    --accent:      #60A5FA;
    --accent-soft: #1e3a8a;
}

/* Smooth theme transition */
html, body, header, aside, footer,
.bg-\[var\(--card\)\], .bg-\[var\(--nav-bg\)\], .bg-\[var\(--bg\)\] {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

[x-cloak] { display: none !important; }

/* RTL support (Arabic) */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .prose-content { text-align: right; }

/* Card hover lift */
.card-hover {
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .25);
}

/* Navbar scrolled shadow */
#site-navbar.scrolled {
    box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .25);
}

/* Breaking-news ticker marquee */
.ticker-track {
    animation: ticker-scroll 40s linear infinite;
    will-change: transform;
}
.ticker:hover .ticker-track {
    animation-play-state: paused;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Fade-in on scroll */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero slider fade */
.slide {
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Line clamp helpers (fallback if not available) */
.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; }

/* Global responsive safety: media never overflows its container */
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }

/* Rich post content */
.prose-content { line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; }
.prose-content table { display: block; width: 100%; overflow-x: auto; }
.prose-content p { margin: 0 0 1rem; }
.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.75rem 0 .75rem; }
.prose-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.prose-content a { color: var(--accent); text-decoration: underline; }
.prose-content img { border-radius: .75rem; margin: 1rem 0; max-width: 100%; height: auto; }
.prose-content blockquote { border-left: 4px solid var(--accent); padding-left: 1rem; color: var(--muted); margin: 1rem 0; font-style: italic; }
.prose-content iframe { width: 100%; aspect-ratio: 16/9; border-radius: .75rem; margin: 1rem 0; }
.prose-content pre { background: var(--hover); padding: 1rem; border-radius: .5rem; overflow-x: auto; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }