/*
 * Print styles for the imagining-science theme.
 * Enqueued in functions.php with media="print", after dist/css/app.css and fixes.css.
 */

@media print {

    @page {
        margin: 1cm 0;
    }

    /* Browsers lay the page out at the paper's printable width (about 720px
       on A4), so the desktop breakpoints would never match. On beforeprint,
       scripts/modules/print-layout.js rewrites the width media queries as if
       the viewport were PRINT_VIEWPORT_WIDTH (1100px) wide; the zoom below
       shrinks that layout to the paper: ~720px / 1100px. */
    body {
        zoom: 0.9;
    }

    /* Screen-only minimum heights would otherwise add blank pages. */
    body,
    .main {
        min-height: 0 !important;
    }

 
    /* AOS keeps elements at opacity 0 until they scroll into view. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* ---- Hide chrome and interactive elements ---- */

    nav.main-nav,
    .nav-background,
  
    [data-enhancer="darkModeToggle"],
    footer.legal-footer,
    .tags-block,
    .share-block,
    .backlink,
    a[href="#top"],
    .imsc-lightbox,
    .pswp,
    #cmplz-cookiebanner-container,
    .cmplz-cookiebanner,
    .close-annotation,
    .menu-toggle svg {
        display: none !important;
    }
    #language-menu {
        visibility: hidden !important;
    }

    header.top-bar,
    .imsc__announcement-rail {
        position: static !important;
    }
    .imsc__announcement-rail + * {
        margin-top: 0 !important;
    }

    /* Packery positions cards absolutely via inline styles. Neutralise them so
       the (hover: none) grid fallback from app.css lays the listing out in
       columns, as on touch devices. */
    [data-enhancer="packery"] {
        height: auto !important;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }

    [data-enhancer="packery"] > * {
        position: static !important;
        transform: none !important;
        width: auto;
        grid-column-end: span 2;
    }
    .w--large {
        grid-column-end: span 4;
    }

    .w--small {
        grid-column-end: span 1;
    }
    .flex-col-text-normal {
        padding-top: 5px;
        max-height: 300px !important;
    }

    .border-t {
        border-top-width: 0.5px !important;
    }

    /* ---- Typography ---- */


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

    blockquote, figure, img, table, .the-annotation, .article {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    img,
    svg {
        max-width: 100% !important;
        height: auto;
    }

    .fullwidth-nobars, .relative.wysiwyg .fullwidth-nobars {
        width: 100vw;
        margin-left: 0;
    }

    .ce-spacer {
        font-size: 0.6em;
    }

    .wysiwyg hr {
        border-top: 1px solid #000;
        background-color: transparent;
    }



    /* Print the target of external links inside the article text. */
    .wysiwyg a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    .wysiwyg a[href^="http"][href*="grafen.ch"]::after {
        content: "";
    }
}