/**
 * Horizon Core: THE PHONE HEADER (HORIZON-20260925-005, Core 1.38.2; tap target 1.38.3).
 *
 * Alex, 2026-09-26: "The BLACK Bar for the menu / icon bar on mobile looks very under premium. The
 * announcement on a white background and split into two rows looks weak." Before/after at 375:
 * docs/research/fleet-page-speed-2026-09-25/shots/header/.
 *
 * THREE RULES, phones only (< 768px). Desktop is untouched by construction: every visible rule is inside
 * the media query, and the two things the script adds to the page are hidden outside it.
 *  1. The announcement bar is ONE slim line (32px). Text that does not fit scrolls sideways (a ticker built
 *     by hp-mobile-header.js) instead of wrapping to two lines. 12px, nowrap: a one-line UI label to the
 *     mobile ratchet (S4 floor 12px), not running text.
 *  2. Where the page opens with a photo hero (body.hp-mh-hero, set by PHP so the hero moves up in the FIRST
 *     paint, never after it: CLS), the header floats over the photo on a soft fade of the site's own
 *     background colour, not on a solid band. Once the hero scrolls away it becomes a frosted bar.
 *  3. A site with no logo shows its name in the display font, in the frosted bar only (at the top the hero
 *     already carries the name in large type), and only when it fits on one row with the icons.
 *
 * ⛔ A SEPARATE FILE FROM hp-mobile.css ON PURPOSE. Two threads were editing hp-mobile.css at once (1.38.1,
 * the platform bar); a deploy of either copy would silently drop the other's rules.
 * It loads after hp-mobile.css (priority 1001) and its selectors start `html body.hp`, one step above that
 * file's `body` selectors, so rule 1 replaces the 16px S3 rule for the bar without !important there.
 *
 * ⛔ `body.hp` SCOPES EVERY RULE. FeatureNews' theme does not print the `hp` body class, and it is never
 * changed by this work.
 */

.hp-mh-wordmark,
.hp-mh-clone { display: none; }

