/* Custom CSS complementing Tailwind */

.comment-level-0 { margin-left: 0; }
.comment-level-1 { margin-left: 0.75rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; } /* Adjusted margin for better alignment */
.comment-level-2 { margin-left: 1.5rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-3 { margin-left: 2.25rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-4 { margin-left: 3rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-5 { margin-left: 3.75rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
/* Add more levels if needed, increasing margin-left by 0.75rem each time */
.comment-level-6 { margin-left: 4.5rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-7 { margin-left: 5.25rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-8 { margin-left: 6rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-9 { margin-left: 6.75rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }
.comment-level-10 { margin-left: 7.5rem; border-left: 2px solid #e5e7eb; padding-left: 0.75rem; }


.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.loader {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #3b82f6; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style for search result items */
.search-result-item {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.search-result-item:hover {
    background-color: #f9fafb; /* Lighter gray on hover */
    border-color: #93c5fd; /* Light blue border on hover */
}

/* Basic prose styles for rendered markdown/html */
/* These styles apply ONLY if Tailwind's @tailwindcss/typography plugin is NOT used */
/* If using the plugin, remove or adjust these */
.prose { line-height: 1.6; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose a:hover { color: #1d4ed8; }
.prose strong, .prose b { font-weight: 600; }
.prose em, .prose i { font-style: italic; }
.prose blockquote { border-left: 4px solid #d1d5db; padding-left: 1em; margin-left: 0; font-style: italic; color: #4b5563; }
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-top: 0.5em; margin-bottom: 0.5em;}
.prose ol { list-style-type: decimal; padding-left: 1.5em; margin-top: 0.5em; margin-bottom: 0.5em;}
.prose li { margin-bottom: 0.25em; }
.prose code { background-color: #e5e7eb; padding: 0.2em 0.4em; font-size: 85%; border-radius: 3px; font-family: monospace; color: #374151; }
.prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 4px; overflow-x: auto; font-size: 0.9em; }
.prose pre code { background-color: transparent; padding: 0; font-size: inherit; border-radius: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: 600; margin-top: 1.2em; margin-bottom: 0.6em; line-height: 1.3; }
.prose h1 { font-size: 1.8em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.1em; }
.prose hr { border-top: 1px solid #e5e7eb; margin-top: 1.5em; margin-bottom: 1.5em; }
.prose del { text-decoration: line-through; color: #6b7280; }
.prose table { width: auto; border-collapse: collapse; margin-top: 1em; margin-bottom: 1em; font-size: 0.9em; }
.prose th, .prose td { border: 1px solid #d1d5db; padding: 0.4em 0.6em; }
.prose th { background-color: #f9fafb; font-weight: 600; text-align: left; }
/* End of basic prose styles */

.prose-sm { font-size: 0.9rem; line-height: 1.5; } /* Slightly smaller text for comments */

/* Ensure videos fit container */
video {
    max-width: 100%;
    height: auto;
}