/* ==========================================================================
   chx4 web marketing site: site-wide styles
   Paste into Site Styling > Custom Styles.

   Written to stay out of Bootstrap's way:
   - Every class and custom property of our own starts with cx- / --cx-.
     Nothing here defines .btn, .lead, .card, .row, .label, .small, .active
     or any other Bootstrap or platform class name.
   - Element rules (h1, p, a, ul ...) only apply inside our own .cx-section,
     so they don't reach the platform's search page, footer headings or forms.
   - The only Bootstrap classes styled are the CMS Form's .form-control and
     .btn, and only inside a row whose Layout Class is cx-enquire.

   1. :root - the brand, in chx4-web's palette variables (the platform works
      out the -light/-darker shades from these).
   2. The dark palette, for the published site only.
   3. Header, footer.
   4. Content components (cx-*).
   ========================================================================== */

:root{
  /* the brand comes from the chx4 mark (icon.svg): charcoal #414242, green #527D24, lime #8DC63F */
  --primary:#3F6B17;          /* the mark's green, deepened so it reads as link text */
  --highlight:#8DC63F;        /* the mark's lime: fills and marks only, too pale for text */
  --info:#527D24;             /* the mark's green: success, "live" */
  --secondary:#5A5F5C;
  --body:#232525;             /* ink, a shade under the mark's charcoal */
  --surface:#FFFFFF;
  --on-primary:#FFFFFF;
  --site-background:#F5F6F3;  /* paper with a breath of green */
  --font-family-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-family-headings:"Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif;

  --cx-bg:var(--site-background);
  --cx-surface:var(--surface);
  --cx-ink:var(--body);
  --cx-muted:#5A5F5C;
  --cx-rule:#DCDFD7;
  --cx-accent:var(--primary);
  --cx-hot:var(--highlight);
  --cx-ok:var(--info);
  --cx-warn:#B7791F;
  --cx-bad:#C0392B;           /* red results and removed lines */
  --cx-on-accent:var(--on-primary);
  --cx-on-hot:#232525;        /* text on lime */
  --cx-tint:#ECF4E0;          /* a quiet wash of the lime */
  --cx-band:#414242;          /* the mark's charcoal: the call-to-action band, both themes */
  --cx-on-band:#F5F6F3;
  --cx-shade:rgba(35,37,37,.08);
  --cx-f-display:var(--font-family-headings);
  --cx-f-body:var(--font-family-body);
  --cx-f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --cx-measure:40rem;
  --cx-wide:74rem;
  --cx-radius:10px;
}

