/* =============================================================
   LANDING / SITE-PAGE CONTENT STYLES
   Loads after front.css on every site-layout page.

   Two jobs:
     PART A — repair the cascade so design-system components
              hand-written into .entry-content render the way they
              do everywhere else on the site.
     PART B — the few new components landing pages need that the
              design system has no equivalent for.

   Nothing here restyles an existing page. Every Part A selector is
   scoped inside .sg-page-content .entry-content, which exists only
   on pages using the Site Page template.
   ============================================================= */

/* -------------------------------------------------------------
   PART A — cascade repairs
   ------------------------------------------------------------- */

/* A1 · SAFETY NET — the page body must never be invisible.
   page-templates/site-page.php:20 puts `reveal` on the section that
   wraps 100% of the page body, and front.css:1501 sets
   `.reveal { opacity: 0 }`. The `in` class that reveals it is added
   by front.js:333 — inside a single outer IIFE that starts at
   front.js:2. Any uncaught error earlier in that IIFE (the
   before/after slider at front.js:223 dereferences #baDivider and
   #baHandle unguarded) aborts the rest of the file, and the entire
   page stays at opacity 0. So does a JS-disabled browser, a 404 on
   front.js, or a CSP block — there is no <noscript> fallback
   anywhere in the theme.
   Children marked .reveal still animate. The body cannot disappear. */
.pp-site-page .sg-page-content.reveal { opacity: 1; transform: none; }

/* A2 · Buttons. `.sg-page-content .entry-content a:hover`
   (front.css:2305, specificity 0-3-1) beats `.btn-primary:hover`
   (front.css:78, 0-2-0) — so an orange button gets orange text on an
   orange background on hover, and navy-blue 600-weight text at rest. */
.sg-page-content .entry-content a.btn { font-weight: 700; }
.sg-page-content .entry-content a.btn-primary,
.sg-page-content .entry-content a.btn-primary:hover,
.sg-page-content .entry-content button.btn-primary { color: var(--navy-900); }
.sg-page-content .entry-content a.btn-outline-dark { color: var(--navy); }
.sg-page-content .entry-content a.btn-outline-dark:hover { color: #fff; }
.sg-page-content .entry-content a.btn-outline-light { color: #fff; }
.sg-page-content .entry-content a.btn-outline-light:hover { color: var(--navy-900); }

/* A3 · Stop the prose rules loosening every component.
   `.entry-content p { margin-bottom: 1rem }` and
   `h2, h3 { margin-top: 1.75rem }` leak into cards, splits and grids. */
.sg-page-content .entry-content [class*="sg-"] p,
.sg-page-content .entry-content [class*="sg-"] h2,
.sg-page-content .entry-content [class*="sg-"] h3,
.sg-page-content .entry-content [class*="sg-"] h4 { margin: 0; }

/* A4 · Card padding. front.css:1720-1735 scopes .sg-card padding to
   .pp-services-page / .pp-service-page / .pp-projects-page. A Site
   Page's <main> is .pp-site-page, so cards arrive with no padding. */
.pp-site-page { --sg-card-padding: clamp(22px, 3vw, 28px); }
.pp-site-page .entry-content .sg-card { padding: var(--sg-card-padding); }
.pp-site-page .entry-content .sg-card.sg-trust { padding: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 40px); }
.pp-site-page .entry-content .sg-card.sg-svc-landing-guidance__card { padding: clamp(28px, 4vw, 40px); }
.pp-site-page .entry-content .sg-service-card.sg-card { padding: 0; }
.pp-site-page .entry-content .sg-service-card__body { padding: clamp(18px, 2.5vw, 22px) clamp(18px, 2.5vw, 22px) clamp(20px, 2.5vw, 24px); }

/* A5 · Never distort a sized image. front.css:60 sets max-width:100%
   with no height:auto, and main.css (which does set it) is not loaded
   on site-layout pages — inc/enqueue.php:47 early-returns. */
.sg-page-content .entry-content img { height: auto; }

/* A6 · Match the roomier service-landing vertical rhythm.
   `.pp-svc-landing-page .sg-section` (front.css:2310) does not apply here. */
.pp-site-page .entry-content .sg-section { padding-block: clamp(36px, 5vw, 56px); }
.pp-site-page .entry-content > .sg-section:first-child { padding-top: 0; }

/* A7 · Body links get an underline, matching .sg-blog-single__content a.
   Buttons and design-system components are excluded. */
.sg-page-content .entry-content a:not(.btn):not([class*="sg-"]):not([class*="pp-"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* A8 · Readable default lists. */
.sg-page-content .entry-content ul,
.sg-page-content .entry-content ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.sg-page-content .entry-content li { margin-bottom: .5rem; line-height: 1.7; }
.sg-page-content .entry-content li::marker { color: var(--orange); }

/* A9 · Tables and blockquotes. front.css styles neither, and the cost
   page is mostly tables. */
.sg-page-content .entry-content .sg-table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
.sg-page-content .entry-content table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; font-size: 15px;
}
.sg-page-content .entry-content .sg-table-scroll table { margin: 0; min-width: 560px; }
.sg-page-content .entry-content th,
.sg-page-content .entry-content td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.sg-page-content .entry-content thead th {
  background: var(--grey-50); font-weight: 700; color: var(--charcoal);
  font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
}
.sg-page-content .entry-content tbody tr:last-child td { border-bottom: 0; }
.sg-page-content .entry-content td strong { color: var(--charcoal); }
.sg-page-content .entry-content blockquote {
  margin: 0 0 1.5rem; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--orange);
  color: var(--charcoal); font-size: 17px; line-height: 1.7;
}

/* A10 · Sticky-header-safe anchors. The header is 84px and sticky. */
.sg-page-content .entry-content [id] { scroll-margin-top: 100px; }

/* -------------------------------------------------------------
   PART B — new landing-page components
   ------------------------------------------------------------- */

/* B1 · Fact strip — the answer-first block directly under the H1.
   Exists because the pages have to answer "who, where, licensed?"
   above the fold on a phone, and because a passage of short,
   self-contained, factual lines is the shape generative engines
   quote from. */
.pp-lp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.pp-lp-fact { background: var(--white); padding: 18px 20px; }
.pp-lp-fact__k {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-600); display: block; margin-bottom: 6px;
}
.pp-lp-fact__v {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--charcoal); line-height: 1.45; display: block;
}
.pp-lp-fact__v a { color: var(--navy); font-weight: 700; }

