/* ============================================================
   TLCTC Blog — Shared Print Stylesheet
   Covers both old-style (Type A) and Tailwind-style (Type B) blogs.
   Include with:  <link rel="stylesheet" href="/print.css" media="print">
   ============================================================ */

@media print {

    /* ----- Page Setup ----- */
    @page { margin: 18mm 16mm 20mm; }

    /* ----- Hide Non-Content Elements ----- */
    /* Type A nav / theme / hamburger */
    nav,
    .hamburger,
    #themeToggle,
    #themeToggleMobile,
    .theme-switch,
    #mobile-menu,
    /* Type B header / sidebar / buttons */
    header,
    aside,
    footer,
    #scrollTopBtn,
    #scrollToTopBtn,
    #theme-toggle,
    /* Fixed backgrounds (Tailwind pattern) */
    .fixed.-z-10,
    .fixed.inset-0.-z-10,
    body > .fixed:first-child,
    /* Misc UI */
    .podcast-player,
    .popup-overlay,
    .emphasis-box,
    .blog-pagination {
        display: none !important;
    }

    /* ----- Body Reset ----- */
    body {
        font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
        font-size: 11pt !important;
        line-height: 1.55 !important;
        background: white !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        min-height: auto !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ----- Layout Reset (Type B Tailwind) ----- */
    .container-custom {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .grid {
        display: block !important;
    }
    /* Hide sidebar TOC column, keep article full-width */
    [class*="lg:col-span-8"],
    [class*="lg\\:col-span-8"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    [class*="lg:col-span-3"],
    [class*="lg:col-span-4"],
    [class*="lg\\:col-span-3"],
    [class*="lg\\:col-span-4"] {
        display: none !important;
    }
    main {
        padding: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ----- Layout Reset (Type A Old-Style) ----- */
    .page-content,
    .content-container,
    .content-box,
    article {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* ----- Gradient-Text Fix (Tailwind blogs) ----- */
    /* Without this, bg-clip-text + text-transparent = invisible text in print */
    .gradient-text {
        -webkit-text-fill-color: #000 !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        background: none !important;
        color: #000 !important;
    }

    /* ----- Typography ----- */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        break-after: avoid;
        page-break-after: avoid;
        margin-top: 1.2rem;
        margin-bottom: 0.4rem;
        /* Fix @apply gradient-text on headings (bg-clip-text + text-transparent = invisible) */
        -webkit-text-fill-color: #000 !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        background-image: none !important;
    }
    h1 { font-size: 22pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 13pt !important; }
    h4 { font-size: 12pt !important; font-weight: bold; }

    p {
        orphans: 3;
        widows: 3;
        font-size: 11pt;
        color: #000 !important;
        margin-bottom: 0.6rem;
    }
    li {
        color: #000 !important;
        font-size: 11pt;
        margin-bottom: 0.25rem;
    }
    ul, ol {
        color: #000 !important;
        margin-bottom: 0.8rem;
        padding-left: 18pt;
    }

    /* ----- Links ----- */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    /* Show full URL for external links */
    a[href^="http"]:after,
    a[href^="https"]:after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        font-weight: normal;
        word-break: break-all;
    }
    /* Don't show URL for internal/anchor links */
    a[href^="/"]:after,
    a[href^="#"]:after,
    a[href^="index"]:after {
        content: "" !important;
    }

    /* ----- Tables ----- */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0.8rem;
        page-break-inside: auto;
    }
    th, td {
        border: 1px solid #999 !important;
        padding: 0.25rem 0.4rem;
        color: #000 !important;
        background: white !important;
        font-size: 10pt;
    }
    th {
        font-weight: bold;
        background: #eee !important;
    }
    tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* ----- Code Blocks ----- */
    pre, code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 9pt !important;
        background: #f8f8f8 !important;
        color: #000 !important;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    pre {
        border: 1px solid #ccc !important;
        padding: 0.4rem;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    /* Type A code-block wrapper */
    .code-block {
        margin-bottom: 0.8rem;
        break-inside: avoid;
    }
    .code-block pre {
        border: 1px solid #ccc !important;
        background: #f8f8f8 !important;
    }
    /* Type B codeblock wrapper */
    .codeblock {
        background: white !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        border-radius: 0 !important;
    }

    /* ----- Images ----- */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        break-inside: avoid;
        display: block;
        margin: 0.8rem auto;
    }
    figure {
        break-inside: avoid;
        margin: 0.8rem 0 !important;
    }
    figcaption {
        font-size: 9pt;
        color: #666;
        margin-top: 0.25rem;
    }

    /* ----- Components (Type A) ----- */
    .event-level,
    .example-box,
    .action-steps,
    .control-point,
    blockquote {
        break-inside: avoid;
        page-break-inside: avoid;
        background: white !important;
    }
    .path-notation {
        background: #f0f0f0 !important;
        border: 1px solid #ccc;
        color: #000 !important;
    }

    /* ----- Components (Type B Tailwind) ----- */
    .glass-card {
        background: white !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .callout {
        background: white !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        break-inside: avoid;
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
    .insight-box {
        border: 1px solid #ccc !important;
        background: #f9f9f9 !important;
        padding: 0.5rem !important;
        break-inside: avoid;
    }

    /* ----- Chat/Conversation Blog ----- */
    .chat-container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* ----- Global Reset ----- */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .card-container, .content-box, .card {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}