@media (prefers-color-scheme:dark){:root:has(.site-layout):not([data-theme="light"]){
  --primary:#A6D46A;--highlight:#8DC63F;--info:#8DC63F;--secondary:#9CA39D;
  --body:#ECEEEA;--surface:#1A1D1B;--on-primary:#111312;--site-background:#111312;
  --palette-tint:#111312;--palette-shade:#fff;
  --cx-muted:#9CA39D;--cx-rule:#2C312D;--cx-tint:#1E2818;--cx-warn:#E6B14A;--cx-bad:#F2766A;
  --cx-band:#202422;--cx-shade:rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]:has(.site-layout){
  --primary:#A6D46A;--highlight:#8DC63F;--info:#8DC63F;--secondary:#9CA39D;
  --body:#ECEEEA;--surface:#1A1D1B;--on-primary:#111312;--site-background:#111312;
  --palette-tint:#111312;--palette-shade:#fff;
  --cx-muted:#9CA39D;--cx-rule:#2C312D;--cx-tint:#1E2818;--cx-warn:#E6B14A;--cx-bad:#F2766A;
  --cx-band:#202422;--cx-shade:rgba(0,0,0,.35);color-scheme:dark}

body,.site-layout{background:var(--site-background)}

@media (prefers-reduced-motion:reduce){:root:has(.site-layout){scroll-behavior:auto}:root:has(.site-layout) *{transition:none!important;animation:none!important}}
:root:has(.site-layout){scroll-behavior:smooth}

/* ---------- header ---------- */
.site-layout > header{background:color-mix(in srgb,var(--cx-bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--cx-rule)}
.site-layout > header.sticky-header{box-shadow:none}
.site-layout > header .header-wrapper{max-width:var(--cx-wide);margin:0 auto;width:100%;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.site-layout > header .navbar{padding:.75rem 0}
.site-layout > header .navbar-brand{color:var(--cx-ink);padding:0}
.site-layout > header .navbar-brand a,
.site-layout > header .navbar-brand a:hover{color:var(--cx-ink)}
.site-layout > header .navbar-brand svg,
.site-layout > header .navbar-brand .logo{height:2rem;width:auto;padding:0;display:block}
.site-layout > header .navbar-brand svg text{fill:currentColor}
.site-layout > header .navbar-collapse .navbar-nav{gap:.25rem 1.5rem;align-items:center}
.site-layout > header .nav-link{font-family:var(--cx-f-body);font-weight:500;font-size:.96rem;color:var(--cx-ink);padding:.25rem 0!important;margin:0!important;border-bottom:2px solid transparent}
.site-layout > header .nav-link:hover{color:var(--cx-ink);border-bottom-color:var(--cx-rule)}
.site-layout > header .nav-link.active{border-bottom-color:var(--cx-accent)}
.site-layout > header .navbar-menu-line{background-color:var(--cx-ink)}
/* a Button item in the Main menu, given the CSS class cx-menu-cta */
.site-layout > header .cx-menu-cta{display:inline-flex;align-items:center;font-family:var(--cx-f-body);font-weight:600;font-size:.94rem;padding:.5rem .95rem;border-radius:999px;border:0;background:var(--cx-ink);color:var(--cx-bg);margin:0!important;box-shadow:none}
.site-layout > header .cx-menu-cta:hover{background:var(--cx-accent);color:var(--cx-on-accent);text-decoration:none}
@media (max-width:991.98px){.site-layout > header .navbar-collapse{background-color:var(--cx-bg)}}

/* ---------- footer ---------- */
.content-wrapper > footer{background:transparent;color:var(--cx-muted);border-top:1px solid var(--cx-rule);margin-top:0;font-family:var(--cx-f-body);font-size:.92rem}
.content-wrapper > footer .footer-content{max-width:var(--cx-wide);margin:0 auto;padding:2.25rem max(16px,env(safe-area-inset-left,0px)) 1.5rem}
.content-wrapper > footer .footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0;margin:0 0 1.25rem}
.content-wrapper > footer .footer-link-group{flex:0 0 auto;max-width:none;margin:0;text-align:left}
.content-wrapper > footer h3.footer-link-item{font-family:var(--cx-f-body);font-size:.92rem;font-weight:500;margin:0}
.content-wrapper > footer a.footer-link,
.content-wrapper > footer #versionInfo a{color:var(--cx-muted);text-decoration:none}
.content-wrapper > footer a.footer-link:hover,
.content-wrapper > footer #versionInfo a:hover{color:var(--cx-ink);text-decoration:underline}
.content-wrapper > footer #cmsContent{margin:0 0 1rem}
.content-wrapper > footer #versionInfo{margin:0;padding:1rem 0 0;border-top:1px solid var(--cx-rule);font-size:.8rem}
.content-wrapper > footer .cx-foot{display:grid;gap:.35rem;max-width:var(--cx-measure);color:var(--cx-muted)}
.content-wrapper > footer .cx-foot strong{display:flex;align-items:center;gap:.5rem;color:var(--cx-ink);font-family:var(--cx-f-display);font-size:1.1rem;font-weight:700}
.content-wrapper > footer .cx-foot-mark{width:1.6rem;height:1.6rem;flex:none}
.content-wrapper > footer .cx-foot p{margin:0}

/* ---------- page content ---------- */
#cms-content-style{
  .cms-content-wrapper{padding-bottom:0}

  /* every block's outer element; full bleed, with the content held to .cx-wrap */
  .cx-section{width:100%;scroll-margin-top:5rem;padding-block:5rem;font-family:var(--cx-f-body);font-size:1.0625rem;line-height:1.6;color:var(--cx-ink);-webkit-font-smoothing:antialiased}
  .cx-section.cx-tight{padding-block:3rem}
  .cx-section.cx-flush-top{padding-top:0}
  .cx-section.cx-tinted{background:var(--cx-tint)}
  .cx-section.cx-surface{background:var(--cx-surface);border-block:1px solid var(--cx-rule)}
  .cx-wrap{max-width:var(--cx-wide);margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
  @media (max-width:700px){.cx-section{padding-block:3.5rem}}

  /* type, only inside our own sections */
  .cx-section :is(h1,h2,h3,h4){font-family:var(--cx-f-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-wrap:balance;margin:0;color:inherit}
  .cx-section h1{font-size:clamp(2.6rem,1.6rem + 4.2vw,5rem);font-weight:800;letter-spacing:-.035em}
  .cx-section h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem)}
  .cx-section h3{font-size:1.3rem;letter-spacing:-.01em;line-height:1.2}
  .cx-section h4{font-size:1.05rem;letter-spacing:0;line-height:1.3}
  .cx-section p{margin:0}
  .cx-section :is(ul,ol){margin:0;padding:0;list-style:none}
  /* plain links; :where keeps this below .cx-button and the other link classes */
  .cx-section :where(a){color:var(--cx-accent);text-decoration-thickness:1px;text-underline-offset:3px}
  .cx-section :where(a):hover{color:var(--cx-accent);text-decoration-thickness:2px}
  .cx-section code{font-family:var(--cx-f-mono);font-size:.88em;background:var(--cx-tint);color:var(--cx-ink);padding:.1em .35em;border-radius:4px}
  .cx-section :focus-visible{outline:2px solid var(--cx-accent);outline-offset:3px}
  .cx-section em.cx-mark{font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--cx-hot) 35%,transparent) 62%)}

  .cx-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cx-f-mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-muted)}
  /* the mark's lime slash */
  .cx-kicker::before{content:"";width:.3rem;height:1rem;margin-inline:.2rem .1rem;background:var(--cx-hot);transform:rotate(39deg)}
  .cx-intro{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--cx-ink);max-width:var(--cx-measure)}
  .cx-muted{color:var(--cx-muted)}
  .cx-head{display:grid;gap:.9rem;margin-bottom:2.75rem;max-width:46rem}
  .cx-head.cx-center{margin-inline:auto;text-align:center;justify-items:center}
  .cx-prose{display:grid;gap:1rem;max-width:var(--cx-measure)}
  .cx-gap-top{margin-top:1.25rem}

  /* buttons (links styled as buttons; deliberately not .btn) */
  .cx-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
  .cx-button{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cx-f-body);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;padding:.85rem 1.3rem;border-radius:999px;border:1.5px solid var(--cx-ink);background:var(--cx-ink);color:var(--cx-bg);transition:background .15s,border-color .15s,color .15s}
  .cx-button:hover{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-on-accent);text-decoration:none}
  .cx-button.cx-ghost{background:transparent;color:var(--cx-ink)}
  .cx-button.cx-ghost:hover{background:var(--cx-ink);border-color:var(--cx-ink);color:var(--cx-bg)}
  .cx-button .cx-arrow{transition:transform .15s}
  .cx-button:hover .cx-arrow{transform:translateX(3px)}
  .cx-textlink{font-weight:600;text-decoration:none}
  .cx-textlink:hover{text-decoration:underline}

  /* page hero for the inner pages */
  .cx-pagehero{padding-block:4.5rem 3rem}
  .cx-pagehero .cx-wrap{display:grid;gap:1.1rem;justify-items:start}
  .cx-pagehero h1{max-width:18ch}

  /* tiles */
  .cx-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
  .cx-grid.cx-two{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
  .cx-tile{background:var(--cx-surface);border:1px solid var(--cx-rule);border-radius:var(--cx-radius);padding:1.5rem;display:grid;gap:.6rem;align-content:start;min-width:0}
  .cx-tile p{color:var(--cx-muted)}
  .cx-tile .cx-tag{justify-self:start}
  .cx-glyph{width:2.5rem;height:2.5rem;border-radius:8px;display:grid;place-items:center;background:var(--cx-tint);color:var(--cx-accent);font-family:var(--cx-f-mono);font-weight:500;font-size:.85rem;margin-bottom:.35rem}

  /* small inline tags */
  .cx-tag{display:inline-block;font-family:var(--cx-f-mono);font-size:.74rem;font-weight:500;letter-spacing:.04em;padding:.2rem .5rem;border-radius:4px;background:color-mix(in srgb,var(--cx-ink) 7%,transparent);color:var(--cx-ink);white-space:nowrap}
  .cx-tag.cx-ok{background:color-mix(in srgb,var(--cx-ok) 14%,transparent);color:var(--cx-accent)}
  .cx-tag.cx-warn{background:color-mix(in srgb,var(--cx-warn) 16%,transparent);color:var(--cx-warn)}
  .cx-tag.cx-hot{background:color-mix(in srgb,var(--cx-hot) 35%,transparent);color:var(--cx-ink)}
  .cx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
  .cx-chip{font-family:var(--cx-f-body);font-size:.92rem;font-weight:500;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--cx-rule);background:var(--cx-surface);color:var(--cx-ink)}

  /* text beside a picture */
  .cx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4rem;align-items:center}
  .cx-split.cx-flip > :first-child{order:2}
  @media (max-width:880px){.cx-split,.cx-split.cx-flip{grid-template-columns:1fr;gap:2.25rem}.cx-split.cx-flip > :first-child{order:0}}

  /* tick lists */
  .cx-ticks{display:grid;gap:.7rem}
  .cx-ticks li{position:relative;padding-left:1.75rem}
  .cx-ticks li::before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:.55rem;border-left:2px solid var(--cx-ok);border-bottom:2px solid var(--cx-ok);transform:rotate(-45deg) scale(.8);transform-origin:left top}
  .cx-ticks strong{font-weight:600}

  /* a mock app window, for the illustrations */
  .cx-window{background:var(--cx-surface);border:1px solid var(--cx-rule);border-radius:12px;box-shadow:0 1px 0 var(--cx-shade),0 24px 48px -24px var(--cx-shade),12px 12px 0 var(--cx-tint);overflow:hidden;min-width:0;font-size:.9rem}
  .cx-window-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;border-bottom:1px solid var(--cx-rule);font-family:var(--cx-f-mono);font-size:.75rem;color:var(--cx-muted)}
  .cx-window-bar i{width:.6rem;height:.6rem;border-radius:50%;background:var(--cx-rule);display:block}
  .cx-window-bar span{margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cx-window-body{padding:1.1rem;display:grid;gap:.75rem}

  /* tables */
  .cx-table-wrap{overflow-x:auto;border:1px solid var(--cx-rule);border-radius:var(--cx-radius);background:var(--cx-surface)}
  .cx-table{border-collapse:collapse;width:100%;font-size:.98rem;margin:0}
  .cx-table th,.cx-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--cx-rule);vertical-align:top;color:var(--cx-ink)}
  .cx-table tr:last-child td{border-bottom:0}
  .cx-table th{font-family:var(--cx-f-mono);font-weight:500;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cx-muted);background:transparent}
  .cx-table td:first-child{font-weight:600;white-space:nowrap}
  .cx-table td p{color:var(--cx-muted)}

  /* numbered steps */
  .cx-steps{display:grid;gap:1.25rem;counter-reset:cx-step;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
  .cx-step{counter-increment:cx-step;border-top:2px solid var(--cx-ink);padding-top:1rem;display:grid;gap:.55rem;align-content:start}
  .cx-step::before{content:counter(cx-step,decimal-leading-zero);font-family:var(--cx-f-mono);font-size:.85rem;color:var(--cx-accent)}
  .cx-step p{color:var(--cx-muted)}

  /* the dark call-to-action band */
  .cx-section.cx-band{background:var(--cx-band);color:var(--cx-on-band)}
  .cx-band .cx-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:2rem;align-items:center}
  .cx-band h2{color:var(--cx-on-band)}
  .cx-band p{color:color-mix(in srgb,var(--cx-on-band) 72%,transparent);margin-top:.75rem;max-width:var(--cx-measure)}
  .cx-band .cx-button{background:var(--cx-on-band);border-color:var(--cx-on-band);color:var(--cx-band)}
  .cx-band .cx-button:hover{background:var(--cx-hot);border-color:var(--cx-hot);color:var(--cx-on-hot)}
  .cx-band{position:relative;overflow:hidden}
  .cx-band .cx-wrap{position:relative}
  /* the chx4 mark, large and quiet behind the band */
  .cx-band-mark{position:absolute;right:-3rem;top:50%;width:22rem;height:22rem;transform:translateY(-50%);opacity:.14;pointer-events:none}
  .cx-band-mark .cx-mark-ink{fill:var(--cx-on-band)}
  @media (max-width:760px){.cx-band-mark{width:14rem;height:14rem;right:-4rem;top:auto;bottom:-5rem;transform:none}}
  .cx-band .cx-button.cx-ghost{background:transparent;color:var(--cx-on-band)}
  .cx-band .cx-button.cx-ghost:hover{background:var(--cx-on-band);color:var(--cx-band)}
  @media (max-width:760px){.cx-band .cx-wrap{grid-template-columns:1fr}}

  /* a two-column designer row with Layout Class cx-enquire: copy left, a CMS Form right */
  .cms-row.cx-enquire{max-width:var(--cx-wide);margin:0 auto 5rem;padding-inline:max(16px,env(safe-area-inset-left,0px));gap:3rem;align-items:flex-start}
  .cms-row.cx-enquire > .cms-column:last-child{background:var(--cx-surface);border:1px solid var(--cx-rule);border-radius:12px;padding:1.75rem;box-shadow:12px 12px 0 var(--cx-tint)}
  .cms-row.cx-enquire .cx-section{padding-block:0}
  .cms-row.cx-enquire .cx-section .cx-wrap{padding-inline:0}
  .cms-row.cx-enquire label{font-family:var(--cx-f-body);font-weight:600;font-size:.95rem;color:var(--cx-ink)}
  .cms-row.cx-enquire .form-control{font-family:var(--cx-f-body);font-size:1rem;padding:.7rem .85rem;height:auto;border:1.5px solid var(--cx-rule);background:var(--cx-bg);color:var(--cx-ink);border-radius:8px;box-shadow:none}
  .cms-row.cx-enquire .form-control:focus{border-color:var(--cx-accent);box-shadow:0 0 0 3px var(--cx-tint)}
  .cms-row.cx-enquire .btn{font-family:var(--cx-f-body);font-weight:600;border-radius:999px;padding:.75rem 1.3rem}
  .cms-row.cx-enquire .btn-primary{background:var(--cx-ink);border-color:var(--cx-ink);color:var(--cx-bg)}
  .cms-row.cx-enquire .btn-primary:hover{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-on-accent)}
  @media (max-width:800px){.cms-row.cx-enquire{gap:2rem;margin-bottom:3.5rem}.cms-row.cx-enquire > .cms-column:last-child{padding:1.25rem}}
}