/* ==========================================================================
   NANMOW Homepage Refinement Layer v1.1.3 (owned by NANMOW / ARENTICO)
   Source of truth: website/homepage/home-refine.css
   Deployed as:     wp-content/themes/nanmow/assets/si/home-refine.css
   Printed in the footer after the page runtime (same loading rule as the Smart
   Interaction Layer), so equal-specificity rules win without !important.

   Scope: composition and consistency only — headings, Problem, Method, Principles,
   Final CTA, accent discipline. No copy, colour, font or section-order changes.
   Layout rules here work without JavaScript. Docs: NANMOW-DESIGN-SYSTEM.md §19
   ========================================================================== */

/* ---------- 1. Headings: eyebrows without decorative dots; balanced widths ---------- */
[id^="nm-home"] .nm-eyebrow { gap: 0; }
[id^="nm-home"] .nm-eyebrow::before { content: none; }
[id^="nm-home"] .nm-h2 { max-inline-size: 18em; }
[id^="nm-home"] .nm-lead,
[id^="nm-home"] .nm-stack > .nm-body { max-inline-size: 42em; }

/* ---------- 1b. Hero polish (v1.1) ---------- */
/* Rhythm: eyebrow belongs to the H1; the action follows the message closely. */
section#nm-home-hero .nm-eyebrow { margin-block-end: -4px; }          /* 20 → 12px (H1 margin also removed) */
section#nm-home-hero .nm-display { margin-block: 0; }                  /* H1 → brand line 20 → 16px */
section#nm-home-hero .nm-row { margin-block-start: 8px; }              /* copy → buttons 32 → 24px */

@media (min-width: 1025px) {
	/* H1 ~6% lighter at large widths; still the dominant element. */
	section#nm-home-hero .nm-display { font-size: clamp(56px, 18px + 3.2vw, 64px); line-height: 1.3; }
	/* Path: extends toward the page edge only where there is room, and keeps a safe
	   inset — the outer milestone never meets the viewport edge. */
	section#nm-home-hero .nm-hero-path {
		--nm-ext: clamp(0px, (100vw - 1200px) / 2 - 64px, 22%);
		inline-size: calc(100% + var(--nm-ext));
		margin-inline-end: calc(-1 * var(--nm-ext));
	}
}
/* Shorter laptop screens: the CTA stays above the fold without shrinking the type. */
@media (min-width: 1025px) and (max-height: 820px) {
	section#nm-home-hero { padding-block: 72px 88px; min-block-size: 0; }
}

/* Path labels: readable, secondary (size is fitted per width by smart-interactions.js;
   this is the no-JS fallback). Labels are shown on phones too. */
section#nm-home-hero .nm-hero-path text { font-size: 18px; font-weight: 500; fill: var(--e-global-color-nmneu40); }
@media (max-width: 767px) {
	section#nm-home-hero .nm-hero-path text { display: block; font-size: 24px; }
	section#nm-home-hero .nm-hero-path { margin-block-start: 4px; }
	section#nm-home-hero { padding-block-end: 32px; }
}

/* ---------- 2. Problem: the symptom list becomes an editorial index ---------- */
@media (min-width: 1025px) {
	section#nm-home-problem .nm-split { grid-template-columns: 5fr 7fr; column-gap: 64px; }
	section#nm-home-problem .nm-symptoms { font-size: 19px; }
	section#nm-home-problem .nm-symptom {
		margin: 0;
		padding-block: 18px;
		font-size: 19px;
		line-height: 1.6;
		/* hairline that stops before the rail */
		background: linear-gradient(var(--e-global-color-nmneu20), var(--e-global-color-nmneu20)) no-repeat left bottom / calc(100% - 36px) 1px;
	}
	html[dir="ltr"] section#nm-home-problem .nm-symptom { background-position: right bottom; }
	section#nm-home-problem .nm-symptom::before { inset-block-start: calc(18px + .8em - 8px); }
	/* the conclusion sits under the list column, not across the whole page */
	section#nm-home-problem .nm-cost {
		margin-inline-start: calc((100% - 64px) * 5 / 12 + 64px);
		font-size: 22px;
		line-height: 1.6;
	}
}

/* ---------- Rails: first node centre → last node centre, never beyond ----------
   Elementor containers force ::before to full height; the insets come from the measured
   nodes (smart-interactions.js sets --nm-rail-a / --nm-rail-b). */
section#nm-home-problem .nm-symptoms::before,
section#nm-home-method .nm-steps::before {
	block-size: auto;
	inset-block: var(--nm-rail-a, 14px) var(--nm-rail-b, 14px);
}

/* ---------- 3. Method: tighter sequence; the action aligns with the step text ---------- */
@media (min-width: 1025px) {
	section#nm-home-method .nm-steps { gap: 40px; }
}

