/**
 * Horizon Core: THE LIVE RIBBON (HORIZON-20261003-011; Alex, 2026-10-06: "Agreed Option 2, build it").
 * Scope and evidence: docs/live-now-banner-scope-2026-10-03.md, docs/research/live-now-banner-2026-10-03/.
 *
 * The `live_now_banner` section ("<name> is LIVE right now!" + Watch Live) prints only while the tenant is live, as
 * the FIRST section of the page (streamer's home, every Live Streams page). Before this sheet:
 *  - from 601px, where every theme floats the header (absolute under an announcement bar, then fixed), the banner
 *    started at the top of the page UNDER the header: its line 100% covered at 640-1280px on every page, and it had
 *    scrolled away before the header turned solid, so from 601px nobody could read it;
 *  - its look lived only in the themes' hp-shows.css, which the HOME page never loads: bare text on the home, a tall
 *    rounded card on the live page. Two looks for one component.
 *
 * ONE ribbon on every page, skin and theme: a pulsing red live dot, the line at 16px, Watch Live at the right (44px).
 *  R1 It sits flush under the header at every width. Up to 600px the header is sticky and takes its own space; from
 *     601px the ribbon reserves the header's height above itself, the way the hero does (hp-mobile-header.css F).
 *  R2 Once you scroll it stays pinned under the header (sticky, top = the header's height), so the one action a live
 *     page exists for never leaves the screen. The hand-off is seamless: the themes switch the header from absolute
 *     to fixed exactly when the announcement bar has scrolled away, which is when the ribbon reaches it.
 *  R3 Not pinned on a short screen (under 560px tall: a phone held sideways), where header + ribbon would cover more
 *     than 25% (the mobile ratchet's fixed-cover rule). There it scrolls away with the page.
 *  R4 Not pinned while the cookie banner is showing (a first visit): it waits like the subscribe bar does (D18).
 *  Predicted on every page that shows it, 8 sizes, with and without an announcement bar and the button: 0% covered.
 *
 * ⛔ Red is deliberate: it is the universal "live" signal, the same red as the themes' nav pill (hp-nav-live).
 * ⛔ z-index 90: under the header (100, which also carries the open menu panel) and every overlay above it.
 * ⛔ `html body.hp` scopes every rule (above the themes' `.hp-live-now-banner` rules in hp-shows.css /
 *    hp-responsive.css, which now lose everywhere; editing them changes nothing). Fix the ribbon HERE.
 * Loaded by src/Render/live-banner.php, only while the tenant is live (the only time the section prints).
 */

html body.hp .hp-live-now-banner {
	position: sticky;
	top: var(--hp-header-h, 72px);
	z-index: 90;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, #ef4444 38%, transparent);
	border-radius: 0;
	text-align: left;
	overflow: visible;
	background: color-mix(in srgb, var(--hp-bg, #0a0a0a) 84%, #ef4444 16%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.7);
}
html body.hp .hp-live-now-banner::before { display: none; }

html body.hp .hp-live-now-banner .hp-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	flex-wrap: nowrap;
}
html body.hp .hp-live-now-banner .hp-container > span {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--hp-text, #fff);
}
html body.hp .hp-live-now-banner .hp-container > span svg {
	flex: 0 0 auto;
	color: #ef4444;
	animation: hp-live-ribbon-pulse 1.6s ease-in-out infinite;
}
@keyframes hp-live-ribbon-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}
html body.hp .hp-live-now-banner .hp-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* R1: room for the floating header, only where it floats and only when the ribbon is the first thing on the page. */
@media (min-width: 601px) {
	html body.hp .site-main > .hp-live-now-banner:first-child { margin-top: var(--hp-header-h, 72px); }
}

/* R3: not pinned on a short screen. */
@media (max-height: 559px) {
	html body.hp .hp-live-now-banner { position: relative; top: auto; }
}

/* R4: not pinned while the cookie banner is showing (a first visit), pinned the moment the visitor answers it. The same
   rule as the consent banner's D18 (the subscribe bar and the floating links button wait, hz-consent.css): header 72 +
   ribbon 61 + banner 79-99px covered 27-29% mid-scroll at 375, 390 and 1024 (predicted, HORIZON-20261003-011); without
   the pin, header + banner is 20-21%. The banner sets `hidden` when answered, so `:has()` stops matching; no script. */
html body.hp:has(#hz-cc:not([hidden])) .hp-live-now-banner { position: relative; top: auto; }

@media (prefers-reduced-motion: reduce) {
	html body.hp .hp-live-now-banner .hp-container > span svg { animation: none; }
}