/* Blog post template (/blog/<slug>/, 1,524 posts): design/templates/blog-post/blog-post.css without its shared tail
   (the lv-posts date line, lv-byline), which the global stylesheet holds. */

/* ---------- lv-posthead: the stone head. Breadcrumb ends on the post's topic; the byline sits under the H1 ---------- */
.lv-posthead { padding-bottom: 64px; }
.lv-posthead .inner { max-width: 960px; }
.lv-posthead h1 { margin-top: 12px; }
/* The trail (and Rank Math's schema) names the post last; the head shows it in the H1 below, so its crumb is not repeated. */
.lv-posthead .lv-crumbs [aria-current="page"] { display: none; }
@media (max-width: 767px) { .lv-posthead { padding-bottom: 40px; } } /* lv-byline: the shared block at the end */

/* ---------- Body column: text holds a 34em measure; images, tables and embeds may use the whole column ---------- */
.lv-postbody { padding-top: 56px; }
.lv-postcol { min-width: 0; }
.lv-feat { margin: 0 0 40px; }
.lv-feat .lv-media { aspect-ratio: 16 / 9; }
.lv-media .slot span { line-height: 1.5; max-width: 34em; }
.lv-feat--contain .lv-media { background: var(--c-stone); }   /* diagrams and charts: shown whole, never cropped */
.lv-feat--contain .lv-media > img { object-fit: contain; }
@media (forced-colors: active) { .lv-feat .lv-media, .lv-entry img { border: 1px solid CanvasText; } }
.lv-postcol > .lv-toc { max-width: 34em; margin-bottom: 48px; }
@media (max-width: 767px) { .lv-postbody { padding-top: 32px; } .lv-feat { margin-bottom: 28px; } }

/* ---------- lv-entry: any post body, classic, block or Elementor, cleaned or not ----------
   The !important rules beat the inline styles 702 posts carry (style="font-weight: 400", red buttons, sizes). */
.lv-entry { font-size: var(--fs-body); line-height: 1.65; overflow-wrap: break-word; }
.lv-entry::after { content: ""; display: table; clear: both; }
.lv-entry :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dl, pre, figcaption, .wp-caption-text) { max-width: 34em; }
.lv-entry p { margin: 0 0 20px; }
.lv-entry :is(span, b, strong, em, i, u, font, p, li, td, th, div, a, section)[style] {
  color: inherit !important; background-color: transparent !important; font-family: inherit !important;
  font-size: inherit !important; line-height: inherit !important; text-align: inherit !important; }
.lv-entry :is(span, li, p, font, div)[style*="font-weight"] { font-weight: inherit !important; }
.lv-entry :is(b, strong) { font-weight: 700; }

/* Headings. A heading below 28px is Public Sans (system rule); content H1s are shown as H2s */
.lv-entry :is(h1, h2, h3, h4, h5, h6) { clear: both; color: var(--c-head) !important; text-align: left !important; scroll-margin-top: 24px; }
.lv-entry :is(h1, h2) { font: 500 36px/1.2 var(--font-display) !important; font-variation-settings: var(--display-opsz); margin: 64px 0 18px; }
.lv-entry h3 { font: 600 24px/1.3 var(--font-body) !important; margin: 44px 0 12px; }
.lv-entry :is(h4, h5, h6) { font: 700 21px/1.35 var(--font-body) !important; margin: 36px 0 10px; }
.lv-entry > :first-child { margin-top: 0; }
.lv-entry :is(h1, h2, h3, h4, h5, h6) :is(b, strong, span, font) { font-weight: inherit !important; font-size: inherit !important; }
.lv-entry :is(h1, h2, h3, h4, h5, h6) br { display: none; }   /* bold headings that start with <br /> (the filter removes these too) */
.lv-entry :is(h1, h2, h3, h4, h5, h6) a { color: var(--c-head); text-decoration-thickness: 2px; }
/* A link in part of a heading: its padding (no change to the line) makes its box a 48px target, 28px text and more */
.lv-entry :is(h1, h2, h3, h4, h5, h6) a:not(.lv-solo) { padding-block: 12px; }

/* Lists */
.lv-entry :is(ul, ol) { padding-left: 30px; margin: 0 0 24px; }
.lv-entry li { margin: 0 0 12px; padding-left: 4px; }
.lv-entry li::marker { color: var(--c-head); font-weight: 700; }
.lv-entry li > :is(ul, ol) { margin: 12px 0 0; }
.lv-entry li > p { margin: 0 0 8px; }

/* Links. A link that is the whole of its line gets a 48px target (class from the filter) */
.lv-entry a.lv-solo { display: inline-block; padding: 10px 0; } /* 48px and more: one line (28.5px in a table cell, 33px in text) plus 20px */
.lv-entry a.lv-short { padding-block: 12px; } /* in a line of 15 characters or fewer: 48px with no change to the line */
.lv-entry a.lv-ext::after { content: "\2197" / ""; display: inline-block; margin-left: 4px; font-weight: 600; text-decoration: none; }
.lv-entry a.lv-btn.lv-ext::after { margin-left: 8px; }
.lv-entry a.lv-imglink { display: inline-block; min-width: 48px; min-height: 48px; } /* 48px even before an image with no height loads */
.lv-entry a.lv-imglink.lv-ext::after { content: none; }