/* B2 · Job card — a documented local job. The single most important
   block on a location page: it is the content no competitor can copy
   and the reason the page is not "unoriginal content that provides
   little to no value". */
.pp-lp-jobs { display: grid; gap: clamp(20px, 3vw, 28px); }
@media (min-width: 861px) { .pp-lp-jobs--two { grid-template-columns: 1fr 1fr; } }
.pp-lp-job {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-1); overflow: hidden;
}
.pp-lp-job__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.pp-lp-job__media figure { margin: 0; position: relative; }
.pp-lp-job__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pp-lp-job__media figcaption {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(14,39,71,.82); color: #fff;
  padding: 5px 9px; border-radius: 100px;
}
.pp-lp-job__body { padding: clamp(20px, 3vw, 26px); }
.pp-lp-job__meta {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.pp-lp-job__body h3 {
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700; color: var(--navy); line-height: 1.25; margin: 0 0 12px;
}
.pp-lp-job__spec { margin: 16px 0 0; border-top: 1px solid var(--border); padding-top: 14px; }
.pp-lp-job__spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.pp-lp-job__spec dt {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-top: 2px; white-space: nowrap;
}
.pp-lp-job__spec dd { margin: 0; font-size: 15px; color: var(--charcoal); font-weight: 600; line-height: 1.5; }

/* B3 · Inline CTA strip — [pp_cta]. */
.pp-lp-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  background: linear-gradient(135deg, var(--navy-900), var(--navy));
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 40px);
  margin: clamp(28px, 4vw, 40px) 0;
}
.pp-lp-cta__copy { flex: 1 1 320px; }
.pp-lp-cta__copy h2 {
  font-family: var(--serif); font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700; color: #fff; line-height: 1.2; margin: 0 0 8px;
}
.pp-lp-cta__copy p { color: rgba(255,255,255,.82); line-height: 1.6; margin: 0; font-size: 15.5px; }
.pp-lp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 1 auto; }
.pp-lp-cta .btn-outline-dark,
.sg-page-content .entry-content .pp-lp-cta a.btn-outline-dark {
  border: 1px solid rgba(255,255,255,.5); color: #fff; background: transparent;
}
.pp-lp-cta .btn-outline-dark:hover,
.sg-page-content .entry-content .pp-lp-cta a.btn-outline-dark:hover {
  background: #fff; color: var(--navy-900); border-color: #fff;
}

/* B4 · Quote form card — [pp_quote_form]. */
.pp-lp-formcard {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: clamp(24px, 4vw, 36px);
}
.pp-lp-formcard__title {
  font-family: var(--serif); font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700; color: var(--navy); line-height: 1.2; margin: 0 0 10px;
}
.pp-lp-formcard__intro { color: var(--body); line-height: 1.65; margin: 0 0 22px; }
.pp-lp-form__aside { margin: 14px 0 0; text-align: center; font-size: 15px; color: var(--body); }
.pp-lp-form__aside a { color: var(--navy); font-weight: 700; white-space: nowrap; }

/* Two-up: form beside the closing argument. */
.pp-lp-close { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; }
@media (min-width: 961px) { .pp-lp-close { grid-template-columns: 1fr minmax(380px, 460px); } }

/* B5 · Sticky mobile call bar.
   The header still hides `.sg-head-cta .btn` under 860px
   (front.css:1537) and there is no fixed element on the domain other
   than the nav overlay and the lightbox. 55% of Search Console clicks
   are mobile and mobile CTR beats desktop about 9:1, so without this a
   landing page has no call action for the majority of its traffic. */
