/**
 * 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. A per-client theme does not print the `hp` body class, and it is never
 * changed by this work.
 * ⚠️ 2026-10-02 (HORIZON-20261002-042): that roster site has run horizon-shell since 2026-09-29, so it DOES print
 * `body.hp` now and gets this file like every other site. And the header rules (2b, 3 and the theme copies' 768
 * header block) now run to 1024px: see the PHONES AND TABLETS block at the end. Rules 1 and 2 stay phone-only.
 * ⚠️ 2026-10-02 (HORIZON-20261002-065): two blocks at the end are NOT phone-only: F (the hero reserves room for the
 * floating header, to 1024px) and G (the scrolled header is a solid bar at EVERY width). Rule 2's pull-up now stops at
 * 600px, where the header is still in the page flow.
 */

.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: moved to its own 600px block below the phone block (HORIZON-20261002-065). */
	/* 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 beside the hamburger) and 3 (the name where there is no logo) moved to the
	   PHONE + TABLET block at the end of this file in 1.41.N (HORIZON-20261002-042). What stays here is the
	   phone-only half of 3: over a hero the floating header hides the name until the hero has gone. */
	/* 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; }
}

/* 1b. The floating header sits on the bar's REAL height at 601-767px (HORIZON-20261003-011). Rule 1 makes the bar 32px
   up to 767px, but from 601px every theme places the floating header at --hp-announce-h = 38px, so a 6px strip of page
   showed between bar and header on every site with a bar (measured at 640x360 and 700x900), and anything that reserves
   the header's height (the live ribbon, hp-live-banner.css) landed 6px under it. Rule 1 forces 32px whether or not the
   bar carries a link, so 32px is right for every bar here; from 768px hp-mobile.css's 38/44px values apply unchanged.
   (0,2,2): one step above the themes' `body.hp:has(> .hp-announcement-bar)`. */
@media (min-width: 601px) and (max-width: 767.98px) {
	html body.hp:has(> .hp-announcement-bar) { --hp-announce-h: 32px; }
}

/* 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.
   ⛔ ONLY TO 600px (HORIZON-20261002-065). The pull-up assumes the header takes its own space, and it does only up to
   600px, where every theme makes it `position: sticky`. From 601px the themes float it (`absolute` under an
   announcement bar, then `fixed`), so the hero already starts under it, and this lifted it a further 72px OFF THE
   SCREEN: a phone held sideways (640-767px) lost the hero's first line on 15 of 17 homes (measured 2026-10-02). */
@media (max-width: 600px) {
	html body.hp.hp-mh-hero:not(:has(.hp-live-now-banner)) .hp-hero { margin-top: calc(-1 * var(--hp-mh-h, 72px)) !important; }
}

/* ══ PHONES AND TABLETS: THE PHONE HEADER TO 1024px (HORIZON-20261002-042) ══════════════════════════════════
   Alex, 2026-10-02: "tablets get the phone header". At 769-1024 the desktop menu wrapped to two rows on 11 of 17
   sites (6 still at 1024), the first row above the screen. GeneratePress's own switch moves to 1024 by its filter
   (src/Render/mobile-header.php, hp_mobile_menu_media_query()); THIS block moves everything else in one place.
   Evidence and the full inventory: docs/research/tablet-phone-header-2026-10-02/inventory.md.

   ⭐ CORE OWNS THE PHONE HEADER NOW. Section A restates the theme copies' 768 header rules (hp-responsive.css,
   byte-identical declarations in all four deployed copies) at 1024, one step more specific (`html body.hp`) and
   later, so at phone widths it repeats the same values and at 769-1024 it is the only copy. ⛔ The theme copies'
   768 blocks are dead from this release: editing them does nothing. Fix the phone header HERE.
   ⛔ Keep A2 (keep the nav rendered) BEFORE A9 (hide it when closed): equal specificity, so source order decides,
   and A9 winning is today's behaviour (the menu opens instantly; restoring the slide is a separate decision). */
