/* ==========================================================================
   Calculator Header (neilkelly/calculator-hero)
   H1 + intro on a white band, under the breadcrumb. Token-driven.

   Cloned from blocks/blog-hero/style.css (Figma blog-hub / Z1_Header 6057:1405),
   which is the treatment every composed hub header in the theme uses. Deliberately a
   copy rather than a shared class: the two pages are separate designs that happen to
   agree today, so either can move without dragging the other. If a third hub header
   lands on these same rules, that's the point to extract one.
   ========================================================================== */
.wp-block-neilkelly-calculator-hero.nk-calculator-hero {
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	box-sizing: border-box;
	/* The breadcrumb block above already supplies the top spacing (its 32px bottom
	   padding + the block-gap). Pull the header up so the breadcrumb sits ~16px above
	   the H1 (Figma groups them tightly), instead of the ~72px default stack. */
	margin-block-start: calc(-1 * var(--wp--preset--spacing--4));
}

/* Inner band = page max-width; gutter padding yields the content-width band.
   Vertical padding is an even 24px top and bottom (spacing--6), set on request
   2026-08-13 — it replaced 0 top / 32px bottom. Note the block's negative
   margin-block-start above still pulls the whole band up by 16px, so the visible gap
   between the breadcrumb and the H1 is ~8px rather than the full 24. */
.wp-block-neilkelly-calculator-hero .nk-calculator-hero__inner {
	width: 100%;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

/* Heading — size + case from the shared .nk-headline--content class (xxl, uppercase),
   mapped in render.php. Do NOT set font-size or text-transform here: this selector is
   two classes deep and would outrank that shared rule.

   The leading stays xl-tight (1.1), inherited from blog-hero where the heading was xl.
   At xxl the convention among --content heroes is line-height--hero (1.133) — kept as-is
   because at 50px the two differ by under 2px, and matching blog-hero's clone lineage is
   worth more than that. Revisit if the design calls for it. */
.wp-block-neilkelly-calculator-hero .nk-calculator-hero__title {
	margin: 0;
	color: var(--wp--preset--color--ink-primary);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xl-tight);
}

.wp-block-neilkelly-calculator-hero .nk-calculator-hero__subhead {
	margin: 0;
	max-width: var(--wp--custom--components--project-finder--subhead-max-width);
	color: var(--wp--preset--color--ink-secondary);
	font-size: var(--wp--preset--font-size--md-base);
	line-height: var(--wp--custom--line-height--base);
}

@media (max-width: 767px) {
	.wp-block-neilkelly-calculator-hero .nk-calculator-hero__inner {
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	}
}