/* iKnooow — Custom CSS (ergänzend zu Tailwind) */

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

/* Inter font base */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* Details/Summary animation */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* Prose styles for course content */
.prose h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #1e293b; }
.prose h3 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #334155; }
.prose p  { margin-bottom: 1rem; line-height: 1.7; color: #475569; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.375rem; color: #475569; }
.prose strong { color: #1e293b; font-weight: 600; }

/* Prose invert (for dark backgrounds) */
.prose-invert h2, .prose-invert h3 { color: #f1f5f9; }
.prose-invert p, .prose-invert li  { color: #94a3b8; }
.prose-invert strong { color: #e2e8f0; }

/* AI Chat widget animation */
#ai-chat-window {
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Course card hover */
article:hover .course-thumb { transform: scale(1.03); }
.course-thumb { transition: transform 0.3s ease; }

/* Custom scrollbar for sidebar */
.overflow-y-auto::-webkit-scrollbar { width: 4px; }
.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
.overflow-y-auto::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* Focus styles */
a:focus-visible, button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Loading spinner */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Flash messages */
.flash-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.flash-error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Badge: Fiktiv */
.badge-fictional {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    display: inline-block;
}

/* Print styles for certificates */
@media print {
    nav, footer, #ai-chat-widget { display: none; }
    body { background: white; }
}