/* ==========================================================================
   NFCR section header  [nfcr_section_header]
   Eyebrow (orange dot + label), two-tone title, optional intro and side link.

   Two-tone rule (from the design): words in *asterisks* get the strong colour,
   the rest the soft colour. A title with no asterisks is all strong colour.
     light   soft #33518C  -> strong #002C76
     dark    soft #93A9D3  -> strong #FFFFFF
     accent  soft #FFFFFF  -> strong #FF8A5C   (dark heroes, e.g. "Brain Cancer")

   Sizes (desktop px): s 30 · m 34 · l 40 (default) · xl 46 · display 54 · hero 60
   ========================================================================== */

.nfcr-sh { margin: 0 0 26px; font-family: var(--nfcr-font); }
.nfcr-sh--flush { margin-bottom: 0; }

.nfcr-sh--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.nfcr-sh__main { min-width: 0; }

.nfcr-sh .nfcr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: var(--nfcr-fs-ui);
	font-weight: 600;
	line-height: 1.4;
	color: var(--nfcr-navy);
}
.nfcr-sh .nfcr-eyebrow::before {
	content: "";
	flex-shrink: 0;
	width: var(--nfcr-dot);
	height: var(--nfcr-dot);
	border-radius: 50%;
	background: var(--nfcr-accent);
}

.nfcr-sh .nfcr-sh__title {
	margin: 0;
	padding: 0;
	font-family: var(--nfcr-font);
	--nfcr-title-size: 40;
	font-size: calc((22 + (var(--nfcr-title-size) - 22) * var(--nfcr-type-k)) * 1px);
	font-weight: 600;
	line-height: var(--nfcr-lh-tight);
	letter-spacing: -.0375em; /* -1.5px at 40px */
	color: var(--nfcr-sh-soft);
	text-transform: none;
}
.nfcr-sh .nfcr-sh__title .nfcr-hl,
.nfcr-sh .nfcr-sh__title.nfcr-sh__title--solid { color: var(--nfcr-sh-strong); }

/* Colour schemes */
.nfcr-sh--light  { --nfcr-sh-soft: var(--nfcr-heading-muted); --nfcr-sh-strong: var(--nfcr-navy); }
.nfcr-sh--dark   { --nfcr-sh-soft: var(--nfcr-on-dark-muted); --nfcr-sh-strong: #fff; }
.nfcr-sh--accent { --nfcr-sh-soft: #fff;                      --nfcr-sh-strong: var(--nfcr-orange-soft); }

/* Sizes */
.nfcr-sh--s       .nfcr-sh__title { --nfcr-title-size: 30; letter-spacing: -.033em; line-height: 1.1; }
.nfcr-sh--m       .nfcr-sh__title { --nfcr-title-size: 34; letter-spacing: -.035em; line-height: 1.1; }
.nfcr-sh--xl      .nfcr-sh__title { --nfcr-title-size: 46; }
.nfcr-sh--display .nfcr-sh__title { --nfcr-title-size: 54; line-height: 1.02; }
.nfcr-sh--hero    .nfcr-sh__title { --nfcr-title-size: 60; line-height: 1.05; }
.nfcr-sh--jumbo   .nfcr-sh__title { --nfcr-title-size: 80; line-height: .98; letter-spacing: -3px; }

.nfcr-sh .nfcr-sh__intro {
	margin: 12px 0 0;
	max-width: 780px;
	font-size: var(--nfcr-fs-intro);
	line-height: var(--nfcr-lh-body);
	color: var(--nfcr-text);
}

.nfcr-sh .nfcr-sh__intro + .nfcr-sh__intro { margin-top: 10px; }

/* Lead: one bold line between title and intro */
.nfcr-sh .nfcr-sh__lead {
	margin: 14px 0 0;
	font-size: var(--nfcr-fs-h3-lg);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.3px;
	color: var(--nfcr-sh-strong);
}
.nfcr-sh .nfcr-sh__lead + .nfcr-sh__intro { margin-top: 8px; }

.nfcr-sh .nfcr-sh__link { flex-shrink: 0; white-space: nowrap; }

/* Plain side text instead of a link ("21 types · find the information and next steps relevant to you") */
.nfcr-sh .nfcr-sh__side {
	flex-shrink: 0;
	margin: 0;
	white-space: nowrap; /* one line on desktop; wraps again on tablet and phone (below) */
	font-size: var(--nfcr-fs-meta);
	font-weight: 500;
	line-height: 1.5;
	text-align: right;
	color: var(--nfcr-text-2);
}
.nfcr-sh--dark .nfcr-sh__side,
.nfcr-sh--accent .nfcr-sh__side { color: var(--nfcr-on-dark-text); }

/* On dark panels */
.nfcr-sh--dark .nfcr-eyebrow,
.nfcr-sh--accent .nfcr-eyebrow { color: #fff; }
.nfcr-sh--dark .nfcr-sh__intro,
.nfcr-sh--accent .nfcr-sh__intro { color: var(--nfcr-on-dark-text); }

@media (max-width: 767px) {
	.nfcr-sh--split { flex-direction: column; align-items: flex-start; gap: 14px; }
	.nfcr-sh .nfcr-sh__link { white-space: normal; }
	.nfcr-sh .nfcr-sh__side { white-space: normal; text-align: left; }
}
@media (max-width: 1024px) {
	.nfcr-sh .nfcr-sh__side { flex-shrink: 1; white-space: normal; max-width: 360px; }
}

/* ---- 0.9.18 Two columns: title left, lead + intro right (aligned to the bottom of the title) ---- */
.nfcr-sh--columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px 56px; }
.nfcr-sh--columns .nfcr-sh__aside { min-width: 0; padding-bottom: 4px; }
.nfcr-sh--columns .nfcr-sh__aside > :first-child { margin-top: 0; }
.nfcr-sh--columns .nfcr-sh__intro { max-width: none; }
@media (max-width: 1024px) {
	.nfcr-sh--columns { grid-template-columns: minmax(0, 1fr); }
	.nfcr-sh--columns .nfcr-sh__aside > :first-child { margin-top: 12px; }
}

/* ---- 0.9.22 Centred: eyebrow, title and intro centred in a narrow column (Home timeline) ---- */
.nfcr-sh--center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.nfcr-sh--center .nfcr-sh__intro { margin-left: auto; margin-right: auto; }

/* ---- Two-column header variants (0.9.25, Who We Are). Extra class name on the Section Header. ----
   nfcr-sh--top   title column and text column both start at the top (Team); the text column sits 40px lower, its first line
                  (the Lead) at body size instead of the larger bold lead.
   nfcr-sh--wide  the title column is wider (1.4 : 1) and its lines are balanced (Our impact). */
.nfcr-sh--columns.nfcr-sh--top { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.nfcr-sh--top .nfcr-sh__aside { padding-top: 40px; }
.nfcr-sh--top .nfcr-sh__lead { font-size: var(--nfcr-fs-intro); font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.nfcr-sh--columns.nfcr-sh--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.nfcr-sh--wide .nfcr-sh__title { text-wrap: balance; }
@media (max-width: 1024px) {
	.nfcr-sh--columns.nfcr-sh--top, .nfcr-sh--columns.nfcr-sh--wide { grid-template-columns: minmax(0, 1fr); }
	.nfcr-sh--top .nfcr-sh__aside { padding-top: 0; }
}