/* Buttons written into posts: the inline red Amazon "Buy Now" links and Elementor buttons become the system's dark button */
.lv-entry a[style*="background"], .lv-entry .elementor-button, .lv-entry a.lv-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 14px 26px !important;
  margin: 8px 0 24px !important; border: 2px solid var(--c-solid) !important; border-radius: var(--radius-ctl) !important;
  background: var(--c-solid) !important; color: var(--c-on-solid) !important; font: 600 19px/1.2 var(--font-body) !important; text-decoration: none !important; }
.lv-entry a[style*="background"]:hover, .lv-entry .elementor-button:hover, .lv-entry a.lv-btn:hover { background: var(--c-solid-hov) !important; }
.lv-entry .elementor-button-wrapper { margin: 0; }
/* Elementor's own stylesheet still loads on the root (flex, column padding, widget gaps, align-content): the wrappers
   stay flat over it */
.lv-entry :is(.elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget, .elementor-widget-container, .elementor) {
  display: block !important; width: auto !important; max-width: none; align-content: normal !important; margin: 0 !important; padding: 0 !important; }

/* Images: never wider than the column, live width/height keep the ratio; small product shots stay small */
.lv-entry img { height: auto !important; max-width: 100% !important; border-radius: var(--radius-card); margin: 8px 0 24px; }
.lv-entry p > img:only-child, .lv-entry p > a.lv-imglink:only-child > img { margin: 0; }
.lv-entry p:has(> img:only-child), .lv-entry p:has(> a.lv-imglink:only-child), .lv-entry p:has(> iframe:only-child) { max-width: none; margin: 32px 0; }
.lv-entry img.emoji, .lv-entry img.wp-smiley { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 .1em !important; vertical-align: -.1em; border-radius: 0; }
.lv-entry :is(.alignleft, img[align="left"]) { float: left; max-width: 45% !important; margin: 6px 32px 20px 0 !important; }
.lv-entry :is(.alignright, img[align="right"]) { float: right; max-width: 45% !important; margin: 6px 0 20px 32px !important; }
.lv-entry :is(.aligncenter) { margin-left: auto !important; margin-right: auto !important; }
.lv-entry :is(figure, .wp-caption, .wp-block-image) { margin: 32px 0; max-width: 100% !important; width: auto !important; }
.lv-entry :is(figure, .wp-caption) img { margin: 0; }
.lv-entry :is(figcaption, .wp-caption-text) { margin-top: 10px; font-size: var(--fs-ui); line-height: 1.5; color: var(--c-ink-soft); }
@media (max-width: 767px) {
  .lv-entry :is(.alignleft, .alignright, img[align]) { float: none; max-width: 100% !important; margin: 24px 0 !important; }
}

/* Tables: header row on the off-white band, hairlines, 19px; the whole table scrolls inside its labeled region */
.lv-scroll { overflow-x: auto; margin: 32px 0; border: 1px solid var(--c-hairline); border-radius: var(--radius-card); background: var(--c-paper); }
.lv-entry .wp-block-table { margin: 32px 0; }
.lv-entry .wp-block-table .lv-scroll { margin: 0; }
.lv-entry .wp-block-table thead { border-bottom: 0; } /* core's block table draws a 3px rule under the header row */
.lv-entry table { width: 100%; border-collapse: collapse; border: 0; font-size: 19px; line-height: 1.5; }
.lv-entry > table, .lv-entry :not(.lv-scroll) > table { display: block; overflow-x: auto; margin: 32px 0; border: 1px solid var(--c-hairline); border-radius: var(--radius-card); } /* unfiltered fallback */
.lv-entry :is(td, th) { min-width: 8.5em; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--c-hairline); text-align: left; vertical-align: top; }
.lv-entry tr:last-child > :is(td, th) { border-bottom: 0; }
.lv-entry :is(thead th, thead td) { background: var(--c-off); color: var(--c-head); font-weight: 700; border-bottom: 1px solid var(--c-edge); }
.lv-entry table:not(:has(thead)) tr:first-child > :is(td, th):has(> :is(b, strong), > p > :is(b, strong)) { background: var(--c-off); color: var(--c-head); }
.lv-entry tbody th { font-weight: 600; color: var(--c-head); }
.lv-entry :is(td, th) p { margin: 0 0 8px; }
.lv-entry :is(td, th) p:last-child { margin: 0; }
@media (forced-colors: active) { .lv-scroll, .lv-entry :is(td, th) { border-color: CanvasText; } }

