/* ============================================================================
   TPS Blog — child theme stylesheet  (tps-blog.css)
   The Packaging Store · Divi 5 + tps-child
   AUDIT 2026-06-22 BW: native WordPress/Divi blog styling.
   AUDIT 2026-06-22 BW: v1.0.3 — hardened flush-left override (beats WordPress
     block auto-centering); whole article shares one left edge.

   WHERE THIS APPLIES (you add these CSS classes to modules in Theme Builder):
     .tps-article    → put on the POST CONTENT module (single-post template).
                       Styles everything you type in the editor.
     .tps-blog-feed  → put on the BLOG module (blog/archive template).
                       Styles the post-card grid.
     .tps-readnext   → put on the POST NAVIGATION module (optional).

   INSTALL: enqueue this file from the child theme (see tps-blog-SETUP.md),
   or paste its contents at the end of the child theme style.css.

   FONTS: Bebas Neue / DM Serif Display / DM Sans are already loaded site-wide
   by the TPS brand pages. If a blog template ever renders without them, enqueue:
   https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap
   ========================================================================== */

:root{
  --tps-red:#C41230; --tps-red-dk:#96001F; --tps-navy:#0B4FA8; --tps-navy-lt:#1565C0;
  --tps-gold:#C8A030; --tps-charcoal:#1C1E24; --tps-ink:#2A2D38; --tps-grey:#5A5E6B;
  --tps-grey-lt:#9095A4; --tps-cream:#F5F4F1; --tps-white:#FEFEFE; --tps-line:#E7E5E0;
}

/* ============================================================================
   1) POST BODY  —  class "tps-article" on the Post Content module
   Styles standard editor output: h2/h3, p, ul/ol, blockquote, figure/img.
   ========================================================================== */
.tps-article{
  font-family:"DM Sans",system-ui,sans-serif;
  color:var(--tps-ink);
  font-size:17px;
  line-height:1.75;
}
/* Readable measure — content sits in a comfortable column even in a wide row */
.tps-article > *{ max-width:720px; margin-left:0; margin-right:auto; }
/* …but let images/figures you mark "full" break out a little wider */
.tps-article > figure,
.tps-article > .wp-block-image,
.tps-article > .alignwide{ max-width:860px; }

/* HARD OVERRIDE (v1.0.3): WordPress block layout adds an auto-centering rule
   (margin-left:auto !important) to headings/lists in some setups, which pushes
   them out of line with the paragraphs. This wins on specificity (.tps-article
   chained with the Divi module class) + !important, forcing every top-level
   block to the same flush-left edge. */
.tps-article.et_pb_module > p,
.tps-article.et_pb_module > h1,
.tps-article.et_pb_module > h2,
.tps-article.et_pb_module > h3,
.tps-article.et_pb_module > h4,
.tps-article.et_pb_module > ul,
.tps-article.et_pb_module > ol,
.tps-article.et_pb_module > blockquote,
.tps-article.et_pb_module > figure,
.tps-article.et_pb_module > .wp-block-image{
  margin-left:0 !important;
  margin-right:auto !important;
}

.tps-article p{ font-size:17px; line-height:1.75; color:var(--tps-ink); margin:0 0 20px; }
.tps-article strong{ color:var(--tps-charcoal); font-weight:600; }
.tps-article a{ color:var(--tps-navy); text-decoration:underline; text-underline-offset:2px; }
.tps-article a:hover{ color:var(--tps-red); }

/* Lead paragraph: first paragraph, or any paragraph you give class "lead" */
.tps-article > p:first-child,
.tps-article p.lead{
  font-size:20px !important; line-height:1.6 !important; color:var(--tps-charcoal) !important;
}

/* Headings */
.tps-article h2{
  font-family:"DM Serif Display",Georgia,serif !important; font-weight:400 !important;
  color:var(--tps-charcoal) !important; font-size:clamp(24px,3.2vw,31px) !important;
  line-height:1.2 !important; margin:42px 0 14px !important; padding-top:6px;
}
.tps-article h2::before{
  content:""; display:block; width:42px; height:3px; border-radius:2px;
  background:var(--tps-red); margin-bottom:16px;
}
.tps-article h3{
  font-family:"DM Serif Display",Georgia,serif !important; font-weight:400 !important;
  color:var(--tps-charcoal) !important; font-size:clamp(20px,2.6vw,24px) !important;
  line-height:1.25 !important; margin:30px 0 10px !important;
}

/* Lists with brand diamond bullets */
.tps-article ul{ list-style:none; margin:0 0 22px; padding:0; }
.tps-article ul li{
  position:relative; font-size:17px; line-height:1.6; color:var(--tps-ink);
  padding:0 0 0 26px; margin-bottom:9px;
}
.tps-article ul li::before{
  content:""; position:absolute; left:4px; top:10px; width:8px; height:8px;
  border-radius:2px; background:var(--tps-navy); transform:rotate(45deg);
}
.tps-article ol{ margin:0 0 22px; padding-left:22px; }
.tps-article ol li{ font-size:17px; line-height:1.6; color:var(--tps-ink); margin-bottom:9px; }
.tps-article ol li::marker{ color:var(--tps-red); font-weight:600; }

