/*
 * Jersey Bulls FC — SiteNav (navigation upgrade)
 *
 * Extends the SiteHeader with desktop mega-menu panels and the mobile
 * off-canvas drawer (the queued MVP #10 MobileNavDrawer). Adapted from the
 * Juventus/PSG teardown: hover/focus dropdown panels on desktop, full-screen
 * drawer on mobile. Base nav-link styles still live in site-header.css.
 *
 * Markup: header.php · tokens: css/tokens.css
 */

.bulls-nav-toggle {
	display: inline-flex;   /* universal — opens the full-screen mega menu on every viewport */
	align-items: center;
	gap: var(--space-3);
	font-family: var(--ff-sans);   /* defensive — parent skins <button> with Sofia Sans */
	height: 44px;
	padding: 0 var(--space-2);
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--t-fg);   /* drives the label + currentColor bars; flips in light */
}

.bulls-nav-toggle__label {
	font-family: var(--ff-display);
	font-size: var(--fs-100);
	font-weight: var(--fw-bold);   /* sized/weighted with the primary-nav links */
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg);
}

.bulls-nav-toggle:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-base);
}

/* Hamburger → X using the single bar + pseudo-elements. */
.bulls-nav-toggle__bars,
.bulls-nav-toggle__bars::before,
.bulls-nav-toggle__bars::after {
	display: block;
	width: 28px;
	height: 2px;
	background: currentColor;
	transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.bulls-nav-toggle__bars {
	position: relative;
}

.bulls-nav-toggle__bars::before,
.bulls-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.bulls-nav-toggle__bars::before { top: -8px; }
.bulls-nav-toggle__bars::after  { top: 8px; }

.bulls-nav-toggle[aria-expanded="true"] .bulls-nav-toggle__bars { background: transparent; }
.bulls-nav-toggle[aria-expanded="true"] .bulls-nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.bulls-nav-toggle[aria-expanded="true"] .bulls-nav-toggle__bars::after  { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
 * Mobile drawer + scrim
 * ============================================================ */

.bulls-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--overlay-ink);
	opacity: 0;
	transition: opacity var(--motion-base) var(--ease-out);
}

body.bulls-nav-open .bulls-nav-scrim { opacity: 1; }

.bulls-mobile-drawer {
	position: fixed;
	inset: 0 auto 0 0;              /* left slide-in panel (PSG-style) */
	z-index: var(--z-drawer);
	width: min(440px, 88vw);
	padding: var(--space-6) var(--space-7) var(--space-8);
	background: var(--t-panel);
	color: var(--t-fg);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	overflow-y: auto;
	transform: translateX(-100%);
	box-shadow: var(--shadow-4);
	transition: transform var(--motion-base) var(--ease-emphasis);
}

body.bulls-nav-open .bulls-mobile-drawer { transform: translateX(0); }
/* Panel is the focus parking spot on open — no visible ring on the container itself. */
.bulls-mobile-drawer:focus { outline: none; }
/* When closed (JS sets [hidden] after the slide-out) the panel must be display:none so
   its off-screen links aren't focusable — the base display:flex would otherwise leave
   an aria-hidden keyboard/SR trap. */
.bulls-mobile-drawer[hidden] { display: none; }

/* Single-column panel body — nav list + socials. */
.bulls-mobile-drawer__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

/* Lock background scroll while the drawer is open. */
body.bulls-nav-open { overflow: hidden; }

.bulls-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bulls-mobile-drawer__head-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
/* Theme toggle inside the mega menu (reachable on mobile, where the icon rail hides). */
.bulls-theme-toggle--drawer,
.bulls-theme-toggle--drawer:hover,
.bulls-theme-toggle--drawer:focus,
.bulls-theme-toggle--drawer:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-sans);   /* defensive — parent skins <button> with Sofia Sans */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--t-fg);
	cursor: pointer;
}
.bulls-theme-toggle--drawer:hover { color: var(--c-bulls-red); }
.bulls-theme-toggle--drawer:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

.bulls-mobile-drawer__title {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--t-fg-muted);
}

.bulls-mobile-drawer__close,
.bulls-mobile-drawer__close:hover,
.bulls-mobile-drawer__close:focus,
.bulls-mobile-drawer__close:active {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	/* Neutralise the FC United parent <button> skin (red fill + shadow). */
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--t-fg);
	font-family: var(--ff-sans);
	font-size: var(--fs-500);
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius-base);
}
.bulls-mobile-drawer__close:hover { color: var(--c-bulls-red); }

.bulls-mobile-drawer__close:focus-visible {
	outline: 2px solid var(--c-focus-ring);
	outline-offset: 2px;
}

.bulls-mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.bulls-mobile-drawer__list > li > a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	font-family: var(--ff-display);
	font-size: clamp(1.4rem, 4vw, 1.7rem);
	line-height: 1;
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	color: var(--t-fg);
	text-decoration: none;
	border-bottom: 1px solid var(--t-border);
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-mobile-drawer__list > li > a:hover,
.bulls-mobile-drawer__list > li > a:focus-visible { color: var(--c-bulls-red); }

.bulls-mobile-drawer__list a[data-status="soon"] { color: var(--t-fg-faint); }

.bulls-mobile-drawer__sublist {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding: var(--space-1) 0 0 var(--space-3);
	display: flex;
	flex-direction: column;
}

.bulls-mobile-drawer__sublist a {
	display: block;
	padding: var(--space-2) 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-100);
	color: var(--t-fg-muted);
	text-decoration: none;
}

.bulls-mobile-drawer__sublist a:hover,
.bulls-mobile-drawer__sublist a:focus-visible { color: var(--t-fg); }

/* Mega menu is universal — the hamburger opens it on every viewport. */

/* ============================================================
 * Reduced motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.bulls-mobile-drawer,
	.bulls-nav-scrim,
	.bulls-nav-toggle__bars,
	.bulls-nav-toggle__bars::before,
	.bulls-nav-toggle__bars::after {
		transition: none;
	}
}

/* Socials row at the foot of the menu panel. */
.bulls-mobile-drawer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-2);
	padding-top: var(--space-5);
	border-top: 1px solid var(--t-border);
}
.bulls-mobile-drawer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--t-fg-muted);
	transition: color var(--motion-fast) var(--ease-out);
}
.bulls-mobile-drawer__social svg { width: 22px; height: 22px; }
.bulls-mobile-drawer__social:hover,
.bulls-mobile-drawer__social:focus-visible { color: var(--c-bulls-red); }
.bulls-mobile-drawer__social:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }