/* 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; }

/* ── 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); }