/**
 * Page Hero layout — centered page-intro on cream.
 * Fluid type/spacing: clamp maxes = mockup rendered sizes (authoring px × 1.25)
 * @ the 1600px design ceiling, scaling continuously to mobile.
 */

.flexible-section.page-hero {
	position: relative;
	background: var(--color-bg);
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	/* Mockup padding 84/72/60 → rendered 105/90/75; inline via .container. */
	padding-block: clamp(52px, 4.27vw + 36.6px, 105px) clamp(40px, 2.82vw + 29.84px, 75px);
}

/* Gold accent bar centered on the bottom edge (mockup .wws-hero::after). */
.flexible-section.page-hero::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -2.5px;
	transform: translateX(-50%);
	width: clamp(56px, 5vw, 80px);
	height: 5px;
	background: var(--color-gold2);
	z-index: 1;
}

/*
 * .is-photo — photographic hero background under a cream veil. This is the
 * `.svc-bg` treatment the six service-detail mockups (Appraisals, Title &
 * Settlement, Real Estate Services, ScoreNavigator, Flood Determinations, Tax
 * Monitoring) use, and the only rule those mockups add to the `.res-hero` the
 * audience pages already share.
 *
 * The photo itself comes from the row's own Section Settings background image,
 * so this variant supplies only the framing and the veil. The veil is a
 * ::before rather than the mockup's extra `<div class="svc-bg">`, so the markup
 * gains nothing — `::after` is already the gold bar, and paints after this, so
 * the bar stays visible.
 *
 * `center 32%` is the mockup's own framing: it crops to the desk and the model
 * buildings instead of the centre of the frame.
 */
.flexible-section.page-hero.is-photo {
	background-size: cover;
	background-position: center 32%;
	background-repeat: no-repeat;
}

.flexible-section.page-hero.is-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Non-token rgba: this is --color-bg #f7f2ea at two different alphas, which a
	   colour token cannot express. */
	background: linear-gradient(to bottom, rgba(247, 242, 234, 0.82), rgba(247, 242, 234, 0.9));
}

/*
 * .is-legal — the Privacy Policy hero (`.pp-hero`), the one page hero the client
 * pitches quieter than the shared 52px/16px pair. The type sizes are utility
 * classes swapped in page_hero.php; only spacing lives here.
 * Mockup padding 80/72/52 → 100/90/65 rendered, against the shared 105/75.
 */
.flexible-section.page-hero.is-legal {
	padding-block: clamp(50px, 4.032vw + 35.48px, 100px) clamp(33px, 2.581vw + 23.71px, 65px);
}

/* Mockup `.pp-hero h1 { margin: 6px 0 12px }` → 15px below, against the shared
   hero's 25px. The 6px top is already shared, so only the bottom differs. */
.page-hero.is-legal .page-hero-title {
	margin-block-end: clamp(9px, 0.484vw + 7.26px, 15px);
}

/* Skyline watermark (optional, behind the copy). */
.flexible-section.page-hero.has-skyline {
	overflow: hidden;
}

