/**
 * Print stylesheet for LinkedIn Carousel PDF
 *
 * Usage: Add ?print=linkedin to any article URL, then use browser's Print to PDF
 *
 * LinkedIn carousel specifications:
 * - Aspect ratio: 4:5 (portrait) - 1080x1350px or similar
 * - Large fonts for mobile readability
 * - 5-12 slides is the sweet spot
 */

@media print {
    /* LinkedIn carousel page size: 4:5 aspect ratio */
    @page {
        size: 8.5in 10.625in;  /* 4:5 ratio */
        margin: 0.5in;
    }

    /* Reset and base styles */
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
        font-size: 16pt;
        line-height: 1.5;
        color: #333;
        background: white;
        margin: 0;
        padding: 0;
    }

    /* Hide non-essential elements */
    .table-of-contents,
    .post-footer,
    .back-link,
    .logo-container,
    nav,
    header:not(.post-header),
    footer:not(.post-footer),
    .no-print {
        display: none !important;
    }

    /* Article container */
    .blog-post {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Title slide styling */
    .post-header {
        page-break-after: always;
        min-height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: linear-gradient(135deg, #1a5f7a 0%, #2c7da0 100%);
        color: white;
        padding: 2in 1in;
        margin: -0.5in;
        margin-bottom: 0;
    }

    .post-header h1 {
        font-size: 28pt;
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 20pt 0;
        color: white;
    }

    .post-meta {
        font-size: 14pt;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Content sections */
    .post-content {
        padding-top: 0.5in;
    }

    /* Section headings - each major section can be a new slide */
    .post-content h2 {
        font-size: 22pt;
        color: #1a5f7a;
        margin: 30pt 0 15pt 0;
        padding-bottom: 8pt;
        border-bottom: 2pt solid #1a5f7a;
        page-break-after: avoid;
        break-after: avoid;
    }

    .post-content h3 {
        font-size: 18pt;
        color: #2c7da0;
        margin: 25pt 0 12pt 0;
        page-break-after: avoid;
        break-after: avoid;
    }

    .post-content h4 {
        font-size: 16pt;
        color: #444;
        margin: 20pt 0 10pt 0;
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Paragraphs */
    .post-content p {
        font-size: 14pt;
        margin: 12pt 0;
        orphans: 3;
        widows: 3;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Lists - CRITICAL: prevent breaking inside list items */
    .post-content ul,
    .post-content ol {
        margin: 15pt 0;
        padding-left: 25pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .post-content li {
        font-size: 14pt;
        margin: 10pt 0;
        page-break-inside: avoid;
        break-inside: avoid;
        orphans: 2;
        widows: 2;
    }

    /* Keep bullet groups together */
    .post-content ul li,
    .post-content ol li {
        page-break-before: avoid;
        break-before: avoid;
    }

    /* Blockquotes - highlight boxes */
    .post-content blockquote {
        background: #fff3cd;
        border-left: 4pt solid #ffc107;
        padding: 15pt 20pt;
        margin: 20pt 0;
        font-style: normal;
        color: #664d03;
        font-size: 14pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Code blocks */
    .post-content pre,
    .post-content .highlight {
        background: #f8f9fa;
        border: 1pt solid #e0e0e0;
        padding: 15pt;
        font-size: 11pt;
        page-break-inside: avoid;
        break-inside: avoid;
        overflow: visible;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .post-content code {
        font-family: 'Consolas', 'Courier New', monospace;
        font-size: 11pt;
    }

    /* Images */
    .post-content img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 20pt auto;
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none;
    }

    /* Tables */
    .post-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 20pt 0;
        font-size: 12pt;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .post-content th,
    .post-content td {
        border: 1pt solid #ccc;
        padding: 8pt 12pt;
    }

    .post-content th {
        background: #f0f0f0;
        font-weight: 600;
    }

    /* MathJax/LaTeX formulas */
    .MathJax,
    .MathJax_Display,
    mjx-container {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin: 15pt 0 !important;
    }

    /* Horizontal rules as slide separators */
    .post-content hr {
        page-break-after: always;
        break-after: page;
        border: none;
        margin: 0;
        height: 0;
        visibility: hidden;
    }

    /* Links - show URL for print but style nicely */
    a {
        color: #1a5f7a;
        text-decoration: none;
    }

    /* Don't show URLs after links in print */
    a[href]::after {
        content: none !important;
    }

    /* Ensure emoji render properly */
    .emoji {
        font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    }
}

/* Screen preview of print mode */
@media screen {
    body.print-preview {
        background: #e0e0e0;
        padding: 20px;
    }

    body.print-preview .logo-container {
        display: none;
    }

    body.print-preview .blog-post {
        background: white;
        max-width: 8.5in;
        margin: 0 auto;
        padding: 0.5in;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    body.print-preview .table-of-contents,
    body.print-preview .post-footer {
        display: none;
    }

    body.print-preview .post-header {
        background: linear-gradient(135deg, #1a5f7a 0%, #2c7da0 100%);
        color: white;
        padding: 2in 1in;
        margin: -0.5in;
        margin-bottom: 0.5in;
        text-align: center;
    }

    body.print-preview .post-header h1 {
        color: white;
        font-size: 28pt;
    }

    body.print-preview .post-meta {
        color: rgba(255, 255, 255, 0.8);
    }
}