@media (max-width: 767.98px) {

	/* ── 1. The announcement bar: one line ───────────────────────────────── */
	html body.hp .hp-announcement-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		min-height: 0;
		padding: 0 16px;
		overflow: hidden;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		line-height: 1;
		white-space: nowrap;
	}
	html body.hp .hp-announcement-bar * {
		font-size: inherit;
		letter-spacing: inherit;
		line-height: inherit;
		white-space: nowrap;
	}
	/* A bar the script did not turn into a ticker (reduced motion, rotating bars) still never wraps. */
	html body.hp .hp-announcement-bar > a,
	html body.hp .hp-announcement-bar > span {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	html body.hp .hp-announcement-bar.hp-mh-ticker { justify-content: flex-start; position: relative; }
	html body.hp .hp-announcement-bar.hp-mh-ticker > .hp-mh-track {
		display: inline-flex;
		gap: 48px;
		max-width: none;
		overflow: visible;
		animation: hp-mh-ticker 22s linear 2s infinite;
	}
	html body.hp .hp-announcement-bar.hp-mh-ticker .hp-mh-clone { display: inline; }
	/* Soft edges painted in the bar's own colour (background: inherit): a mask on the bar would show the
	   page behind it through a light bar. */
	html body.hp .hp-announcement-bar.hp-mh-ticker::before,
	html body.hp .hp-announcement-bar.hp-mh-ticker::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 28px;
		z-index: 1;
		background: inherit;
		pointer-events: none;
	}
	html body.hp .hp-announcement-bar.hp-mh-ticker::before {
		left: 0;
		-webkit-mask-image: linear-gradient(90deg, #000, transparent);
		mask-image: linear-gradient(90deg, #000, transparent);
	}
	html body.hp .hp-announcement-bar.hp-mh-ticker::after {
		right: 0;
		-webkit-mask-image: linear-gradient(270deg, #000, transparent);
		mask-image: linear-gradient(270deg, #000, transparent);
	}
	@keyframes hp-mh-ticker {
		from { transform: translateX(0); }
		to { transform: translateX(calc(-50% - 24px)); }
	}

	/* ── 2. The header over the photo ────────────────────────────────────── */
	/* ⚠️ Not while a live banner sits above the hero (streamer's home, only while she is live): the hero is
	   then not the first thing under the header, so the page keeps today's solid header. */
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) #masthead {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--hp-bg, #0a0a0a) 72%, transparent) 0%,
			color-mix(in srgb, var(--hp-bg, #0a0a0a) 30%, transparent) 60%,
			transparent 100%) !important;
		transition: background-color 0.25s ease, box-shadow 0.25s ease;
	}
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) #masthead .inside-header { min-height: 60px; }
	html body.hp.hp-mh-hero:not(.hp-mh-scrolled):not(:has(.hp-live-now-banner)) #masthead,
	html body.hp.hp-mh-hero:not(.hp-mh-scrolled):not(:has(.hp-live-now-banner)) #masthead .inside-header {
		border: 0 !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		background-color: transparent;
	}
	/* The hero runs up under the header. --hp-mh-h is the header's measured height (the script corrects it
	   if a theme differs); 72px is what all five theme families measured at 375. */
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) .hp-hero { margin-top: calc(-1 * var(--hp-mh-h, 72px)) !important; }
	/* The icons and the name take the site's text colour; the fade under them gives them the contrast. */
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) #masthead .inside-header > :not(#site-navigation) :is(a, button),
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) #masthead .inside-header > :not(#site-navigation) > :is(a, button) {
		color: var(--hp-text, #fff) !important;
	}
	html body.hp.hp-mh-hero.hp-mh-scrolled #masthead {
		background: color-mix(in srgb, var(--hp-bg, #0a0a0a) 88%, transparent) !important;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 1px 0 color-mix(in srgb, var(--hp-text, #fff) 8%, transparent);
	}

	/* ── 2b. The store icons sit at the RIGHT, beside the hamburger (1.38.4) ─
	   Alex, 2026-09-26: "fix the ravenkali icons". hp-mobile.css 1.29.5 made the hamburger last (kept) and
	   put Core's `.hp-header-icons` straight after the logo with `margin-right: auto`, so on ravenkali they
	   sat beside the logo with a gap before the hamburger. The shell theme's own icons (`.hp-header-tools`,
	   star, baileyfox) already group at the right with the hamburger; this makes Core's icons match on
	   entertainer, Trashy and Bridgette. Overrides that 1.29.5 rule here rather than editing it, because
	   hp-mobile.css has a second change in flight (the unmerged 1.38.1). Commerce nests its icons inside
	   its navigation and is not matched (no direct child). */
	html body.hp .inside-header:has(> .hp-header-icons) > .hp-header-icons {
		margin-left: auto;
		margin-right: 0;
	}

	/* ── 3. The name, where there is no logo ─────────────────────────────── */
	/* ⛔ 1.38.6: with a name shown, the header row NEVER wraps. 1.38.4 moved the icons right and Trashy's
	   name then pushed the hamburger onto a second row (live, 2026-09-26). The icons and hamburger keep
	   their size; only the name's box can give way, and the script removes the name when its box is too
	   narrow for it, so it is never shown clipped. */
	html body.hp .inside-header:has(> .site-branding.hp-mh-has-wordmark) { flex-wrap: nowrap; }
	html body.hp .inside-header:has(> .site-branding.hp-mh-has-wordmark) > :not(.site-branding) { flex-shrink: 0; }
	html body.hp .site-branding.hp-mh-has-wordmark { min-width: 0; flex: 0 1 auto; overflow: hidden; margin-right: 12px; }
	/* A 44px tap target (S2) however small the type: 1.38.2 shipped it 19px tall and the ratchet caught it. */
	html body.hp .hp-mh-wordmark {
		display: flex;
		align-items: center;
		min-height: 44px;
		min-width: 44px;
		font-family: var(--hp-font-display, serif);
		font-size: var(--hp-mh-name-size, 19px);
		line-height: 1;
		letter-spacing: 0.02em;
		white-space: nowrap;
		color: var(--hp-text, inherit);
		text-decoration: none;
	}
	/* Over the hero, the hero already says the name in large type: show it only once the hero has gone. */
	html body.hp.hp-mh-hero:not(.hp-mh-scrolled):not(:has(.hp-live-now-banner)) .hp-mh-wordmark {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}
	html body.hp.hp-mh-hero.hp-mh-scrolled .hp-mh-wordmark {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
	html body.hp .hp-announcement-bar.hp-mh-ticker > .hp-mh-track { animation: none; }
}