/* ---------------------------------------------------------------------------
   Brand pages 2026 — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. Three components the other templates do not use:
   the reversed brand mark in the page header, the anchor nav, and the
   "copy pending" empty state.
   --------------------------------------------------------------------------- */

/* Brand mark in the page header. Knocked out to white for the same reason as
   the homepage hero strip: these wordmarks are mostly set in black and would
   disappear against the blue gradient. Sizing is generous — this is the page's
   primary identifier, not a footnote. */
.rb26-brandmark {
	margin: 6px 0 18px;
}
.rb26-brandmark img {
	height: 44px;
	width: auto;
	filter: brightness(0) invert(1);
}

/* Alternative treatment (2026-08-24) for brand pages whose mockup shows the
   logo in full colour on a white rounded card, rather than knocked out to
   white directly on the gradient — Allied, BigIron, Mascus, SalvageSale and
   Smith Broughton so far. */
.rb26-brandmark--badge {
	display: inline-flex;
	align-items: center;
	background: var(--rb-white);
	border-radius: var(--rb-radius);
	padding: 14px 22px;
}
.rb26-brandmark--badge img {
	height: 40px;
	filter: none;
}
/* Same aspect-ratio correction as the homepage ticker and Brands 2026 grid
   (see rb26-homepage.css) — Mascus is a compact wordmark, Allied/BigIron are
   much taller-proportioned than most logos, so they read wrong at a shared
   default height. */
.rb26-brandmark--sm img {
	height: 30px;
}
.rb26-brandmark--lg img {
	height: 56px;
}

/* Allied Equipment Sales (2026-08-30 edit request): logo sized up further
   than the shared 'lg' modifier (56px) — BigIron also uses 'lg' and wasn't
   part of this request, so scoped to this page rather than raising the
   shared value. */
.rb26-page--allied-equipment-sales .rb26-brandmark img {
	height: 72px;
}

/* Photo-hero scrim colour override, keyed off the brand's 'accent' field —
   see the render-time comment in template-brand.php. Ritchie Bros. only so
   far; default (unlisted accents) keeps the standard navy scrim. */
.rb26-pagehead--accent-orange .rb26-pagehead-bg::after {
	background: linear-gradient(135deg, #fcc348 0%, #fe7000 55%, #e63810 100%);
	mix-blend-mode: multiply;
}

/* GovPlanet's hero photo (vehicle lineup) is mostly open sky above the
   vehicles; the default center crop split that empty space evenly top and
   bottom, cutting the trucks' wheels and the ground plane off at the bottom.
   Biasing toward the bottom keeps the full vehicles and ground in frame. */
.rb26-page--govplanet .rb26-pagehead-bg img {
	object-position: center 80%;
}

/* BigIron Auctions (2026-08-25): larger headline than the shared brand-page
   h1 (rule below this one, clamp(28px, 3.4vw, 40px) - sized down site-wide
   because the logo is normally the primary mark, not the h1), and headline
   + lead copy set to fully opaque white rather than the shared defaults
   (var(--rb-white) is already opaque white, but .rb26-pagehead-lead is
   rgba(255,255,255,.92) site-wide - bumped to solid white here only).
   SalvageSale had the same treatment (2026-08-24) until its h1 was hidden
   instead (2026-08-31, 'lead_headline' => true) — this rule would now only
   ever style a clipped, invisible element, so it's removed for that page. */
.rb26-page--bigiron .rb26-pagehead h1 {
	font-size: clamp(40px, 5vw, 64px);
	color: var(--rb-white);
}
.rb26-page--salvagesale .rb26-pagehead-lead,
.rb26-page--bigiron .rb26-pagehead-lead {
	color: var(--rb-white);
}

/* The brand name still renders as the h1 for document structure and SEO, but
   visually it is secondary to the logo above it — the logo IS the name. */
.rb26-pagehead h1 {
	font-size: clamp(28px, 3.4vw, 40px);
}

/* Lead paragraph under the section head, set larger than body copy. */
.rb26-brand-body {
	font-size: 20px;
	line-height: 1.6;
	max-width: 70ch;
}

/* Header CTA and the closing "Explore the full portfolio" CTA both used to
   be styled here by hand (white/light-blue-hover, and always-light-blue,
   respectively). As of 2026-08-24 they use the shared rb26-btn--white and
   rb26-btn--light-blue components directly in their markup instead — see
   rb26-core.css's "Colour variants" section. The arrow is still handled by
   the site-wide .rb26-arrow rule in rb26-core.css, unrelated to this. */

/* Lead-as-headline hero variant (2026-08-25 edit request; Rouse first, Smith
   Broughton the same day) — for brand pages whose mockup treats the
   descriptor sentence as the visual headline instead of the brand name,
   because the enlarged logo above ('logo_size' => 'lg') already identifies
   the brand. The real h1 is visually hidden — clip-rect, not display:none,
   so it stays in the accessibility tree for SEO/a11y — while the descriptor
   is bolded and sized up to read as the headline. Opt in per brand via
   'lead_headline' => true, which adds this modifier class to .rb26-pagehead. */
.rb26-pagehead--lead-headline h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.rb26-pagehead--lead-headline .rb26-pagehead-lead {
	font-weight: 800;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.3;
	margin-top: 30px;
}

/* Mascus (2026-08-28), Smith Broughton (same day, same request), and Allied
   Equipment Sales (also same day, once it got its own hero_image): same
   "larger headline, fully white headline + body" treatment as
   SalvageSale/BigIron above. All three use the lead-headline variant above,
   so the visible "headline" here is .rb26-pagehead-lead, not h1 — sized up
   further than that variant's shared clamp(22px, 2.8vw, 32px). Must come
   after the shared rule above: both selectors are two classes deep (equal
   specificity), so source order is what decides the winner — this was
   originally placed before the shared rule instead, which silently lost the
   tie and left all three pages stuck at 32px instead of 44px. Body copy
   (rgba(255,255,255,.92) by default) bumped to fully opaque white too. */
.rb26-page--mascus .rb26-pagehead-lead,
.rb26-page--smith-broughton .rb26-pagehead-lead,
.rb26-page--allied-equipment-sales .rb26-pagehead-lead {
	font-size: clamp(28px, 3.6vw, 44px);
	color: var(--rb-white);
}
.rb26-page--mascus .rb26-pagehead-body,
.rb26-page--smith-broughton .rb26-pagehead-body,
.rb26-page--allied-equipment-sales .rb26-pagehead-body {
	color: var(--rb-white);
}

/* This variant stacks eyebrow, logo, headline, body and CTA with nothing
   else to break them up (no h1 taking visual space), so the shared spacing
   reads cramped — opened up per edit request 2026-08-25. */
.rb26-pagehead--lead-headline .rb26-hero-eyebrow {
	margin-bottom: 28px;
}
.rb26-pagehead--lead-headline .rb26-brandmark {
	margin-bottom: 26px;
}
.rb26-pagehead--lead-headline .rb26-hero-ctas {
	margin-top: 40px;
}

/* 'body' rendered in the hero rather than the section below (opt in via
   'body_in_hero' => true — see template-brand.php), sized/weighted like the
   original shared lead paragraph. */
.rb26-pagehead-body {
	margin-top: 64px;
	max-width: 68ch;
	font-size: 19px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.92);
}
/* A multi-paragraph 'body' (2026-08-28) renders as one .rb26-pagehead-body
   per paragraph — the 64px margin above is for the first one, separating it
   from the descriptor; paragraph-to-paragraph gaps should read like normal
   body copy instead. */