/* Quotes, rules, code, embeds */
.lv-entry blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--c-accent); }
.lv-entry blockquote p { font: 500 24px/1.5 var(--font-body); color: var(--c-head); margin: 0 0 10px; }
.lv-entry blockquote :is(cite, footer) { display: block; font-size: var(--fs-ui); font-style: normal; font-weight: 600; color: var(--c-ink-soft); }
.lv-entry hr { border: 0; border-top: 1px solid var(--c-hairline); margin: 48px 0; max-width: 34em; }
.lv-entry :is(pre, code) { font-family: Consolas, "Courier New", monospace; font-size: 18px; }
.lv-entry pre { white-space: pre-wrap; background: var(--c-off); padding: 16px 20px; border-radius: var(--radius-ctl); }
.lv-entry :is(iframe, video, embed, object) { display: block; max-width: 100% !important; border: 0; border-radius: var(--radius-card); margin: 32px 0; }
.lv-entry :is(iframe[src*="youtu"], iframe[src*="vimeo"], iframe[srcdoc], .wp-block-embed iframe, video) { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
.lv-entry .wp-block-embed { margin: 32px 0; }
.lv-entry .wp-block-embed iframe, .lv-entry p > iframe:only-child { margin: 0; }
.lv-entry .wp-video { width: 100% !important; }
.lv-entry :is(iframe:focus, iframe.lv-focus) { outline: 3px solid var(--c-focus-ink); outline-offset: 2px; box-shadow: 0 0 0 8px var(--c-focus-halo); }
@media (forced-colors: active) { .lv-entry :is(iframe:focus, iframe.lv-focus) { outline-color: Highlight; } } /* lv-focus: assets/frames.js */

/* The Elementor template 9318 callout, re-registered (lv-act with a lead line instead of a heading) */
.lv-entry .lv-act { max-width: 34em; }
.lv-act .lv-act-t { margin: 0 0 4px; font-weight: 700; color: var(--c-head); }

/* ---------- lv-author: the live "About the Author" box, text only until Dr. Larsen's real photo exists ---------- */
.lv-author { max-width: 34em; margin-top: 72px; padding-top: 32px; border-top: 2px solid var(--c-head); }
.lv-author.has-photo { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 28px; max-width: calc(34em + 148px); }
.lv-author .ph { width: 120px; height: 150px; border-radius: var(--radius-card); }
.lv-author h2 { font: 700 21px/1.3 var(--font-body); margin-bottom: 4px; }
.lv-author .name { margin: 0 0 12px; }
.lv-author .name a { display: inline-flex; align-items: center; min-height: 48px; font: 700 24px/1.3 var(--font-body); color: var(--c-head); }
.lv-author .lv-quote { margin-top: 24px; }
.lv-author .lv-quote p { font-size: 22px; }

/* ---------- lv-relposts: three posts that share the primary topic, as the article's lv-posts list ---------- */
.lv-relposts { margin-top: 72px; }
.lv-relposts > h2 { font-size: 36px; margin-bottom: 20px; }
.lv-relposts .lv-posts { max-width: 34em; } /* the article measure: the column itself has none */
.lv-relposts .lv-posts h3 a { display: inline-block; padding: 10px 0; } /* a title link is a 48px target */
.lv-relposts .all { margin: 20px 0 0; }
@media (max-width: 767px) { .lv-relposts > h2 { font-size: 30px; } .lv-author, .lv-relposts { margin-top: 56px; } }

/* ---------- Rail: the call box shows beside the text on desktop only; under 1101px the consult band carries the call ---------- */
@media (max-width: 1100px) { .lv-postbody .rail-call { display: none; } .lv-postbody .lv-rail { grid-template-columns: 1fr; max-width: 34em; } }

/* ---------- Product suggestion ([product_suggestion_blog_page]): the theme's lv-related cards, price and arrow in the foot ---------- */
.bp-shop .lv-related .stage:has(.lv-media) { padding: 0; }
.bp-shop .lv-related .stage .lv-media { width: 100%; height: 100%; border-radius: 0; }
.bp-shop .lv-related .stage .lv-media .slot { padding: 12px 14px; }
.bp-shop .lv-related h3 { font: 700 21px/1.3 var(--font-body); }
@media (max-width: 560px) {
  .bp-shop .lv-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .bp-shop .lv-related .stage { height: 150px; padding: 12px; }
  .bp-shop .lv-card .body { padding: 16px 14px 12px; }
  .bp-shop .lv-related h3 { font-size: 19px; }
  .bp-shop .lv-media .slot span { font-size: 18px; }
}

/* ---------- Stress test only: the source labels between blocks ---------- */
.lv-src-rule { border: 0; border-top: 2px dashed var(--c-edge) !important; margin: 56px 0 8px !important; max-width: none !important; }
.lv-src { font-size: var(--fs-ui) !important; color: var(--c-ink-soft) !important; font-weight: 600; margin: 0 0 24px !important; }