/* theme-harmonize.css — subtle homogenization of the LEGACY WordPress pages to
   the new design-system "spine" look (home, solutions, news, publications…).
   Loaded LAST in BaseLayout (after the mirrored theme CSS + site-extra.css) and
   ONLY on legacy pages, so the spine Header/Footer and the spine pages
   (MarketingLayout) are never touched. Everything here is TYPOGRAPHY + COLOUR
   only — no Bootstrap grid/layout/button/carousel/flipbook overrides — and is
   scoped under `.page-main` (BaseLayout's verbatim-content wrapper).

   Spine tokens (--ink, --paper, --green, --teal, --mono…) come from milvue.css,
   imported by BaseLayout. Brand intent: warm-paper canvas, ink headings, green
   used as an ACCENT (not as the heading colour). The theme's dark/green blocks
   (where text is deliberately white) are explicitly preserved at the end so we
   never turn white-on-green into unreadable dark-on-green. */

/* 1 — Canvas: warm paper instead of pure white (matches the spine). Coloured,
       dark and white blocks set their own background and are unaffected. */
body { background: var(--paper); }

/* 2 — Body copy: dark ink instead of the theme's teal default. Inline teal
       spans and .text-white blocks win by proximity / the preserve block. */
.page-main { color: var(--ink-2); }

/* 2b — `.text-green` body copy (theme green #44D62C) was ~1.7:1 on white and is
        unreadable on the new warm-paper canvas. The green hero BAND uses
        `.text-white`, not `.text-green`, so re-inking `.text-green` only touches
        running copy / sub-labels. Danger-block descendants are re-whitened by
        the preserve block below. */
.page-main .text-green,
.page-main .text-green :is(p, li, span) { color: var(--ink-2); }

/* 2c — The `.customintro` hero title base colour is theme green (#44D62C). The
        white <span> sits on the green band; the words OUTSIDE the span wrap onto
        paper and were rendering green-on-paper (the title looked two-tone).
        Re-ink the base; the banded <span> keeps the theme's white. */
.page-main .customintro .main-title { color: var(--ink); }

/* 3 — Section headings: ink, like the spine (theme default is bright green).
       The theme's uppercase + sizing are kept; only the colour changes.
       NOTE: the `.customintro` hero title (`.main-title`) is intentionally NOT
       touched — it carries the brand's teal + green highlight-band treatment
       (a white-on-green <span>), which an ink override would break. Plain page
       <h1> (e.g. legal pages, no band) still gets ink. */
.page-main :is(h2, h3, h4, h5, h6, .title, .sub-title, .small-title) {
  color: var(--ink);
}
.page-main h1:not(.main-title) { color: var(--ink); }

/* 4 — Prose links: ink with a green underline accent, teal on hover (the theme
       ships flat green links with no hover change). Scoped to running text, so
       buttons (.btn__*), category tags and nav are left alone. */
.page-main :is(p, li, .texte, .stextdetail, blockquote) a:not([class*="btn"]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .25s var(--ease-out), text-decoration-color .25s var(--ease-out);
}
.page-main :is(p, li, .texte, .stextdetail, blockquote) a:not([class*="btn"]):hover {
  color: var(--teal, #21737c);
  text-decoration-color: currentColor;
}

/* 5 — Category / post labels (.bordertext, .cat): flat green link -> spine mono
       eyebrow. */
.page-main .bordertext,
.page-main .cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-main .bordertext a,
.page-main .cat a { color: var(--ink-3); text-decoration: none; }
.page-main .bordertext a:hover,
.page-main .cat a:hover { color: var(--green-ink); }

/* 6 — Listing cards (.listcard on category / news / archive pages): spine card
       treatment — warm-white card on paper, hairline border, soft hover lift. */
.page-main .listcard__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.page-main .listcard__item:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 24px 50px -28px rgba(11, 30, 32, .55);
}
.page-main .listcard__item--content { padding: 18px 18px 22px; }
.page-main .listcard__item--content :is(h2, h3, h4) { color: var(--ink); }
/* card title is usually a link (theme renders it flat green) -> ink, green-ink
   on hover. */
.page-main .listcard__item--content :is(h2, h3, h4) a { color: var(--ink); text-decoration: none; }
.page-main .listcard__item--content :is(h2, h3, h4) a:hover { color: var(--green-ink); }

/* 7 — Featured-image frames (.imgspot) on article / testimonial / publication
       pages: round + clip to match the spine's media treatment. */
.page-main .imgspot { border-radius: 12px; overflow: hidden; }

/* 8 — PRESERVE legibility on the theme's coloured / dark blocks. White text on
       green (#44D62C) sections, .bg__primary (green), .darkcustom (#191919) and
       any element flagged .text-white must stay white — applied LAST so it wins
       over the ink rules above. Light blocks (.bg__primarylight #ebfbea,
       .bg__secondlight #e9f1f2, .whiteblock) are NOT matched and keep ink. */
.page-main :is([style*="44D62C"], [style*="44d62c"], .bg__primary, .darkcustom, .text-white),
.page-main :is([style*="44D62C"], [style*="44d62c"], .bg__primary, .darkcustom, .text-white)
  :is(h1, h2, h3, h4, h5, h6, p, li, .title, .main-title, .sub-title, .small-title, .texte) {
  color: #fff;
}
/* …and the running-text links inside those blocks (out-specifies rule 4). */
.page-main :is([style*="44D62C"], [style*="44d62c"], .bg__primary, .darkcustom, .text-white)
  :is(p, li, .texte, .stextdetail, blockquote) a:not([class*="btn"]) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .5);
}