/* Prose styles for blog posts and legal pages */
.rakt-prose {
  font-size: var(--rakt-text-base);
  line-height: 1.8;
  color: var(--rakt-gray-800);
}

.rakt-prose h2 {
  font-size: var(--rakt-text-2xl);
  font-weight: 700;
  margin: var(--rakt-space-xl) 0 var(--rakt-space-sm);
  color: var(--rakt-gray-900);
}

.rakt-prose h3 {
  font-size: var(--rakt-text-xl);
  font-weight: 600;
  margin: var(--rakt-space-lg) 0 var(--rakt-space-xs);
  color: var(--rakt-gray-900);
}

.rakt-prose p {
  margin-bottom: var(--rakt-space-sm);
}

.rakt-prose strong, .rakt-prose b {
  font-weight: 600;
  color: var(--rakt-gray-900);
}

.rakt-prose a {
  color: var(--rakt-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rakt-prose ul, .rakt-prose ol {
  margin: var(--rakt-space-sm) 0;
  padding-left: 1.5rem;
}

.rakt-prose li {
  margin-bottom: 0.375rem;
}

.rakt-prose img {
  border-radius: var(--rakt-radius-md);
  margin: var(--rakt-space-md) 0;
}

.rakt-prose blockquote {
  border-left: 3px solid var(--rakt-primary);
  padding-left: var(--rakt-space-md);
  margin: var(--rakt-space-md) 0;
  color: var(--rakt-gray-600);
  font-style: italic;
}

.rakt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--rakt-space-md) 0;
}

.rakt-prose th, .rakt-prose td {
  border: 1px solid var(--rakt-gray-200);
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: var(--rakt-text-sm);
}

.rakt-prose th {
  background: var(--rakt-gray-50);
  font-weight: 600;
}

/* Blog pagination. The links were 44px tall but only 10px wide, so a single
   digit gave nothing to aim at. */
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;   /* R_CTRL in the Elementor scale */
  text-decoration: none;
  font-size: var(--rakt-text-sm);
  font-weight: 600;
  color: var(--rakt-gray-800);
}
.nav-links a.page-numbers:hover { background: var(--rakt-gray-100, #F1F5F9); }
.nav-links .page-numbers.current {
  background: var(--rakt-primary);
  color: #fff;
}

/* ── Breadcrumb trail ──────────────────────────────────────────
   Deliberately quiet. Its jobs are to let a reader two levels into /feature/
   climb back out, and to give Google a labelled hierarchy to print under the
   result instead of the raw URL. Neither job wants attention, and a trail set
   at body size competes with the h1 immediately below it.

   The container matches Elementor's page width so the trail lines up with the
   hero text underneath rather than floating at the viewport edge. */
.rakt-crumbs {
  background: var(--rakt-off-white);
  border-bottom: 1px solid var(--rakt-line);
  font-size: 13.5px;   /* the site's minimum; see the type floor in verify.js */
  line-height: 1.5;
}
.rakt-crumbs__in {
  max-width: var(--rakt-container-max);
  margin: 0 auto;
  padding: 11px 20px;
  color: var(--rakt-muted);
}
/* The trail's links were 16px tall on a phone, about 2.5mm of target. They are
   exempt from the 24px minimum on paper, because they are inline and Rank Math
   wraps the trail in a <p> — but the reason for that exemption is that padding a
   link inside a paragraph forces the lines around it apart, and a breadcrumb
   trail is one line with no prose around it to disturb. Vertical padding on an
   inline box grows the hit area without touching the line box, so this costs no
   layout at all. */
.rakt-crumbs a { color: var(--rakt-muted); text-decoration: none; padding: 5px 0; }
.rakt-crumbs a:hover { color: var(--rakt-primary); text-decoration: underline; }
/* The last crumb is the current page and is not a link. Giving it the ink
   colour is what makes the trail readable as "you are here" at a glance. */
.rakt-crumbs .last { color: var(--rakt-ink); font-weight: 600; }
.rakt-crumbs .separator { padding: 0 7px; opacity: 0.55; }

/* A dark hero directly under a light trail was a hard seam across the page.
   Legal pages render the trail inside the prose container instead, where it
   needs no chrome of its own. */
.rakt-prose-page .rakt-crumbs { background: transparent; border-bottom: 0; }
.rakt-prose-page .rakt-crumbs__in { padding: 0 0 18px; }

/* ── In-post product link ──────────────────────────────────────
   The one place a post is allowed to sell. Bordered rather than filled so it
   reads as an aside and not as the end of the article. */
.rakt-postcta {
  margin: var(--rakt-space-2xl) 0 0;
  padding: 22px 24px;
  border: 1px solid var(--rakt-line);
  border-left: 3px solid var(--rakt-primary);
  border-radius: var(--rakt-radius-md);
  background: var(--rakt-off-white);
}
.rakt-postcta__k {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rakt-primary);
}
.rakt-postcta__t { margin: 0 0 8px; font-size: 17.5px; font-weight: 650; line-height: 1.4; }
.rakt-postcta__t a { color: var(--rakt-ink); text-decoration: none; }
.rakt-postcta__t a:hover { color: var(--rakt-primary); text-decoration: underline; }
.rakt-postcta__s { margin: 0; font-size: 14px; color: var(--rakt-muted); line-height: 1.55; }
.rakt-postcta__s a { color: var(--rakt-primary); font-weight: 600; }

/* ── Byline ──────────────────────────────────────────────────────
   Sits between the category/date line and the h1. Quieter than the h1 and a step
   louder than the metadata above it, because the name is the part a reader
   assessing a health article actually looks for. */
.rakt-byline {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--rakt-slate);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}
.rakt-byline a {
  color: var(--rakt-ink);
  font-weight: 600;
  text-decoration: none;
}
.rakt-byline a:hover { color: var(--rakt-primary); text-decoration: underline; }
.rakt-byline__role {
  color: var(--rakt-muted);
  font-size: 13.5px;
}
/* A separator only when both sit on the same line. Rendered as a leading dot on
   the role rather than as a character in the markup, so it disappears with the
   role and does not get read out as punctuation. */
