/* =============================================================================
   Blog / Article typography — Synoligo
   -----------------------------------------------------------------------------
   Scoped to standard single blog posts (Scientific Articles + Industry Insights,
   the `post` type -> single.php -> body.single-post). News & Events use a
   separate template (single-news-events.php) and are NOT affected. Legal pages
   have their own stylesheet (legal.css).

   GOAL: style the semantic HTML the block editor produces (Heading / Paragraph /
   List / Image / Quote / Table blocks) so posts come out consistent and on-brand
   with no per-post styling. JS enhancements in blog.js (image lightbox, table
   scroll-fade, references) load on posts too.

   Uses the site's design tokens from style.css :root (--fs-*, --blue-primary),
   so future brand/type changes flow through automatically. Reuses Inter (the
   site-wide font) — no new fonts. Loaded after `main` (Bootstrap) so these
   rules win; kept at .single-post specificity so nothing leaks to other pages.

   AUTHORING NOTE: for a post to inherit all of this, write it with plain blocks
   and DON'T set custom font sizes/colors on blocks (inline styles override CSS).
   See docs/blog-authoring-guide.md.
   ============================================================================= */

.single-post {
  --blog-measure: 46rem;   /* ~736px, ~70–75 chars — comfortable reading width */
  --blog-wide:    60rem;   /* wider band for large media / tables               */
  --blog-ink:     #1f2b38; /* body & sub-heading ink                            */
  --blog-soft:    #5b6b7a; /* meta / captions                                   */
  --blog-rule:    #e2e8ee; /* hairlines                                         */
}

/* ---- Reading measure -------------------------------------------------------
   Center the article and constrain each top-level block to a readable width.
   Full-/wide-aligned media (Gutenberg .alignfull / .alignwide) opt out so
   figures and tables can breathe wider than the text column. ----------------- */
.single-post .entry-header,
.single-post .entry-content > * {
  max-width: var(--blog-measure);
  margin-inline: auto;
}
.single-post .entry-content > .alignwide { max-width: var(--blog-wide); }
.single-post .entry-content > .alignfull { max-width: none; }
.single-post .entry-content > .aligncenter { margin-inline: auto; }

/* ---- Post header ----------------------------------------------------------- */
.single-post .entry-header { margin-bottom: 2rem; }

