/*  SOAR-GC — DEFENSIVE LAYER
    These rules exist because of WordPress/Divi behaviours, not design decisions.
    Each one is load-bearing. Read the comment before deleting any of them. */

/* Divi/theme guide-line pseudo-element shows against a dark background. */
.container::before{display:none!important}

/* wpautop re-inserts <br> into the hero H1 on save -> loose line spacing.
   Was MISSING from page 120's fix block on the deleted site. */
#heroH1 br{display:none!important}

/* wpautop drops a stray empty <p> into the gallery grid -> phantom empty row. */
.kx .gal>*:not([class^="g"]){display:none!important}

/* Charles's call 2026-07-21: remove the stark white before/after divider line,
   keep both images and the .grip handle.
   Recorded in the conversion recipe but ABSENT from all three FINAL artifacts. Re-added here. */
.kx .ba .ln{display:none}

/* Full-width without per-page CSS. Any page wrapped in .soar-fw goes edge to edge. */
#main-content .container:has(.soar-fw){max-width:100%!important;width:100%!important;padding:0!important}
#left-area:has(.soar-fw){width:100%!important;max-width:100%!important;padding:0!important}
.container:has(.soar-fw) #sidebar{display:none!important}
.container:has(.soar-fw) .entry-title,.container:has(.soar-fw) .et_post_meta_wrapper{display:none!important}

/* Dark page background behind the wrapper. Was page-id-scoped inline on the deleted site,
   which is how a clone once carried page 112's rules onto page 223. Now global. */
body.soar-dark,body.soar-dark #main-content{background:#0a0e14}

/* Portrait project grids. Contractor photography is overwhelmingly 1080x1920;
   a 3:2 box discards 62% of every frame. Four-class selector + !important was REQUIRED. */
