/**
 * The new sticky-header lockup (round 4, Lane LG; PLAN-FEEDBACK-ROUND-4.md addendum 4f, D-591; HEADER-V6-PORT.md).
 *
 * Loaded after header-v6.css only while `eupepsia_logo_h_v8` applies (inc/enqueue-logo-h-v8.php: body class
 * `eup-logoh8`, always with `eup-hd6` and `eup-hd5`). Every rule is one class heavier than header v6's.
 *
 * The file: brand-v8/logo-horizontal-ink.svg, 310.97 x 162.84 (ratio 1.9097), on the brand-v7 lockup's artboard
 * geometry (the mark 151.79 of 162.84 tall, 5.00 from the left, 4.04 from the top; "Eupepsia" with the same cap height
 * and baseline, 56.07 % down the box). header-v6.css reads the ratio through --eup-hd6-logo-ratio (fallback 4.116) and
 * --eup-hd6-logo-aspect (fallback 670.19 / 162.84): the phone clamp, the pinned width and the SHOP panel's left edge
 * from 1280 follow the narrower lockup.
 *
 * Height (owner's answer to question 14, 30 Oct 2026, "a bit taller so the wellness boutique is readable"; 62/58 by
 * default when 60 vs 62 went unanswered): --eup-hd6-logo-h-pinned, 62 px from 1024 and 58 px below (brand-v7: 48 and
 * 44). To change it, edit only these two values. "Wellness Boutique" cap height = 0.0971 x the height: 6.0 px at 62,
 * 5.6 at 58 (5.8 at 60, 4.7 at 48).
 */

body.eup-hd6.eup-hd5.eup-logoh8 {
	--eup-hd6-logo-ratio: 1.9097;
	--eup-hd6-logo-aspect: 310.97 / 162.84;
	--eup-hd6-logo-h-pinned: 62px;
	/* The brand-v7 lockup's pinned height: the alignment reference (below). */
	--eup-hd6-logo-h-ref: 48px;
	--eup-hd6-logo-pinned: var(--eup-hd6-logo-h-pinned);
}

/* Below 1024: 58 px, never wider than the room beside the bar and the bag (100vw - 204 px, as header v6; at the 1.9097
   ratio it binds only below 311 px). The reference is the brand-v7 size at the same width. */
@media (max-width: 1023.98px) {
	body.eup-hd6.eup-hd5.eup-logoh8 {
		--eup-hd6-logo-h-pinned: min(58px, calc((100vw - 204px) / var(--eup-hd6-logo-ratio)));
		--eup-hd6-logo-h-ref: min(44px, calc((100vw - 204px) / 4.116));
	}
}

/* "Slightly move it to match the previous alignment" (owner, 30 Oct): the lockup stays centred on the bar's line (the
   mark's centre within 0.2 px of the brand-v7 mark's; the "Eupepsia" baseline 0.06 x the extra height lower, 0.85 px at
   62). A taller box moves the mark's left edge right by 0.0307 x the extra height (5.00 / 162.84): this moves it back onto
   the brand-v7 lockup's (paint only, no layout change). */
body.eup-hd6.eup-hd5.eup-logoh8 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-horizontal {
	transform: translateX(calc((var(--eup-hd6-logo-h-pinned) - var(--eup-hd6-logo-h-ref)) * -0.0307));
}

/* The pinned bar keeps its 64 px at every width (8 px + the 48 px bar, bag or burger + 8 px) while the logo fits in it:
   the padding gives up what the logo gains (1 px at 62, 3 px at 58). A logo taller than 64 px grows the bar by the
   difference. Only while the lockup is printed (with no logo at all, header-v2/logo.php prints the site name instead). */
body.eup-hd6.eup-hd5.eup-logoh8 .eup-hd.eup-hd3.is-pinned:has(.eup-hd6__logo-horizontal) {
	--eup3-hd-pad: max(0px, calc(8px - (var(--eup-hd6-logo-h-pinned) - 48px) / 2));
}

/* 1024-1279 (question 15, default yes): the lockup instead of the mark alone; at 118 px it leaves the search line its
   room (header v6 showed the mark there because the 198 px brand-v7 lockup cut it). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	/* Here the previous pinned logo was the mark alone (no padding), so the mark's left edge goes back onto the gutter:
	   the whole 5.00 / 162.84 padding is taken back (1.9 px at 62); centred on the bar as at every other width. */
	body.eup-hd6.eup-hd5.eup-logoh8 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-horizontal {
		display: block;
		transform: translateX(calc(var(--eup-hd6-logo-h-pinned) * -0.0307));
	}

	body.eup-hd6.eup-hd5.eup-logoh8 .eup-hd.eup-hd3.is-pinned .eup-hd6__logo-mark {
		display: none;
	}
}