/* 
 * Custom styles beyond Tailwind
 * Add any custom CSS here that can't be handled by Tailwind utilities
 */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #141414;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* Animation for hero gradient orbs */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

.float-animation {
    animation: float 8s ease-in-out infinite;
}

/* Blog post rendered markdown */
.prose { color: var(--color-surface-100); line-height: 1.75; }
.prose h2 { font-family: var(--font-display); font-size: 1.75rem; color: white; margin: 2rem 0 1rem; line-height: 1.2; }
.prose h3 { font-family: var(--font-display); font-size: 1.35rem; color: white; margin: 1.75rem 0 0.75rem; }
.prose p { margin-bottom: 1.25rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a { color: var(--color-brand-400); text-decoration: underline; }
.prose a:hover { color: var(--color-brand-300); }
.prose blockquote { border-left: 3px solid var(--color-brand-600); padding-left: 1rem; color: var(--color-surface-200); font-style: italic; margin-bottom: 1.25rem; }
.prose code { background: var(--color-surface-800); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; color: var(--color-brand-300); }
.prose pre { background: var(--color-surface-800); padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid #2a2a2a; }
.prose pre code { background: none; padding: 0; color: var(--color-surface-100); font-size: 0.875rem; }
.prose hr { border-color: var(--color-surface-800); margin: 2rem 0; }
.prose strong { color: white; font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.prose th, .prose td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-surface-800); text-align: left; }
.prose th { background: var(--color-surface-800); color: white; }