/* ══════════════════════════════════════════════════════════════════════════
   Organic over the legacy Big Helpers page system.

   The ~230 deep pages (services, insights, compare, cities, hire, case
   studies, resources…) carry their content markup in the old blue design
   system, with a per-page inline <style> block. Rewriting that markup by hand
   is neither feasible nor safe, so those pages keep their structure and get:

     · the Organic shell (nav + footer) swapped in by convert_legacy_pages.py
     · this layer, which re-points the legacy design tokens at Organic ones and
       restyles the recurring components

   Load order: page's own inline <style>  →  tokens.css  →  bh.css  →  this.
   convert_legacy_pages.py also does a property-aware colour rewrite in the
   HTML itself, because a large share of the legacy palette lives in inline
   style="" attributes that no stylesheet can reach.
   ══════════════════════════════════════════════════════════════════════ */

/* — legacy tokens, re-pointed —
   Kept as a safety net: the converter rewrites these declarations in the page,
   but a page that was missed (or a hand-edit that reintroduces them) still
   lands on Organic values rather than blue. */
:root{
  --ink:var(--color-text);
  --pri:var(--color-accent);
  --pri-soft:var(--color-accent-100);
  --gold:var(--color-accent-400);
  --muted:var(--color-neutral-700);
  --border:var(--color-divider);
  --line:var(--color-divider);
  --bg:var(--color-bg);
  --ok:var(--color-accent-2);
}

/* — the second legacy layer —
   /bh-refresh.css is still loaded by the deep pages and sets
   `body{background:var(--bh-page)!important;color:var(--bh-ink)!important}`,
   which no ordinary rule of ours can outrank. Re-pointing its tokens beats
   escalating: the !important rule stays, and now resolves to Organic values. */
:root{
  --bh-page:var(--color-bg);
  --bh-surface:var(--color-surface);
  --bh-mint:var(--color-accent-2-100);
  --bh-cream:var(--color-surface);
  --bh-lav:var(--color-accent-100);
  --bh-ink:var(--color-text);
  --bh-soft:var(--color-neutral-700);
  --bh-teal:var(--color-accent-2-800);
  --bh-green:var(--color-accent-2-600);
  --bh-green-soft:var(--color-accent-2-100);
  --bh-line:var(--color-divider);
}

/* — typography —
   The legacy CSS uses the `font:` shorthand (`font:800 48px/1.1 'Inter'`),
   which sets family and weight in one declaration. Overriding it needs
   !important; there is no lower-specificity way in. */
body{
  font-family:var(--font-body)!important;
  background:var(--color-bg);
  color:var(--color-text);
}
h1,h2,h3,h4,h5,h6,.section-title,.section-h,.card-title,.dd-title{
  font-family:var(--font-heading)!important;
  font-weight:var(--font-heading-weight)!important;
  letter-spacing:-.015em;
}
h1 em,h2 em,h3 em{font-style:normal;color:var(--color-accent)}
strong,b{font-weight:700}

/* — links — */
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}

/* — heroes —
   Every page family names its hero differently but they share one shape: a
   dark band with light text. */
.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero{
  background:linear-gradient(135deg,var(--color-accent-900),var(--color-accent-700))!important;
  color:var(--color-accent-100)!important;
}
.hub-hero h1,.svc-hero h1,.ind-hero h1,.t-hero h1,.h-hero h1,.hero h1,
.hub-hero h2,.svc-hero h2,.ind-hero h2,.hero h2{color:var(--color-accent-100)!important}
.hub-hero p,.svc-hero p,.ind-hero p,.t-hero p,.h-hero p,.hero p{color:var(--color-accent-200)!important}
.hub-hero a:not(.btn),.svc-hero a:not(.btn),.hero a:not(.btn){color:var(--color-accent-300)}
.art-hero{
  background:linear-gradient(180deg,var(--color-bg),var(--color-surface))!important;
  border-bottom:1px solid var(--color-divider);
}
.pill{
  background:color-mix(in srgb,var(--color-accent-400) 22%,transparent)!important;
  color:var(--color-accent-800)!important;
  border:1px solid color-mix(in srgb,var(--color-accent-400) 40%,transparent)!important;
  border-radius:999px;
}
.art-hero .pill,.art-hero .cat{
  background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;border:0!important;
}

