/* =========================================================
   BluePeak — Insights / blog article styles
   File:   wp-content/themes/salient-child/css/blog.css
   Loaded: single blog posts only (see functions.php snippet)

   Colors follow the case study pages: navy H2s, blue quote
   names, and card top bars that rotate blue > green > purple.

   Every value here is copied from the site's existing
   Additional CSS so articles match the rest of the site:
     Tables      = table.bp-table          (section 16)
     Pull quote  = testimonial blockquote  (section 12)
     Cards       = div.bp-card.bp-card-bar (section 8)
     Card labels = .bp-eyebrow             (section 6)
     Big numbers = .bp-stat-number         (section 10)

   The difference: nothing here needs a class in the post,
   except the card rows:
     .bp-tiles     card row (timeline, services, etc.)
     .bp-tiles-2   add to .bp-tiles for a 2 x 2 layout
   ========================================================= */


/* ---------- Article headings (match case study pages) ---------- */
.single-post .wpb_text_column h2 {
  color: var(--bp-navy);   /* theme light blue fails contrast on white */
}


/* ---------- Tables (matches table.bp-table) ---------- */
.single-post .wpb_text_column table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  margin: 1.5rem 0 0.5rem;
  font-family: "DM Sans", Helvetica, sans-serif;
  background: var(--bp-white);
}
.single-post .wpb_text_column table th,
.single-post .wpb_text_column table td {
  border: 0;
  border-bottom: 1px solid var(--bp-mid-gray);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--bp-text);
  text-align: left;
  vertical-align: top;
}
.single-post .wpb_text_column thead th {
  background: var(--bp-navy);
  color: var(--bp-white);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03rem;
  border-bottom: 0;
  white-space: nowrap;
}
.single-post .wpb_text_column tbody th {
  font-weight: 700;
  color: var(--bp-navy);
}
.single-post .wpb_text_column tbody tr:nth-child(even) th,
.single-post .wpb_text_column tbody tr:nth-child(even) td {
  background: var(--bp-off-white);
}

/* Note or source line directly under a table */
.single-post .wpb_text_column table + p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bp-gray);
  margin-bottom: 2rem;
}


/* ---------- Pull quote (matches the testimonial blockquote) ---------- */
.single-post .wpb_text_column blockquote {
  position: relative;
  margin: 2.5rem 3rem 2rem;
  padding: 0 0 0 calc(2.4rem + 0.75rem);
  border: 0;
  background: none;
  font-style: normal;
}
.single-post .wpb_text_column blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Roboto Slab", "DM Sans", sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--bp-blue);
}
.single-post .wpb_text_column blockquote p {
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--bp-navy);
}
.single-post .wpb_text_column blockquote footer {
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  color: var(--bp-blue);
}


/* ---------- Card rows (match div.bp-card.bp-card-bar) ---------- */
.single-post .wpb_text_column .bp-tiles {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;   /* one row, however many cards */
  grid-auto-columns: 1fr;
}
.single-post .wpb_text_column .bp-tiles.bp-tiles-2 {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
}
.single-post .wpb_text_column .bp-tiles > li {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
  background: var(--bp-white);
  border: 1px solid var(--bp-mid-gray);
  border-top: 4px solid var(--bp-blue);
  border-radius: 0 0 0.625rem 0.625rem;
}
.single-post .wpb_text_column .bp-tiles > li { list-style: none !important; }
.single-post .wpb_text_column .bp-tiles > li::marker { content: none; }
.single-post .wpb_text_column .bp-tiles > li::before { content: none; } /* no theme bullets */

/* Top bar colors rotate like the case study cards: blue, green, purple, blue */
.single-post .wpb_text_column .bp-tiles > li:nth-child(4n+2) { border-top-color: var(--bp-green); }
.single-post .wpb_text_column .bp-tiles > li:nth-child(4n+3) { border-top-color: var(--bp-purple); }

/* Card title (framework cards) */
.single-post .wpb_text_column .bp-tiles h3 {
  font-family: "DM Sans", Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.03rem;
  color: var(--bp-navy);
  margin: 0 0 0.625rem;
  padding: 0;
}
/* Big number or year + small label (timeline, services) */
.single-post .wpb_text_column .bp-tiles h3:has(span) {
  font-family: "Roboto Slab", "DM Sans", sans-serif;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}
.single-post .wpb_text_column .bp-tiles h3 span {   /* = .bp-eyebrow */
  display: block;
  margin-top: 0.375rem;
  font-family: "DM Sans", Helvetica, sans-serif;
  font-size: 0.75rem;
  line-height: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: var(--bp-blue);
}
.single-post .wpb_text_column .bp-tiles p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--bp-text);
  margin: 0 0 0.5rem;
  padding: 0;
}
.single-post .wpb_text_column .bp-tiles p:last-child { margin-bottom: 0; }
.single-post .wpb_text_column .bp-tiles p strong { color: var(--bp-navy); }


