/**
 * Print styles — Varnum Law
 *
 * Enqueued in functions.php with the `print` media type, so nothing here loads
 * for screen. Rules are also wrapped in @media print as a safety net: if an
 * optimization plugin (Perfmatters) ever combines stylesheets and drops the
 * media attribute, the wrapper keeps these rules out of the screen cascade.
 *
 * Scope: single Insights and News articles (both use the same Elementor
 * single-post template, and the body tag carries no category class to tell
 * them apart). Other templates print unstyled until we add them.
 *
 * !important is used throughout. The theme rule is to avoid it, and this file
 * is the documented exception: Elementor generates high-specificity CSS from
 * the database (`.elementor-<id> .elementor-element-<hash>` chains plus inline
 * custom properties for the grid), and a print override cannot win against
 * that on specificity alone.
 */

@media print {

    @page {
        margin: 0.6in;
    }

    body.single-post {
        background: #fff !important;
        color: #000;
    }

    /* ---------------------------------------------------------------------
     * Site chrome — header, footer, popups, skip link
     * ------------------------------------------------------------------ */

    body.single-post .jupiterx-header,
    body.single-post .jupiterx-footer,
    body.single-post [data-elementor-type="header"],
    body.single-post [data-elementor-type="footer"],
    body.single-post [data-elementor-type="popup"],
    body.single-post .dialog-widget,
    body.single-post .jupiterx-a11y {
        display: none !important;
    }

    body.single-post .jupiterx-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ---------------------------------------------------------------------
     * Everything below the article
     *
     * The single-post template is one grid container followed by a stack of
     * promo sections (CTA band, newsletter Gravity Form). Targeting the grid's
     * siblings rather than their Elementor IDs means anything added to the
     * bottom of the template later is dropped from print automatically.
     * ------------------------------------------------------------------ */

    body.single-post .elementor-location-single > .e-grid ~ * {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
     * Layout — collapse the three-column grid to a single full-width column
     *
     * Print order: In This Post → Key Contacts → article. On screen the TOC is
     * the left rail, the article is the center column, and Key Contacts sits
     * in the right rail, so print needs a reorder. CSS-only reordering (flex
     * `order`, or grid row placement) breaks Chrome's print pagination: any
     * child whose visual order differs from DOM order prints with frozen
     * fragment heights, so content comes out sliced mid-line or overlapping
     * following sections (VL-166 QA round 2, both reported bugs). The reorder
     * is therefore done in the DOM by the beforeprint handler in varnum.js,
     * and everything here stays display:block, which paginates correctly.
     * ------------------------------------------------------------------ */

    body.single-post .elementor-location-single > .e-grid,
    body.single-post .elementor-location-single > .e-grid > .e-con-inner {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body.single-post .elementor-location-single > .e-grid > .e-con-inner > * {
        width: 100% !important;
        max-width: none !important;
    }

    /* Elementor containers are flex by default, and any flex ancestor of long
       content is a fragmentation hazard (see above) — Chrome clipped the last
       line of the article inside the flex .e-con chain. These are plain
       column stacks, so block prints identically and paginates correctly.
       Scoped to :has() so children hidden by display conditions stay hidden. */
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *:has(.page_author_box_wrapper),
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *:has(.parent-container),
    body.single-post .parent-container,
    body.single-post [data-elementor-type="wp-post"] > .e-con,
    body.single-post [data-elementor-type="wp-post"] > .e-con > .e-con-inner {
        display: block !important;
    }

    /* Those containers spaced their children with flex gap (20px), which
       block layout drops — without this the date prints jammed against the
       headline. Sibling margins reproduce the gap. */
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *:has(.page_author_box_wrapper) > * + *,
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *:has(.parent-container) > * + * {
        margin-top: 20px !important;
    }

    /* The grid paints a cream background on screen and the article column sits
       on a white ::before overlay. Browsers skip background graphics in print
       by default, but clearing them here keeps the sheet clean for anyone who
       prints with them switched on. */
    body.single-post .elementor-location-single > .e-grid,
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *,
    body.single-post .elementor-location-single > .e-grid > .e-con-inner > *::before {
        background: none !important;
    }

    /* ---------------------------------------------------------------------
     * In This Post
     * ------------------------------------------------------------------ */

    body.single-post .vl_toc-wrapper,
    body.single-post .vl_toc-heading,
    body.single-post .vl_toc-container {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.single-post .vl_toc-container ul {
        break-inside: avoid;
    }

    /* Anchor links in the TOC point at headings on the same page, so the URL
       expansion further down would only add noise here. */
    body.single-post .vl_toc-container a::after {
        content: none !important;
    }

    /* ---------------------------------------------------------------------
     * Key Contacts — three across
     *
     * The author box ships its own widget title, and the template already
     * places an Elementor "Key Contacts" heading directly above it. Print
     * keeps the Elementor heading and drops the widget's duplicate.
     * ------------------------------------------------------------------ */

    body.single-post .page_author_box_wrapper h3.card-title {
        display: none !important;
    }

    body.single-post .page_author_box_wrapper .jupiterx-widget-content {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px 18px;
        align-items: start;
    }

    /* News posts usually carry a single contact, and one contact penned into a
       third of the page wraps its email mid-word. Give a lone contact the full
       width. The selector reads as "no AuthorTable follows another one", since
       the box also renders a hidden widget title as a sibling. */
    body.single-post .page_author_box_wrapper .jupiterx-widget-content:not(:has(.AuthorTable ~ .AuthorTable)) {
        grid-template-columns: 1fr !important;
    }

    body.single-post .AuthorTable {
        break-inside: avoid;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Grid and flex children default to min-width: auto, so the 150px contact
       photo and the email address set a floor wider than a third of the sheet
       and shove the third column off the page. Zeroing it lets them shrink. */
    body.single-post .AuthorTable,
    body.single-post .AuthorTable .elementor-container,
    body.single-post .AuthorTable .elementor-column,
    body.single-post .AuthorTable .elementor-widget-wrap {
        min-width: 0 !important;
    }

    /* elementor-section-boxed centers the container at a max-width, which
       indents a lone contact strangely when its cell spans the full sheet. */
    body.single-post .AuthorTable .elementor-container {
        display: flex !important;
        flex-wrap: nowrap;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Fixed-width media column. Percentage widths sized the photo relative to
       the sheet, which blew a 150px headshot (or the firm's 125px logo mark on
       news posts) up to ~2in when a lone contact spans the full page width
       (VL-166 QA round 2: "author photo is huge"). A fixed column keeps the
       photo business-card sized in every grid variant. */
    /* max-width as well as width: an Elementor breakpoint rule wins the width
       war on news posts even against !important here, but max-width caps the
       used width no matter which width declaration wins. */
    body.single-post .AuthorTable .elementor-col-33 {
        width: 0.95in !important;
        max-width: 0.95in !important;
        flex: 0 0 auto !important;
    }

    body.single-post .AuthorTable .elementor-col-66 {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    body.single-post .AuthorTable .elementor-widget-wrap {
        padding: 0 6px 0 0 !important;
    }

    /* width/height:auto also defeat the widget's inline sizing, so the image
       renders at its natural aspect ratio and never upscales. */
    body.single-post .AuthorTable img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 0.9in !important;
    }

    body.single-post .AuthorTable .elementor-heading-title {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    body.single-post .AuthorTable .elementor-text-editor,
    body.single-post .AuthorTable .elementor-text-editor * {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }

    /* Email addresses offer no natural break point and will otherwise run past
       the edge of a third-width column. */
    body.single-post .AuthorTable p,
    body.single-post .AuthorTable li,
    body.single-post .AuthorTable a {
        overflow-wrap: break-word;
    }

    /* ---------------------------------------------------------------------
     * Cross-promo blocks in the right rail
     *
     * Related Industries is the taxonomy sibling of Related Practices and
     * renders in the same slot on industry-tagged posts, so it goes with them.
     * ------------------------------------------------------------------ */

    body.single-post .vl-post-related-insights,
    body.single-post .post-practice-list,
    body.single-post .post-industry-list {
        display: none !important;
    }

    /* "Latest News and Insights" on the news template (a separate Elementor
       single template from Insights, though both share the body.single-post
       class and the same grid structure). It is a container holding a heading,
       a divider, and an Elementor Posts widget, so matching on the widget
       takes the heading and rule with it. */
    body.single-post .elementor-location-single > .e-grid .e-con:has(> .elementor-widget-posts) {
        display: none !important;
    }

    /* ---------------------------------------------------------------------
     * Article body
     * ------------------------------------------------------------------ */

    body.single-post .parent-container,
    body.single-post .parent-container > .elementor-widget-container,
    body.single-post [data-elementor-type="wp-post"],
    body.single-post [data-elementor-type="wp-post"] .e-con,
    body.single-post [data-elementor-type="wp-post"] .e-con-inner {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.single-post .elementor-widget-theme-post-content img,
    body.single-post .elementor-widget-theme-post-content table {
        max-width: 100% !important;
        height: auto;
    }

    /* ---------------------------------------------------------------------
     * Print typography and pagination
     * ------------------------------------------------------------------ */

    body.single-post h1,
    body.single-post h2,
    body.single-post h3,
    body.single-post h4 {
        break-after: avoid;
        break-inside: avoid;
    }

    body.single-post p,
    body.single-post li,
    body.single-post blockquote {
        orphans: 3;
        widows: 3;
    }

    /* Spell out destinations for links that leave the page, so a printed copy
       stays useful. Same-page anchors are excluded above. */
    body.single-post .elementor-widget-theme-post-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }
}