/* — buttons — */
.btn{
  font-family:var(--font-heading)!important;font-weight:var(--font-heading-weight)!important;
  border-radius:999px;
}
.btn-primary{background:var(--color-accent)!important;color:var(--color-on-accent)!important;border-color:transparent!important}
.btn-primary:hover{background:var(--color-accent-600)!important}
.btn-wa,.btn-whatsapp{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.btn-wa:hover,.btn-whatsapp:hover{background:var(--color-accent-2-600)!important;color:var(--color-on-accent)!important}
.btn-ghost{background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-divider)!important}
.btn-ghost:hover{background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;border-color:var(--color-accent)!important}

/* — cards and boxes — */
.post-card,.box,.card,.bh-niche-card,.kv-row,.promise{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);
  color:var(--color-text);
}
.post-card:hover,.bh-niche-card:hover{
  border-color:var(--color-accent);
  box-shadow:var(--shadow-md);
  color:var(--color-text);
}
.post-card h3,.post-card h4,.bh-niche-card h3,.bh-niche-card h4{color:var(--color-text)}
.post-card .cat,.tech-pill,.tech-chip,.lab{
  background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;
  border-radius:999px;
}
.pain-bg{background:var(--color-surface)!important}
.us{background:var(--color-accent-2-100)!important;color:var(--color-accent-2-800)!important}

/* — emoji icons —
   The legacy pages carry emoji where the design uses line-SVG icons in tinted
   circular chips. The emoji can't be swapped from CSS and they do carry meaning,
   so they get the design's chip treatment instead: same silhouette, same rhythm. */
.ic,.dd-ic{
  display:inline-grid!important;place-items:center;
  width:42px;height:42px;flex:none;
  border-radius:50%;
  background:var(--color-accent-100);
  font-size:20px!important;line-height:1!important;
  margin-bottom:10px;
}
.dd-ic{width:34px;height:34px;font-size:16px!important;margin-bottom:0}
.feat:nth-child(even) .ic,.svc-card:nth-child(even) .ic{background:var(--color-accent-2-100)}

/* — display numerals —
   Prices and stat figures are <div>s, so the heading rule does not reach them;
   in the design these are set in the heading face. */
.price,.tier .price,.stat .n,.n,.big-num{
  font-family:var(--font-heading)!important;
  font-weight:var(--font-heading-weight)!important;
  color:var(--color-text);letter-spacing:-.01em;
}

/* — tier cards, to the design's spec — */
.tier{border-radius:calc(var(--radius-lg)*1.15)!important;border-color:var(--color-divider)!important}
.tier.featured,.tier.pick{border-color:var(--color-accent)!important;box-shadow:var(--shadow-md)!important}
.tier ul li::before{background:var(--color-accent-2)!important;color:var(--color-bg)!important}
.tier .who,.tier .timeline{color:var(--color-neutral-700)}

/* — long-form article body — */
article.body,.article-body{color:var(--color-text)}
article.body h2{border-top:3px solid var(--color-accent-200)!important}
article.body a,.article-body a{color:var(--color-accent-700)}
article.body table th{background:var(--color-surface)!important;color:var(--color-text)!important}
article.body table td,article.body table th{border-color:var(--color-divider)!important}
article.body blockquote{border-left:3px solid var(--color-accent)!important;background:var(--color-surface)!important}
article.body code,code{background:var(--color-neutral-200);color:var(--color-accent-800);border-radius:6px;padding:1px 5px}
article.body pre,pre{background:var(--color-neutral-900);color:var(--color-neutral-100);border-radius:var(--radius-md)}
article.body pre code,pre code{background:none;color:inherit}

