/* =====================================================================
   READING BASELINE — do not remove.
   These rules exist because Site Editor / Global Styles edits are stored
   in the database, are not version controlled, and have repeatedly been
   changed in ways that break readability. This file is git-backed and
   loads last, so it holds the floor no matter what the editor is set to.

   The rule that matters most: the space BETWEEN paragraphs must always be
   larger than the space between lines INSIDE a paragraph. When it is not,
   body copy reads as one solid block. (Observed 2026-08-20: paragraph
   margin 16px against a 40px line-height.)
   ===================================================================== */

/* --- paragraph rhythm ------------------------------------------------ */
/* html body prefix: an inline stylesheet on the page sets
   `.wp-block-post-content p { margin-bottom:0 !important; line-height:40px }`.
   Equal importance and equal specificity means load order decides, which is
   fragile. Outranking it explicitly (0,1,3 vs 0,1,1) makes this deterministic. */
html body .wp-block-post-content p,
html body article .entry-content p,
html body main .wp-block-post-content p,
html body .entry-content > p {
  /* Tightening the leading and widening the gap TOGETHER is the point. At
     line-height 1.7 with a 1.6em margin the ratio was 1.06 - the paragraph
     break was 2px larger than the gap between lines, which reads as no break
     at all. Measured on the live page 2026-08-20. Target ratio is ~1.35. */
  /* Editorial spacing. The line box stays tight enough that a paragraph
     reads as one object, and the gap between paragraphs is close to double
     it, so the break is unmistakable rather than merely present.
     20px type -> 33px line box, 56px gap, ratio 1.70. */
  font-size: 21px !important;
  line-height: 1.75 !important;    /* 37px line box at 21px */
  margin-top: 0 !important;
  margin-bottom: 2.2em !important; /* 46px - keeps the break ahead of the leading */
}

/* --- comfortable measure --------------------------------------------- */
/* Measure. The strongest readability variable and the one that was missing:
   line length was unconstrained, so on a wide monitor lines ran past 100
   characters and the eye loses its place on the return sweep.
   34em at 21px is about 714px, roughly 66 characters, which is the middle of
   the 45-75 range. !important and an html body prefix because article.css sets
   competing max-width rules the same way. */
html body .wp-block-post-content > p,
html body .wp-block-post-content > ul,
html body .wp-block-post-content > ol,
html body .wp-block-post-content > h2,
html body .wp-block-post-content > h3,
html body .entry-content > p,
html body .entry-content > ul,
html body .entry-content > ol {
  max-width: 34em !important;
}

/* --- headings need air above, less below ----------------------------- */
.wp-block-post-content h2 { margin-top: 2.6em !important; margin-bottom: .6em !important; line-height: 1.3 !important; }
.wp-block-post-content h3 { margin-top: 2em !important; margin-bottom: .5em !important; line-height: 1.35 !important; }

/* --- list items should breathe like paragraphs ----------------------- */
.wp-block-post-content li { line-height: 1.75 !important; margin-bottom: .5em; }

/* --- corners: nothing ships square ----------------------------------- */
/* Minimum 2px everywhere, 8px for real surfaces. Circles (avatars) and
   anything already rounded further are left alone.                      */
main.wp-block-group,
.wp-block-post-content,
.wp-block-table table,
.wp-block-quote,
.wp-block-code,
.wp-block-pullquote { border-radius: 8px; }

.wp-block-post-content img,
.wp-block-image img,
figure img,
.wp-block-embed iframe,
.wp-block-video video { border-radius: 8px; }

/* keep genuinely circular things circular */
img[class*="avatar"], .avatar, img[style*="border-radius: 50%"] { border-radius: 50% !important; }

/* logos and inline icons stay square - rounding them looks like a bug */
.wp-block-site-logo img, img[class*="logo"], img[width="34"], img[width="24"] { border-radius: 0 !important; }

/* --- mobile ---------------------------------------------------------- */
@media (max-width: 781px) {
  html body .wp-block-post-content p, html body .entry-content > p { font-size: 18px !important; line-height: 1.7 !important; margin-bottom: 2.1em !important; }
  .wp-block-post-content h2 { margin-top: 1.6em !important; }
}


/* --- summarize row, sitting under the breadcrumb ---------------------- */
.rank-math-breadcrumb + .fnx-summarize,
.fnx-summarize{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:10px 0 4px; padding:0;
  border:0;
}
.fnx-summarize-label{ font-size:13px; font-weight:600; color:#6b6b73; letter-spacing:.01em; }
.fnx-summarize-links{ display:flex; align-items:center; gap:6px; }
.fnx-summarize-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid #e3e1e8; border-radius:8px;
  color:#5a5a5a; text-decoration:none; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.fnx-summarize-link:hover{ border-color:#c9c6d2; box-shadow:0 2px 6px rgba(23,18,31,.10); }
.fnx-summarize-link svg{ display:block; }
@media (max-width:600px){
  .fnx-summarize{ gap:8px; margin:8px 0 2px; }
  .fnx-summarize-label{ font-size:12px; }
}

/* --- <br>-separated paragraphs --------------------------------------
   A lot of posts contain one <p> holding several logical paragraphs
   separated by <br>. Example measured 2026-08-20 on
   /what-is-server-side-ad-insertion-ssai/: a single <p> of 1,281
   characters with 4 <br> tags inside it, i.e. 5 paragraphs in one node.

   Paragraph margins cannot help there - the margin applies once, to the
   wrapper. Turning the <br> itself into a block with space below gives the
   break its air without touching the content.

   This is a mitigation, not a fix. The content should be split into real
   paragraphs; see tools/scan-content-quality.py for which posts need it. */
html body .wp-block-post-content p br,
html body .entry-content p br{
  content: "";
  display: block;
  height: 0;
  margin-bottom: 1.5em;
}
@media (max-width: 781px){
  html body .wp-block-post-content p br,
  html body .entry-content p br{ margin-bottom: 1.25em; }
}