/* ---------- Tablet (Salient's 999px breakpoint) ---------- */
@media only screen and (max-width: 999px) {
  .single-post .wpb_text_column .bp-tiles {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Phone (Salient's 690px breakpoint) ---------- */
@media only screen and (max-width: 690px) {
  .single-post .wpb_text_column table {
    display: block;          /* wide tables scroll sideways */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .single-post .wpb_text_column .bp-tiles,
  .single-post .wpb_text_column .bp-tiles.bp-tiles-2 {
    grid-template-columns: 1fr;
  }
  .single-post .wpb_text_column blockquote {
    margin: 2rem 0;
  }
  .single-post .wpb_text_column blockquote::before { font-size: 4rem; }
  .single-post .wpb_text_column blockquote p {
    font-size: 1.15rem;
  }
}


/* ---------- Numbered steps in articles ----------
   Uses the site's existing .bp-numbered-article / .bp-step
   classes (Additional CSS, section 15). These rules only
   size the H3 inside a step so it lines up with the circle. */
.single-post .bp-step-content h3 {
  font-family: "Roboto Slab", "DM Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--bp-navy);
  margin: 10px 0 10px;
}
.single-post .bp-step-content p { margin: 0 0 0.5rem; }


/* ---------- Numbered cards (.bp-tiles-num) ----------
   Add bp-tiles-num to a .bp-tiles list to get a large
   numbered circle inside each card, matching the case
   study steps (.bp-step-num, circle variant). Numbers
   count automatically, so don't type them in the HTML. */
.single-post .wpb_text_column .bp-tiles-num { counter-reset: bp-tile; }
.single-post .wpb_text_column .bp-tiles-num > li { counter-increment: bp-tile; }
.single-post .wpb_text_column .bp-tiles-num > li::before {
  content: counter(bp-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--bp-blue);
  color: #ffffff;
  font-family: "DM Sans", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(27, 58, 92, 0.2);
}


/* ---------- Sources line (.bp-sources) ----------
   Put class="bp-sources" on the final sources paragraph. */
.single-post .wpb_text_column p.bp-sources {
  font-size: 0.8125rem;   /* same as the source note under a table */
  line-height: 1.5;
  color: var(--bp-gray);
  margin-top: 2rem;
}

@media only screen and (max-width: 690px) {
  .single-post .wpb_text_column .bp-callout-cta { padding: 1.5rem; }
}


/* ---------- Stat row (.bp-stats) ----------
   Wraps the site's existing .bp-stat blocks (Additional CSS,
   section 10) in a row that stacks on phones. */
.single-post .wpb_text_column .bp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 across on desktop and tablet */
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--bp-mid-gray);
  border-bottom: 1px solid var(--bp-mid-gray);
}
.single-post .wpb_text_column .bp-stat { padding: 0; }
.single-post .wpb_text_column .bp-stat .bp-stat-label { line-height: 1.4; }

/* ---------- Spacing for shared components inside articles ---------- */
.single-post .wpb_text_column .bp-callout > p:last-child { margin-bottom: 0; }
.single-post .wpb_text_column ul.bp-checklist { margin: 1.25rem 0 1.75rem; }
.single-post .wpb_text_column ul.bp-checklist > li { list-style: none !important; }
.single-post .wpb_text_column ul.bp-checklist > li strong { color: var(--bp-navy); }
.single-post .wpb_text_column table span.bp-tag { white-space: nowrap; }


/* ---------- Refinements ---------- */

/* Lead paragraph: navy, tighter lines */
.single-post .wpb_text_column p.bp-lead {
  color: var(--bp-navy);
  line-height: 1.35;
  margin-bottom: 1.5rem;
}

/* The sentence right below a stat row carries the point */
.single-post .wpb_text_column .bp-stats + p {
  font-weight: 700;
  color: var(--bp-navy);
  font-size: 1rem;
  line-height: 1.6;
}

/* Status-pill column needs room so pills don't wrap */
.single-post .wpb_text_column td:has(.bp-tag) { width: 11rem; }

/* Numbered steps: slightly larger sub-head line */
.single-post .bp-step-content p strong {
  font-size: 1.0625rem;
  color: var(--bp-navy);
}

/* A checklist inside a light blue callout */
.single-post .wpb_text_column .bp-callout ul.bp-checklist { margin: 0; }
.single-post .wpb_text_column .bp-callout ul.bp-checklist > li:last-child { padding-bottom: 0; }

/* Card row inside the closing box: 3 per row, last row stretches */
.single-post .wpb_text_column .bp-callout-cta .bp-tiles {
  grid-auto-flow: row;
  grid-template-columns: repeat(6, 1fr);
}
.single-post .wpb_text_column .bp-callout-cta .bp-tiles > li { grid-column: span 2; }
.single-post .wpb_text_column .bp-callout-cta .bp-tiles > li:nth-child(4):nth-last-child(2),
.single-post .wpb_text_column .bp-callout-cta .bp-tiles > li:nth-child(5):nth-last-child(1) {
  grid-column: span 3;
}

@media only screen and (max-width: 690px) {
  .single-post .wpb_text_column .bp-stats { grid-template-columns: 1fr; }
  .single-post .wpb_text_column .bp-callout-cta .bp-tiles,
  .single-post .wpb_text_column .bp-callout-cta .bp-tiles > li,
  .single-post .wpb_text_column .bp-callout-cta .bp-tiles > li:nth-child(4):nth-last-child(2),
  .single-post .wpb_text_column .bp-callout-cta .bp-tiles > li:nth-child(5):nth-last-child(1) {
    grid-template-columns: 1fr;
    grid-column: auto;
  }
}


/* ---------- Stat labels: bold navy, not grey ---------- */
.single-post .wpb_text_column .bp-stat .bp-stat-label {
  color: var(--bp-navy);
  font-weight: 700;
  text-wrap: balance;   /* even line breaks on short labels */
}

/* ---------- Bulleted lists: one bullet, not two ----------
   .bp-list draws its own blue dot, so switch off the
   theme's marker as well. */
.single-post .wpb_text_column ul.bp-list,
.single-post .wpb_text_column ul.bp-checklist {
  list-style: none !important;
}
.single-post .wpb_text_column ul.bp-list > li,
.single-post .wpb_text_column ul.bp-checklist > li {
  list-style: none !important;
}
.single-post .wpb_text_column ul.bp-list > li::marker,
.single-post .wpb_text_column ul.bp-checklist > li::marker {
  content: none;
}


/* ---------- Spacing and color tuning ---------- */

/* Bulleted lists: navy text, tighter above, more room below */
.single-post .wpb_text_column ul.bp-list,
.single-post .wpb_text_column ul.bp-checklist {
  margin: 0.5rem 0 1.75rem;
  padding-left: 0;
}
.single-post .wpb_text_column ul.bp-list > li,
.single-post .wpb_text_column ul.bp-checklist > li {
  color: var(--bp-navy);
  padding-bottom: 0.625rem;
}
.single-post .wpb_text_column ul.bp-list > li:last-child,
.single-post .wpb_text_column ul.bp-checklist > li:last-child {
  padding-bottom: 0;
}
/* On navy, the same lists reverse to white */
.single-post .wpb_text_column .bp-callout-cta ul > li { color: var(--bp-white); }

/* Light blue callout: closer to the paragraph above it */
.single-post .wpb_text_column .bp-callout {
  margin: 0.5rem 0 1.75rem;
}
.single-post .wpb_text_column .bp-callout > p:last-child { margin-bottom: 0; padding-bottom: 0; }

/* Pull quote: closer to its lead-in line */
.single-post .wpb_text_column blockquote {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
}
.single-post .wpb_text_column p:has(+ blockquote) {
  margin-bottom: 0.25rem;
  padding-bottom: 0;
}

/* ---------- Navy boxes, wherever the class sits ----------
   bp-callout-cta may be on the WPBakery ROW (with the text
   column nested inside it) or on a div inside the text
   column, so these selectors don't assume either order.
   bp-bg-navy is covered too. Keep this block LAST so it
   beats the article-wide navy H2 rule. */
.single-post .bp-callout-cta h2,
.single-post .bp-bg-navy h2 {
  color: var(--bp-blue-light);
  margin-top: 0;
}
.single-post .bp-callout-cta p,
.single-post .bp-callout-cta li,
.single-post .bp-bg-navy p,
.single-post .bp-bg-navy li {
  color: var(--bp-white);
}
.single-post .bp-callout-cta p strong,
.single-post .bp-bg-navy p strong { color: var(--bp-white); }
.single-post .bp-callout-cta a,
.single-post .bp-bg-navy a {
  color: var(--bp-white);
  text-decoration: underline;
}
/* Salient's CTA button keeps its own styling */
.single-post .bp-callout-cta .nectar-cta a,
.single-post .bp-bg-navy .nectar-cta a { text-decoration: none; }
/* White cards inside a navy box stay dark */
.single-post .bp-callout-cta .bp-tiles > li,
.single-post .bp-bg-navy .bp-tiles > li { color: var(--bp-text); }
.single-post .bp-callout-cta .bp-tiles p,
.single-post .bp-bg-navy .bp-tiles p { color: var(--bp-text); }
.single-post .bp-callout-cta .bp-tiles h3,
.single-post .bp-bg-navy .bp-tiles h3 { color: var(--bp-navy); }