/**
 * Section headers -- the "Header" WYSIWYG field that the flexible-content rows
 * print into .row__header .wysiwyg. Today that is the Multi-Column Grid and the
 * Insights module; any other row using the same field is covered too.
 *
 * Client request, 2026-09-18: put the eyebrow/headline pair from the two-column
 * CTA (assets/css/flex-twocol-cta.css) into these modules -- the eyebrow gray
 * rather than navy, the headline in the same navy Montserrat size as the
 * mockup. The Insights module's OTHER headline, the h3 in .projgrid__link, is
 * already on that type; it was done in assets/css/flex-insights.css.
 *
 * SCOPE -- every rule here is keyed on an <h6> inside the header, which is an
 * opt-in flag rather than a guess. Of the 254 live header WYSIWYGs in the
 * database, exactly THREE contain an h6 and all three are the new-style rows
 * the designers built (Hero Demo #10649 x2, Featured #10650). Every
 * pre-existing row types its header as h1/h2/h3/p, so none of them move -- a
 * bare `.row__header .wysiwyg h3` rule would have caught 13 of them ("Related
 * Insights" on the service pages, "Every journey has phases", and friends).
 * Re-run that audit before assuming it still holds.
 *
 * It doubles as the editor-facing switch: format the eyebrow as Heading 6 and
 * the row takes the new treatment, which is what the designers did unprompted
 * on both pages.
 *
 * Hand-authored outside the gulp/SASS build -- see CLAUDE.md. Enqueued after
 * unify2021-base-type, which carries this same eyebrow treatment for the six
 * labels that used to be set in Industry. Every selector here outranks or
 * simply post-dates the compiled rule it replaces; nothing needs !important.
 */

/* Declared on the shared parent, not on the eyebrow: the headline is the
   eyebrow's SIBLING, and custom properties inherit down, not sideways. */
.row__header .wysiwyg {
	--rowhead-gray: #6a747c; /* $color-gray      */
	--rowhead-navy: #143250; /* $color-dark-blue */
}

/* --- The eyebrow: "SERVICES", "FEATURED INSIGHTS" -------------------------
   Was 1rem (so 20px at >=1400, where the theme scales the root font to 20px)
   of navy 700 with the theme's -0.01em tracking on every heading -- near enough
   the headline's own colour and weight that the two read as one lump. Mirrors .hero__eyebrow exactly, in gray: these are
   kickers over a full-width band, which is that label's job, where
   .ctacol__label's 13px is a tag above a card. base-type.css already splits the
   site's other eyebrows along the same line.

   The theme zeroes the margin on a heading that is `:last-child` of a .wysiwyg,
   at the same specificity as this rule; this sheet loads later, so the 14px
   stands. That matters for the Insights module, where the eyebrow is alone in
   its container and this margin is the whole gap to the headline. */

.row__header .wysiwyg h6 {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--rowhead-gray);
}

/* --- The headline ---------------------------------------------------------
   Only a heading that FOLLOWS an eyebrow, which is what keeps this off the 13
   pre-existing rows whose header is a bare h2/h3. h1-h4 are all covered so the
   treatment survives an editor picking a different heading level; today every
   instance is an h3.

   Same declarations as .ctacol__title -- clamp(24px, 2.1vw, 31px) navy 600 --
   so a page carrying both modules reads as one scale. What it replaces: h3 is
   1.7rem, i.e. 34px at >=1400 where the theme scales the root font to 20px,
   plus the theme's +0.04em tracking on every h3. Measured at 1440: 34px before,
   30.24px after, identical to the .ctacol__title beside it on the same page. */

.row__header .wysiwyg h6 ~ h1,
.row__header .wysiwyg h6 ~ h2,
.row__header .wysiwyg h6 ~ h3,
.row__header .wysiwyg h6 ~ h4 {
	font-size: clamp(24px, 2.1vw, 31px);
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--rowhead-navy);
}

/* The Hero Demo headline is typed as <h3><strong>...</strong></h3>, and the
   theme's `strong { font-weight: 700 }` beats a font-weight set on the h3 --
   the heading would stay bold while reporting 600. Editors bold a headline out
   of habit, so this is not a one-off. */
.row__header .wysiwyg h6 ~ h1 strong,
.row__header .wysiwyg h6 ~ h2 strong,
.row__header .wysiwyg h6 ~ h3 strong,
.row__header .wysiwyg h6 ~ h4 strong {
	font-weight: inherit;
}

/* --- Pairing them in the Insights module ----------------------------------
   Everywhere else the eyebrow and headline are siblings in one .wysiwyg, so
   the 14px above is the gap. The Insights module splits them: the eyebrow sits
   in .row__header and the headline is the Subtitle field, printed as the h3 in
   .projgrid__link alongside the "All Insights" button. Between the two sits
   `.row__header { margin-bottom: rem(84) }` -- 105px at >=1400 -- which is what
   makes the pair read as two unrelated lines on /hero-demo/.

   Zeroing it hands the spacing back to the eyebrow's own 14px. Conditional on
   the eyebrow being the LAST thing in the header, because a row that carries
   its own headline (as /featured/ does) still needs that 105px to separate the
   pair from the button row below it.

   :has() is ~95% supported and this degrades to today's spacing without it. */

.projgrid header .row__header:has(> .wysiwyg > h6:last-child) {
	margin-bottom: 0;
}