/*
 * Jersey Bulls FC — SiteHeader component (MVP #1)
 *
 * Two-row header: dark utility strip + white main nav.
 * Spec: ~/Claude/ikigai/clients/jersey-bulls/design/references/site-header/README.md
 * Uses tokens from css/tokens.css.
 */

/* ============================================================
 * Skip link (a11y) — visible only when focused
 * ============================================================ */

.bulls-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-2);
	z-index: var(--z-skip);
	padding: var(--space-2) var(--space-4);
	background: var(--c-bulls-red);
	color: var(--c-white);
	font-family: var(--ff-sans);
	font-size: var(--fs-75);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-radius: var(--radius-base);
	transition: top var(--motion-base) var(--ease-out);
}

.bulls-skip-link:focus {
	top: var(--space-2);
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 2px;
}

/* ============================================================
 * Container — sticky two-row header
 * ============================================================ */

.bulls-site-header {
	position: sticky;
	top: 0;
	overflow: visible;
	z-index: var(--z-header);
	width: 100%;
	background: var(--t-header);
	font-family: var(--ff-sans);
	transition: background var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.bulls-site-header.is-scrolled {
	box-shadow: var(--shadow-2);   /* was shadow-4 — too heavy on scroll (client) */
}

/* Immersive homepage header (Juventus): the bar overlays the full-bleed hero and is
   transparent at the top, then turns solid + gains its hairline on scroll. Fixed (not
   sticky) so the hero sits behind it; interior pages keep the solid sticky header. */
body.home .bulls-site-header {
	position: fixed;
	inset: 0 0 auto 0;
	background: transparent;
}
body.home .bulls-site-header .bulls-bar { border-bottom-color: transparent; }
body.home .bulls-site-header.is-scrolled { background: var(--t-header); }
body.home .bulls-site-header.is-scrolled .bulls-bar { border-bottom-color: var(--t-border); }

/* Light mode + transparent immersive header: near-black --t-fg over the dark
   hero photo was unreadable (client feedback). While the bar is transparent,
   flip its text tokens to white; .is-scrolled solidifies the bar and the theme
   tokens take back over. Scoped to .bulls-bar so the drawer (its own panel,
   theme-correct) is untouched. */
html.theme-light body.home .bulls-site-header:not(.is-scrolled) .bulls-bar {
	--t-fg: var(--c-white);
	--t-fg-muted: var(--c-white-82);
	--t-border-strong: var(--c-white-50);
}

/* ============================================================
 * Juventus header states (homepage, desktop) — 2026-06-11, client:
 * at the top of the page the chrome melts away to a LARGE white mark
 * top-left (the hero quicklink rail runs beneath it); scrolling brings
 * the full menu bar in, sticky, with the normal-size red crest.
 * ============================================================ */
@media (min-width: 1024px) {
	/* Measured behaviour on juventus.com (2026-06-11): at the top there is NO
	   menu bar at all — just the large corner mark with the icon rail running
	   beneath it, and the right-corner utility icons. Scrolling brings the
	   full sticky bar in. We mirror that: hamburger + nav links + Tickets/Shop
	   hide at the top (the search/theme icon rail stays, like Juve's corner
	   icons); the crest grows into the corner emblem. */
	body.home .bulls-site-header .bulls-primary-nav,
	body.home .bulls-site-header .bulls-header-commerce {
		transition: opacity var(--motion-base) var(--ease-out), visibility 0s linear;
	}
	body.home .bulls-site-header:not(.is-scrolled) .bulls-primary-nav,
	body.home .bulls-site-header:not(.is-scrolled) .bulls-header-commerce {
		opacity: 0;
		visibility: hidden;   /* unfocusable while hidden */
	}
	/* The hamburger leaves the layout entirely so the mark sits first, in the
	   corner (Juve's logo is flush left; ours honours the page gutter). */
	body.home .bulls-site-header:not(.is-scrolled) .bulls-nav-toggle { display: none; }

	body.home .bulls-site-header .bulls-crest {
		transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out), top var(--motion-base) var(--ease-out);
	}
	/* At the top of the homepage the link parks over the LEFT column
	   (aligned with the quicklink rail beneath); scrolling animates it to
	   the bar's centre. */
	body.home .bulls-site-header:not(.is-scrolled) .bulls-crest-link {
		/* Viewport-anchored like the hero quicklink rail (NOT the centred bar
		   container), so the logo and rail icons stay on one centre line at every
		   width — subtract the bar's centring offset, add the rail-vs-logo
		   half-width difference. */
		left: calc(clamp(var(--space-4), 2.5vw, var(--space-6)) + 48px - max(0px, (100vw - var(--content-full)) / 2));
		top: 16px;
		transform: none;
	}
	body.home .bulls-site-header:not(.is-scrolled) .bulls-crest {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 92px;
		height: 92px;
	}
}

/* ----- Crest ----- */