@media (max-width: 1024px) {

	/* ── A. The theme header rules, restated (shell hp-responsive.css :13-294 and :568) ── */
	/* A1 hamburger 44x44 */
	html body.hp .menu-toggle {
		min-width:  44px !important;
		min-height: 44px !important;
	}
	/* A2 the nav is a zero-size flex item, so .toggled never opens a second header row (-20260828-012) */
	html body.hp .inside-header #site-navigation {
		flex: 0 0 0;
		width: 0;
		margin-top: 0;
	}
	html body.hp #site-navigation.main-navigation {
		display: block !important;
	}
	/* A3 the panel's open / closed states */
	html body.hp #site-navigation.main-navigation .inside-navigation {
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1),
		            opacity   .35s cubic-bezier(.4, 0, .2, 1),
		            visibility 0s linear .35s;
	}
	html body.hp #site-navigation.main-navigation.toggled .inside-navigation {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition: transform .35s cubic-bezier(.4, 0, .2, 1),
		            opacity   .35s cubic-bezier(.4, 0, .2, 1),
		            visibility 0s;
	}
	@media (prefers-reduced-motion: reduce) {
		html body.hp #site-navigation.main-navigation .inside-navigation,
		html body.hp #site-navigation.main-navigation.toggled .inside-navigation {
			transition: none;
			transform: none;
		}
	}
	/* A4 the panel: an opaque surface under the header, with scroll containment (-20260828-005: without it the
	   last item, the Subscribe CTA, was unreachable on a 667px phone). 56px = the tallest announcement bar. */
	html body.hp #site-navigation.main-navigation .inside-navigation {
		position: absolute;
		left: 0;
		right: 0;
		top: var(--hp-header-h);
		z-index: 99;
		background: var(--hp-bg-surface) !important;
		border-bottom: 1px solid var(--hp-border);
		padding: var(--hp-sp-4) 0 var(--hp-sp-6);
		max-height: calc(100vh - var(--hp-header-h) - 56px);
		max-height: calc(100dvh - var(--hp-header-h) - 56px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	/* A5 48px rows (a floor: -20260828-009) */
	html body.hp #site-navigation .main-nav ul > li {
		display: block !important;
	}
	html body.hp #site-navigation .main-nav ul > li > a {
		display: flex !important;
		align-items: center !important;
		padding: var(--hp-sp-2) var(--hp-sp-6) !important;
		min-height: 48px !important;
		line-height: 1.4 !important;
		font-size: var(--hp-text-sm) !important;
		letter-spacing: 0.05em !important;
	}
	/* A6 the Subscribe CTA and the Live Now row as centred pills */
	html body.hp #site-navigation .main-nav ul > li.hp-nav-cta {
		padding: var(--hp-sp-3) var(--hp-sp-6) var(--hp-sp-2);
		margin-top: var(--hp-sp-1);
	}
	html body.hp #site-navigation .main-nav ul > li.hp-nav-cta > a {
		display: block !important; /* outranks A5's flex, exactly as in the theme copies: phones must not change */
		text-align: center !important;
		justify-content: center !important;
		padding: var(--hp-sp-4) !important;
		border-radius: var(--hp-r-sm) !important;
	}
	html body.hp #site-navigation .main-nav ul > li.hp-nav-live {
		padding: var(--hp-sp-3) var(--hp-sp-6) var(--hp-sp-2);
		margin-top: var(--hp-sp-1);
	}
	html body.hp #site-navigation .main-nav ul > li.hp-nav-live > a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: var(--hp-sp-4) !important;
		border-radius: var(--hp-r-sm) !important;
	}
	/* A7 the shell's header tools ride in the header bar (shell only: hp_render_mobile_header_tools()). The bar
	   copy shows and the in-menu copies hide TOGETHER (shell functions.php: "change one breakpoint and you must
	   change the other, or a phone gets two of everything"). */
	html body.hp .inside-header .hp-header-tools {
		display: flex;
		align-items: center;
		gap: var(--hp-sp-1);
		order: 8;
		margin-left: auto;
		margin-right: var(--hp-sp-1);
		z-index: 3;
	}
	html body.hp .inside-header .hp-header-tool {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width:  44px;
		min-height: 44px;
		color: var(--hp-text);
		text-decoration: none;
	}
	html body.hp .inside-header .hp-header-tool__count {
		top: 2px;
		right: 2px;
	}
	html body.hp .inside-header #mobile-menu-control-wrapper {
		order: 9;
		margin-left: 0;
	}
	html body.hp #site-navigation .main-nav li.hp-nav-tool {
		display: none !important;
	}
	/* A9 hidden while closed (shell :568). AFTER A2: see the block header. */
	html body.hp #site-navigation:not(.toggled) {
		display: none !important;
	}

	/* ── B. The hamburger does not jump when the menu opens ──
	   GeneratePress gives the nav `margin-left: auto` at every width. Closed it is display:none; open it becomes a
	   zero-width flex item whose auto margin splits the free space with the button's, and the button moved: 58px on
	   a per-client theme and 116px on entertainer at 375 (live, 2026-10-02), to mid-bar at 1024. */
	html body.hp #site-navigation {
		margin-left: 0;
	}

	/* ── C. Core's store icons: 44px, beside the hamburger (from hp-mobile.css and 2b above, now to 1024) ── */
	html body.hp .hp-header-icon {
		min-width: 44px;
		min-height: 44px;
	}
	html body.hp .inside-header:has(> .hp-header-icons) > .hp-header-icons {
		margin-left: auto;
		margin-right: 0;
	}

	/* ── D. The name, where there is no logo (rule 3, now to 1024: Alex, 2026-10-02) ──
	   ⛔ 1.38.6: with a name shown, the header row NEVER wraps. 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. */
	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;
	}
}

