/* ============================================
   SHARED CONTENT STYLES
   Clean, consistent styling for all content types
   ============================================ */

:root {
    --primary-orange: #f97316;
    --primary-dark: #1a1a2e;
    --text-primary: #1a1a2e;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;
}

/* ============================================
   TITLE STYLING (Orange/Black alternating)
   ============================================ */
.article h1,
.blog-post h1,
.tutorial h1,
.whitepaper h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    max-width: 900px;
    color: var(--primary-dark);
}

/* Orange/Black alternating words - applied via JS */
.article h1 .word-orange,
.blog-post h1 .word-orange,
.tutorial h1 .word-orange,
.whitepaper h1 .word-orange {
    color: var(--primary-orange);
}

.article h1 .word-black,
.blog-post h1 .word-black,
.tutorial h1 .word-black,
.whitepaper h1 .word-black {
    color: var(--primary-dark);
}

/* ============================================
   HIDE META/DATE INFO
   ============================================ */
.article .meta,
.blog-post .meta,
.tutorial .meta,
.whitepaper .meta,
.tutorial-meta,
.blog-meta,
.article-meta .article-date {
    display: none;
}

/* ============================================
   CONTENT BODY (shared typography)
   ============================================ */
.article,
.blog-post,
.tutorial,
.whitepaper {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 24px 80px;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-secondary);
    background: white;
}

/* Headings */
.article h2,
.blog-post h2,
.tutorial h2,
.whitepaper h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 48px 0 24px;
    line-height: 1.3;
}

.article h3,
.blog-post h3,
.tutorial h3,
.whitepaper h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 36px 0 16px;
    line-height: 1.4;
}

.article h4,
.blog-post h4,
.tutorial h4,
.whitepaper h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 24px 0 12px;
    line-height: 1.4;
}

/* Paragraphs */
.article p,
.blog-post p,
.tutorial p,
.whitepaper p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

/* Links */
.article a,
.blog-post a,
.tutorial a,
.whitepaper a {
    color: var(--primary-orange);
    text-decoration: underline;
    text-decoration-color: rgba(249, 115, 22, 0.3);
    text-underline-offset: 3px;
    transition: all 0.2s;
}

.article a:hover,
.blog-post a:hover,
.tutorial a:hover,
.whitepaper a:hover {
    color: #ea580c;
    text-decoration-color: #ea580c;
}

/* Strong and Em */
.article strong,
.blog-post strong,
.tutorial strong,
.whitepaper strong {
    font-weight: 600;
    color: #1e293b;
}

.article em,
.blog-post em,
.tutorial em,
.whitepaper em {
    font-style: italic;
}

/* Lists */
.article ul,
.article ol,
.blog-post ul,
.blog-post ol,
.tutorial ul,
.tutorial ol,
.whitepaper ul,
.whitepaper ol {
    margin-bottom: 1.5rem;
    padding-left: 1.75rem;
}

.article li,
.blog-post li,
.tutorial li,
.whitepaper li {
    margin-bottom: 0.5rem;
}

/* Blockquotes */
.article blockquote,
.blog-post blockquote,
.tutorial blockquote,
.whitepaper blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #fef3c7;
    border-left: 4px solid var(--primary-orange);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #92400e;
}

.article blockquote p,
.blog-post blockquote p,
.tutorial blockquote p,
.whitepaper blockquote p {
    margin-bottom: 0;
    color: inherit;
}

/* Code */
.article code,
.blog-post code,
.tutorial code,
.whitepaper code {
    background: #f1f5f9;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: #be185d;
}

.article pre,
.blog-post pre,
.tutorial pre,
.whitepaper pre {
    background: var(--primary-dark);
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.article pre code,
.blog-post pre code,
.tutorial pre code,
.whitepaper pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Tables */
.article table,
.blog-post table,
.tutorial table,
.whitepaper table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.article th,
.article td,
.blog-post th,
.blog-post td,
.tutorial th,
.tutorial td,
.whitepaper th,
.whitepaper td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.article th,
.blog-post th,
.tutorial th,
.whitepaper th {
    background: #f8fafc;
    font-weight: 600;
    color: var(--text-primary);
}

/* Images */
.article img,
.blog-post img,
.tutorial img,
.whitepaper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* ============================================
   CTA BOX
   ============================================ */
.cta-box {
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6b35 100%);
    color: white;
    padding: 32px;
    border-radius: 12px;
    text-align: center;
    margin: 40px 0;
}

.cta-box h3,
.cta-box h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.cta-box p {
    margin: 0 0 20px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.cta-box .btn {
    display: inline-block;
    background: white;
    color: var(--primary-orange);
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-box .btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .article,
    .blog-post,
    .tutorial,
    .whitepaper {
        padding: 100px 20px 60px;
        font-size: 1rem;
    }

    .article h1,
    .blog-post h1,
    .tutorial h1,
    .whitepaper h1 {
        font-size: 2rem;
    }

    .article h2,
    .blog-post h2,
    .tutorial h2,
    .whitepaper h2 {
        font-size: 1.5rem;
    }

    .article h3,
    .blog-post h3,
    .tutorial h3,
    .whitepaper h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .article,
    .blog-post,
    .tutorial,
    .whitepaper {
        padding: 90px 16px 50px;
    }

    .article h1,
    .blog-post h1,
    .tutorial h1,
    .whitepaper h1 {
        font-size: 1.75rem;
    }

    .article pre,
    .blog-post pre,
    .tutorial pre,
    .whitepaper pre {
        font-size: 0.75rem;
        padding: 1rem;
    }
}