/* ──────────────────────────────────────────────────────────────────────
   Blog / long-form article typography for the PUBLIC marketing site.

   This is a hand-written, committed stylesheet — deliberately NOT part of
   the purged Tailwind build (public/css/marketing.css). That keeps rich
   article markup (headings, lists, tables, blockquotes, TOC, TL;DR box)
   rendering correctly without depending on Tailwind's content scan, so a
   missed rebuild can never strip an article's styling.

   Loaded only on /blog pages via @push('head') in the blog views. Dark
   theme + RTL to match the rest of the marketing site.
   ────────────────────────────────────────────────────────────────────── */

/* ── Article body prose ─────────────────────────────────────────────── */
.article-content {
    color: #d1d5db;            /* gray-300 */
    font-size: 1.125rem;
    line-height: 1.9;
}
.article-content > * + * { margin-top: 1.25rem; }

.article-content h2 {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    scroll-margin-top: 90px;   /* so anchor jumps clear the sticky-ish header */
}
.article-content h3 {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    scroll-margin-top: 90px;
}
.article-content p { color: #d1d5db; }

.article-content a {
    color: #60a5fa;            /* blue-400 */
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.article-content a:hover { color: #93c5fd; }

.article-content strong { color: #fff; font-weight: 700; }

.article-content ul,
.article-content ol {
    padding-inline-start: 1.5rem;
    margin-top: 1.25rem;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-top: 0.6rem; }
.article-content li::marker { color: #60a5fa; }

.article-content blockquote {
    border-inline-start: 4px solid #2563eb;   /* blue-600 */
    background: rgba(37, 99, 235, 0.08);
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    color: #e5e7eb;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    display: block;
    overflow-x: auto;          /* horizontal scroll on small screens */
}
.article-content th,
.article-content td {
    border: 1px solid #374151; /* gray-700 */
    padding: 0.7rem 0.9rem;
    text-align: start;
    vertical-align: top;
}
.article-content th { background: #1f2937; color: #fff; font-weight: 700; }
.article-content tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* ── TL;DR / quick-answer box (helps AI answer engines lift a summary) ─ */
.blog-tldr {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
}
.blog-tldr h2 { color: #fff; font-size: 1.15rem; font-weight: 800; margin-bottom: 0.75rem; }
.blog-tldr ul { list-style: none; margin: 0; padding: 0; }
.blog-tldr li {
    position: relative;
    padding-inline-start: 1.6rem;
    margin-top: 0.5rem;
    color: #e5e7eb;
    line-height: 1.7;
}
.blog-tldr li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: #34d399;            /* emerald-400 */
    font-weight: 800;
}

/* ── Table of contents ──────────────────────────────────────────────── */
.blog-toc {
    background: #0b1220;
    border: 1px solid #1f2937;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
}
.blog-toc strong { color: #fff; display: block; margin-bottom: 0.6rem; }
.blog-toc ol { list-style: decimal; padding-inline-start: 1.4rem; margin: 0; }
.blog-toc li { margin-top: 0.4rem; }
.blog-toc a { color: #9ca3af; text-decoration: none; }
.blog-toc a:hover { color: #60a5fa; text-decoration: underline; }