/* pages.css — supplemental styles for LPI static inner CONTENT pages.
   (about, services, faq, contact, form-23, ncr, re-inspections, areas,
    property-sale, compliance-consultation)

   PREMIUM-POLISH PASS 2026-07-01 (UI-only, zero content/DOM/schema change):
   These pages previously ran a plainer, generic grammar (flat #1e88c7 blue,
   #0d1117 centered hero, plain cards, 0.1-opacity shadows, 4px radii) that read
   as a *different, cheaper* site next to the premium navy #062b58 + amber #ffbe01
   homepage & suburb system. This file re-expresses every existing class in that
   same premium register — tokens from style.css only, brand palette only, real
   radius/shadow tokens, an editorial dossier feel — so the whole site reads as
   ONE composed object. No class names added/removed; no HTML text touched.

   DO NOT edit base.css or style.css. Brand: Navy #062b58 + Amber #ffbe01.
   Mirrors WP/Elementor class names used in live page bodies. */

/* ── Fixed-header legibility on content pages ──
   The shared header is `position:fixed; background:transparent` and paints its
   nav WHITE until the page is scrolled (`.header--scrolled`). The homepage &
   suburb pages get away with this because their FIRST element is a full-bleed
   navy hero. These content pages open on a LIGHT-bg trust-strip, so at scroll=0
   the transparent header shows white-on-white (invisible menu — the
   "transparent-header-needs-a-hero" failure). Fix, CSS-only, scoped to content
   pages via `:has(.lpi__shell)` (unique to the 10 content pages; homepage &
   suburbs have none): (a) clear the fixed header with top padding, (b) render
   the header in its solid/scrolled skin from the start so nav is always legible. */
body:has(.lpi__shell):not(:has(.hero)) .header {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-sm);
}
body:has(.lpi__shell):not(:has(.hero)) .header .header__nav a,
body:has(.lpi__shell):not(:has(.hero)) .header .theme-toggle { color: var(--color-text); }
body:has(.lpi__shell):not(:has(.hero)) .header .hamburger span { background: var(--color-text); }
/* graceful fallback for engines without :has() — pad the shell so text still
   clears the header even if the solid-skin rule above doesn't apply. */
.lpi__shell { padding-top: clamp(4.5rem, 8vw, 6rem); }

/* ── Post shell / body wrapper — editorial measure on the navy-aware canvas ── */
.lpi__shell { min-height: 60vh; }
.lpi__post-body {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}
.lpi__post-body > .hero-section,
.lpi__post-body > .lpi__post-header {
  /* let the hero band bleed to the measure edges, not the narrow text column */
  margin-inline: calc(-1 * var(--space-2));
}
.lpi__post-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: var(--space-10) 0 var(--space-4);
}
.lpi__post-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-8) 0 var(--space-3);
}
.lpi__post-body p  { line-height: 1.75; margin-bottom: var(--space-4); color: var(--color-text-muted); }
.lpi__post-body ul,
.lpi__post-body ol { padding-left: var(--space-5); margin-bottom: var(--space-4); line-height: 1.75; color: var(--color-text-muted); }
.lpi__post-body a  { color: var(--color-primary); text-underline-offset: 2px; }
[data-theme="dark"] .lpi__post-body a { color: var(--color-accent); }

/* ── Trust strip (inner-page variant) — the homepage's premium navy strip is
      already fully styled in style.css and wins by later declaration; this
      block only carries a graceful fallback for the same class here. ── */
.lpi-trust-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: #041d3d;
  color: #fff;
  border: 1px solid #07294f;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}
