/*
Theme Name: LPI Blog
Theme URI: https://localpoolinspections.com/
Author: Local Pool Inspections
Description: WordPress theme that mirrors the static localpoolinspections.com homepage UI.
             Lifts the same <header>/<footer> markup the static site uses and loads
             the same CSS so blog pages feel like a native section of the main site.
Version: 1.2.8
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: lpi-blog
*/

/* This file carries the theme metadata + blog-only overrides.
   Visual tokens (colours, fonts, spacing) come from the parent site's
   stylesheets enqueued in functions.php (base.css + style.css).

   Static-site token reference (from /style.css on the droplet):
     --color-primary       #062b58   navy primary
     --color-primary-hover #0a3d7a
     --color-primary-light #e8eef6
     --color-accent        #ffbe01   gold
     --color-bg            #f8f9fb   page bg
     --color-surface       #ffffff   cards/panels
     --color-text          #0d1b2a   body+headings (high contrast)
     --color-text-muted    #4a5568   meta/secondary
     --color-text-faint    #94a3b8   tertiary
     --color-border        #d0d7e2
     --color-divider       #dde3ec
     --font-display        'Cabinet Grotesk'
     --font-body           'Satoshi'
*/

/* ----------------------------------------------------------------
   Layout shell — clears the fixed header on the static site.
   Top padding responsive: 7rem mobile → 11rem desktop.
   ---------------------------------------------------------------- */
