/*
 * Home B header variations, the shared parts (parts/home-b/header-<n>.php,
 * staging only with ?hdr=1|2|3): the brand block (the HDC logo with "A [Heavy
 * Duty Mobility logo] brand" under its wordmark), the page tokens each
 * variation sets, and the link colors. Each variation's layout lives in
 * home-b-header-<n>.css. Printed before the header by hdc_home_b_hdr_styles().
 */

@layer tokens {
	/* --header is the first-screen header height (the hero is the screen less it); --sticky what stays on top. */
	body.hdc-home-b:has(.hdc-h1) {
		--header: 9.75rem;
		--sticky: 0px;
	}

	body.hdc-home-b:has(.hdc-h2) {
		--header: 11rem;
		--sticky: 0px;
	}

	body.hdc-home-b:has(.hdc-h3) {
		--header: 6.75rem;
		--sticky: 0px;
	}

	@media (min-width: 48rem) {
		body.hdc-home-b:has(.hdc-h1) {
			--header: 11rem;
		}
	}

	@media (min-width: 64rem) {
		body.hdc-home-b:has(.hdc-h1) {
			--header: 12.25rem;
			--sticky: 5.25rem;
		}

		body.hdc-home-b:has(.hdc-h2) {
			--header: 10.375rem;
			--sticky: 4rem;
		}

		body.hdc-home-b:has(.hdc-h3) {
			--header: 8.25rem;
			--sticky: 0px;
		}
	}

	@media (min-width: 72rem) {
		body.hdc-home-b:has(.hdc-h3) {
			--sticky: 6rem;
		}
	}
}

@layer components {
	/*
	 * The brand block: the HDC logo and the family, "By" and the HDM logo on
	 * one line. Phones put the family under the logo, flush with its left edge;
	 * from 48rem it sits to the right behind a hairline (Raphael, 2026-10-13).
	 * --logo sets the logo height.
	 */
	.hdc-home-b .hdc-hb {
		--logo: 1.75rem;
		--hb-rule: var(--line);
		display: flex;
		flex: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.hdc-home-b .hdc-hb--dark {
		--hb-rule: rgb(255 255 255 / 0.22);
	}

	.hdc-home-b .hdc-hb .hdc-b-logo {
		min-height: 0;
	}

	.hdc-home-b .hdc-hb .hdc-b-logo__svg {
		height: var(--logo);
	}

	.hdc-home-b .hdc-hb__family {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		min-height: 1.5rem;
		--link: var(--steel);
		--link-hover: var(--steel);
		--link-line: none;
		--link-hover-line: none;
		color: var(--steel);
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.02em;
		text-decoration: none;
		white-space: nowrap;
	}

	.hdc-home-b .hdc-hb--dark .hdc-hb__family {
		--link: var(--mist);
		--link-hover: var(--white);
		color: var(--mist);
	}

	.hdc-home-b .hdc-hb__hdm {
		display: block;
		flex: none;
		width: auto;
		height: max(0.9375rem, calc(var(--logo) * 0.5));
		color: var(--ink); /* The white HDM logo's road is cut out in the ground color. */
	}

	.hdc-home-b .hdc-hb__family:hover .hdc-hb__by {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	@media (min-width: 48rem) {
		.hdc-home-b .hdc-hb {
			--logo: 2rem;
			flex-direction: row;
			align-items: center;
			gap: 0.875rem;
		}

		.hdc-home-b .hdc-hb__family {
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			gap: 0.4375rem;
			min-height: var(--logo);
			padding-inline-start: 0.875rem;
			border-inline-start: 1px solid var(--hb-rule);
			font-size: 0.6875rem;
		}
	}

	@media (min-width: 72rem) {
		.hdc-home-b .hdc-hb {
			--logo: 2.375rem;
		}

		.hdc-home-b .hdc-hb__family {
			font-size: 0.75rem;
		}
	}

	/* The drawer's head keeps a plain bar height whatever the header is. */
	.hdc-home-b:has(.hdc-h1, .hdc-h2, .hdc-h3) .hdc-b-drawer__head {
		min-height: 4rem;
	}

	/* Stars are solid in the text color: yellow stays the color of Call. */
	.hdc-home-b [class$="__star"] {
		fill: currentColor;
		stroke: none;
	}

	/* Link colors go through theme.json's properties (see home-b.css). */
	.hdc-home-b [class*="-rev__link"] {
		--link: currentColor;
		--link-hover: currentColor;
		--link-line: none;
		--link-hover-line: none;
	}
}