.page-hero-skyline {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	width: 100%;
	height: clamp(120px, 10.48vw + 82.3px, 250px);
	z-index: 0;
	pointer-events: none;
	opacity: 0.09;
	color: var(--color-navy);
	-webkit-mask-image: linear-gradient(to top, #000 32%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
	mask-image: linear-gradient(to top, #000 32%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
}

/*
 * The three page-specific arts (city / houses / courthouse) are drawn on a
 * 1600x300 viewBox at a flat 0.06 opacity with no mask — so they override the
 * skyline's fade. About Us carries no `.is-art`, so it is unaffected.
 *
 * `height:auto` keeps the mockup's exact 1600:300 intrinsic ratio at every width
 * (a vw-based clamp would be ~3px off, since the hero's box is the viewport minus
 * the scrollbar). `min-height` handles what the non-responsive mockup never had
 * to: below ~640px a bare `height:auto` collapses the watermark to ~68px, so the
 * floor holds it visible and `preserveAspectRatio="xMidYMax slice"` crops the
 * sides symmetrically instead of squashing it — the same trade the Wilkes-Barre
 * skyline above already makes.
 */
.page-hero-skyline.is-art {
	height: auto;
	min-height: 120px;
	opacity: 0.06;
	-webkit-mask-image: none;
	mask-image: none;
}

/*
 * ── is-navy ──────────────────────────────────────────────
 * Landing-page heroes on the navy gradient (client feedback 2026-08-03). Only
 * three things live here: the surface, the two colours that never had a utility
 * class to swap (the eyebrow and the skyline watermark), and the opacities that
 * turn `.text-white` into the muted white the navy surfaces use elsewhere.
 * Everything else inverts via utilities in page_hero.php, per convention 2.
 *
 * The gold bar on the bottom edge is `::after` and is unchanged — it reads on
 * navy exactly as it does on cream.
 */
.flexible-section.page-hero.is-navy {
	background: var(--gradient-navy);
	border-bottom-color: rgba(196, 154, 44, 0.22);
}

.page-hero.is-navy .section-ey {
	color: var(--color-gold2);
}

/* Non-token rgba, as the navy hero and bio banner already do for muted white. */
.page-hero.is-navy .page-hero-sub {
	opacity: 0.72;
}

/*
 * No opacity on the crumb — deliberate, and it was wrong once.
 *
 * `opacity` applies to the whole element INCLUDING children, so dimming the nav
 * dimmed the gold `.cur` with it: contrast against --color-navy fell from 6.10
 * to 2.72, under the 4.5 AA needs at this size. Full white also matches
 * `.bio-banner-crumb`, which is the theme's existing navy-hero crumb and is
 * plain `text-white` at full strength.
 *
 * If the parent crumbs should ever recede, put the opacity on the LINKS
 * (`… .page-hero-crumb a`), never on the nav — that leaves `.cur` at full gold.
 */
.page-hero.is-navy .page-hero-crumb .cur,
.page-hero.is-navy .page-hero-crumb a:hover,
.page-hero.is-navy .page-hero-crumb a:focus-visible {
	color: var(--color-gold2);
}

/*
 * The watermark is drawn with `stroke="currentColor"` and inherits navy, which
 * is invisible on a navy band — About Us is the one is-navy page that carries
 * one. White at a slightly lower alpha matches the cream version's weight.
 */
.page-hero.is-navy .page-hero-skyline {
	color: var(--color-white);
	opacity: 0.07;
}

.page-hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*
 * Breadcrumb (optional, above the eyebrow). Rendered by Yoast — see
 * inc/breadcrumbs.php — which emits `<span class="sep">/</span>` between crumbs
 * and wraps the current page in `.cur`, via the global
 * `wpseo_breadcrumb_single_link` filter in functions.php.
 */
.page-hero-crumb {
	margin-block-end: clamp(16px, 0.94vw + 12.6px, 27.5px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.page-hero-crumb a {
	color: inherit;
	text-decoration: none;
}

.page-hero-crumb a:hover,
.page-hero-crumb a:focus-visible {
	color: var(--color-gold);
}

/* .cur — the current page, the last crumb in the trail.
   Gold on top-level pages, as in the `.ab-crumb` / `.cr-crumb` / `.ct-crumb` /
   `.pp-crumb` mockups (About Us, Careers, Contact, Privacy Policy), and matching
   what this hero rendered before the switch to Yoast. */
.page-hero-crumb .cur {
	color: var(--color-gold);
}

/* Nested pages keep the current crumb in body-copy grey — the `.res-crumb`
   mockups (Residential/Commercial Lenders, Realtors, Attorneys and the six
   service-detail pages) style no `.cur` at all, so it inherits.
   `page-child` is WordPress's own body class for a page with a parent, which is
   the same nested/top-level split that decides whether the Home crumb shows —
   see inc/breadcrumbs.php. */
body.page-child .page-hero-crumb .cur {
	color: inherit;
}

/* .sep — the "/" between crumbs. The mockups write it as `&nbsp;/&nbsp;`;
   margin reproduces that gap without depending on entity whitespace, and
   cancels the inherited tracking so the slash sits centred between crumbs. */
.page-hero-crumb .sep {
	display: inline-block;
	margin-inline: 8px;
	letter-spacing: 0;
}

.page-hero .section-ey {
	color: var(--color-gold);
	text-align: center;
}

/* On <h1> — font-family / weight / navy color inherited from the global
   heading rule; only size, line-height, tracking and spacing are unique. */
.page-hero-title {
	letter-spacing: -0.02em;
	margin: 6px 0 clamp(14px, 0.9vw + 11px, 25px);
}

.page-hero-title em {
	font-style: normal;
	color: var(--color-gold2);
}

.page-hero-sub {
	max-width: 800px;
	margin: 0 auto;
}

.page-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 0.8vw + 8px, 18px);
	justify-content: center;
	align-items: center;
	margin-top: clamp(24px, 1.5vw + 16px, 36px);
}

@media (max-width: 480px) {
	.page-hero-actions { flex-direction: column; }
	.page-hero-actions .btn { width: 100%; }
}