/**
 * Default Print Stylesheet
 * Custom Classnames:
 *   noprint - Place on any element that should be excluded from print
 *   noprintlink - Place on A tag if you don't want the URL link displayed.
 *                 Or on ABBR tag if you don't want the Title attribute displayed.
 *
 * Resources:
 *    https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
 *    https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
 *    https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
 *
 * @author          Peter Klein <pmk@io.dk>
 * @version         0.1
 * @lastmodified    15.06.2018
 */

 @media screen {
    .printonly {
        display: none;
    }
}
@media print {

    .header{
        display: block;
        height: 100px;
    }

    /* Elements that should always be hidden on print */
    .blog__comments,
    header.header,
    #page_cta_section,
    .bc-sharing-buttons,
    #hs_cos_wrapper_blog_comments,
    #hubspot-messages-iframe-container,
    body #hubspot-messages-iframe-container,
    body #hubspot-messages-iframe-container iframe,
    .blog-recent-posts,
    iframe,
    .header .menu,
    .footer__sharing-buttons,
    .footer,
    #hs_cos_wrapper_lp_header_cta
    {
        display: none!important;
    }

    /* Class for elements that should not be printed */
    .noprint {
        display: none;
    }

    /* Class for elements that should not be visible on print */
    .printonly {
        display: block;
    }

    /* Defining CSS variables */
    :root {
        --print-text-color: #000; /* Default text color for print */
        --print-page-url: "http://tifin.com";
    }

    /* Adding messages before and after page output */
    .body-container-wrapper:after {
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
        margin-top:1rem;
        padding:1rem;
        border: 1px dotted #000;
        content: "Read more articles at http://tifin.com";
    }

    /* Page Setup */
    @page {
        size: A4 portrait; /* Have no effect in Firefox */
        margin: 1cm 1cm 1cm 2cm;
        orphans: 4;
        widows: 3;

        @top-right {
            content: "Test @Page Content"; /* Not supported in any browsers yet. Only supported in PrinceXML */
        }
    }
    /* The pseudo selectors: first, left and right doesn't have any effect in Firefox */
    @page :first {
        xmargin-top: 10cm;    /* Top margin on first page 10cm */
    }
    @page :left { }
    @page :right { }

    /*
      Approximate Conversion from Points to Pixels
      https://reeddesign.co.uk/test/points-pixels.html
    */

    /* Set defaults for body */
    body, body * {
        font: 10pt Georgia, "Times New Roman", Times, serif!important;
        line-height: 1.2;
        background: #fff !important;
        color: var(--print-text-color);
        margin: 0;
        padding: 0;
    }

    /* Clone border, margin and padding if element spans multiple pages */
    /* Currently only works correctly in Firefox */
    * {
        box-decoration-break: clone;
    }



    /* Make articles and sections start on new page */
    article, section {
        break-before: always;
        page-break-before: always; /* CSS2 */
    }

    /* Dont break up these tags onto multiple pages */
    a {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    blockquote, abbr {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    table, figure, pre {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
    }
    h1, h2, h3, h4, h5, h6, blockquote p, .blockquote p {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
        break-after: avoid;
        page-break-after: avoid; /* CSS2 */
        font-size: 13pt!important;
        font-weight: bold;
    }
    img {
        break-inside: avoid;
        page-break-inside: avoid; /* CSS2 */
        break-after: avoid;
        page-break-after: avoid;  /* CSS2 */
    }
    ul, ol, dl  {
        break-after: avoid;
        page-break-after: avoid;  /* CSS2 */
    }

    /* Prevent images from bleeding off the page */
    img {
        max-width: 100% !important;
    }

    /* Set whitespace for pre and code tags */
    pre>code,pre[class]>code {
        white-space: normal !important;
    }

    /* Remove A tag underlining */
    a[href^="http"]:not([href*="http://tifin.com"]) {
        color: var(--text-color);
        font-weight: bolder;
        text-decoration: none !important;
        word-wrap: break-word;
        white-space: wrap;
    }

    /* Display source/cite for BLOCKQUOTE and Q tags */
    q[cite]:not(.noprintcontent):after,
    blockquote[cite]:not(.noprintcontent):after {
        content: " (Source: " attr(cite) ")";
        word-wrap: break-word;
        font-style: italic;
        white-space: wrap;
    }

    /* Display title for ABBR tag */
    abbr[title]:not(.noprintcontent):after {
        content: " (" attr(title) ")";
        word-wrap: break-word;
        font-style: italic;
        white-space: wrap;
    }

    /* Display URL link for A tag */
    .body-container-wrapper a[href^="http"]:not([href*="http://tifin.com"]):not(.noprintcontent):after {
        content:" (➔ " attr(href) ")";
        word-wrap: break-word;
        font-style: italic;
        font-size: 90%;
        font-weight: normal;
        white-space: wrap;
    }

    /* NOT WORKING - CSS4 Selectors */
    /* Don't display URl if the A tag is wrapped around an IMG tag - CSS4 */
    .body-container-wrapper  !a[href^="http"]:not([href*="http://tifin.com"]):after > img {
        content: "NOT WORKING";
    }
    .body-container-wrapper  $a[href^="http"]:not([href*="http://tifin.com"]):after > img {
        content: "NOT WORKING2";
    }
    .body-container-wrapper a[href^="http"]:has(> img):not([href*="http://tifin.com"]):after {
        content: "NOT WORKING3";
    }

}