/* — legacy FAQ accordion (its own classes, not the Organic one) — */
.bh-faq-item{background:var(--color-surface)!important;border:1px solid var(--color-divider)!important;border-radius:var(--radius-lg)!important}
.bh-faq-q{color:var(--color-text)!important;font-family:var(--font-heading)!important}
.bh-faq-a{color:var(--color-text)!important;opacity:.82}

/* — section rhythm — */
:where(.section,.bh-sec,.cat-section){background:transparent}
.section-title,.section-h{color:var(--color-text)}
.section-lede,.section-sub,.csub{color:var(--color-neutral-700)}
hr,.sep{border-color:var(--color-divider);background:var(--color-divider)}

/* — contrast repair for converted deep pages —
   The conversion stylesheet is shared outside the Organic asset bundle. Its
   blue callouts were recoloured at the page level, but their more-specific
   child rules can still pin dark text inside the new dark Organic surfaces.
   Keep all ordinary copy on those surfaces light; buttons retain their own
   accessible foreground/background pairing. */
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video){
  color:var(--color-accent-100)!important;
}
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video)
  :is(h1,h2,h3,h4,h5,h6,p,li,strong,b,small,.section-title,.section-lede,.section-sub){
  color:inherit!important;
}
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video) a:not(.btn){
  color:var(--color-accent-300)!important;
}