.lpi-trust-strip__badge::before {
  content: "✓";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  color: #0d1b2a;
  border-radius: var(--radius-full);
  text-align: center;
  line-height: 28px;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.lpi-trust-strip__name { font-weight: 600; display: block; color: #fff; }
.lpi-trust-strip__lic  { color: rgba(255,255,255,0.8); font-size: var(--text-xs); }
.lpi-trust-strip__verify { color: var(--color-accent); text-decoration: none; font-weight: 700; }
.lpi-trust-strip__verify:hover { text-decoration: underline; }

/* ── Hero band (inner content pages) — the navy dossier canvas, not a flat slab.
      Paint-once amber/navy bloom + finite measure + hairline index-mark kicker
      register. Left-anchored editorial, matching the homepage hero language. ── */
.hero-section,
.lpi__post-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.25rem);
  margin-bottom: var(--space-10);
  background:
    radial-gradient(120% 120% at 82% 12%, #0a3d7a 0%, transparent 56%),
    linear-gradient(165deg, #062b58 0%, #041d3d 60%, #02152d 100%);
  box-shadow: 0 16px 48px -18px rgba(6,43,88,0.55);
}
/* paint-once warm bloom — never animated/scroll-linked */
.hero-section::before,
.lpi__post-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 86% 16%, rgba(255,190,1,0.22) 0%, rgba(255,190,1,0.06) 42%, transparent 70%),
    radial-gradient(52% 52% at 6% 96%, rgba(91,155,213,0.16) 0%, transparent 64%);
}
/* hairline gold index-mark above the H1 (bespoke kicker register, not a plain label) */
.hero-section::after,
.lpi__post-header::after {
  content: "";
  position: absolute;
  top: clamp(1.6rem, 4vw, 2.4rem);
  left: clamp(1.5rem, 5vw, 3.25rem);
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(255,190,1,0.1));
}
.hero-section .container,
.lpi__post-header .container,
.hero-section > *,
.lpi__post-header > * {
  position: relative;
  z-index: 1;
}
.hero-section h1,
.lpi__post-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
  max-width: 22ch;
  margin: var(--space-4) 0 0;
}
.hero-section p,
.lpi__post-header p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  max-width: 56ch;
  margin: var(--space-5) 0 0;
  padding-left: var(--space-5);
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--color-accent) 0%, rgba(255,190,1,0.15) 100%) 1;
}
/* keep the hero band's container centering neutral so text left-anchors */
.hero-section .container,
.lpi__post-header .container { max-width: 760px; margin-inline: 0; padding-inline: 0; }

/* ── TL;DR box — an editorial "in short" answer plate, amber-ruled ── */
.lpi-tldr {
  /* owner 2026-07-03: match the .lpi-cta booking card's surface (was accent gold tint) */
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  line-height: 1.7;
  font-size: var(--text-base);
}
.lpi-tldr strong { color: var(--color-primary); }
[data-theme="dark"] .lpi-tldr strong { color: var(--color-accent); }

/* ── Inline CTA callout ── */
.lpi-cta {
  background: var(--color-primary-light);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  color: var(--color-text);
}
.lpi-cta strong { color: var(--color-primary); }
[data-theme="dark"] .lpi-cta strong { color: var(--color-accent); }

/* ── Figure wrapper ── */
.lpi-figure { margin: var(--space-8) 0; }
.lpi-figure figure { margin: 0; }
.lpi-figure img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--shadow-md);
}
.lpi-figure figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* ── Section wrappers ── */
.section       { padding: clamp(var(--space-10), 5vw, var(--space-16)) 0; }
.section-light { background: transparent; }
.section-gray  { background: transparent; }

/* ── Grid layouts ── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) var(--space-10);
}

/* ── Card — premium surface with real border/radius/shadow tokens + hover-lift ── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.card h3 { margin-top: 0; }

/* ── Feature list — hairline-ruled rows ── */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li strong { color: var(--color-text); font-weight: 700; }

/* ── Services grid (content-page variant) — mirrors homepage service cards ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
/* content-page service cards live inside .lpi__post-body — scope so we don't
   fight the homepage .service-card (image card) rules from style.css */
.lpi__post-body .service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.lpi__post-body .service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.lpi__post-body .service-card h2,
.lpi__post-body .service-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.lpi__post-body .service-card p { margin-bottom: 0; }

/* ── Process steps — an editorial numbered chapter spine, not a bare 1-2-3 grid.
      The visible "1. 2. 3." text stays in the HTML (untouched); we hang a large
      display numeral behind each step + a gold connector, so it reads as a
      *method that counts itself*, not a template triad (AI-tell substitute). ── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
  counter-reset: lpi-step;
  position: relative;
}
.process-step {
  position: relative;
  counter-increment: lpi-step;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-align: left;
  overflow: hidden;
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.process-step::before {
  content: counter(lpi-step, decimal-leading-zero);
  position: absolute;
  top: -0.35rem;
  right: 0.4rem;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.process-step::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), rgba(255,190,1,0));
}
.process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.process-step h3 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.process-step p {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Why-card grid ── */
.lpi-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.lpi__post-body .why-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.lpi__post-body .why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

/* ── About lead section ──
   The prose column carries several paragraphs while the figure is short, so a
   symmetric 1fr/1fr + center-align jammed the text into a ~35ch column and left
   a tall empty gutter above/below the vertically-centred figure (the "narrow-left
   prose + empty right" imbalance). Rebalance CSS-only: give the prose the dominant
   share for a comfortable measure, hold the figure to a top-anchored inset that
   sits beside the opening paragraphs, and let the wide prose run its full height
   below it. `minmax(0,…)` prevents long words/URLs from blowing out either track. */
