/*
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.1.0  (was 1.0.9)
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 site-root blog-styles.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;
}