/* ============================================================
   blog-article.css
   Premium reading layout for blog post pages (blog-info.blade.php)

   ADDITIVE ONLY. Load AFTER blog.min.css. Nothing here overwrites
   an existing file — to roll back, remove the <link> tag.

   Scope: .BlogInner  (the post page wrapper)
   Built: 2026-08-19
   ============================================================ */

:root {
  --art-ink:        #1a1a1a;
  --art-ink-soft:   #4a4a4a;
  --art-muted:      #6b6b6b;
  --art-crimson:    #a40000;
  --art-crimson-dk: #7d0000;
  --art-tint:       #f9f2f2;
  --art-rule:       #e6dcdc;
  --art-soft:       #fbf8f8;
  --art-measure:    68ch;
}

/* ─────────────── 1 · MEASURE ───────────────
   The single biggest change. Prose caps at ~68 characters;
   tables, images and figures stay full width. */

.CmsPage > p,
.CmsPage > ul,
.CmsPage > ol,
.CmsPage > h2,
.CmsPage > h3,
.CmsPage > h4 {
  max-width: var(--art-measure);
}

.CmsPage {
  color: var(--art-ink);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.CmsPage > p {
  margin: 0 0 1.35em;
}

/* ─────────────── 2 · HEADINGS ───────────────
   Sentence case, generous space above, tight below —
   headings should belong to the text that follows them. */

.CmsPage h2 {
  text-transform: none;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.28;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: var(--art-ink);
  margin: 3.2em 0 0.85em;
  padding-top: 1.6em;
  border-top: 1px solid var(--art-rule);
}

.CmsPage h2:first-of-type {
  margin-top: 2.2em;
}

.CmsPage h3 {
  text-transform: none;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--art-ink);
  margin: 2.2em 0 0.6em;
}

/* ─────────────── 3 · ANSWER CAPSULE ───────────────
   Every section opens with "The short answer." — the most
   extracted, most skimmed content on the page. Give it a panel.
   Targets the first paragraph after each H2 when it opens
   with a <strong>. */

.CmsPage h2 + p > strong:first-child {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--art-crimson-dk);
  margin-bottom: 0.45em;
}

.CmsPage h2 + p:has(> strong:first-child) {
  background: var(--art-tint);
  border-left: 4px solid var(--art-crimson);
  border-radius: 4px;
  padding: 1.15em 1.4em;
  margin-bottom: 1.9em;
  font-size: 1.09rem;
  line-height: 1.62;
}

/* Fallback for browsers without :has() — still reads as emphasis */
@supports not (selector(:has(*))) {
  .CmsPage h2 + p {
    border-left: 4px solid var(--art-crimson);
    padding-left: 1.2em;
  }
}

/* ─────────────── 4 · DISCLOSURE CALLOUT ───────────────
   The second paragraph of the article names the conflict of
   interest. It should look deliberate, not incidental. */

.CmsPage > p:nth-of-type(2) {
  background: var(--art-soft);
  border: 1px solid var(--art-rule);
  border-top: 3px solid var(--art-crimson);
  border-radius: 4px;
  padding: 1.2em 1.4em;
  font-size: 0.97rem;
  color: var(--art-ink-soft);
  margin-bottom: 2.4em;
}

/* ─────────────── 5 · TABLES ───────────────
   On a pricing report the tables are the product. */

.CmsPage table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0 2.4em;
  font-size: 0.95rem;
  border: 1px solid var(--art-rule);
  border-radius: 6px;
  overflow: hidden;
}

.CmsPage thead th {
  background: var(--art-tint);
  color: var(--art-ink);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.95em 1.1em;
  border-bottom: 2px solid var(--art-rule);
}

.CmsPage tbody td {
  padding: 0.95em 1.1em;
  border-bottom: 1px solid var(--art-rule);
  vertical-align: top;
  line-height: 1.55;
}

.CmsPage tbody tr:nth-child(even) {
  background: var(--art-soft);
}

.CmsPage tbody tr:last-child td {
  border-bottom: 0;
}

/* Horizontal scroll rather than a squashed table on small screens */
@media (max-width: 767px) {
  .CmsPage table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─────────────── 6 · FIGURES AND IMAGES ─────────────── */

.CmsPage figure {
  margin: 2.6em 0;
}

.CmsPage figure img,
.CmsPage > p > img {
  width: 100%;
  height: auto;
  border: 1px solid var(--art-rule);
  border-radius: 6px;
  display: block;
}

.CmsPage figcaption {
  margin-top: 0.7em;
  font-size: 0.85rem;
  color: var(--art-muted);
  text-align: center;
  font-style: normal;
}

/* ─────────────── 7 · LISTS ─────────────── */

.CmsPage ul,
.CmsPage ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}

.CmsPage li {
  margin-bottom: 0.55em;
  line-height: 1.7;
}

.CmsPage li::marker {
  color: var(--art-crimson);
}

/* ─────────────── 8 · LINKS ─────────────── */

.CmsPage p > a,
.CmsPage li > a,
.CmsPage td > a {
  color: var(--art-crimson-dk);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease;
}

.CmsPage p > a:hover,
.CmsPage li > a:hover,
.CmsPage td > a:hover {
  text-decoration-thickness: 2px;
}

/* ─────────────── 9 · TITLE BLOCK ─────────────── */

.BlogInner .Heading, section.Home .Heading {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 0.5em;
}

/* ─────────────── 10 · SIDEBAR ───────────────
   Table of contents leads; the other two blocks recede. */

.rightp .TableContent {
  position: sticky;
  top: 24px;
}

.rightp .TableContent h3,
.rightp .LatestBlog h3,
.rightp .BlogCategory h3 {
  text-transform: none;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--art-muted);
  font-weight: 700;
}

.rightp .TableContent ol li a {
  line-height: 1.45;
  display: inline-block;
  padding: 0.15em 0;
}

.rightp .LatestBlog,
.rightp .BlogCategory {
  opacity: 0.82;
  font-size: 0.92rem;
}

@media (max-width: 991px) {
  .rightp .TableContent { position: static; }
}

/* ─────────────── 11 · PRINT ───────────────
   Buyers print pricing reports for internal approval. */

@media print {
  .rightp .TableContent,
  .rightp .LatestBlog,
  .rightp .BlogCategory,
  .SocialIcons,
  .relatedBlogSec { display: none !important; }

  .CmsPage > p,
  .CmsPage > ul,
  .CmsPage > h2 { max-width: none; }

  .CmsPage h2 { break-after: avoid; }
  .CmsPage table,
  .CmsPage figure { break-inside: avoid; }
}

/* _base.scss uppercases all headings globally — override for article body */
.CmsPage h2,
.CmsPage h3,
.CmsPage h4 { text-transform: none !important; }

.CmsPage > p,
.CmsPage > ul,
.CmsPage > ol { max-width: 68ch !important; }