.lpi-about-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-10);
  align-items: start;
  margin: var(--space-10) 0;
}
@media (max-width: 700px) {
  .lpi-about-lead { grid-template-columns: 1fr; }
}
.lpi-about-lead figure { margin: 0; align-self: start; }
.lpi-about-lead img { border-radius: var(--radius-lg); width: 100%; height: auto; box-shadow: var(--shadow-md); }

/* ── Areas tags ── */
.areas__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.area-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              transform var(--transition-interactive);
}
.area-tag:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  transform: translateY(-2px);
}

/* ── FAQ items (content-page variant: .faq-question / .faq-answer are plain
      divs here, DISTINCT from the homepage <details> .faq-item__question).
      Style them as a quiet document Q&A list — hairline-ruled, amber marker. ── */
.lpi-faq { margin-top: var(--space-10); }
.lpi__post-body .faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.lpi__post-body .faq-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.faq-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  cursor: default;
  display: flex;
  gap: var(--space-3);
}
.faq-question::before {
  content: "Q";
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-accent);
}
.faq-answer { color: var(--color-text-muted); line-height: 1.7; padding-left: 1.35rem; }

/* ── Byline ── */
.lpi-byline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}

/* ── CTA section — the navy dossier band that bookends the page (matches the
      homepage .cta-banner card language), not a flat blue slab. ── */
.cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-align: center;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  margin: var(--space-12) 0 var(--space-4);
  background:
    radial-gradient(120% 140% at 82% 12%, #0a3d7a 0%, transparent 58%),
    linear-gradient(165deg, #062b58 0%, #041d3d 58%, #02152d 100%);
  box-shadow: 0 16px 48px -12px rgba(0,0,0,0.5);
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 50%, rgba(255,190,1,0.10) 0%, transparent 55%),
    radial-gradient(40% 50% at 82% 50%, rgba(91,155,213,0.12) 0%, transparent 55%);
}
.cta-section .container { position: relative; z-index: 1; max-width: 640px; }
.cta-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-3);
  color: #fff;
}
.cta-section p {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

/* ── Button dash-variants used only on these content pages (.btn-white,
      .btn-primary, .btn-lg). style.css only defines the BEM .btn--* set, so
      these were effectively UNSTYLED. Map them onto the brand button language. ── */
.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}
.btn-primary {
  background: var(--color-accent);
  color: #0d1b2a;
}
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-white {
  background: #fff;
  color: var(--color-primary);
}
.btn-white:hover { background: var(--color-accent); color: #0d1b2a; }

/* ── Sticky call bar — premium navy pill, amber CTA ── */
.lpi-callbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in srgb, #041d3d 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,190,1,0.25);
  color: #fff;
  font-size: var(--text-sm);
}
.lpi-callbar__label { opacity: 0.9; }
.lpi-callbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: #0d1b2a;
  text-decoration: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: transform var(--transition-interactive),
              background var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.lpi-callbar__btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Content-page form inputs — inline-styled in HTML (border/padding/radius),
      but no inline background/color, so we can make them theme-aware here. ── */
.lpi__post-body input[type="text"],
.lpi__post-body input[type="email"],
.lpi__post-body textarea {
  background: var(--color-bg);
  color: var(--color-text);
}
.lpi__post-body input:focus,
.lpi__post-body textarea:focus {
  outline: none;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
[data-theme="dark"] .lpi__post-body input[type="text"],
[data-theme="dark"] .lpi__post-body input[type="email"],
[data-theme="dark"] .lpi__post-body textarea {
  border-color: var(--color-border) !important;
}
.lpi__post-body label { color: var(--color-text); }

/* ── Utility ── */
.mb-4 { margin-bottom: var(--space-6); }
.mb-5 { margin-bottom: var(--space-8); }
.mt-3 { margin-top: var(--space-4); }
.text-center { text-align: center; }
.lpi-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.lpi-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), rgba(255,190,1,0.1));
}

/* ── Dark theme — the content pages now sit on the app's normal --color-bg
      (transparent section wrappers above), so the tokened surfaces carry
      dark mode automatically. A few explicit fixes for the bespoke bands. ── */
[data-theme="dark"] .lpi-trust-strip { background: #041d3d; border-color: rgba(255,190,1,0.28); }
[data-theme="dark"] .lpi-tldr        { background: var(--color-primary-light); border-color: var(--color-border); }
[data-theme="dark"] .lpi-cta         { background: var(--color-primary-light); border-color: var(--color-border); }
[data-theme="dark"] .card            { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .feature-list li { border-color: var(--color-divider); color: var(--color-text); }
[data-theme="dark"] .area-tag        { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .lpi-callbar     { background: color-mix(in srgb, #02152d 92%, transparent); }