/* =====================================================================
   Dark theme — LEGACY COMPATIBILITY LAYER
   ---------------------------------------------------------------------
   The token system (css/scheme.css) flips every tokenised rule by itself
   via light-dark(). This file exists for the code that ISN'T tokenised
   yet: the parent theme's hardcoded colors and the pre-token rules in
   pages.css. Scoped on html.pi-dark (the RESOLVED theme class kept in
   sync by js/theme-toggle.js) so light mode is byte-for-byte untouched.

   As milestones M2/M3 tokenise the remaining files, rules here should be
   DELETED, not added to — this layer shrinking to nothing is the measure
   of the migration being done. Every rule states which legacy paint it
   overrides.
   ===================================================================== */

/* ---- canvas: parent __colors.css paints body{background:#ffffff} ----- */
html.pi-dark body{ background-color: var(--pi-bg); }
html.pi-dark .page_wrap,
html.pi-dark .page_content_wrap{ background-color: var(--pi-bg); }

/* (the linework drawings are NOT killed here any more — architectural-bg.css
   swaps them for re-inked -dark.png variants with ivory strokes) */

/* ---- base type: parent paints body text #333-ish, headings near-black */
html.pi-dark body{ color: var(--pi-text-soft); }
html.pi-dark h1, html.pi-dark h2, html.pi-dark h3,
html.pi-dark h4, html.pi-dark h5, html.pi-dark h6{ color: var(--pi-text); }
html.pi-dark p, html.pi-dark li{ color: var(--pi-text-soft); }
/* the theme's link default is near-black. `.blog-content` is the single-post
   article wrapper (single.php) — NOT .post_content, so it needs naming or
   every in-copy link renders black-on-black; `.breadcrumb` is that page's
   own trail. */
html.pi-dark .post_content a:not(.sc_button):not(.pi-btn):not([class*="button"]),
html.pi-dark .entry-content a:not(.sc_button):not(.pi-btn):not([class*="button"]),
html.pi-dark .blog-content a:not(.sc_button):not(.pi-btn):not([class*="button"]),
html.pi-dark .blog-content .breadcrumb a{
  color: var(--pi-accent);
}
html.pi-dark .blog-content .breadcrumb{ color: var(--pi-text-soft); }

/* ---- the parent theme's BLACK text roles ------------------------------
   palladio/css/__colors.css paints hundreds of `.scheme_default …{color:#000000}`
   rules (trx shortcode titles, subtitles, promo copy, `.color_style_dark`
   links, the blog grid's item links, footer copyright). On white they are
   the design; on the dark canvas they are invisible black-on-black — the
   "titles still black in dark mode" report. Blanket-overriding
   `.scheme_default *` would also flatten accents, buttons and the WhatsApp
   green, so this targets the TEXT ROLES only. Each maps to the same token
   its light counterpart resolves to, so a palette change still moves them. */
html.pi-dark .scheme_default .sc_item_title,
html.pi-dark .scheme_default .sc_promo_title,
html.pi-dark .scheme_default.sc_promo .sc_promo_title,
html.pi-dark .scheme_default .sc_item_subtitle,
html.pi-dark .scheme_default .sc_promo_subtitle,
html.pi-dark .scheme_default .sc_title_subtitle,
html.pi-dark .scheme_default .author_info .author_title,
html.pi-dark .scheme_default .footer_copyright_inner{
  color: var(--pi-text);
}
html.pi-dark .scheme_default .sc_promo_content,
html.pi-dark .scheme_default.sc_promo .sc_promo_content,
html.pi-dark .scheme_default .sc_promo_descr,
html.pi-dark .scheme_default.sc_promo .sc_promo_descr,
html.pi-dark .scheme_default .sc_item_descr{
  color: var(--pi-text-soft);
}
/* trx's "dark text" style block + the promo/content links inside it */
html.pi-dark .scheme_default .color_style_dark,
html.pi-dark .scheme_default .color_style_dark a,
html.pi-dark .scheme_default .color_style_dark a:hover,
html.pi-dark .scheme_default .sc_promo_content a,
html.pi-dark .scheme_default .sc_promo_descr a,
html.pi-dark .scheme_default .author_info a,
html.pi-dark .scheme_default .footer_copyright_inner a{
  color: var(--pi-text);
}
html.pi-dark .scheme_default .color_style_dark a:hover,
html.pi-dark .scheme_default .sc_promo_content a:hover,
html.pi-dark .scheme_default .footer_copyright_inner a:hover{
  color: var(--pi-accent);
}
/* blog archive grid: the whole card is one <a class="vc_gitem-link"> */
html.pi-dark .vc_gitem-link,
html.pi-dark .vc_gitem-post-data,
html.pi-dark .vc_gitem-post-data-source-post_title h4,
html.pi-dark .vc_gitem-post-data-source-post_title h4 a{
  color: var(--pi-text);
}
html.pi-dark .vc_gitem-post-data-source-post_excerpt p{ color: var(--pi-text-soft); }

