/* =========================================================================
   print.css — dedicated PRINT stylesheet for MedShadow articles.

   Loaded with media="print" (see functions.php: 'ssxtheme-print' enqueue),
   so every rule here applies ONLY when printing / saving to PDF and never
   touches the on-screen site. Because it is a separate print-media file it
   loads LAST and sits outside LiteSpeed's screen-CSS optimizer, so its rules
   reliably win the cascade — which the embedded @media print block in
   style.css did not.

   Goal: a clean "printout for your doctor" — strip all site chrome (header,
   nav, share rail, donate bars, popups, newsletter, related, footer, audio
   player) and reflow the article header + body + Highlights into a single
   full-width, small-type, copy-doc column.

   Deploy note: bump the file (filemtime auto-versions it) then purge
   LiteSpeed + Cloudflare. Keep print.css EXCLUDED from LiteSpeed CSS
   combine/optimize so it is served verbatim.
   ========================================================================= */

/* ---- 1. Global page setup --------------------------------------------- */
@page { margin: 16mm 14mm; }

html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    width: auto !important;
}

/* Kill decorative backgrounds/shadows so nothing prints as a gray slab */
#wrapper, #content-part, .blog-bar, .the_wrap, .centering,
.left_sidebar, .content_area, .the_content {
    background: transparent !important;
    box-shadow: none !important;
}

/* ---- 2. Hide everything that isn't the article ------------------------ */
#header-part, #footer-part,
.topprogressbar, #back-to-top, .page_nav, #scroll-line,
.popupbox, .republish-popup, .medshadow-ac-modal,
.sticky_donation_bar,
.blog-bar .featured_image,
.blog-bar .right_sidebar,
.blog-bar .comments,
.blog-bar .content_area .sticky_box,
.medshadow-comments-wrapper,
#wrapper .subscribebox, #wrapper .subscribebox.acf-block,
#article-horizontal-newsletter-bar,
.recommended_box, .related, .read-next,
.pager_box, .submit-story-box, .donarbox, .donorcta, .donorcta2,
.republish_trigger, .republish-btn, .republish-btn-bottom, .republish,
.spon-block,
/* Audio-narration / TTS players (plugin-injected) — text-only printout */
.blog-bar audio, .blog-bar .wp-block-audio,
.blog-bar [class*="trinity"], .blog-bar [id*="trinity"],
.blog-bar [class*="beyondwords"], .blog-bar [class*="speechkit"],
.blog-bar [class*="playht"], .blog-bar [class*="podcast"],
.blog-bar [class*="audioplayer"], .blog-bar [class*="audio-player"],
.blog-bar [class*="tts"], .blog-bar [id*="tts"] {
    display: none !important;
}

/* ---- 3. Reflow the article into one full-width column ----------------- */
#wrapper { padding-top: 0 !important; }
.blog-bar { padding: 0 !important; position: static !important; }
.blog-bar .centering { padding-top: 0 !important; max-width: none !important; }

.blog-bar .the_wrap,
.blog-bar .left_sidebar,
.blog-bar .content_area,
.blog-bar .content_area .the_content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
}

/* ---- 4. Typography — simple copy-doc hierarchy (px scale) -------------- */
.blog-bar h1,
.blog-bar.fullview .mainthumb h1 {
    color: #000 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
    padding-bottom: 6px !important;
}

/* Sub-heads: more space above, tight to the body copy below */
.blog-bar .content_area .the_content h2 { font-size: 15px !important; margin: 22px 0 3px !important; padding: 0 !important; }
.blog-bar .content_area .the_content h3 { font-size: 13px !important; margin: 18px 0 2px !important; padding: 0 !important; }
.blog-bar .content_area .the_content h4 { font-size: 12px !important; margin: 16px 0 2px !important; padding: 0 !important; }

/* Safety: guarantee the title, deck and byline always print */
.blog-bar h1, .blog-bar .intro, .blog-bar .intro_info { visibility: visible !important; }
.blog-bar h1 { display: block !important; }

