/* === AI Bot School — style.css === */

/* Base */
* { box-sizing: border-box; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: #171717; background: #fafafa; }

/* === .prose — article typography (all !important to override Tailwind preflight) === */
.prose { color: #171717 !important; line-height: 1.9 !important; font-size: 1.0625rem !important; }

.prose h1 { font-size: 2.25rem !important; font-weight: 800 !important; line-height: 1.2 !important; color: #171717 !important; margin: 0 0 1.25rem !important; }
.prose h2 { font-size: 1.75rem !important; font-weight: 800 !important; line-height: 1.3 !important; color: #4f46e5 !important; margin: 2.5rem 0 1rem !important; }
.prose h3 { font-size: 1.375rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: #171717 !important; margin: 2rem 0 0.75rem !important; }
.prose h4 { font-size: 1.175rem !important; font-weight: 600 !important; color: #171717 !important; margin: 1.5rem 0 0.5rem !important; }
.prose h5 { font-size: 1rem !important; font-weight: 600 !important; color: #171717 !important; margin: 1.25rem 0 0.5rem !important; }

.prose p { color: #171717 !important; margin-bottom: 1.25rem !important; line-height: 1.9 !important; }
.prose strong { font-weight: 700 !important; color: #171717 !important; }
.prose em { font-style: italic !important; }

.prose ul { list-style-type: disc !important; padding-left: 1.75rem !important; margin-bottom: 1.25rem !important; }
.prose ol { list-style-type: decimal !important; padding-left: 1.75rem !important; margin-bottom: 1.25rem !important; }
.prose li { color: #171717 !important; margin-bottom: 0.5rem !important; line-height: 1.8 !important; }
.prose li::marker { color: #6366f1 !important; }

.prose a { color: #4f46e5 !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 0.2s; }
.prose a:hover { color: #6366f1 !important; }

.prose blockquote { border-left: 4px solid #6366f1 !important; padding: 1rem 1.5rem !important; margin: 1.75rem 0 !important; background: #eef2ff !important; border-radius: 0 10px 10px 0 !important; font-style: italic !important; color: #374151 !important; }
.prose blockquote p { color: #374151 !important; margin-bottom: 0 !important; }

/* Tables */
.prose table { width: 100% !important; border-collapse: collapse !important; margin: 1.75rem 0 !important; font-size: 0.9375rem !important; }
.prose th { background: #eef2ff !important; color: #4338ca !important; padding: 0.75rem 1rem !important; text-align: left !important; font-weight: 700 !important; border: 1px solid #c7d2fe !important; }
.prose td { padding: 0.75rem 1rem !important; border: 1px solid #e5e7eb !important; color: #171717 !important; }
.prose tr:nth-child(even) td { background: #f8fafc !important; }

/* Code */
.prose code { background: #f1f5f9 !important; color: #4f46e5 !important; padding: 0.15rem 0.4rem !important; border-radius: 4px !important; font-size: 0.875rem !important; font-family: 'Fira Mono', 'Consolas', monospace !important; }
.prose pre { background: #1e1b4b !important; color: #e0e7ff !important; padding: 1.25rem 1.5rem !important; border-radius: 10px !important; overflow-x: auto !important; margin: 1.5rem 0 !important; }
.prose pre code { background: none !important; color: inherit !important; padding: 0 !important; font-size: 0.875rem !important; }

/* Details/Summary (FAQ) */
.prose details { border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 1rem 1.25rem !important; margin-bottom: 0.75rem !important; background: white !important; }
.prose summary { cursor: pointer !important; font-weight: 700 !important; color: #4338ca !important; font-size: 1rem !important; list-style: none !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; }
.prose summary::-webkit-details-marker { display: none !important; }
.prose summary::before { content: '' !important; display: inline-block !important; width: 1rem !important; height: 1rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; transition: transform 0.2s !important; flex-shrink: 0 !important; }
.prose details[open] summary::before { transform: rotate(90deg) !important; }
.prose details p { margin-top: 0.75rem !important; font-size: 0.9375rem !important; color: #374151 !important; }

/* Figures */
.prose figure { margin: 2rem 0 !important; text-align: center !important; }
.prose figure img { max-width: 100% !important; height: auto !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }
.prose figcaption { font-size: 0.85rem !important; color: #737373 !important; margin-top: 0.5rem !important; }

/* HR */
.prose hr { border: none !important; border-top: 1px solid #e5e7eb !important; margin: 2rem 0 !important; }

/* Images */
.prose img { max-width: 100% !important; height: auto !important; border-radius: 10px !important; }

/* === Article stats === */
.stat-like { transition: all 0.2s; }
.stat-like.liked { border-color: #6366f1 !important; color: #6366f1 !important; background: #eef2ff !important; }

/* === Article nav === */
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; flex-wrap: wrap; }
.nav-prev, .nav-next { font-size: 0.9rem; color: #4f46e5; text-decoration: none; max-width: 48%; line-height: 1.4; font-weight: 500; }
.nav-prev:hover, .nav-next:hover { text-decoration: underline; }
.nav-next { text-align: right; margin-left: auto; }

/* === Lead form block === */
.lead-form-block { background: #eef2ff; border: 2px solid #6366f1; border-radius: 16px; padding: 2rem; margin: 2.5rem 0; }
.lead-form-badge { display: inline-block; background: #6366f1; color: white; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.8rem; border-radius: 20px; margin-bottom: 1rem; letter-spacing: 0.03em; text-transform: uppercase; }
.lead-form-block h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: #171717 !important; margin-bottom: 0.5rem !important; }
.lead-form-block > p { font-size: 0.95rem; color: #374151; margin-bottom: 1.25rem; line-height: 1.6; }
.lead-success { background: #dcfce7; border: 1px solid #86efac; border-radius: 10px; padding: 1rem 1.25rem; color: #166534; font-weight: 600; text-align: center; margin-top: 0.5rem; }
.lead-questions { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.lead-questions label { font-size: 0.875rem; font-weight: 600; color: #374151; }
.lead-form input[type="email"],
.lead-form select { width: 100%; padding: 0.65rem 0.9rem; border: 1px solid #c7d2fe; border-radius: 8px; font-size: 0.95rem; background: white; color: #171717; outline: none; transition: border-color 0.2s; font-family: inherit; }
.lead-form input[type="email"]:focus,
.lead-form select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.lead-form input[type="email"] { margin-bottom: 0.5rem; }
.lead-form button[type="submit"] { width: 100%; padding: 0.85rem 1.5rem; background: #6366f1; color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; margin-top: 1rem; transition: background 0.2s; font-family: inherit; }
.lead-form button[type="submit"]:hover { background: #4f46e5; }
.form-note { font-size: 0.8rem; color: #737373; margin-top: 0.6rem; text-align: center; }

/* === Fade-in animation === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease both; }

/* === Hero image === */
.article-hero { border-radius: 16px; overflow: hidden; margin-bottom: 2rem; }
.article-hero img { width: 100%; height: auto; display: block; }

/* === Blog card image === */
.blog-card img { transition: transform 0.3s ease; }
.blog-card:hover img { transform: scale(1.03); }