/* ============================================================
   SRJ blog post brand styling
   Loaded only on single posts (is_singular('post')) via
   srj_enqueue_blog_post_styles() in functions.php.

   Purpose: bring published and future Gutenberg blog posts onto
   the corporate brand — Lora headlines in navy, Poppins body,
   orange accents, white page — without touching any other template.

   Scope: every rule is prefixed with .page-hero--post or
   .longform--post, the two modifier classes added to single.php.
   Because .longform is shared with other long-form pages, the
   modifier keeps this styling on blog posts only.

   Colors: exact brand hexes are used directly here, NOT the :root
   --navy / --orange tokens, which still resolve to the legacy
   drift (#24185b / #ef7c00). This matches the brand sheet exactly
   and leaves the global token cleanup (tech-debt register) for a
   separate, deliberate pass.

       Navy   #201868      Orange #F07800
       White  #FFFFFF      Gray   #7A8A9E
   ============================================================ */

/* ---- Post hero ---- */
.page-hero--post {
  background: #FFFFFF;
}
.page-hero--post .label {
  font-family: 'Poppins', sans-serif;
  color: #F07800;
}
.page-hero--post .label::before {
  background: #F07800;
}
.page-hero--post h1 {
  font-family: 'Lora', serif;
  font-weight: 700;
  color: #201868;
}
.page-hero--post h1 em {
  color: #F07800;
}
.page-hero--post .page-hero-lede {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #3a3a45;
}

/* ---- Post body: paragraphs ---- */
.longform--post p {
  font-family: 'Poppins', sans-serif;
  color: #2a2a33;
}
.longform--post p strong {
  color: #201868;
  font-weight: 600;
}

/* ---- Post body: headings (Lora, navy) ---- */
.longform--post h2,
.longform--post h3,
.longform--post h4 {
  font-family: 'Lora', serif;
  color: #201868;
}
.longform--post h2 {
  font-weight: 700;
}
.longform--post h3,
.longform--post h4 {
  font-weight: 600;
}
.longform--post h2 em,
.longform--post h3 em,
.longform--post h4 em {
  color: #F07800;
  font-style: italic;
}

/* Short orange rule above each H2, echoing the brand-sheet underlines */
.longform--post h2::before {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  background: #F07800;
  margin: 0 0 18px;
  border-radius: 0;
}
.longform--post h2:first-child::before {
  margin-top: 0;
}

/* ---- Post body: lists ---- */
.longform--post ul li,
.longform--post ol li {
  font-family: 'Poppins', sans-serif;
  color: #2a2a33;
}
.longform--post ul li::marker,
.longform--post ol li::marker {
  color: #F07800;
}

/* ---- Post body: links ---- */
.longform--post a:not(.btn) {
  color: #F07800;
  border-bottom: 1px solid rgba(240, 120, 0, .4);
  padding-bottom: 1px;
  transition: all .2s ease;
}
.longform--post a:not(.btn):hover {
  color: #201868;
  border-bottom-color: #201868;
}

/* ---- Post body: quotes (Gutenberg quote/pullquote + plain blockquote) ---- */
.longform--post blockquote,
.longform--post .wp-block-quote,
.longform--post .wp-block-pullquote {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  color: #201868;
  border-left: 3px solid #F07800;
  border-radius: 0;
  margin: 40px 0;
  padding: 6px 0 6px 24px;
  background: transparent;
}
.longform--post blockquote p,
.longform--post .wp-block-quote p,
.longform--post .wp-block-pullquote p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  color: #201868;
  margin-bottom: 0;
}
.longform--post blockquote cite,
.longform--post .wp-block-quote cite,
.longform--post .wp-block-quote__citation,
.longform--post .wp-block-pullquote cite {
  display: block;
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  color: #7A8A9E;
}

/* Keep the theme's manual .pull pattern on-brand if a post uses it */
.longform--post .pull {
  font-family: 'Lora', serif;
  color: #201868;
  border-left-color: #F07800;
  background: #F4F5F8;
}
.longform--post .pull em {
  color: #F07800;
}

/* ---- Post body: images + captions ---- */
.longform--post .wp-block-image img,
.longform--post figure img {
  border-radius: 8px;
}
.longform--post figcaption,
.longform--post .wp-block-image figcaption {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #7A8A9E;
  text-align: center;
  margin-top: 10px;
}