/* ==========================================================================
   Component: legacy content pages (body.page-node-type-page .node__content)
   Generic styling for "Basic page" nodes that predate the redesign and have
   no dedicated template — long-form marketing copy authored directly in the
   Body field (Full HTML), plus an optional field_image_cm hero image using
   the Imagefield Slideshow formatter (its prev/next arrows are already
   styled further up in this file, under .imagefield_slideshow-wrapper).

   IMPORTANT: every rule below is nested under
   "body.page-node-type-page .node__content" — never bare
   "body.page-node-type-page .field--name-body" — because nodes with their
   own dedicated template (contact-us, badges-printing, front page, etc.)
   are ALSO "Basic page" bundle in this install, so they share the same
   body class even though they don't share this look. Their custom hero
   templates render {{ content }} directly (no .node__content wrapper), so
   .field--name-body still exists on their markup — a selector not scoped
   through .node__content would leak into their .cm-page-hero__lead
   typography too. Keep every new rule nested the same way.

   Some of this content has no real <h2>/<h3>/<ul> — editors originally
   marked headings as a bold-only paragraph and lists as line breaks. The
   :has(> strong:only-of-type) rule further down fakes heading styling for
   those without touching the source. Pages that have since been cleaned up
   to use real <h2>/<h3>/<ul> get styled directly (see below) — prefer fixing
   the source to real semantic tags where practical; there's still no
   reliable CSS-only way to turn line-break "lists" into real bullets or a
   standalone CTA line like "BOOK A DEMO TODAY" into a button.

   Vertical rhythm uses margin-bottom ONLY (never margin-top) on every
   direct child of the body field. Mixing top and bottom margins across
   different tag types (p, h2, h3, ul) relies on margin collapsing to look
   consistent, and collapsing behaves differently once "clear" (used below
   to break headings out of the floated hero image) and :has() overrides
   are involved — that's what produced the uneven gaps before. With
   bottom-only margins there's exactly one number controlling the space
   after any given element, so it can't collapse unpredictably with
   whatever comes next. Extra breathing room before a heading is added via
   :has(+ h2)/:has(+ h3) on the PRECEDING element instead of margin-top on
   the heading itself, for the same reason.
   ========================================================================== */

body.page-node-type-page .node__content {
  margin-inline: auto;
  padding-block: 48px 88px;
}

/* --- Hero image (field_image_cm) ------------------------------------------ */
body.page-node-type-page .node__content .field--name-field-image-cm {
  position: relative;
  float: left;
  width: 450px;
  max-width: 42%;
  aspect-ratio: 4 / 3;
  margin: 4px 32px 24px 0;
  border-radius: var(--cm-radius-insert);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(24, 32, 41, 0.12);
}

body.page-node-type-page .node__content .field--name-field-image-cm .field__item {
  height: 100%;
}

body.page-node-type-page .node__content .field--name-field-image-cm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Body copy: base rhythm ------------------------------------------------ */
body.page-node-type-page .node__content .field--name-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cm-ink);
}

/* Every direct child gets the same base gap after it, and no top margin at
   all — see the note above on why this file avoids margin-top entirely. */
body.page-node-type-page .node__content .field--name-body > * {
  margin: 0 0 20px;
}

body.page-node-type-page .node__content .field--name-body > *:last-child {
  margin-bottom: 0;
}

/* The opening paragraph reads as the page's lead/intro line. */
body.page-node-type-page .node__content .field--name-body > p:first-child {
  font-size: 19px;
  line-height: 1.6;
  color: var(--cm-muted);
}

/* Extra space directly above a heading, added to whatever precedes it. */
body.page-node-type-page .node__content .field--name-body > :has(+ h2) {
  margin-bottom: 48px;
}

body.page-node-type-page .node__content .field--name-body > :has(+ h3) {
  margin-bottom: 36px;
}

/* Real headings, for content that's been cleaned up to use them. */
body.page-node-type-page .node__content .field--name-body h2 {
  clear: both;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: var(--cm-ink);
}

body.page-node-type-page .node__content .field--name-body h3 {
  clear: both;
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
  color: var(--cm-ink);
}

/* The very first heading is the page title — it should wrap beside the
   floated hero image (like a two-column mini-hero), not break below it.
   Only headings further down, introducing a later section, should clear
   the float and go full-width. */
body.page-node-type-page .node__content .field--name-body > h2:first-child,
body.page-node-type-page .node__content .field--name-body > h3:first-child {
  clear: none;
}

/* Editors mark headings as "<p><br><strong>Heading text</strong></p>" on
   pages that haven't been cleaned up to real <h2>/<h3> yet. clear: both
   lets the first one break the hero image's float, so the page reads as
   "hero left, intro right" up top, then full-width from the first real
   section on — unless it's the very first element in the body (the page
   title standing in for a missing <h2>), in which case it should wrap
   beside the image just like a real first heading does. */


body.page-node-type-page .node__content .field--name-body a {
  color: var(--cm-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-node-type-page .node__content .field--name-body a:hover {
  color: var(--cm-red-hover);
}

/* Real lists, on the pages where an editor does use them. */
body.page-node-type-page .node__content .field--name-body ul,
body.page-node-type-page .node__content .field--name-body ol {
  padding-left: 22px;
}

body.page-node-type-page .node__content .field--name-body li {
  margin-bottom: 8px;
  line-height: 1.6;
}

body.page-node-type-page .node__content .field--name-body li:last-child {
  margin-bottom: 0;
}

/* Safety-net clear in case a page has no heading/fake-heading at all —
   keeps the hero image from bleeding into whatever comes after. */
body.page-node-type-page .node__content .field--name-body::after {
  content: '';
  display: block;
  clear: both;
}

@media (max-width: 640px) {
  body.page-node-type-page .node__content .field--name-field-image-cm {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
  }
}