.rakt-byline__role::before {
  content: "· ";
  color: var(--rakt-line);
}

/* ── Choosing blood bank software ───────────────────────────────
   Buyer-intent pages, styled deliberately unlike "Related reading" below it.
   The two blocks sit next to each other and point at different kinds of thing —
   more articles versus the pages that help you decide — so making them look
   alike would flatten that into one undifferentiated pile of eight links.

   Cards on a tinted surface rather than a bordered list: the reader has finished
   the article, and this is the block that should still read as an offer. */
.rakt-guides {
  margin-top: var(--rakt-space-2xl);
  padding: 20px 22px;
  border: 1px solid var(--rakt-line);
  border-radius: var(--rakt-radius-md);
  background: var(--rakt-off-white);
}
.rakt-guides h2 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rakt-muted);
  margin: 0 0 12px;
}
.rakt-guides ul { list-style: none; margin: 0; padding: 0; }
.rakt-guides li + li { margin-top: 2px; }
.rakt-guides li a {
  display: block;
  padding: 9px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rakt-ink);
  text-decoration: none;
}
.rakt-guides li a:hover { color: var(--rakt-primary); text-decoration: underline; }
.rakt-guides li a span { color: var(--rakt-primary); }

/* ── Related reading ───────────────────────────────────────────── */
.rakt-related-posts { margin-top: var(--rakt-space-2xl); }
.rakt-related-posts h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rakt-muted);
  margin: 0 0 14px;
}
.rakt-related-posts ul { list-style: none; margin: 0; padding: 0; }
.rakt-related-posts li { border-top: 1px solid var(--rakt-line); }
.rakt-related-posts li:last-child { border-bottom: 1px solid var(--rakt-line); }
.rakt-related-posts li a {
  display: block;
  /* 14px vertical on a 1.45 line box clears the 24px minimum target height
     without the list turning into buttons. */
  padding: 14px 0;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.45;
  color: var(--rakt-ink);
  text-decoration: none;
}
.rakt-related-posts li a:hover { color: var(--rakt-primary); }
.rakt-related-posts__all { margin: 16px 0 0; font-size: 14px; }
.rakt-related-posts__all a { color: var(--rakt-primary); font-weight: 600; }

.rakt-postnav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: var(--rakt-space-2xl);
  padding-top: var(--rakt-space-lg);
  border-top: 1px solid var(--rakt-line);
  font-size: 14px;
}
.rakt-postnav a { color: var(--rakt-muted); text-decoration: none; }
.rakt-postnav a:hover { color: var(--rakt-primary); }

/* ── Category archive introduction ─────────────────────────────────
   Sits below the post grid on /blog/category/*/. Constrained to a reading
   measure and separated by a rule, so it reads as editorial context rather than
   as another card in the grid above it. */
.rakt-catintro {
  max-width: 720px;
  margin: var(--rakt-space-2xl) auto 0;
  padding-top: var(--rakt-space-xl);
  border-top: 1px solid var(--rakt-line);
}
.rakt-catintro h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rakt-muted);
  margin: 0 0 16px;
}
.rakt-catintro p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rakt-gray-600);
  margin: 0 0 16px;
}
.rakt-catintro p:last-of-type { margin-bottom: 0; }
.rakt-catintro__links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.rakt-catintro__links li { border-top: 1px solid var(--rakt-line); }
.rakt-catintro__links li:last-child { border-bottom: 1px solid var(--rakt-line); }
.rakt-catintro__links a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 550;
  color: var(--rakt-ink);
  text-decoration: none;
}
.rakt-catintro__links a:hover { color: var(--rakt-primary); }
.rakt-catintro__links a span { color: var(--rakt-primary); }