/* Shared conversion CTAs and small labels also need accessible pairs. */
.bh-cta-stack .bh-btn-wa,.bh-inline-cta .bh-btn-wa,.bh-end-cta .bh-btn-wa{
  background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important;
}
.bh-cta-stack .bh-btn-audit,.bh-inline-cta .bh-btn-audit,.bh-end-cta .bh-btn-audit{
  background:var(--color-accent-400)!important;color:var(--color-on-accent)!important;
}
.promise,.cat,.sources h3,.week,.date,.n,.num,.when,.platform,.role,.bsp-kicker{
  color:var(--color-accent-800)!important;
}
.status-val,.checkmark{color:var(--color-accent-2-800)!important}
.mini,.source-list{color:var(--color-neutral-800)!important}
.badge,.ribbon,.pn{color:var(--color-on-accent)!important}
.tick{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.btn.alt{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.problem-bg h3,.crossmark,.compare-card.bad .tag{color:#b91c1c!important}
.lang-notice,.lang-notice a{color:var(--color-accent-900)!important}
.services h2,.service-card h3{color:var(--color-accent-800)!important}

/* Inline page CSS frequently uses --pri directly for links. Make ordinary
   links use the contrast-safe accent step, then restore light links on every
   known dark content surface. */
a:not(.btn){color:var(--color-accent-700)!important}
:where(.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero,
       .bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video) a:not(.btn){
  color:var(--color-accent-300)!important;
}
:where(.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero) .pill{
  background:color-mix(in srgb,var(--color-accent-400) 22%,transparent)!important;
  color:var(--color-accent-300)!important;
}
#bh-cookie-banner a{color:var(--color-accent-300)!important}
.lang-notice a{color:var(--color-accent-900)!important}
.step b,.value-card .tag,[style*="color:var(--color-accent)"],[style*="color:var(--pri)"]{
  color:var(--color-accent-800)!important;
}
.print-toolbar a.btn-back{color:var(--color-accent-200)!important}
.stat-card .num{color:var(--color-accent-400)!important}
.stat-card .src{color:var(--color-accent-200)!important}
.bsp-video video{color:var(--color-accent-100)!important}
.bh-chat__badge{background:#b91c1c!important;color:#fff!important}

/* — the legacy scroll-progress bar, if the page still has one — */
.bh-scroll-progress{background:var(--color-accent)!important}

/* — the 22-language switcher —
   simple-language.js appends a position:fixed picker at top:10px/right:10px with
   z-index 9999, which lands squarely on the Organic nav's WhatsApp button on
   desktop and its menu button on mobile. Move it to the free bottom-left corner
   rather than hide it: it is the only route to the regional-language pages.
   The inline styles it writes need !important to beat. */
div:has(> #language-selector){
  top:auto!important;right:auto!important;
  bottom:14px!important;left:14px!important;
  z-index:55!important;
  padding:4px!important;
  background:var(--color-surface)!important;
  border:1px solid var(--color-divider)!important;
  border-radius:999px!important;
  box-shadow:var(--shadow-md)!important;
}
#language-selector{
  font-family:var(--font-body)!important;font-size:13px!important;
  border:0!important;border-radius:999px!important;
  background:transparent!important;color:var(--color-text)!important;
  padding:5px 10px!important;cursor:pointer;
}

/* — dark theme: the legacy system had no dark mode, so a few of its
     hard-light surfaces need pulling down — */
html[data-theme='dark'] .post-card,
html[data-theme='dark'] .box,
html[data-theme='dark'] .bh-niche-card{background:var(--color-surface)}
html[data-theme='dark'] img:not([src$=".svg"]){filter:brightness(.92)}

/* The converted legacy layouts still contain many hard-coded light surfaces
   from their original page-specific CSS and external conversion.css. A partial
   dark palette creates unreadable light-on-light and dark-on-dark combinations.
   Keep those pages on the verified light palette and remove the unsupported
   toggle. The nine fully rebuilt `.bh-page` routes retain real dark mode. */
html[data-theme='dark'] body.bh-legacy-page{
  --color-bg:#f5ead8;--color-surface:#ebddc5;--color-text:#201e1d;
  --color-divider:color-mix(in srgb,#201e1d 16%,transparent);
  --color-accent:#c67139;--color-accent-2:#7a8a5e;
  --color-neutral-100:#f9f4ed;--color-neutral-200:#eee7db;--color-neutral-300:#dcd3c4;
  --color-neutral-400:#c0b6a5;--color-neutral-500:#a19786;--color-neutral-600:#82796a;
  --color-neutral-700:#645c50;--color-neutral-800:#474238;--color-neutral-900:#2e2b25;
  --color-accent-100:#fff2eb;--color-accent-200:#ffe1d0;--color-accent-300:#ffc6a5;
  --color-accent-400:#f6a06b;--color-accent-500:#d67f48;--color-accent-600:#b2622d;
  --color-accent-700:#8c491a;--color-accent-800:#643312;--color-accent-900:#402310;
  --color-accent-2-100:#f0fae1;--color-accent-2-200:#e1eecc;--color-accent-2-300:#ccdbb2;
  --color-accent-2-400:#aebf92;--color-accent-2-500:#8fa073;--color-accent-2-600:#728157;
  --color-accent-2-700:#56633f;--color-accent-2-800:#3d472b;--color-accent-2-900:#272e1b;
  --shadow-sm:0 1px 2px color-mix(in srgb,#2e2b25 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2e2b25 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2e2b25 22%,transparent);
  /* Resolve the older aliases here too. When defined on :root, their nested
     var() values have already followed the dark root palette before they are
     inherited by body. */
  --ink:#201e1d;--pri:#c67139;--pri-soft:#fff2eb;--gold:#f6a06b;
  --muted:#645c50;--border:color-mix(in srgb,#201e1d 16%,transparent);
  --line:color-mix(in srgb,#201e1d 16%,transparent);--bg:#f5ead8;--ok:#7a8a5e;
  --bh-page:#f5ead8;--bh-surface:#ebddc5;--bh-mint:#f0fae1;--bh-cream:#ebddc5;
  --bh-lav:#fff2eb;--bh-ink:#201e1d;--bh-soft:#645c50;--bh-teal:#3d472b;
  --bh-green:#728157;--bh-green-soft:#f0fae1;
  --bh-line:color-mix(in srgb,#201e1d 16%,transparent);
  background:#f5ead8!important;color:#201e1d!important;color-scheme:light;
}
body.bh-legacy-page [data-bh-theme-toggle]{display:none!important}