/* ---- legacy light panels (pages.css, not yet tokenised — M2 scope) ---- */
/* home/service cards + promos that carry theme white */
html.pi-dark .sc_promo,
html.pi-dark .sc_promo_button_on_image,
html.pi-dark .paras-nearby-card,
html.pi-dark .slide_overlay.slide_overlay_small{
  background-color: var(--pi-surface) !important;
}
html.pi-dark .paras-nearby-section{ background-color: var(--pi-surface-2) !important; }
/* builder design-options that paint a row/panel a light solid print inline
   with !important — match the light family generically, keep image fills.
   CONTENT AREA ONLY: the footer's rows must stay transparent (they sit on
   the elevation drawing; architectural-bg.css already clears them) */
html.pi-dark .page_content_wrap .vc_row.vc_row-has-fill[class*="vc_custom_"]:not(.scheme_dark){
  background-color: var(--pi-bg) !important;
}
html.pi-dark .footer_wrap > .vc_row[class*="vc_custom_"]{
  background-color: transparent !important;
}
/* column-level fills (the Get-Quote form panel on the service pages) — the
   design option paints the COLUMN white; keep background-images (the FAQ
   picture column) by overriding only the color */
html.pi-dark .vc_col-has-fill > .vc_column-inner{
  background-color: var(--pi-surface) !important;
}
/* blog archive cards: each grid item's content zone carries its own light
   vc_custom_ fill that outlives blog.css's card re-skin */
html.pi-dark .vc_gitem-zone[class*="vc_custom_"]{
  background-color: var(--pi-surface) !important;
}
/* stray in-content CTA sections baked into old posts */
html.pi-dark .cta-section{ background-color: var(--pi-surface-2) !important; }

/* parent __colors.css paints scheme_default text columns/wrappers solid
   white (invisible on the white body; a glowing slab on the dark one).
   Scoped to the CONTENT area: in the footer these wrappers must stay
   transparent or they blot out the elevation drawing behind them. */
html.pi-dark .page_content_wrap .scheme_default.wpb_text_column,
html.pi-dark .page_content_wrap .scheme_default.wpb_column > .vc_column-inner > .wpb_wrapper,
html.pi-dark .page_content_wrap .scheme_default.wpb_row[data-vc-full-width="true"],
html.pi-dark .page_content_wrap .scheme_default.vc_section[data-vc-full-width="true"]{
  background-color: var(--pi-bg);
}
html.pi-dark .footer_wrap .scheme_default.wpb_text_column,
html.pi-dark .footer_wrap .scheme_default.wpb_column > .vc_column-inner > .wpb_wrapper{
  background-color: transparent;
}

/* ---- forms: native controls follow color-scheme; the theme's inputs
        carry hardcoded light chrome ---- */
html.pi-dark input[type="text"], html.pi-dark input[type="email"],
html.pi-dark input[type="tel"],  html.pi-dark input[type="number"],
html.pi-dark textarea, html.pi-dark select{
  background-color: var(--pi-surface);
  color: var(--pi-text);
  border-color: var(--pi-line-mid);
}

/* ---- footer (trx layout 17/580: white text widgets on the paper wrap) - */
html.pi-dark .footer_wrap{ background-color: var(--pi-bg-paper); }
html.pi-dark .footer_wrap,
html.pi-dark .footer_wrap p, html.pi-dark .footer_wrap li{ color: var(--pi-text-soft); }
html.pi-dark .footer_wrap h2, html.pi-dark .footer_wrap h3,
html.pi-dark .footer_wrap a{ color: var(--pi-text); }
html.pi-dark .footer_wrap a:hover{ color: var(--pi-accent); }