.bulls-crest-link {
	display: block;
	position: absolute;   /* Juventus: the sticky bar's logo sits dead-centre */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
	transition: left var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

/* No hover transform — the link is absolutely centred via `transform`, so a
   hover scale clobbered the centring and made the logo jump (client). */
.bulls-crest-link:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 4px;
	border-radius: var(--radius-base);
}

/* The crest sits centred on the masthead and hangs over its bottom line
   (classic club emblem treatment), static and scrolled. The link keeps a 48px
   layout box so the bar height is unchanged; the transparent-SVG mark renders
   larger, anchored just below the bar's top edge — no shadow, no background.
   Variant swap: WHITE while the homepage header is transparent over the hero,
   RED once the bar solidifies (.is-scrolled) and on interior pages. */
.bulls-crest-link {
	width: 48px;
	height: 48px;
}
.bulls-crest {
	position: absolute;
	max-width: none;   /* the 48px link box must not clamp the grown mark */
	top: 50%;
	left: 50%;
	/* contained within the bar — true-centred, no overhang (client 2026-06-11) */
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	z-index: 2;
}
/* Variant swap. Default (light theme): RED crest on the solid white bar, WHITE
   over the transparent homepage hero. Dark theme: the bar is dark, so the crest
   is WHITE everywhere (client 2026-06-11). */
.bulls-crest--white { display: none; }
html:not(.theme-light) .bulls-crest--red { display: none; }
html:not(.theme-light) .bulls-crest--white { display: block; }

/* While the homepage header is transparent over the hero video, lift the white
   icon-rail marks (search + theme toggle) and crest off bright frames so they
   stay visible at all times (client 2026-06-11). */
body.home .bulls-site-header:not(.is-scrolled) .bulls-icon-rail__link svg,
body.home .bulls-site-header:not(.is-scrolled) .bulls-crest {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
body.home .bulls-site-header:not(.is-scrolled) .bulls-crest--red { display: none; }
body.home .bulls-site-header:not(.is-scrolled) .bulls-crest--white { display: block; }

.bulls-soon-tag {
	display: inline-block;
	padding: 2px 8px;
	font-family: var(--ff-mono);
	font-size: var(--fs-25);   /* 10px micro-tag */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-white-50);
	background: var(--c-white-08);
	border-radius: var(--radius-pill);
	line-height: 1.5;
}

/* ============================================================
 * Mobile — stack at < 768px (MobileNavDrawer in MVP component #10)
 * ============================================================ */

/* ============================================================
 * Slim bar (Juventus-style minimal): hamburger | crest | icon rail + CTA
 * ============================================================ */

.bulls-bar { border-bottom: 1px solid var(--t-border); }

.bulls-bar__inner {
	position: relative;   /* anchors the centred crest */
	max-width: var(--content-full);
	margin: 0 auto;
	padding: var(--space-3) var(--space-6);   /* ~32px inset — Juventus bar */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 76px;
}

/* Left cluster — hamburger + crest sit together at the left edge (Juventus pattern:
   menu trigger then crest), rather than a centred logo. */