.lpi__shell {
  max-width: var(--content-default, 960px);
  margin: 0 auto;
  padding: clamp(7rem, 12vw, 11rem) var(--space-6, 1.5rem) var(--space-16, 4rem);
  color: var(--color-text-muted, #4a5568);
}

/* Anchor offset so #links don't land under the fixed header */
html { scroll-padding-top: clamp(6rem, 10vw, 9rem); }

/* Section header (blog index hero, archive title) */
.lpi__hero {
  text-align: center;
  margin-bottom: var(--space-12, 3rem);
}
.lpi__hero h1 {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  font-weight: 700;
  margin: 0 0 var(--space-3, 0.75rem);
  color: var(--color-primary, #062b58);
  line-height: 1.1;
}
.lpi__hero p {
  color: var(--color-text-muted, #4a5568);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
  max-width: 640px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   Post list — card grid (mirrors blog index aesthetic)
   ---------------------------------------------------------------- */
.lpi__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6, 1.5rem);
  margin-bottom: var(--space-16, 4rem);
}
.lpi__card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive, 180ms cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--transition-interactive, 180ms cubic-bezier(0.16, 1, 0.3, 1));
}
.lpi__card:hover {
  box-shadow: var(--shadow-lg, 0 10px 25px -5px rgba(0,0,0,0.1));
  transform: translateY(-2px);
}
.lpi__card-inner { padding: var(--space-6, 1.5rem); }
.lpi__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-4, 1rem);
}
.lpi__card-date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-faint, #94a3b8);
}
.lpi__card-tag {
  background: var(--color-primary-light, #e8eef6);
  color: var(--color-primary, #062b58);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lpi__card-tag a { color: inherit; text-decoration: none; }
.lpi__card-title {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: var(--text-lg, 1.25rem);
  font-weight: 700;
  color: var(--color-primary, #062b58);
  margin: 0 0 var(--space-3, 0.75rem);
  line-height: 1.3;
}
.lpi__card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.lpi__card-title a:hover { color: var(--color-primary-hover, #0a3d7a); }
.lpi__card-excerpt {
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-muted, #4a5568);
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------------
   Single post
   ---------------------------------------------------------------- */
.lpi__post-header {
  margin-bottom: var(--space-10, 2.5rem);
  text-align: center;
}
.lpi__post-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 0.75rem);
}
.lpi__post-meta time {
  font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-muted, #4a5568);
}
.lpi__post-cats { display: inline-flex; gap: 0.5rem; }
.lpi__post-cats a {
  background: var(--color-primary-light, #e8eef6);
  color: var(--color-primary, #062b58);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lpi__post-cats a:hover {
  background: var(--color-primary, #062b58);
  color: var(--color-text-inverse, #fff);
}
.lpi__post-title {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin: var(--space-3, 0.75rem) 0;
  color: var(--color-primary, #062b58);
  line-height: 1.15;
  text-wrap: balance;
}

.lpi__post-featured img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl, 1rem);
  margin-bottom: var(--space-8, 2rem);
}

.lpi__post-body {
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: var(--text-base, 1.0625rem);
  color: var(--color-text, #0d1b2a);
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}
.lpi__post-body h2,
.lpi__post-body h3 {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700;
  color: var(--color-primary, #062b58);
  margin-top: var(--space-10, 2.5rem);
  margin-bottom: var(--space-3, 0.75rem);
  line-height: 1.25;
}
.lpi__post-body h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); }
.lpi__post-body h3 { font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem); }
.lpi__post-body p { margin: 1.25em 0; }
.lpi__post-body strong { color: var(--color-text, #0d1b2a); font-weight: 600; }
.lpi__post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 0.75rem);
  margin: 2em 0;
}
.lpi__post-body blockquote {
  border-left: 3px solid var(--color-accent, #ffbe01);
  background: var(--color-accent-light, #fff8e1);
  padding: 1em 1.5em;
  margin: 2em 0;
  font-style: italic;
  color: var(--color-text, #0d1b2a);
  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
}
.lpi__post-body code {
  background: var(--color-surface-2, #f1f4f8);
  border: 1px solid var(--color-divider, #dde3ec);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm, 0.375rem);
  font-size: 0.9em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.lpi__post-body pre {
  background: var(--color-surface-2, #f1f4f8);
  border: 1px solid var(--color-divider, #dde3ec);
  padding: 1em;
  border-radius: var(--radius-lg, 0.75rem);
  overflow-x: auto;
}
.lpi__post-body a {
  color: var(--color-primary, #062b58);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.lpi__post-body a:hover { color: var(--color-primary-hover, #0a3d7a); }
.lpi__post-body ul,
.lpi__post-body ol { padding-left: 1.5em; margin: 1em 0; }
.lpi__post-body li { margin: 0.5em 0; }

/* ----------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------- */
.lpi__pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--space-12, 3rem) 0 0;
  flex-wrap: wrap;
}
.lpi__pagination a,
.lpi__pagination span {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-md, 0.5rem);
  text-decoration: none;
  color: var(--color-text, #0d1b2a);
  background: var(--color-surface, #ffffff);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lpi__pagination a:hover {
  background: var(--color-primary-light, #e8eef6);
  border-color: var(--color-primary, #062b58);
}
.lpi__pagination .current {
  background: var(--color-primary, #062b58);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-primary, #062b58);
}

/* ----------------------------------------------------------------
   Comments + search form + 404
   ---------------------------------------------------------------- */
.lpi__comments {
  margin-top: var(--space-12, 3rem);
  padding-top: var(--space-8, 2rem);
  border-top: 1px solid var(--color-divider, #dde3ec);
}
.lpi__comments h3 {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  margin-bottom: var(--space-6, 1.5rem);
  color: var(--color-primary, #062b58);
}
.lpi__comments .comment {
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: var(--color-surface-2, #f1f4f8);
  border: 1px solid var(--color-divider, #dde3ec);
  border-radius: var(--radius-lg, 0.75rem);
}
.lpi__comments input[type="text"],
.lpi__comments input[type="email"],
.lpi__comments input[type="url"],
.lpi__comments textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-md, 0.5rem);
  font: inherit;
  background: var(--color-surface, #fff);
  color: var(--color-text, #0d1b2a);
}

.lpi__searchform {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin: var(--space-4, 1rem) auto;
}
.lpi__searchform input[type="search"] {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-md, 0.5rem);
  font: inherit;
  background: var(--color-surface, #fff);
}
.lpi__searchform input[type="search"]:focus {
  outline: 2px solid var(--color-primary, #062b58);
  outline-offset: 1px;
}
.lpi__searchform button {
  background: var(--color-primary, #062b58);
  color: var(--color-text-inverse, #fff);
  border: 0;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md, 0.5rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}
.lpi__searchform button:hover { background: var(--color-primary-hover, #0a3d7a); }

.lpi__404 {
  text-align: center;
  padding: var(--space-16, 4rem) var(--space-6, 1.5rem);
}
.lpi__404 h1 {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-size: clamp(3rem, 8vw, 6rem);
  margin: 0;
  color: var(--color-accent, #ffbe01);
}
.lpi__404 p { color: var(--color-text-muted, #4a5568); }

/* ----------------------------------------------------------------
   Blog index card grid — same .blog-card layout as Drysdale Fencing.
   Uses an auto-fill responsive grid; each card has h2 title (dark
   navy), excerpt (muted), and a single meta row (date + category pill).
   The static /blog/blog.css already provides base .blog-card styling
   but we override here for richer hover state + LPI brand tokens.
   ---------------------------------------------------------------- */
.blog-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.blog-card {
  background: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #d0d7e2) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover {
  border-color: var(--color-primary, #062b58) !important;
  box-shadow: 0 8px 24px -8px rgba(13,27,42,0.18);
  transform: translateY(-2px);
}
.blog-card-title {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.75rem !important;
}
.blog-card-title a {
  color: var(--color-text, #0d1b2a) !important;
  text-decoration: none !important;
  background: none !important;
  transition: color 0.18s ease;
}
.blog-card-title a:hover,
.blog-card-title a:focus {
  color: var(--color-primary, #062b58) !important;
  text-decoration: none !important;
}
.blog-card-excerpt {
  font-family: var(--font-body, sans-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted, #4a5568) !important;
  margin: 0 0 1rem !important;
}
.blog-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex-wrap: wrap;
  font-size: 0.78rem !important;
  color: var(--color-text-faint, #94a3b8) !important;
}
.blog-card-meta .blog-category-tag {
  background: var(--color-primary-light, #e8eef6) !important;
  color: var(--color-primary, #062b58) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
[data-theme="dark"] .blog-card-title a { color: var(--color-text, #e6edf3) !important; }
[data-theme="dark"] .blog-card-title a:hover { color: var(--color-accent, #ffbe01) !important; }
[data-theme="dark"] .blog-card-meta .blog-category-tag {
  background: rgba(255,255,255,0.08) !important;
  color: var(--color-text, #e6edf3) !important;
}

/* ----------------------------------------------------------------
   Header overrides for blog pages.
   The static homepage header floats over a dark hero (transparent bg
   + white text) and only flips to solid-blur on scroll. On blog pages
   there's no hero, so we force the .header--scrolled look permanently
   AND override nav/hamburger colours with !important so we win the
   cascade over the homepage's scroll-state rules.
   ---------------------------------------------------------------- */
.header.header--scrolled,
body.single .header,
body.archive .header,
body.search .header,
body.error404 .header,
body.home .header,
body.page .header,
body.blog .header {
  background: color-mix(in srgb, var(--color-bg, #f8f9fb) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(13,27,42,0.06), 0 4px 14px rgba(13,27,42,0.04);
}
.header.header--scrolled .header__nav a,
body.single .header .header__nav a,
body.archive .header .header__nav a,
body.search .header .header__nav a,
body.error404 .header .header__nav a,
body.home .header .header__nav a,
body.page .header .header__nav a,
body.blog .header .header__nav a {
  color: var(--color-text, #0d1b2a) !important;
}
.header.header--scrolled .theme-toggle,
body.single .header .theme-toggle,
body.archive .header .theme-toggle,
body.search .header .theme-toggle,
body.error404 .header .theme-toggle,
body.home .header .theme-toggle,
body.page .header .theme-toggle,
body.blog .header .theme-toggle {
  color: var(--color-text, #0d1b2a) !important;
}
.header.header--scrolled .hamburger span,
body.single .header .hamburger span,
body.archive .header .hamburger span,
body.search .header .hamburger span,
body.error404 .header .hamburger span,
body.home .header .hamburger span,
body.page .header .hamburger span,
body.blog .header .hamburger span {
  background: var(--color-text, #0d1b2a) !important;
}

/* Active nav link styling — fires when WP page IS the blog */
.header__nav a[aria-current="page"] {
  color: var(--color-accent, #ffbe01) !important;
  font-weight: 700;
}

/* ----------------------------------------------------------------
   HERO REFINEMENT (v1.0.9) — premium dark-overlay treatment using
   the homepage hero-bg image + a deep-navy gradient. Replaces the
   previous flat #062b58 hero so the blog feels cohesive with the
   homepage's dark-image-overlay aesthetic.
   ---------------------------------------------------------------- */
.blog-hero,
.blog-hero--image {
  position: relative !important;
  background: var(--color-text, #0d1b2a) !important;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  isolation: isolate;
}
.blog-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.blog-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* v1.1.0 — pool imagery shows more opaquely (was brightness:0.55) */
  filter: brightness(0.78) saturate(1.05);
}
.blog-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* v1.1.0 — overlay lightened from 0.92→0.55 alpha so the pool
     hero image is clearly visible underneath. White text still has
     enough contrast against the residual navy tint. */
  background: linear-gradient(
    135deg,
    rgba(13, 27, 42, 0.55) 0%,
    rgba(13, 27, 42, 0.38) 50%,
    rgba(6, 43, 88, 0.30) 100%
  );
}
.blog-hero .container,
.blog-hero--image .container {
  position: relative !important;
  z-index: 2 !important;
}
.blog-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-5, 1.5rem) !important;
}
.blog-hero-title {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif) !important;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 3.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #fff !important;
  margin: 0 0 1rem !important;
  text-wrap: balance;
}
.blog-breadcrumb {
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 1.25rem !important;
}
.blog-breadcrumb a { color: rgba(255,255,255,0.85) !important; }
.blog-breadcrumb a:hover { color: #fff !important; }
.blog-meta { color: rgba(255,255,255,0.75) !important; }
.blog-meta .blog-category-tag {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Defensive: WP body classes inherit the static site bg */
body.single,
body.archive,
body.search,
body.error404,
body.home,
body.page,
body.blog {
  background: var(--color-bg, #f8f9fb);
  color: var(--color-text, #0d1b2a);
}

/* ----------------------------------------------------------------
   Hero banner — repaint from dark navy (#062b58) to the soft
   cool-grey/blue used by the services section on the homepage
   (var(--color-surface-2) = #f1f4f8). Flip text colours from
   white → dark navy so they remain readable.
   ---------------------------------------------------------------- */
.blog-hero {
  background: var(--color-surface-2, #f1f4f8) !important;
  border-bottom: 1px solid var(--color-divider, #dde3ec);
}
/* Title binds to --color-text so it auto-flips with the theme,
   matching the homepage .section-title behaviour exactly:
   - light mode → dark navy on light grey hero
   - dark mode  → near-white on dark hero                       */
.blog-hero-title {
  color: var(--color-text, #0d1b2a) !important;
}
.blog-breadcrumb {
  color: var(--color-text-muted, #4a5568) !important;
}
.blog-breadcrumb a { color: var(--color-text, #0d1b2a) !important; }
.blog-breadcrumb a:hover { color: var(--color-primary-hover, #0a3d7a) !important; }
.blog-breadcrumb .breadcrumb-sep { color: var(--color-text-faint, #94a3b8) !important; }
.blog-meta { color: var(--color-text-muted, #4a5568) !important; }
.blog-category-tag {
  background: var(--color-primary-light, #e8eef6) !important;
  color: var(--color-primary, #062b58) !important;
}
/* Dark-mode safety: ensure pill stays legible when --color-primary-light
   inverts to a dark value. */
[data-theme="dark"] .blog-category-tag {
  background: rgba(255,255,255,0.08) !important;
  color: var(--color-text, #e6edf3) !important;
}

/* ----------------------------------------------------------------
   Comment form — paint submit button to match the .blog-cta navy
   block, and strip default WP white borders/outlines that look out
   of place on the dark button.
   ---------------------------------------------------------------- */
.lpi__comments-section .form-submit,
.lpi__comments .form-submit { margin-top: 1rem; }

.lpi__comments-section input[type="submit"],
.lpi__comments-section button[type="submit"],
.lpi__comments input[type="submit"],
.lpi__comments button[type="submit"],
#commentform #submit,
#submit {
  background: #062b58 !important;
  background-image: linear-gradient(135deg, #062b58 0%, #0a3d7a 50%, #062b58 100%) !important;
  color: #fff !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif) !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: filter 0.18s ease, transform 0.18s ease !important;
}
.lpi__comments-section input[type="submit"]:hover,
.lpi__comments-section button[type="submit"]:hover,
.lpi__comments input[type="submit"]:hover,
.lpi__comments button[type="submit"]:hover,
#commentform #submit:hover,
#submit:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.lpi__comments-section input[type="submit"]:focus,
.lpi__comments-section button[type="submit"]:focus,
#commentform #submit:focus,
#submit:focus {
  outline: 2px solid var(--color-accent, #ffbe01) !important;
  outline-offset: 2px;
}

/* ================================================================
   v1.2.0 — Homepage alignment patch (2026-05-04)
   Two scopes:
   (A) Repaint the teal #1A8A7D inherited from /blog/blog.css to
       brand navy/gold so blog content, blockquotes, the CTA and
       the back-link all match the homepage palette.
   (B) Map legacy class names used inside WP service detail pages
       (Services, Form 23, NCR, Re-Inspections, FAQ, About, Contact)
       — `.hero-section`, `.section`, `.cta-section`, `.services-grid`,
       `.service-card`, `.process-step`, `.feature-list`, `.card`,
       `.faq-item`, `.btn-white`, `.btn-lg` — onto the homepage's
       look (uses the same tokens as the homepage's .hero / .services
       / .cta-banner / .service-card__body / .btn--primary). No
       content edits required: the WP page HTML stays as-is and
       inherits homepage styling.
   ================================================================ */

/* --- (A) Repaint blog.css teal links/blockquote/CTA/back-link --- */
.blog-content a,
.lpi__post-body a {
  color: var(--color-primary, #062b58) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-content a:hover,
.lpi__post-body a:hover {
  color: var(--color-primary-hover, #0a3d7a) !important;
}
[data-theme="dark"] .blog-content a,
[data-theme="dark"] .lpi__post-body a {
  color: var(--color-primary, #5b9bd5) !important;
}
[data-theme="dark"] .blog-content a:hover,
[data-theme="dark"] .lpi__post-body a:hover {
  color: var(--color-primary-hover, #79b0e2) !important;
}
.blog-content blockquote {
  border-left: 4px solid var(--color-accent, #ffbe01) !important;
  background: var(--color-accent-light, #fff8e1) !important;
}
[data-theme="dark"] .blog-content blockquote {
  background: rgba(255,190,1,0.08) !important;
  border-left-color: var(--color-accent, #ffbe01) !important;
}
.blog-cta {
  background: linear-gradient(135deg,
    var(--color-primary, #062b58) 0%,
    var(--color-primary-hover, #0a3d7a) 100%) !important;
}
.blog-back-link {
  color: var(--color-primary, #062b58) !important;
}
.blog-back-link:hover {
  color: var(--color-primary-hover, #0a3d7a) !important;
}
[data-theme="dark"] .blog-back-link {
  color: var(--color-primary, #5b9bd5) !important;
}
[data-theme="dark"] .blog-back-link:hover {
  color: var(--color-primary-hover, #79b0e2) !important;
}

/* --- (B) Legacy WP page class shim → homepage component look --- */

/* Hero block on Services / Form 23 / NCR / Re-Inspections / FAQ / About / Contact.
   Uses the homepage hero.jpeg as background with the same dark navy
   gradient overlay used on .hero so the eye-feel matches.            */
.hero-section {
  position: relative;
  isolation: isolate;
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
  background-color: var(--color-text, #0d1b2a);
  background-image:
    linear-gradient(135deg,
      rgba(13,27,42,0.78) 0%,
      rgba(13,27,42,0.62) 50%,
      rgba(6,43,88,0.55) 100%),
    url("https://localpoolinspections.com/assets/images/hero.jpeg");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  margin-bottom: 0;
}
.hero-section .container {
  max-width: var(--content-default, 960px);
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
  position: relative;
  z-index: 1;
}
.hero-section h1 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-size: clamp(2rem, 4.5vw + 0.5rem, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hero-section p {
  font-family: var(--font-body, "Satoshi", sans-serif);
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
  color: rgba(255,255,255,0.9);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Generic section — matches homepage `.section-padding` */
section.section,
.section.section-light,
.section.section-gray {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
section.section .container,
.section.section-light .container,
.section.section-gray .container {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
}
.section.section-light { background: var(--color-bg, #f8f9fb); }
.section.section-gray  { background: var(--color-surface-2, #f1f4f8); }

/* Section H2/H3 inside legacy pages */
.section h2,
.hero-section + section h2,
.section .text-center h2 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  font-weight: 700;
  color: var(--color-primary, #062b58);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.section h3 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  font-weight: 700;
  color: var(--color-primary, #062b58);
  margin: 0 0 0.75rem;
}
.section p { color: var(--color-text-muted, #4a5568); line-height: 1.7; }
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }

/* Two-up content/sidebar layout (used on Form 23, NCR, Re-Inspections, About, Contact) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Card panel — matches homepage `.service-card__body` look */
.section .card,
.features-grid .card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(6,43,88,0.06));
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.section .card:hover,
.features-grid .card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(6,43,88,0.08));
  transform: translateY(-2px);
  border-color: var(--color-primary, #062b58);
}

/* Bullet list inside legacy pages */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  border-bottom: 1px solid var(--color-divider, #dde3ec);
  color: var(--color-text, #0d1b2a);
  line-height: 1.55;
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 8px;
  height: 8px;
  background: var(--color-accent, #ffbe01);
  border-radius: 999px;
}

/* Services grid + service card — mirrors homepage .services__grid + .service-card */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  margin-top: 1rem;
}
.service-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  text-align: center;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.service-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(6,43,88,0.08));
  transform: translateY(-3px);
  border-color: var(--color-primary, #062b58);
}
.service-card-icon {
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.service-card h3 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  color: var(--color-primary, #062b58);
  margin-bottom: 0.5rem;
}
.service-card p { color: var(--color-text-muted, #4a5568); margin: 0; }

/* Numbered process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  counter-reset: step;
}
.process-step {
  text-align: center;
  padding: 1.5rem;
  background: var(--color-surface, #ffffff);
  border-radius: var(--radius-xl, 1rem);
  border: 1px solid var(--color-border, #d0d7e2);
}
.process-step-number {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--color-primary, #062b58);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.process-step h4 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  color: var(--color-primary, #062b58);
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}
.process-step p { color: var(--color-text-muted, #4a5568); margin: 0; font-size: 0.95rem; }

/* CTA section — matches homepage `.cta-banner` */
.cta-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(135deg,
    var(--color-primary, #062b58) 0%,
    var(--color-primary-hover, #0a3d7a) 100%);
  color: #fff;
  text-align: center;
}
.cta-section .container {
  max-width: var(--content-default, 960px);
  margin: 0 auto;
  padding: 0 var(--space-6, 1.5rem);
}
.cta-section h2 {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-weight: 800;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  color: #fff;
  margin: 0 0 0.5rem;
}
.cta-section p { color: rgba(255,255,255,0.85); margin: 0 0 1.5rem; }

/* Buttons — map .btn-white .btn-lg .btn-primary onto homepage btn-- look */
.cta-section .btn-white,
a.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-accent, #ffbe01);
  color: var(--color-text, #0d1b2a) !important;
  border: 0;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}
a.btn-white:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* FAQ items inside the WP FAQ page — matches homepage .faq-item look */
.faq-item {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.faq-item .faq-question {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif);
  font-weight: 700;
  color: var(--color-primary, #062b58);
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.35;
}
.faq-item .faq-answer {
  color: var(--color-text-muted, #4a5568);
  line-height: 1.65;
}
.faq-item .faq-answer ul { padding-left: 1.25rem; margin: 0.5rem 0; }
.faq-item .faq-answer li { margin: 0.25rem 0; }

/* Legacy pages live inside .lpi__shell — undo its narrow padding and
   muted text so full-width sections (.hero-section, .section, .cta-section)
   span edge-to-edge like on the homepage. */
.lpi__shell:has(.hero-section),
.lpi__shell:has(section.section),
.lpi__shell:has(.cta-section) {
  max-width: none;
  padding: 0;
  color: var(--color-text, #0d1b2a);
}
.lpi__shell:has(.hero-section) .lpi__post-header { display: none; }
.lpi__shell:has(.hero-section) .lpi__post-body {
  font-family: var(--font-body, "Satoshi", sans-serif);
  font-size: var(--text-base, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text, #0d1b2a);
  max-width: none;
}


/* ================================================================
   v1.2.1 — Background unification + trailing-CTA card + darker
            book-now block (2026-05-04, second-pass tweak)
   ================================================================ */

/* (C) Page background — match the homepage's "OUR LOCATIONS" section
   (var(--color-surface-2) = #f1f4f8 light mode) on every WP page so
   blog posts, location posts, service-detail pages and the Areas hub
   all share the same off-white page bg as that section.            */
body.single,
body.page,
body.blog,
body.archive,
body.search,
body.error404 {
  background: var(--color-surface-2, #f1f4f8) !important;
}
.blog-main {
  background: var(--color-surface-2, #f1f4f8) !important;
}
.lpi__shell {
  background: var(--color-surface-2, #f1f4f8);
}
/* On legacy service-detail pages, light sections become pure white
   panels for contrast against the new surface-2 body, gray sections
   stay on surface-2 (blend with body).                              */
section.section.section-light {
  background: var(--color-surface, #ffffff) !important;
}
section.section.section-gray {
  background: var(--color-surface-2, #f1f4f8) !important;
}

/* (D) Trailing in-content CTA card — the last <h2> + its <p> siblings
   in every post are auto-wrapped in <div class="lpi-post-cta"> by a
   the_content filter (functions.php). This is what styles that wrapper.
   Targets the closing "Form 23 in {Suburb}: $250 includes everything"
   block on location posts and the "Ready to Get Started?" block on
   general blog posts.                                                */
.lpi-post-cta {
  margin: 3rem 0 0;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(135deg, #04204a 0%, #062b58 100%);
  color: #fff;
  border-radius: var(--radius-xl, 1rem);
  box-shadow: 0 8px 24px -8px rgba(4,32,74,0.35);
}
.lpi-post-cta h2 {
  color: #fff !important;
  margin: 0 0 0.85rem !important;
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif) !important;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 1.85rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lpi-post-cta p {
  color: rgba(255,255,255,0.94) !important;
  margin: 0 0 0.85rem !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}
.lpi-post-cta p:last-child { margin-bottom: 0 !important; }
.lpi-post-cta a,
.lpi-post-cta strong a {
  color: var(--color-accent, #ffbe01) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.lpi-post-cta a:hover { text-decoration: underline !important; color: #fff !important; }
.lpi-post-cta strong { color: #fff !important; }

/* (E) Darken the auto-injected `.blog-cta` "Book Your Pool Safety
   Inspection" panel — was reading too light. Drop the gradient end
   from primary-hover (#0a3d7a) to a deeper navy so the whole block
   is uniformly dark. Also bump the inner phone-link contrast.       */
.blog-cta {
  background: linear-gradient(135deg, #04204a 0%, #062b58 100%) !important;
  box-shadow: 0 12px 32px -10px rgba(4,32,74,0.4);
}
.blog-cta-phone {
  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.10);
}
.blog-cta-phone:hover {
  background: rgba(255,255,255,0.30) !important;
}


/* ================================================================
   v1.2.2 — Article-card pattern (2026-05-04)

   The v1.2.1 surface-2 (#f1f4f8) page bg was visually reading as
   white because nothing on the page provided contrast. On the
   homepage, .locations looks coloured because it sits between
   lighter sections. Solution: wrap the post / page article in a
   white card on the surface-2 body — same pattern as homepage's
   .location-card. The body's surface-2 bg becomes visible by
   contrast with the white article card.
   ================================================================ */

/* Pull the article up into the hero edge so the card overlaps the
   bottom of the dark hero — matches the homepage hero → card visual. */
.blog-main {
  padding-top: 0 !important;
}
.blog-main .container {
  padding-top: clamp(2rem, 5vw, 4rem);
}
.blog-layout {
  position: relative;
  z-index: 2;
}

/* Single post / location post — article sits on a crisp white card */
.blog-article {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(6,43,88,0.08));
  margin: 0 auto;
}

/* Blog index — already uses .blog-card grid, but the .blog-main
   container itself reads better with a tiny inner-pad bump.  */
.blog-main .blog-index {
  padding-top: 0;
}

/* page.php (.lpi__shell) — for plain WP pages like /areas/ that don't
   use legacy section markup, wrap the article in the same card.   */
.lpi__shell > article {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d7e2);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(6,43,88,0.08));
  margin: 0 auto;
  max-width: var(--content-default, 960px);
}

/* …but legacy service-detail pages (Form 23, NCR, Re-Inspections,
   FAQ, About, Contact) use full-width .hero-section / .section /
   .cta-section blocks that should NOT be wrapped in a card. The
   :has() rules from v1.2.0 already null .lpi__shell padding for
   those pages — extend them to also remove the white card style. */
.lpi__shell:has(.hero-section) > article,
.lpi__shell:has(section.section) > article,
.lpi__shell:has(.cta-section) > article {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* Make the body surface-2 read more obviously off-white-blue against
   the white card by deepening the divider/border tone slightly.  */
body.single .blog-article,
body.page .lpi__shell > article {
  border-color: var(--color-divider, #dde3ec);
}


/* ================================================================
   v1.2.3 — Section colour parity with homepage (2026-05-04)

   Targets:
     • Page background  → matches homepage .testimonials section
                          (var(--color-surface-2) = #f1f4f8)
     • Trailing in-post  → matches homepage .why-card pattern
       CTA block            (white #fff, 1px border, 1rem radius)

   Reverts v1.2.2's article-wrap (it covered the surface-2 bg with
   a giant white card, defeating the contrast). Article content
   sits directly on the surface-2 page bg, with .lpi-cta blocks
   appearing as visually-distinct white cards on top.
   ================================================================ */

/* --- Revert v1.2.2 article-card wrap so surface-2 body is visible --- */
.blog-main { padding-top: clamp(2rem, 5vw, 4rem) !important; }
.blog-main .container { padding-top: 0; }
.blog-layout { margin-top: 0 !important; z-index: auto; }
.blog-article {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.lpi__shell > article {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: var(--content-default, 960px) !important;
}

/* --- .lpi-cta (inline-styled "$250 includes everything" callouts) ---
   Repaint to .why-card pattern: white surface, divider border, rounded
   corners. Brand-navy heading + muted body text + navy phone link.
   The inline `style="background:#e8f4fa; border-left:4px solid #1e88c7"`
   on these divs is overridden via !important.                       */
.blog-content .lpi-cta,
.lpi__post-body .lpi-cta {
  background: var(--color-surface, #ffffff) !important;
  border: 1px solid var(--color-border, #d0d7e2) !important;
  border-left-width: 1px !important;     /* override inline 4px blue */
  border-radius: var(--radius-xl, 1rem) !important;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) !important;
  margin: 2.5rem 0 !important;
  color: var(--color-text, #0d1b2a) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(6,43,88,0.06));
  text-align: left;
}
.blog-content .lpi-cta p,
.lpi__post-body .lpi-cta p {
  color: var(--color-text-muted, #4a5568) !important;
  margin: 0 0 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}
.blog-content .lpi-cta p:last-child,
.lpi__post-body .lpi-cta p:last-child { margin-bottom: 0 !important; }

/* First <p> in the .lpi-cta = the "Form 23 in {Suburb}: $250..." title.
   The post HTML hardcodes `font-size:18px;font-weight:600` inline; we
   upgrade it to display-font + brand navy + bigger size for prominence. */
.blog-content .lpi-cta p:first-child,
.lpi__post-body .lpi-cta p:first-child {
  font-family: var(--font-display, "Cabinet Grotesk", sans-serif) !important;
  color: var(--color-primary, #062b58) !important;
  font-weight: 800 !important;
  font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 0.85rem !important;
}
.blog-content .lpi-cta a,
.lpi__post-body .lpi-cta a {
  color: var(--color-primary, #062b58) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700 !important;
}
.blog-content .lpi-cta a:hover,
.lpi__post-body .lpi-cta a:hover {
  color: var(--color-primary-hover, #0a3d7a) !important;
}
.blog-content .lpi-cta strong,
.lpi__post-body .lpi-cta strong { color: var(--color-text, #0d1b2a) !important; }

/* --- Null the broken .lpi-post-cta wrapper ---
   The PHP filter wraps the absolute-last <h2> in the post (which on
   location posts is the FAQ heading, immediately followed by <h3>),
   leaving an empty card. Disabled by removing the visual treatment;
   the actual closing CTA the user wants styled is the .lpi-cta div
   above, which is now properly painted.                              */
.lpi-post-cta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  display: contents;  /* dissolve the wrapper visually */
}


/* ================================================================
   v1.2.4 — Static service-area .php pages bg parity (2026-05-04)

   The 37 static service-area pages under /var/www/html/
   (pool-inspections-{suburb}.php, pool-inspection-whittington-vic.php,
   lpi-{suburb}.php) had their <body> tag re-emitted with
   class="lpi-service-area". This rule targets that class so the
   page bg matches the homepage's "What Our Clients Say" section
   (var(--color-surface-2) = #f1f4f8) — same parity as WP pages.
   ================================================================ */
body.lpi-service-area {
  background: var(--color-surface-2, #f1f4f8) !important;
}

/* 2026-05-05 — CTA section bg parity with .locations panel.
   Both the homepage .cta-banner pattern and the legacy WP service-page
   .cta-section pattern get var(--color-surface-2) background so the
   inner navy gradient card sits on the same off-white-blue panel
   as the OUR LOCATIONS section. */
.cta-banner,
.cta-section {
  background: var(--color-surface-2) !important;
}
/* The legacy .cta-section had a navy gradient itself — push that to
   the inner .container so it becomes a card instead of a band. */
section.cta-section > .container {
  background: linear-gradient(135deg, #062b58 0%, #0a3d7a 50%, #062b58 100%);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem) !important;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,0.55);
  max-width: var(--content-default, 960px);
  margin-inline: auto;
}
section.cta-section h2,
section.cta-section p {
  color: #fff !important;
}

/* ================================================================
   v1.2.8 — Dark-mode heading readability fix (2026-05-07)
   In dark mode, headings using var(--color-primary) become #5b9bd5
   (light blue) which can be hard to read against the navy/dark bg
   and feels disconnected from the brand. Force headings to a brighter
   white-on-dark with an accent-gold underline pattern so they read
   clearly and signal hierarchy.
   ================================================================ */
[data-theme="dark"] .lpi__post-title,
[data-theme="dark"] .lpi__post-body h2,
[data-theme="dark"] .lpi__post-body h3,
[data-theme="dark"] .blog-content h1,
[data-theme="dark"] .blog-content h2,
[data-theme="dark"] .blog-content h3 {
  color: var(--color-text, #e6edf3) !important;
}

/* Subtle gold left-border on h2 in dark mode for visual hierarchy */
[data-theme="dark"] .lpi__post-body h2,
[data-theme="dark"] .blog-content h2 {
  border-left: 4px solid var(--color-accent, #ffbe01);
  padding-left: 0.85rem;
  margin-top: 2.5rem;
}
[data-theme="dark"] .lpi__post-body h3,
[data-theme="dark"] .blog-content h3 {
  color: var(--color-accent, #ffbe01) !important;
}