.single-post .entry-header h1 {
  font-size: var(--fs-3xl);          /* 40px (title, dialed down from the 56px fluid scale) */
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f2740;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.single-post .entry-header .entry-meta { margin: 0; }
.single-post .entry-header .entry-meta small,
.single-post .entry-header .text-body-tertiary {
  font-size: var(--fs-sm);
  color: var(--blog-soft);
}

/* ---- Body copy ------------------------------------------------------------- */
.single-post .entry-content {
  font-size: var(--fs-md);           /* 18px */
  line-height: 1.75;
  color: var(--blog-ink);
}
.single-post .entry-content p { margin: 0 auto 1em; }

/* keep chemistry notation (¹⁸O, ³⁴S, etc.) from disturbing line spacing */
.single-post .entry-content sub,
.single-post .entry-content sup { line-height: 0; }

/* ---- Headings within the article ------------------------------------------
   Restores hierarchy (theme default rendered h2/h3 near-identical at 32px) and
   brand color, with generous top spacing so sections separate clearly.

   NOTE on !important: WordPress ships its preset font-size classes
   (.has-medium-font-size etc., applied when an author picks a size from the
   block toolbar) WITH !important. To keep the article heading scale consistent
   regardless of what size an author picked, font-size (and heading color) are
   forced here. Body copy is intentionally left flexible. ---------------------- */
.single-post .entry-content h2 {
  font-size: 1.75rem !important;         /* 28px — beats preset .has-*-font-size */
  line-height: 1.25;
  font-weight: 700;
  color: var(--blue-primary) !important; /* brand blue #0D5194 */
  margin: 0.55em auto;                   /* equal top & bottom */
}
.single-post .entry-content h3 {
  font-size: var(--fs-lg) !important;    /* 22px */
  line-height: 1.3;
  font-weight: 600;
  color: var(--blog-ink) !important;
  margin: 0.45em auto;                   /* equal top & bottom */
}
.single-post .entry-content h4 {
  font-size: 1.25rem !important;         /* 20px */
  line-height: 1.35;
  font-weight: 600;
  color: var(--blog-ink) !important;
  margin: 0.4em auto;                    /* equal top & bottom */
}
/* first heading shouldn't push a big gap under the header */
.single-post .entry-content > h2:first-child,
.single-post .entry-content > h3:first-child { margin-top: 0; }

/* ---- Links ----------------------------------------------------------------- */
.single-post .entry-content a {
  color: var(--blue-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.single-post .entry-content a:hover,
.single-post .entry-content a:focus-visible { color: #08365f; }

/* ---- Lists ----------------------------------------------------------------- */
.single-post .entry-content ul,
.single-post .entry-content ol { padding-left: 1.5em; margin: 0 auto 1.4em; }
.single-post .entry-content li { margin-bottom: 0.5em; }
.single-post .entry-content li::marker { color: var(--blue-primary); }
.single-post .entry-content li > ul,
.single-post .entry-content li > ol { margin: 0.5em 0 0; }

/* References list — tighter line spacing than body lists (tagged by blog.js) */
.single-post .entry-content ol.is-references li,
.single-post .entry-content ul.is-references li {
  line-height: 1.4;
  margin-bottom: 0.3em;
}

/* ---- Blockquote ------------------------------------------------------------ */
.single-post .entry-content blockquote,
.single-post .entry-content .wp-block-quote {
  border-left: 4px solid var(--blue-primary);
  background: #f4f8fc;
  padding: 1rem 1.25rem;
  margin: 1.6em auto;
  color: #33475b;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}
.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }

/* ---- Figures / images ------------------------------------------------------ */
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image { margin: 1.9em auto; text-align: center; }
.single-post .entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.single-post .entry-content figcaption,
.single-post .entry-content .wp-element-caption {
  font-size: var(--fs-sm);
  color: var(--blog-soft);
  text-align: center;
  margin-top: 0.6em;
}

/* ---- Image lightbox (click a content image to expand) ---------------------
   Behavior wired up in blog.js: content images get .is-zoomable and open in a
   full-screen overlay. Scoped to blog posts only. */
.single-post .entry-content img.is-zoomable { cursor: zoom-in; }
.blog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 32, 0.92);
}
.blog-lightbox.is-open { display: flex; }
.blog-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 95vw;
  max-height: 92vh;
}
.blog-lightbox__img {
  max-width: 95vw;
  max-height: 84vh;              /* leave room for the caption */
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  cursor: zoom-out;
}
.blog-lightbox__cap {
  margin-top: 12px;
  max-width: min(95vw, 820px);
  color: #d7dde3;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.blog-lightbox__cap a { color: #8FD3F8; }
.blog-lightbox__close {
  position: absolute;
  top: 14px;
  right: 20px;
  padding: 2px 12px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}
.blog-lightbox__close:hover,
.blog-lightbox__close:focus-visible { color: var(--green-light, #B8F4B6); }
@media (prefers-reduced-motion: no-preference) {
  .blog-lightbox.is-open { animation: blog-lightbox-fade 0.15s ease-out; }
  @keyframes blog-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Tables (data-heavy scientific posts) ---------------------------------
   Multi-column tables previously used WordPress's "fixed width cells"
   (.has-fixed-layout = equal columns) locked to the reading width, so a
   7-column table crammed every column to ~105px and headers stacked 3-4 lines
   tall. Instead: size columns to their content (auto layout), let the table
   take its natural width (each cell capped so long prose still wraps), and
   scroll horizontally inside the wrapper when it's wider than the column.
   A table that fits simply fills the column and doesn't scroll. ---------------- */
.single-post .entry-content .wp-block-table {
  display: flex;
  flex-direction: column;            /* lets the caption sit above the table (order:-1) */
  width: fit-content;                /* shrink to the table when it's narrow... */
  max-width: 100%;                   /* ...but grow to the full content column when wide */
  margin-inline: auto;
  overflow-x: auto !important;       /* wide tables scroll within the column. !important:
                                        a lower-level rule forced overflow:visible, so
                                        body{overflow-x:hidden} was CLIPPING the extra
                                        columns (esp. on mobile) instead of scrolling. */
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  scrollbar-width: thin;             /* Firefox: keep the scrollbar visible */
  scrollbar-color: #9db4c9 #eef2f6;
}
/* Keep the horizontal scrollbar visible so it's obvious the table scrolls —
   native overlay scrollbars auto-hide on macOS / iOS / Android (WebKit/Blink). */
.single-post .entry-content .wp-block-table::-webkit-scrollbar { height: 10px; }
.single-post .entry-content .wp-block-table::-webkit-scrollbar-track {
  background: #eef2f6; border-radius: 6px;
}
.single-post .entry-content .wp-block-table::-webkit-scrollbar-thumb {
  background: #9db4c9; border-radius: 6px;
}
.single-post .entry-content .wp-block-table::-webkit-scrollbar-thumb:hover { background: var(--blue-primary); }

/* Scroll-fade cue — blog.js wraps each table in .table-scroll and toggles the
   state classes. A soft fade appears on whichever edge still has hidden columns
   (and hides at the ends), so horizontal scrollability is obvious even where the
   scrollbar auto-hides (iOS/touch). Without JS there's simply no wrapper/fade. */
.single-post .entry-content > .table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.single-post .entry-content > .table-scroll > .wp-block-table { margin-inline: auto; }
.single-post .entry-content .table-scroll::before,
.single-post .entry-content .table-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;                 /* leave the scrollbar clear */
  width: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.single-post .entry-content .table-scroll::before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 88%);
}
.single-post .entry-content .table-scroll::after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 88%);
}
.single-post .entry-content .table-scroll.is-scrollable:not(.at-start)::before { opacity: 1; }
.single-post .entry-content .table-scroll.is-scrollable:not(.at-end)::after { opacity: 1; }
.single-post .entry-content table,
.single-post .entry-content table.has-fixed-layout {   /* beat WP's fixed-cells toggle */
  table-layout: auto !important;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 auto 1.6em;
}
.single-post .entry-content th,
.single-post .entry-content td {
  border: 1px solid var(--blog-rule);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  max-width: 34ch;          /* long cells wrap rather than stretching the table endlessly */
}
.single-post .entry-content thead th,
.single-post .entry-content thead td { background: var(--blue-primary); color: #fff; font-weight: 600; }
.single-post .entry-content tbody tr:nth-child(even) { background: #f5f8fb; }

/* Table caption: the WordPress table block's own caption field renders a
   <figcaption> after the table. Style it as a small, left-aligned note that
   stays fixed below the table (it doesn't scroll with a wide table). */
.single-post .entry-content .wp-block-table > figcaption,
.single-post .entry-content .wp-block-table > .wp-element-caption {
  order: -1;                    /* place caption above the table */
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--blog-soft);
  font-style: normal;
  margin: 0 0 0.65em;           /* space below the caption, above the table */
}

/* ---- Rule / code / misc ---------------------------------------------------- */
.single-post .entry-content hr {
  border: 0;
  border-top: 1px solid var(--blog-rule);
  margin: 1.2em auto;
  max-width: var(--blog-measure);
}
.single-post .entry-content code {
  background: #eef2f6;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ---- Footer / related / pagination (keep aligned, add breathing room) ------ */
.single-post .entry-footer { max-width: var(--blog-measure); margin: 3rem auto 0; }

/* ---- Previous / Next post navigation --------------------------------------
   Restyle Bootstrap's .pagination pills (which crammed the full post title into
   a joined pill) into two on-brand cards: an "Previous / Next" eyebrow label
   with an arrow, then the post title. CSS-only over the existing markup. ------- */
.single-post .entry-footer .pagination {
  display: flex !important;
  justify-content: space-between !important; /* beats Bootstrap .justify-content-center */
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid var(--blog-rule);
}
.single-post .entry-footer .page-item { display: flex; flex: 1 1 0; min-width: 0; }
.single-post .entry-footer .page-item:only-child { flex: 0 1 auto; max-width: 100%; }
/* a lone "Next" card sits on the right */
.single-post .entry-footer .page-item:only-child:has(.page-link[rel="next"]) { margin-left: auto; }

.single-post .entry-footer .page-link {
  display: block;
  width: 100%;
  margin: 0 !important;                 /* undo Bootstrap pill join (-1px) */
  background: #fff;
  border: 1px solid var(--blog-rule) !important;
  border-radius: 10px !important;       /* undo joined-pill radii */
  padding: 14px 18px !important;
  color: var(--blog-ink) !important;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.single-post .entry-footer .page-link:hover,
.single-post .entry-footer .page-link:focus-visible {
  border-color: var(--blue-primary) !important;
  color: var(--blue-primary) !important;
  box-shadow: 0 4px 14px rgba(13, 81, 148, .12);
  transform: translateY(-1px);
}
/* eyebrow label + arrow */
.single-post .entry-footer .page-link[rel="prev"]::before,
.single-post .entry-footer .page-link[rel="next"]::before {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 6px;
}
.single-post .entry-footer .page-link[rel="prev"]::before { content: "\2190  Previous"; }
.single-post .entry-footer .page-link[rel="next"] { text-align: right; }
.single-post .entry-footer .page-link[rel="next"]::before { content: "Next  \2192"; }

@media (max-width: 575.98px) {
  .single-post .entry-footer .pagination { flex-direction: column; }
  .single-post .entry-footer .page-item,
  .single-post .entry-footer .page-item:only-child { flex: 1 1 auto; max-width: 100%; margin-left: 0; }
  .single-post .entry-footer .page-link[rel="next"] { text-align: left; }
}

/* ---- Mobile ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .single-post .entry-content   { font-size: 1.0625rem; }  /* 17px */
  .single-post .entry-content h2 { margin-top: 1.7em; }
  .single-post .entry-content h3 { margin-top: 1.5em; }
}