/**
 * Page Hero — inner-page banner (Residential Roofing section 3).
 * Figma: 1920x500, padding 145 240. Background photo under a left-to-right
 * #1A3412 gradient (76/46/27% alpha); both come from the shared section
 * settings, so this file only owns the type and the breadcrumb.
 */

/* Both designed heroes are exactly 500px tall, but Residential Roofing's
 * heading is one line and Roof Replacement's is three. A literal 145px
 * padding only reconciles with the one-line case — on the three-line page it
 * pushed the band to 594. Centring inside a 500px floor matches both, and
 * still grows if a heading ever runs longer than the box. */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 500px;
	padding-block: var(--space-60);
	color: var(--white);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero__heading {
	margin: 0;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-84);
	font-weight: 800;
	line-height: var(--lh-tight);
	/* Per-instance, from page_hero_content_max — the design caps the H1 at a
	 * different width on every page and that is what decides where it wraps.
	 * The flat 1200 that was here let headings run wider than the design and
	 * break on the wrong word. */
	max-width: var(--hero-content-max, 700px);
}

.page-hero__heading span,
.page-hero__heading .is-accent {
	color: var(--primary-green);
}

/* A lighter run inside the H1 — Roof Replacement sets its parenthetical to
 * Regular against the ExtraBold line above it (styleID 1 override on node
 * 1092:20183). It is a weight variant, not the green accent, so it has to undo
 * the colour the bare `span` rule above applies. Declared after it, since both
 * match a `<span class="is-light">` at the same specificity. */
.page-hero__heading .is-light {
	color: inherit;
	font-weight: 400;
}

/* --- breadcrumb ------------------------------------------------------ */
/* Figma sets the trail 10 below the H1's line box (node 1092:20183: H1 ends
 * 355, crumbs start 365) — it was 20. */
.page-hero__breadcrumb {
	margin-top: 10px;
}

/* And 12 either side of the separator. Yoast emits it as a bare " / " text node
 * between the crumb spans, so the space itself only measures ~5; the difference
 * goes on the spans. The outer edges stay flush so the trail lines up with the
 * H1 at the container edge. */
.page-hero__breadcrumb > span > span {
	margin-inline: 7px;
}

.page-hero__breadcrumb > span > span:first-child {
	margin-left: 0;
}

.page-hero__breadcrumb > span > span:last-child {
	margin-right: 0;
}

/* Yoast emits a flat <span> trail with its own separator, so this styles the
 * text rather than laying out list items. Figma: Roboto 20/400, links green,
 * the current page white. */
.page-hero__breadcrumb,
.page-hero__breadcrumb > span {
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

.page-hero__breadcrumb a {
	color: var(--primary-green);
	text-decoration: none;
	transition: var(--transition);
}

.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus-visible {
	color: var(--white);
	text-decoration: underline;
}

.page-hero__breadcrumb .breadcrumb_last {
	color: var(--white);
	font-weight: 400;
}

@media (max-width: 991px) {

	.page-hero {
		min-height: 360px;
		padding-block: var(--space-60);
		/* Clipped, so the 160% below cannot scroll the page sideways — the hero
		 * is full-bleed and has nothing else to contain it. */
		overflow: hidden;
	}

	/* The green wash clears by 76.2% of a 1920 band, which on a narrow hero puts
	 * its transparent end straight over the H1 and the breadcrumb. 160% at the
	 * developer's instruction — overhanging pushes the clear end off-canvas and
	 * leaves the readable dark green behind the copy. `inset: 0` on the shared
	 * overlay rule sets left AND right, so the right edge is released for the
	 * width to mean anything. */
	.page-hero.section-overlay-green::before {
		right: auto;
		width: 160%;
	}
}

@media (max-width: 767px) {

	.page-hero {
		min-height: 280px;
		padding-block: var(--space-40);
	}
}