/* ── E. TABLETS: the open menu is a panel at the RIGHT, under the button (Alex, 2026-10-02) ──
   The phone panel stretched to 1024 left the rows hugging the left edge with ~900px of empty surface beside them
   and turned Subscribe into a 976px band: a phone layout blown up. From 768 it is 400px wide, anchored right under
   the menu button, with the same rows, type and pill. Phones keep the full-width panel. */
@media (min-width: 768px) and (max-width: 1024px) {
	html body.hp #site-navigation.main-navigation .inside-navigation {
		left: auto;
		right: 0;
		width: min(400px, 100%);
		border-left: 1px solid var(--hp-border);
		box-shadow: -12px 18px 40px rgba(0, 0, 0, 0.28);
	}
}

/* ══ F. THE HERO ON A SHORT SCREEN: room for the floating header (HORIZON-20261002-065) ═══════════════════════════════
   Every theme's hero is a column with its content at the BOTTOM (`justify-content: flex-end`) and no room reserved for
   the header that floats over it. While the content fits the screen there is empty space above it and nothing collides;
   when it does not (a phone held sideways: 844x390 is INSIDE 768-1024), the content starts at the hero's top edge, behind
   the header. Measured 2026-10-02 on every home at 13 sizes: the first line was under the header or off the screen on
   13-16 of 17 homes at 640x360 to 844x390, and podcast at 360x640.
   F1 reserves the header's height plus 16px at the top of the content. Where there is room it fills empty space and
   moves nothing (124 of 129 clear cases identical to the pixel); a first line closer than 16px below the header moves
   down to 16px (the other 5); 79 of 79 bad cases cleared; nothing made worse. Desktop (1280x720, 1366x768) was clear,
   so it stops at 1024px.
   ⛔ (0,2,2) ON PURPOSE: the cutout hero's own reserve (`body.home .hp-hero .hp-hero__inner`, 0,3,1, hp-hero-cutout.css,
   a tenant's hardening thread) keeps priority on its tenant. Do not raise this selector. */
@media (max-width: 1024px) {
	html body.hp .hp-hero__inner { padding-top: calc(var(--hp-header-h, 72px) + var(--hp-sp-4, 1rem)); }
}
/* F2. Up to 640px all four theme copies lift the hero content 8rem with `transform: translateY(-8rem)` (hp-responsive.css,
   "consistent lift across all hero pages"). A transform makes no room, so on a 360px-tall screen it carried the first
   line off the top. The SAME lift as bottom padding: identical wherever it fits; where it does not, the hero grows
   instead. 3rem is the themes' own padding-bottom at this width (--hp-sp-12). */
@media (max-width: 640px) {
	html body.hp .hp-hero__inner {
		transform: none;
		padding-bottom: calc(var(--hp-sp-12, 3rem) + 8rem);
	}
}

/* ══ G. THE SCROLLED HEADER IS A SOLID BAR, every width (HORIZON-20261002-065; Alex, call 1: every width) ══════════════
   Every theme copy of hp-base.css has `.hp .site-header.hp-scrolled { background: var(--hp-header-scrolled-bg) }` (each
   skin sets that colour at 0.92-0.98) and drops the logo's photo halo "once the header is scrolled onto a solid bar".
   But the same file's `.hp #masthead { background: transparent !important }` (1,1,0) has cancelled it since June: the
   scrolled header was see-through on every inner page at every width and on every page from 768px, so photos and text
   smeared behind the logo and menu (measured on all 17 sites, 2026-10-02; screenshots in
   docs/research/tablet-floors-2026-10-02/shots/). This is (1,2,2) and wins. Section 2's phone hero rules above are
   (1,3,2) and still win over it, so a photo-hero home on a phone keeps its fade and frosted bar exactly.
   ⛔ The themes' transparent rule is now dead for the scrolled state: editing it changes nothing. Fix the bar here. */
html body.hp #masthead.hp-scrolled {
	background: var(--hp-header-scrolled-bg, color-mix(in srgb, var(--hp-bg, #0a0a0a) 94%, transparent)) !important;
}