.bulls-bar__left {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.bulls-bar__right {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

/* Inline primary nav — Juventus pattern: a few top-level shortcuts beside the
   burger (which still opens the full mega menu). Desktop only; the mega carries
   everything on tablet/mobile. */
.bulls-primary-nav { display: none; }
.bulls-primary-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bulls-primary-nav__link {
	display: inline-block;
	/* 24px tap target (WCAG 2.2) without layout shift */
	padding-block: var(--space-2);
	margin-block: calc(-1 * var(--space-2));
	font-family: var(--ff-display);
	font-size: var(--fs-100);
	font-weight: var(--fw-bold);   /* PSG nav weight (600–700 measured); display face carries 400/700 cuts */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-primary-nav__link:hover,
.bulls-primary-nav__link:focus-visible { color: var(--c-bulls-red); }
.bulls-primary-nav__link:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
@media (min-width: 1200px) { .bulls-primary-nav { display: block; } }

/* PSG-style commerce links — Tickets / Shop as plain uppercase text links on the
   right (replacing the old ticket/shop icons; no red Buy-Tickets button). */
.bulls-header-commerce {
	display: none;
	align-items: center;
	gap: var(--space-3);   /* Tickets/Shop sit closer together (client 13 Jun) */
}
@media (min-width: 768px) { .bulls-header-commerce { display: flex; } }
.bulls-header-link {
	display: inline-block;
	font-family: var(--ff-display);
	font-size: var(--fs-100);
	font-weight: var(--fw-bold);   /* matches PSG's 700 Tickets/Shop links */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-header-link:hover,
.bulls-header-link:focus-visible { color: var(--c-bulls-red); }
.bulls-header-link:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Header commerce buttons — compact in-bar size (PSG's measure 32px; no global
   box-sizing reset, so pin border-box + height here rather than touching the
   canonical button component). */
.bulls-header-commerce .bulls-cta-button {
	box-sizing: border-box;
	min-height: 40px;
	padding-top: var(--space-1);
	padding-bottom: var(--space-1);
	font-size: var(--fs-75);   /* slightly larger than the --sm 12px (client 13 Jun) */
	font-style: italic;        /* italic Tickets/Shop labels (client 13 Jun) */
}

/* Header Shop button — outline that follows the theme (the canonical --ghost
   variant is white-on-dark only; the header flips to a white bar in light mode). */
.bulls-header-cta--outline {
	color: var(--t-fg);
	border: 1px solid var(--t-border-strong);
	background: transparent;
}
.bulls-header-cta--outline:hover,
.bulls-header-cta--outline:focus-visible {
	color: var(--c-bulls-red);
	border-color: var(--c-bulls-red);
}

/* Icon rail — search / theme toggle. Sized to the reference glyphs (PSG 24px,
   Juventus 40px rail icons): 24px marks in 44px hit areas (WCAG 2.5.8 comfortable). */
.bulls-icon-rail { display: flex; align-items: center; gap: var(--space-1); }
.bulls-icon-rail__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-sans);   /* defensive — parent skins <button> with Sofia Sans */
	width: 44px;
	height: 44px;
	color: var(--t-fg);
	text-decoration: none;
	border-radius: var(--radius-base);
	transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
/* Reference utility-icon scale (PSG glyphs measure 24px). */
.bulls-icon-rail__link svg { width: 24px; height: 24px; }
.bulls-icon-rail__link:hover,
.bulls-icon-rail__link:focus-visible { color: var(--c-bulls-red); background: var(--c-white-08); }
.bulls-icon-rail__link:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

/* Icon-rail buttons (search + light/dark toggle) — neutralise the FC United parent
   <button> skin (it leaks a red fill + shadow), size them like the icon links. */
.bulls-icon-rail button.bulls-icon-rail__link,
.bulls-icon-rail button.bulls-icon-rail__link:hover,
.bulls-icon-rail button.bulls-icon-rail__link:focus,
.bulls-icon-rail button.bulls-icon-rail__link:active {
	width: 44px;
	padding: 0;
	border: 0;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: pointer;
}

@media (max-width: 600px) {
	/* Juventus mobile parity: bare hamburger (no label), centred logo, and the
	   utility icons STAY top-right (their bar keeps search + account). */
	.bulls-nav-toggle__label { display: none; }
	.bulls-icon-rail { display: flex; }
	.bulls-icon-rail__link { width: 40px; height: 40px; }
	.bulls-bar__inner { padding: var(--space-3) var(--space-4); min-height: 64px; }
	.bulls-crest-link { width: 42px; height: 42px; }
	.bulls-crest { width: 48px; height: 48px; }
}

/* ============================================================
 * A11Y-06 — Scroll-to-top control (ThemeREX/FC United parent furniture)
 *
 * The parent renders `.trx_addons_scroll_to_top` at opacity:0 when
 * the user is at the top of the page.  Opacity-0 removes it visually
 * but keeps it focusable and in the reading order — keyboard users
 * land on an invisible control.  Pair opacity:0 with visibility:hidden
 * (and restore visibility:visible when the control is shown) so the
 * element is removed from both the visual AND the accessibility/focus
 * tree while inactive.
 * ============================================================ */
a.trx_addons_scroll_to_top,
.trx_addons_scroll_to_top {
	visibility: hidden;
}

/* When the parent makes it visible by adding opacity > 0 (via inline style or
   its own .show/.visible class), restore visibility so it is focusable again.
   The parent themes typically transition opacity; we mirror that with visibility. */
a.trx_addons_scroll_to_top[style*="opacity: 1"],
a.trx_addons_scroll_to_top[style*="opacity:1"],
.trx_addons_scroll_to_top.show,
.trx_addons_scroll_to_top.visible,
.trx_addons_scroll_to_top.active {
	visibility: visible;
}

/* ============================================================
 * Fixture marquee — thin scrolling ticket band under the header.
 * Rendered only when an upcoming fixture exists (fixture-marquee.php).
 * ============================================================ */
.bulls-marquee {
	display: block;
	background: var(--c-bulls-red);
	color: var(--c-white);
	text-decoration: none;
	overflow: hidden;
}
.bulls-marquee__viewport { display: block; }
.bulls-marquee__track {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: bulls-marquee-scroll 28s linear infinite;
}
.bulls-marquee:hover .bulls-marquee__track,
.bulls-marquee:focus-visible .bulls-marquee__track { animation-play-state: paused; }
.bulls-marquee__half { display: inline-flex; }
.bulls-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-2) var(--space-6);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.bulls-marquee__kicker { font-weight: 700; }
.bulls-marquee__cta {
	border: 1px solid var(--c-white);
	border-radius: var(--radius-md);
	padding: 2px var(--space-3);
	font-weight: 700;
	transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.bulls-marquee:hover .bulls-marquee__cta { background: var(--c-white); color: var(--c-bulls-red); }
@keyframes bulls-marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.bulls-marquee__track { animation: none; }
}