.rb26-pagehead-body + .rb26-pagehead-body {
	margin-top: 18px;
}

/* Blackmon Auctions only — per edit request 2026-08-21: a plain 2-column
   card grid, and no tint on the section behind it, matching the original
   design mockup rather than the shared brand-page defaults (auto-fit card
   grid, alternating tint). The cards themselves keep the shared white
   background + hairline keyline (.rb26-linkcard in rb26-core.css) — an
   earlier pass made them transparent, reverted per edit request 2026-08-21. */
.rb26-page--blackmon-auctions .rb26-section--tint {
	background: transparent;
}
.rb26-page--blackmon-auctions .rb26-linkgrid {
	grid-template-columns: repeat(2, 1fr);
}

/* "X at a glance" fact list (2026-08-28) — sits below the brand-body
   paragraphs in the intro section, using the shared .rb26-ticks component
   (rb26-core.css) for the checkmark bullets.

   Card format (2026-08-28 edit request, Mascus first — same component is
   shared by Allied Equipment Sales and Smith Broughton, so applied to all
   three for consistency): scoped to .rb26-facts .rb26-ticks specifically,
   not .rb26-ticks itself, since that's also the plain checklist used on the
   Careers page — this must not change there. */
.rb26-facts {
	max-width: 780px;
	margin-top: 32px;
	margin-bottom: 56px;
}
/* More air under the "X at a glance" heading and above the card grid —
   the shared .rb26-h3 margin-bottom (14px) read cramped here, per edit
   request 2026-08-28. */
.rb26-facts h3 {
	margin-bottom: 28px;
}
.rb26-facts .rb26-ticks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}
/* Each card gets its own icon badge (a small filled circle + checkmark,
   matching the site's established feature-list icon language) instead of
   the plain chevron .rb26-ticks normally uses — per edit request
   2026-08-28. The chevron ::before is unset rather than left in place: the
   new icon is a real element (.rb26-fact-icon in the markup), not a
   pseudo-element, so both would otherwise show. */
.rb26-facts .rb26-ticks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--rb-tint);
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	padding: 20px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.5;
}
.rb26-facts .rb26-ticks li::before {
	content: none;
}
.rb26-fact-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--rb-medium-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.rb26-fact-icon svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--rb-white);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 620px) {
	.rb26-brandmark img {
		height: 32px;
	}
	.rb26-brand-body {
		font-size: 17px;
	}
	.rb26-anchornav a {
		padding: 9px 15px;
		font-size: 14px;
	}
	.rb26-page--blackmon-auctions .rb26-linkgrid {
		grid-template-columns: 1fr;
	}
}