/* Breadcrumbs: keep as a small dark line at the very top */
.blog-bar .breadcrumbs { display: block !important; font-size: 10px !important; color: #444 !important; margin: 0 0 4px !important; }
.blog-bar .breadcrumbs a, .blog-bar .breadcrumbs span { color: #444 !important; }

/* FEATURED / FULLVIEW variant: the header (breadcrumbs, title, byline) is
   absolutely positioned over the hero image in WHITE text, so it prints
   white-on-white and off-flow. Pull it into normal black-on-white flow and
   drop the hero image + its dark gradient. */
.blog-bar.fullview .mainthumb { position: static !important; margin: 0 !important; }
.blog-bar.fullview .mainthumb .featured_image,
.blog-bar.fullview .mainthumb .featured_image:before { display: none !important; }
.blog-bar.fullview .mainthumb .details { position: static !important; left: auto !important; bottom: auto !important; width: 100% !important; }
.blog-bar.fullview .mainthumb .details .detailsmid { max-width: none !important; margin: 0 !important; }
.blog-bar.fullview .mainthumb .breadcrumbs,
.blog-bar.fullview .mainthumb .breadcrumbs a,
.blog-bar.fullview .mainthumb .breadcrumbs span,
.blog-bar.fullview .mainthumb h1,
.blog-bar.fullview .mainthumb .intro_info,
.blog-bar.fullview .mainthumb .intro_info a,
.blog-bar.fullview .mainthumb .intro_info .bio strong a,
.blog-bar.fullview .mainthumb .intro_info .date { color: #000 !important; }

/* Author + date line stays; the top REPUBLISH button is hidden above */
.blog-bar .intro_info { display: flex !important; margin-bottom: 12px !important; page-break-inside: avoid; }

/* Byline: small author name + date and a compact avatar — the fullview hero
   sizes these much larger, so pin them down for print. */
.blog-bar .intro_info,
.blog-bar .intro_info .bio,
.blog-bar .intro_info .bio .name,
.blog-bar .intro_info .bio .name a,
.blog-bar .intro_info .bio .name strong,
.blog-bar .intro_info .bio .name strong a,
.blog-bar .intro_info .bio .name .author-item,
.blog-bar .intro_info .bio .date,
.blog-bar .intro_info .date {
    font-size: 12px !important;
    line-height: 1.3 !important;
}
.blog-bar .intro_info img,
.blog-bar .intro_info figure { width: 32px !important; height: 32px !important; }

/* Intro deck slightly larger than body. Body copy = 11px, tight leading.
   Size is set on BOTH the container and the paragraphs, and the selectors
   are prefixed with `body`/`html` to outrank any late-loading block or
   plugin CSS that tries to enlarge article paragraphs. */
.blog-bar .intro p { font-size: 12px !important; line-height: 1.4 !important; padding-bottom: 8px !important; font-weight: 400 !important; }

html body .blog-bar .content_area .the_content { font-size: 11px !important; }
html body .blog-bar .content_area .the_content p,
html body .blog-bar .content_area .the_content li,
html body .blog-bar .content_area .the_content span {
    font-size: 11px !important;
    line-height: 1.4 !important;
}
.blog-bar .content_area .the_content p,
.blog-bar .content_area .the_content li {
    padding-bottom: 0 !important;
    margin-bottom: 6px !important;
}

/* No drop cap in print — plain first paragraph */
.blog-bar .content_area .the_content.has-highlights > p:first-of-type::first-letter {
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    float: none !important;
    margin: 0 !important;
    color: inherit !important;
}

/* Pull quotes: larger than body copy, with breathing room above & below */
.blog-bar .content_area .the_content blockquote {
    margin: 18px 0 !important;
    padding: 0 0 0 14px !important;
    border-left: 3px solid #999 !important;
}
html body .blog-bar .content_area .the_content blockquote p {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}
.blog-bar .content_area .the_content blockquote p strong { font-size: 15px !important; margin-left: 0 !important; }

/* Keep the editorial "Highlights" box, just make it print compact */
.blog-bar .content_area .the_content .need-to-know-box {
    background: none !important;
    border: 1px solid #bbb !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    margin: 0 0 14px !important;
    page-break-inside: avoid;
}
html body .blog-bar .content_area .the_content .need-to-know-content,
html body .blog-bar .content_area .the_content .need-to-know-content p,
html body .blog-bar .content_area .the_content .need-to-know-content li {
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #000 !important;
}
.blog-bar .content_area .the_content .need-to-know-heading { font-size: 12px !important; }

/* Captions & photo credits: small, quiet italic — not body-sized */
.the_content figcaption,
.the_content .wp-block-image figcaption,
.blog-bar .credit, .the_content .credit {
    font-size: 9px !important;
    line-height: 1.3 !important;
    color: #666 !important;
    font-style: italic !important;
    text-align: left !important;
    margin: 2px 0 8px !important;
}

/* FACT-CHECK / opinion badges: flatten to a small, quiet inline label */
.blog-bar .content_area .the_content .fact {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #777 !important;
    border: none !important;
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}
.blog-bar .content_area .the_content .fact::before,
.blog-bar .content_area .the_content .fact::after { display: none !important; }

/* ---- 5. Media & page-break hygiene ------------------------------------ */
/* Inline images print at half size */
.the_content img, .the_content figure {
    max-width: 50% !important;
    height: auto !important;
    page-break-inside: avoid;
}
.the_content figure img { max-width: 100% !important; }

/* Interactive embeds can't print — they leave broken placeholders, stray
   down-arrows / ⊗ controls and "Made with Flourish" credits. Hide them all
   (Flourish charts & timelines, video, and generic block/oEmbed embeds). */
.the_content iframe,
.the_content video, .the_content .wp-block-video,
.the_content .wp-block-embed, .the_content .wp-embed,
.the_content figure.wp-block-embed, .the_content .wp-block-embed__wrapper,
.the_content .wp-embedded-content,
.the_content .fluid-width-video-wrapper, .the_content .videobg,
.flourish-embed, .flourish-embed-iframe, .flourish-credit,
[class*="flourish"], [id*="flourish"],
iframe[src*="flourish"], iframe[src*="flo.uri"], iframe[src*="flo.uri.sh"],
a[href*="flourish.studio"] {
    display: none !important;
}

/* Remove floating/disclosure arrows (native <details>, accordion toggles,
   "on this page" pager chevron) */
.the_content details > summary { list-style: none !important; }
.the_content summary::-webkit-details-marker,
.the_content summary::marker,
.wp-block-accordion-heading button svg,
.wp-block-accordion-heading button::after,
.pager-arrow, .notethispage { display: none !important; }

.the_content h2, .the_content h3, .the_content h4 { page-break-after: avoid; }
.the_content p, .the_content li { orphans: 3; widows: 3; }
.the_content a { color: #000 !important; text-decoration: underline; }