/* ============================================
   PRINT STYLES - openclaw.ai TUTORIALS
   ============================================ */

@media print {

    /* Hide non-essential elements */
    .header,
    .footer,
    .sidebar,
    .toc,
    .progress-bar,
    .scroll-top,
    .theme-toggle,
    .mobile-toggle,
    .search-box,
    .feedback-section,
    .newsletter,
    .social-links,
    .filter-bar,
    .copy-btn,
    .video-placeholder {
        display: none !important;
    }

    /* Reset colors for print */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Ensure full width content */
    .container,
    .tutorial-layout,
    .tutorial-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .tutorial-layout {
        display: block !important;
    }

    /* Typography adjustments */
    h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 18pt;
    }

    h3 {
        font-size: 14pt;
    }

    h4 {
        font-size: 12pt;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black !important;
        page-break-after: avoid;
    }

    p,
    li {
        color: #333 !important;
        orphans: 3;
        widows: 3;
    }

    /* Links */
    a {
        color: black !important;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    a[href^="#"]::after {
        content: "";
    }

    /* Code blocks */
    .code-block {
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    .code-block pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .code-block code {
        color: black !important;
        font-size: 10pt;
    }

    .code-header {
        background: #eee !important;
        border-bottom: 1px solid #ddd !important;
    }

    /* Callouts */
    .callout {
        border: 1px solid #ddd !important;
        background: #f9f9f9 !important;
        page-break-inside: avoid;
    }

    .callout-title,
    .callout-text {
        color: black !important;
    }

    /* Steps */
    .step {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }

    .step-number {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Badges */
    .badge {
        border: 1px solid #999;
        background: white !important;
        color: black !important;
    }

    /* Cards */
    .tutorial-card {
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }

    /* Prerequisites */
    .prerequisites {
        background: #f9f9f9 !important;
        border: 1px solid #ddd !important;
    }

    /* Collapsibles - show all content */
    .collapsible-content {
        max-height: none !important;
        display: block !important;
    }

    /* Page breaks */
    .step {
        page-break-inside: avoid;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    /* Print header */
    @page {
        margin: 2cm;
    }

    @page :first {
        margin-top: 3cm;
    }
}