/* THE BANDED PAGE LAYOUT - loaded only on pages the theme marks with the body class
   thi-banded (see inc/thi-bands.php). Built from THI-SEO-BUILD/revamp/revamp.css, 23 Sep 2026.
   Scoped through body.thi-banded so it cannot touch a page that is not banded. */
/* ============================================================================
   CONTENT BANDS - the change that makes 700+ text pages stop reading like a document.
   Appended to the theme's style.css. Uses ONLY the theme's existing tokens, so the
   brand colours, the ember accent and the dark-mode set all keep working untouched.
   Nothing here rewrites content; it styles wrappers the the_content filter adds.
   ============================================================================ */

/* A banded page drops the single .entry column: each <h2> run becomes its own
   full-bleed band, and alternate bands take the tinted surface. */
body.thi-banded .entry{font-size:inherit;line-height:inherit;color:inherit;counter-reset:entsec}
body.thi-banded .entry > *{margin:0}
.ent-sec{padding:52px 0;border-top:1px solid var(--line)}
.ent-sec:first-child{border-top:0}
.ent-alt{background:var(--surface-2)}
.ent-sec .wrap.wp-narrow{max-width:820px}

/* Body copy: shorter measure than the old 820px column, and a real hierarchy so an
   H2 opening a new topic no longer looks like just another paragraph break. */
.ent-sec p,.ent-sec li{color:var(--ink-soft);font-size:1.06rem;line-height:1.75;max-width:68ch}
.ent-sec p{margin:0 0 18px}
.ent-sec ul{margin:0 0 18px;padding-left:22px}
.ent-sec li{margin:0 0 8px}
.ent-sec h2{font-size:1.55rem;line-height:1.25;margin:0 0 18px;color:var(--ink);letter-spacing:-.01em}
.ent-sec strong{color:var(--ink)}

/* Rule 3.23: the first 100 words answer the question - so make them look like the answer. */
.ent-lede{padding-top:28px}
.ent-lede p:first-child{font-size:1.22rem;line-height:1.6;color:var(--ink)}

/* Numbered sections. The counter sits in an ember square and the body hangs off a rule,
   so a reader can see the shape of the page before reading a word. */
.ent-num{counter-increment:entsec}
.ent-num > .wrap > h2{position:relative;padding-left:60px;min-height:42px;display:flex;align-items:center}
.ent-num > .wrap > h2::before{content:counter(entsec,decimal-leading-zero);position:absolute;left:0;top:0;width:42px;height:42px;
  border-radius:11px;background:var(--ember);color:#fff;font-size:.92rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
@media (min-width:640px){
  .ent-num .ent-body{border-left:3px solid var(--line);padding-left:32px;margin-left:19px}
}

/* Job photos. Real work, captioned with the service and the town - the one asset no
   competitor can copy. Renders only when a job exists (Rule 2.8). */
.ent-photos-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 14px;font-weight:700}
.ent-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ent-shot{margin:0}
.ent-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:var(--shadow);display:block}
.ent-shot figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.45}
.ent-photos-more{display:inline-block;margin-top:16px;font-weight:700;color:var(--ember);font-size:.94rem}
@media (max-width:700px){.ent-shots{grid-template-columns:1fr 1fr}.ent-shot:nth-child(3){display:none}}

/* FAQ accordions. This is what lets a page carry a thousand words of long-tail answers
   while occupying a few inches. The words are unchanged - only wrapped - so the
   FAQPage markup still matches the visible text (Rule 2.9). */
.faq-list{border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q > summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
  font-weight:700;color:var(--ink);font-size:1.04rem;line-height:1.45}
.faq-q > summary::-webkit-details-marker{display:none}
.faq-q > summary::after{content:"";position:absolute;right:14px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.faq-q[open] > summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-q[open] > summary{color:var(--ember)}
.faq-a{padding:0 0 20px}
.faq-a p{margin:0;max-width:68ch}

/* .entry a{color:var(--ember)} is more specific than .btn-primary, so without these the
   button label comes out ember-on-ember and disappears. Same trap for the chips. */
body.thi-banded .entry .btn-primary{color:#fff}
body.thi-banded .entry .btn-primary:hover{color:#fff;text-decoration:none}
body.thi-banded .entry .ent-chip{color:var(--ink-soft);font-weight:600}
body.thi-banded .entry .ent-chip:hover{color:var(--ember);text-decoration:none}

/* Link lists become chips - same links, same order, a fraction of the height. */
.ent-chips{display:flex;flex-wrap:wrap;gap:9px}
.ent-chip{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-soft);font-size:.92rem;font-weight:600;line-height:1;
  text-decoration:none;transition:border-color .15s ease,color .15s ease}
.ent-chip:hover{border-color:var(--ember);color:var(--ember)}

/* The closing section was a bolded paragraph. It is the moment the reader is convinced,
   so it gets a band and a real button. */
.ent-cta{background:var(--hero-bg);border-top:0}
.ent-cta h2{color:var(--hero-ink)}
.ent-cta p{color:var(--hero-soft)}
.ent-cta strong{color:var(--hero-ink)}
.ent-cta-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.ent-cta-phone{color:var(--hero-soft);font-size:.96rem}

/* Sticky action bar on phones: the two things a reader ever wants, always in reach. */
.thi-actionbar{display:none}
@media (max-width:760px){
  .thi-actionbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;
    z-index:60;padding:10px 12px;background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .thi-actionbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;
    border-radius:11px;font-weight:800;font-size:.98rem;text-decoration:none}
  .thi-actionbar .ab-call{background:var(--hero-bg);color:#fff}
  .thi-actionbar .ab-quote{background:var(--ember);color:#fff}
  body.has-actionbar{padding-bottom:74px}
  .ent-sec{padding:38px 0}
  .ent-num > .wrap > h2{padding-left:52px}
}