.soar-proj .sp-sec .sp-wrap .sp-grid.sp-grid--tall{grid-template-columns:repeat(3,1fr)!important}
.soar-proj .sp-sec .sp-wrap .sp-grid.sp-grid--tall img{aspect-ratio:3/4!important;object-fit:cover;object-position:center}
.soar-proj .sp-sec .sp-wrap .sp-grid.sp-grid--tall figure.sp-wide{grid-column:span 2}
.soar-proj .sp-sec .sp-wrap .sp-grid.sp-grid--tall figure.sp-wide img{aspect-ratio:3/2!important}
@media(max-width:900px){.soar-proj .sp-grid.sp-grid--tall{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.soar-proj .sp-grid.sp-grid--tall{grid-template-columns:1fr!important}}

/* ── body#error-page ─────────────────────────────────────────────────────
   On the AAA install the front-end <body> renders with id="error-page",
   which carries WordPress's wp_die() styling: max-width 700px, auto margins.
   Every SOAR page was therefore rendering in a 642px column on a 1721px
   viewport, with the full-width rules above working correctly but boxed in
   from four levels higher up.

   Source is a plugin, not the theme — the body also carries dipi-* classes
   (Divi Plus). Overridden here rather than chased, because the theme must
   render correctly regardless of what the host install puts on <body>.

   Diagnosed by walking the offsetParent chain and reading computed widths,
   not by reading CSS. The .soar-fw rules looked right the whole time. */
body#error-page{max-width:none!important;min-width:0!important;margin:0!important;padding:0!important}
body#error-page #page-container,
body#error-page #et-boc,
body#error-page #et-main-area,
body#error-page #main-content{width:auto!important;max-width:none!important}

/* ── FAIL-OPEN ANIMATIONS ────────────────────────────────────────────────
   Every entrance animation now defaults to its FINISHED state. JavaScript
   opts IN to animating by putting .soar-anim on <html>; if the script never
   runs, or runs and fails, the page is fully visible and fully crawlable.

   WHY. On the AAA install these rules previously defaulted to opacity:0 and
   waited for an IntersectionObserver to add .in. The observer never ran, so
   everything below the hero rendered invisible -- 20 .reveal elements, 0 with
   .in -- while the markup, the QA gate and a local render all looked perfect.

   The script did not fail on its own. The page throws 42 JS exceptions before
   it is reached: "wp is not defined", "moment is not defined", "_ is not
   defined", "Waypoint is not defined". Script concatenation on this host is
   emitting inline -js-after blocks ahead of the libraries they depend on.

   SEO consequence, which is the real reason this is a fail-open now:
   Googlebot renders CSS. opacity:0 content is discounted or ignored. A broken
   third-party script must never be able to hide a page's content from a
   crawler. Animation is decoration; visibility is not. */
.kx .reveal{opacity:1;transform:none}
.kx .hero h1 .w,.kx #heroH1 .w{transform:none}
.kx .artframe .ph img,.kx .gal img{clip-path:none}
.kx .tl .fill{width:100%}

html.soar-anim .kx .reveal:not(.in){opacity:0;transform:translateY(38px)}
html.soar-anim .kx #heroH1 .w:not(.in){transform:translateY(110%)}
html.soar-anim .kx .artframe:not(.in) .ph img{clip-path:inset(0 0 100% 0)}
html.soar-anim .kx .gal:not(.in) img{clip-path:inset(0 100% 0 0)}
html.soar-anim .kx .tl:not(.in) .fill{width:0}

/* ---------------------------------------------------------------------------
   v1.0.3 — HERO LINE-MASK SELECTOR MISMATCH
   _components.css styles the hero word-mask lines as `.kx .hero h1 .ln`, but
   SOAR pages must not emit their own <h1> (the theme supplies exactly one), so
   the hero headline ships as <h2 id="heroH1">. The block rule therefore never
   matched, .ln stayed inline, and adjacent lines ran together with no space:
   "a whole-home remodeland 1,400 sq ftof new house".
   Re-declare against the id, which is stable across both markups. */
.kx #heroH1 .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.1em}

/* Optional hard scrim for heroes whose photograph is bright enough to swallow
   the eyebrow and sub copy. Opt in per page: <section class="hero scrim-hard">. */
.kx .hero.scrim-hard .hero-media::after{
  background:linear-gradient(180deg,rgba(10,14,20,.74) 0%,rgba(10,14,20,.52) 38%,rgba(10,14,20,.93) 100%)}

/* ---------------------------------------------------------------------------
   v1.0.4 — THE ORPHANED THEME BUILDER FOOTER

   The global footer is a Divi Theme Builder layout authored against the Divi
   Tradesman child theme. Tradesman supplied the dark section background; the
   layout only ever set the TEXT colour, which is #fff.

   Tradesman was deactivated on 2026-08-02 when soar-gc went in. The background
   went with it. The white text did not. Result: 24 modules -- phone number,
   opening hours, Popular Services, Useful Links, newsletter, copyright --
   rendering white on the white <body>, invisible on every page on the site.

   This is not a SOAR page problem; it sits below .kx and applies sitewide.
   Restore the surface the layout was designed on, in SOAR tokens, so the
   existing white text works as authored and the footer reads as part of the
   dark pages above it.

   INTERIM. The real fix is a soar-gc footer in the repo, built when the
   service pages land -- the footer's Popular Services links point at legacy
   Tradesman URLs and have to be rewritten at that point anyway. */
.et-l--footer{background:var(--bg2,#0d1420);border-top:1px solid rgba(255,255,255,.10)}
.et-l--footer a{color:var(--brass-2,#e4c98f)}
.et-l--footer a:hover{color:#fff}
.et-l--footer .et_pb_divider_internal{border-top-color:rgba(255,255,255,.14)}

/* The <body> is #fff. Any gap the footer does not cover -- overscroll, or a
   page shorter than the viewport -- flashes white under a dark page. */
body{background:var(--bg,#0a0e14)}

/* ---------------------------------------------------------------------------
   v1.0.6 — PRIMARY ACTION SURFACES GO BRASS

   `.btn-gold` was painted with the blue primary ramp (--pri / --pri-2), so the
   class named "gold" rendered blue on every page. Charles ruled brass on
   2026-08-03. Brass is already the accent throughout -- eyebrows, italic
   emphasis, stat units, tick marks -- so the CTA was the one element fighting
   the palette.

   Every surface that reads as "this is the action" moves together. Blue stays
   as the secondary/link ramp; it is more legible than brass for body links on
   a dark ground. Re-brand by editing _tokens.css alone. */
.kx .btn-gold{background:linear-gradient(135deg,var(--brass-2),var(--brass));color:#1a1206}
.kx .btn-gold:hover{box-shadow:0 20px 44px -14px rgba(201,168,106,.45)}
.kx .btn-solid{background:var(--brass);color:#1a1206}
.kx .btn-solid:hover{background:var(--brass-2)}
.kx .opt.sel{background:linear-gradient(135deg,var(--brass-2),var(--brass));color:#1a1206;border-color:transparent}
.kx .tier .badge{background:linear-gradient(135deg,var(--brass-2),var(--brass));color:#1a1206}
.kx .ba .la{background:linear-gradient(135deg,var(--brass-2),var(--brass));color:#1a1206}
.kx .calc-result::before{background:radial-gradient(circle,rgba(201,168,106,.16),transparent 70%)}

/* ---------------------------------------------------------------------------
   v1.0.7 — THE DIVI THEME BUILDER BODY LAYOUT FOR SINGLE PROJECTS

   Moving SOAR project pages onto the `project` post type inherited a Divi
   Theme Builder BODY layout from the Tradesman build. It wraps the post
   content in three sections, all with a white background:

     0  post content   -> holds .kx, which paints itself, so it read fine
     1  comments       -> "0 Comments / SUBMIT A COMMENT", 54px padding, white
     2  fullwidth portfolio -> a related-projects slider, white, 9 thumbnails

   Sections 1 and 2 appeared below every project as a white band. Neither was
   wanted:

   - COMMENTS. Closed sitewide on the original build; new project posts default
     to open. Also killed in PHP (see functions.php) so the markup never renders
     -- this rule only handles posts created before that guard existed.
   - RELATED PROJECTS. It currently pulls the 12 legacy Tradesman projects that
     are queued for harvest-then-redirect, and stamps each with its WordPress
     publish date -- so a job built in 2018 is labelled with today's date. That
     is worse than showing nothing. Hidden until a SOAR "More projects" module
     is built off project_category during the /projects/ index work.

   Every Theme Builder section on a single project is forced to the SOAR ground
   so no white can show through a section we have not accounted for. */
.single-project .et-l--body .et_pb_section{background-color:var(--bg) !important}
.single-project .et_pb_comments_module,
.single-project .et_pb_fullwidth_portfolio{display:none !important}
.single-project .et-l--body .et_pb_section_1_tb_body,
.single-project .et-l--body .et_pb_section_2_tb_body{padding:0 !important;min-height:0 !important}

/* ---------------------------------------------------------------------------
   v1.0.8 — #main-content IS WHITE

   Divi paints #main-content white. On a Page template the SOAR body filled it
   edge to edge so nothing showed. The project template adds ~55px of trailing
   space below the post content, and that strip rendered as a white band
   between the CTA and the footer -- visible on every project page.

   Fixed at the container rather than by padding-hacking the sections, so it
   also covers any future template that leaves slack below .kx. The :has()
   rule makes it automatic for the service pages when they land; the
   .single-project rule is the explicit fallback. */
.single-project #main-content{background-color:var(--bg)}
#main-content:has(.kx){background-color:var(--bg)}

/* v1.0.9 — belt and braces: literal fallbacks so these survive even if the
   token scope is ever narrowed again. See _tokens.css for why. */
.single-project #main-content{background-color:var(--bg,#0a0e14) !important}
#main-content:has(.kx){background-color:var(--bg,#0a0e14) !important}