/* Pull-quote: any blockquote becomes a branded pull-quote */
.tps-article blockquote{
  margin:34px 0 !important; padding:6px 0 6px 26px !important;
  border-left:4px solid var(--tps-red) !important; border-top:0 !important; border-bottom:0 !important;
  background:transparent !important;
  font-family:"DM Serif Display",Georgia,serif !important; font-style:italic;
  font-size:clamp(20px,2.8vw,26px); line-height:1.4; color:var(--tps-charcoal);
}
.tps-article blockquote p{ font-size:inherit !important; color:inherit !important; margin:0; }

/* Images / figures */
.tps-article img{ border-radius:14px; box-shadow:0 12px 34px rgba(28,30,36,.12); display:block; }
.tps-article figure{ margin:34px 0; }
.tps-article figure img{ width:100%; }
.tps-article figcaption,
.tps-article .wp-element-caption{
  font-size:13px; color:var(--tps-grey-lt); text-align:center; margin-top:10px; font-style:italic;
}

/* ============================================================================
   2) READ NEXT  —  class "tps-readnext" on the Post Navigation module (optional)
   ========================================================================== */
.tps-readnext .nav-previous a,
.tps-readnext .nav-next a{
  display:block; background:var(--tps-white); border:1px solid var(--tps-line);
  border-left:4px solid var(--tps-gold); border-radius:12px; padding:18px 22px;
  font-family:"DM Serif Display",Georgia,serif; font-size:18px; line-height:1.25;
  color:var(--tps-charcoal); text-decoration:none; transition:box-shadow .15s,transform .12s;
}
.tps-readnext .nav-previous a:hover,
.tps-readnext .nav-next a:hover{ box-shadow:0 10px 26px rgba(28,30,36,.1); transform:translateY(-2px); }

/* ============================================================================
   3) BLOG FEED  —  class "tps-blog-feed" on the Blog module
   Styles the post-card grid for the blog / archive templates.
   NOTE: Divi's blog markup can vary by version. These target the common
   classes; if a card detail doesn't catch, inspect the rendered post and
   adjust the selector. Everything here is scoped to .tps-blog-feed so it
   can't affect other Blog modules.
   ========================================================================== */
.tps-blog-feed .et_pb_post{
  background:var(--tps-white); border:1px solid var(--tps-line); border-radius:14px;
  overflow:hidden; box-shadow:0 6px 18px rgba(28,30,36,.05);
  margin-bottom:24px; padding:0; transition:box-shadow .15s,transform .12s;
}
.tps-blog-feed .et_pb_post:hover{ box-shadow:0 14px 32px rgba(28,30,36,.12); transform:translateY(-3px); }

/* Featured image: flush to the card top */
.tps-blog-feed .et_pb_image_container{ margin:0 0 0 0; }
.tps-blog-feed .et_pb_image_container img,
.tps-blog-feed .entry-featured-image-url img{
  width:100%; display:block; aspect-ratio:16/10; object-fit:cover; border-radius:0;
}

/* Text area padding */
.tps-blog-feed .et_pb_post .post-content,
.tps-blog-feed .et_pb_post > .entry-title,
.tps-blog-feed .et_pb_post > .post-meta{ padding-left:22px; padding-right:22px; }
.tps-blog-feed .et_pb_post .entry-title{ padding-top:18px; }

/* Title */
.tps-blog-feed .entry-title,
.tps-blog-feed .entry-title a{
  font-family:"DM Serif Display",Georgia,serif !important; font-weight:400 !important;
  color:var(--tps-charcoal) !important; font-size:20px !important; line-height:1.22 !important;
}
.tps-blog-feed .entry-title a:hover{ color:var(--tps-red) !important; }

/* Meta line + category as a small pill */
.tps-blog-feed .post-meta{ font-size:12.5px; color:var(--tps-grey-lt); }
.tps-blog-feed .post-meta a{ color:var(--tps-grey); text-decoration:none; }
.tps-blog-feed .post-meta a[rel~="category"],
.tps-blog-feed .post-meta .et_pb_post_categories a{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#fff !important; background:var(--tps-red); border-radius:999px; padding:3px 11px; margin:0 4px 4px 0;
}

/* Excerpt */
.tps-blog-feed .post-content,
.tps-blog-feed .post-content p{ font-size:14px; line-height:1.55; color:var(--tps-grey); }
.tps-blog-feed .post-content{ padding-bottom:22px; }

/* Read-more */
.tps-blog-feed .et_pb_more_button,
.tps-blog-feed .more-link{
  color:var(--tps-red) !important; font-weight:600; font-size:14px; text-decoration:none;
}
.tps-blog-feed .et_pb_more_button:hover{ color:var(--tps-red-dk) !important; }

/* Pagination */
.tps-blog-feed .wp-pagenavi a,
.tps-blog-feed .pagination a,
.tps-blog-feed .et_pb_pagination a{ color:var(--tps-navy); }