/* ---------- 4. Accent discipline: orange marks action and progress only ---------- */
section#nm-home-value .nm-value::before { background: var(--e-global-color-primary); }

/* ---------- 5. Principles: one editorial system (head above, 3 × 2 grid) ---------- */
section#nm-home-principles .nm-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 56px;
}
section#nm-home-principles .nm-split > :first-child { position: static; max-inline-size: 40rem; }
section#nm-home-principles .nm-grid-2 {
	background: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 48px;
}
section#nm-home-principles .nm-grid-2 > * {
	padding-block-start: 26px;
	gap: 10px;
	border-block-start: 1px solid var(--e-global-color-nmneu20);
}
section#nm-home-principles .nm-grid-2 > *::before {
	inline-size: 32px;
	block-size: 2px;
	inset-block-start: -1px;
	background: var(--e-global-color-primary);
}
section#nm-home-principles .nm-grid-2 .nm-h4 { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.375rem); line-height: 1.4; }
section#nm-home-principles .nm-grid-2 .nm-body { max-inline-size: 36ch; }
@media (max-width: 1024px) {
	section#nm-home-principles .nm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (max-width: 767px) {
	section#nm-home-principles .nm-split { row-gap: 40px; }
	section#nm-home-principles .nm-grid-2 { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	section#nm-home-principles .nm-grid-2 > * { padding-block-start: 22px; }
}

/* ---------- 6. Final CTA: one conversion block ---------- */
/* Decorative ring + lone dot removed (read as an empty shell before the footer). */
section#nm-home-final::before,
section#nm-home-final::after { content: none; }

section#nm-home-final .nm-final-grid > .nm-stack:first-child { display: contents; }
section#nm-home-final .nm-final-grid > .nm-stack:last-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
}
section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-h2 { margin-block-start: 16px; }
section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-lead { margin-block-start: 16px; }

/* Process: a vertical journey with per-step connectors (node → next node, exact at any
   wrap), ending on the orange destination node. */
section#nm-home-final #nm-final-steps {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 0;
	padding: 32px 36px;
	border: 1px solid rgb(255 255 255 / .12);
	border-radius: 20px;
	background: rgb(255 255 255 / .03);
}
section#nm-home-final #nm-final-steps::before { content: none; }
section#nm-home-final #nm-final-steps > * { position: relative; padding: 0; padding-inline-start: 40px; }
section#nm-home-final #nm-final-steps .nm-body { margin: 0; line-height: 28px; }
section#nm-home-final #nm-final-steps > *::before {
	inset-block-start: 6px;
	inset-inline-start: 0;
	border-color: var(--e-global-color-nmneu40);
}
section#nm-home-final #nm-final-steps > :last-child::before { border-color: var(--e-global-color-accent); }
section#nm-home-final #nm-final-steps > :not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 7px;
	inset-block-start: 14px;
	inline-size: 2px;
	block-size: calc(100% + 30px);
	background: var(--e-global-color-nmteal7);
}

/* Desktop / large tablet: text + action on the reading side, the journey beside it */
@media (min-width: 900px) {
	section#nm-home-final .nm-final-grid {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 72px;
		row-gap: 0;
		align-items: start;
	}
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-eyebrow { grid-column: 1; grid-row: 1; }
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-h2 { grid-column: 1; grid-row: 2; }
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-lead { grid-column: 1; grid-row: 3; }
	section#nm-home-final .nm-final-grid > .nm-stack:last-child { grid-column: 1; grid-row: 4; margin-block-start: 36px; }
	section#nm-home-final #nm-final-steps { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
/* Tablet / phone: heading → line → journey → action */
@media (max-width: 899px) {
	section#nm-home-final .nm-final-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-eyebrow { order: 1; }
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-h2 { order: 2; }
	section#nm-home-final .nm-final-grid > .nm-stack:first-child > .nm-lead { order: 3; }
	section#nm-home-final #nm-final-steps { order: 4; margin-block-start: 32px; max-inline-size: 560px; }
	section#nm-home-final .nm-final-grid > .nm-stack:last-child { order: 5; margin-block-start: 28px; }
}
@media (max-width: 767px) {
	section#nm-home-final #nm-final-steps { padding: 22px 20px; max-inline-size: none; }
	section#nm-home-final .nm-final-grid > .nm-stack:last-child { align-items: stretch; }
	section#nm-home-final .nm-final-grid > .nm-stack:last-child .nm-link-dark { align-self: center; }
}

/* Contrast (v1.1.3): the muted lead in the Growth System panels sits on teal-800
   (#10505D), where neutral-400 measured 4.17:1. A lighter supporting neutral reaches
   6.0:1; the teal surface and the heading colour are unchanged. */
#nm-home-system .nm-panel .nm-t-muted-dark { color: #C8D5D7; }