.pp-callbar { display: none; }
@media (max-width: 860px) {
  .pp-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(150%) blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(16,24,40,.10);
  }
  .pp-callbar a {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; border-radius: var(--r-md);
    font-family: var(--sans); font-size: 15.5px; font-weight: 700;
    letter-spacing: .01em; text-decoration: none;
  }
  .pp-callbar__call { background: var(--orange); color: var(--navy-900); }
  .pp-callbar__call svg { width: 17px; height: 17px; }
  .pp-callbar__quote { background: var(--navy); color: #fff; }
  /* Keep the last section clear of the bar. Scoped to `.pp-has-callbar`
     (added by particular_painting_landing_body_class()) and NOT to
     `.pp-site-page`, which header-site.php:26 puts on the body of every
     non-front site-layout page — twelve of which have no call bar. */
  .pp-has-callbar { padding-bottom: 76px; }
}
@media (max-width: 380px) {
  .pp-callbar a { font-size: 14px; }
}

/* B6 · Source note — used under every price table. Price figures are
   third-party market data, attributed inline, not a price offer. */
.pp-lp-source {
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
  margin: -.5rem 0 1.75rem;
}
.pp-lp-source a { color: var(--muted); text-decoration: underline; }

/* B7 · Answer block — a short, quotable, self-contained answer.
   Placed immediately under a question-form H2. */
.pp-lp-answer {
  background: var(--light-blue);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 20px; margin: 0 0 1.25rem;
}
.pp-lp-answer p { margin: 0; color: var(--charcoal); font-size: 16.5px; line-height: 1.65; font-weight: 600; }
.pp-lp-answer p + p { margin-top: 10px; font-weight: 400; color: var(--body); font-size: 16px; }

/* B8 · Disclosure note — for the licence/insurance line. */
.pp-lp-note {
  background: var(--cream); border: 1px solid rgba(254,161,0,.35);
  border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 1.25rem;
  font-size: 15px; line-height: 1.65; color: var(--charcoal);
}

/* -------------------------------------------------------------
   PART C — templates that were never given the site design

   404.php, page.php, archive.php and index.php called bare
   get_header() / get_footer() and so rendered header.php +
   main.css — a different design system with a different palette,
   no nav, no logo, no phone number and no CTA. They were switched
   to the 'site' variants on 18 Aug 2026 and their bodies rebuilt
   in sg- components.

   Almost everything they need already exists and is unscoped in
   front.css (.sg-intro, .sg-label, .sg-services-grid,
   .sg-service-card--front, .sg-blog-grid, .sg-blog-card,
   .sg-blog-pagination, .sg-blog-empty). These are the few gaps.
   ------------------------------------------------------------- */

/* C1 · Action row — the 404's call and quote buttons.
   The site header still hides `.sg-head-cta .btn` below 860px, so on a
   phone these two are the only call action on the document. */
.pp-recover__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(22px, 3vw, 28px);
}
.pp-recover__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 561px) {
  .pp-recover__actions .btn { flex: 0 0 auto; }
}

/* C2 · Site search. front.css styles the control itself under `.sg-field`,
   which this reuses; the row layout is new. Deliberately NOT `.sg-form` —
   that carries clamp(26px,4vw,38px) of its own padding (front.css:883),
   which indents the row away from the heading above it.
   The explicit min-height on both children is what keeps the input and the
   button the same height: the input's height comes from 15px text plus
   12px padding, the button's from 16px text plus 15px padding, and they do
   not otherwise agree. */
.pp-recover__search {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
  max-width: 560px;
}
.pp-recover__search .sg-field { flex: 1 1 260px; margin-bottom: 0; display: flex; }
.pp-recover__search .sg-field input { min-height: 52px; }
.pp-recover__search .btn { flex: 0 0 auto; min-height: 52px; }

/* C3 · Inline link row under the search box. */
.pp-recover__links {
  margin: 18px 0 0; font-size: 15px; line-height: 1.9; color: var(--muted);
}
.pp-recover__links a {
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pp-recover__links a:hover { color: var(--orange-600); }
.pp-recover__links a + a { margin-left: 4px; }

/* C4 · Archive / search-results head. `.sg-intro` carries the h1 scale;
   this is the count line under it. */
.pp-arc__meta {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-top: 14px;
}
.pp-arc__meta em { font-style: normal; color: var(--navy); }

/* C5 · The default page template (page.php) now mirrors site-page.php,
   but template-parts/page/hero.php returns early unless the Page Hero
   meta box is enabled — and on a page created without picking the
   "Site Page" template it never is. Without this the page would render
   with NO h1 at all, which is the exact failure the hero meta box has
   on Site Pages today. */
.pp-page-title { padding-block: clamp(40px, 6vw, 64px) 0; }
.pp-page-title h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.015em;
  color: var(--charcoal); line-height: 1.12;
}