@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Custom Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }
}

/* Apply Animations */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, #0EA5E9, #06B6D4, #0EA5E9);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite;
}

/* Prose Readability */
h2, h3 {
    color: #1E293B !important;
}

.prose {
    font-family: 'Inter', sans-serif;
    color: #1E293B !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1E293B !important;
}

.prose p {
    line-height: 1.7;
    color: #1E293B !important;
}

.prose li {
    margin-bottom: 0.5rem;
    color: #1E293B !important;
}

.prose ul, .prose ol {
    margin-left: 1.5rem;
    line-height: 1.8;
    color: #1E293B !important;
}

.prose td, .prose th {
    color: #1E293B !important;
}

.prose a {
    color: #0EA5E9;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.prose a:hover {
    color: #DC2626;
    text-decoration: underline;
}

.prose strong {
    font-weight: 700;
    color: #0C4A6E;
}

.prose code {
    background: #E0F2FE;
    color: #0C4A6E;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.prose pre {
    background: #1E293B;
    color: #E2E8F0;
    padding: 1rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    line-height: 1.5;
}

.prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.prose ul, .prose ol {
    margin-left: 1.5rem;
    line-height: 1.8;
    color: #1E293B !important;
}

.prose li {
    margin-bottom: 0.5rem;
    color: #1E293B !important;
}

.prose blockquote {
    border-left-width: 4px;
    border-left-color: #0EA5E9;
    padding-left: 1rem;
    font-style: italic;
    color: #1E293B !important;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.prose table th {
    background: #E0F2FE;
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: #0C4A6E;
}

.prose table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #E2E8F0;
}

.prose table tr:hover {
    background: #F8FAFC;
}

/* Buttons */
button, a.button, [role="button"] {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Focus & Accessibility */
button:focus, a:focus, [role="button"]:focus {
    outline: 2px solid #0EA5E9;
    outline-offset: 2px;
}

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

/* Utility Classes */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.hover-scale-105:hover {
    transform: scale(1.05);
}

/* Sticky Below Header */
.sticky-below-header {
    position: sticky;
    top: 60px;
    z-index: 40;
}

/* Gradient Background Utility */
.gradient-radial {
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
}

/* Selection Colors */
::selection {
    background-color: #0EA5E9;
    color: white;
}

::-moz-selection {
    background-color: #0EA5E9;
    color: white;
}

/* Links with visual indicators */
a[href*="mailto"]:before,
a[href*="tel"]:before {
    content: '📧 ';
    margin-right: 0.25rem;
}

a[href*="tel"]:before {
    content: '📞 ';
}

/* Responsive Typography */
@media (max-width: 640px) {
    .prose {
        font-size: 0.95rem;
    }
    
    .prose h1 {
        font-size: 1.75rem;
    }
    
    .prose h2 {
        font-size: 1.5rem;
    }
    
    .prose h3 {
        font-size: 1.25rem;
    }
}

/* Dark theme support (optional) */
@media (prefers-color-scheme: dark) {
    .prose {
        color: #E2E8F0;
    }
    
    .prose h1, .prose h2, .prose h3 {
        color: #F1F5F9;
    }
    
    .prose p {
        color: #CBD5E1;
    }
    
    .prose a {
        color: #38BDF8;
    }
    
    .prose a:hover {
        color: #FCA5A5;
    }
    
    .prose strong {
        color: #93C5FD;
    }
    
    .prose code {
        background: #1E293B;
        color: #93C5FD;
    }
    
    .prose pre {
        background: #0F172A;
        color: #E2E8F0;
    }
    
    .prose table th {
        background: #1E293B;
        color: #93C5FD;
    }
    
    .prose table tr:hover {
        background: #0F172A;
    }
}