/**
 * Task 5c — "Shop all products" two-pane mega menu.
 *
 * One bar item. The panel is a left rail of 11 sports and a right pane showing
 * only the selected sport's categories, so nothing is ever displayed beside
 * something it is unrelated to.
 *
 * Desktop only. Kadence's mega walker has no mobile branch - the drawer is a
 * separate render - so the drawer rules live at the bottom of this file and
 * deliberately unwrap the whole thing back into a flat accordion.
 */

.main-navigation li.spartan-shopall > a {
	cursor: pointer;
}

/* ---- the panel ----------------------------------------------------------- */

/* Do NOT set display or position here.
   - display:block pinned the panel open on page load; Kadence owns open/closed.
   - position:relative took the panel OUT of Kadence's absolute positioning, so
     it went in-flow and pushed "Brands" below it, stretching the header.
   Kadence already positions the panel absolutely, and an absolutely positioned
   element is itself a containing block - which is all the panes need. */
.main-navigation li.spartan-shopall > ul.sub-menu {
	padding: 0;
	min-height: 500px;
}

/* ---- left rail ----------------------------------------------------------- */

/* static on purpose: Kadence sets position:relative on menu items, which made
   each rail <li> the containing block for its own pane - so "left:232px;
   right:0" resolved against a 232px box and the pane came out 52px wide.
   The panel <ul> above must be the containing block, not the rail item. */
.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail {
	position: static !important;
	display: block;
	width: 232px;
	margin: 0;
	border-right: 1px solid var(--global-gray-400, #e2e4e7);
}

.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail:first-child {
	padding-top: 10px;
}

.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail:last-child {
	padding-bottom: 10px;
}

/* Kadence uppercases nav links. Sentence case is the point of the rail - "Baseball
   & softball" scans; "BASEBALL & SOFTBALL" eleven times is a shouting column. */
.main-navigation li.spartan-rail > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 16px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border: 0;
	background: transparent;
	color: inherit;
}

/* Selected state. This marks WHICH PANE IS SHOWING - it is not a link
   affordance, so it is applied identically to hover-only rail items. */
.main-navigation li.spartan-rail.is-active > a {
	background: var(--global-palette8, #f5f6f7);
	font-weight: 500;
	box-shadow: inset 3px 0 0 var(--global-palette1, #1e3a5f);
}

/* A rail item with no category behind it is a GROUPING, not a broken link:
   no pointer, no underline, no colour shift. Racquet Sports, More Sports and
   Facilities are the three - see the catalogue punch list. */
.main-navigation li.spartan-rail--nolink > a {
	cursor: default;
	text-decoration: none !important;
}

.main-navigation li.spartan-rail--nolink > a:hover,
.main-navigation li.spartan-rail--nolink > a:focus {
	text-decoration: none !important;
	color: inherit !important;
	background: var(--global-palette8, #f5f6f7);
}

/* The chevron is the tell: it appears only on rail items that HAVE their own
   page, which is also exactly where the "All X" link appears at the foot of
   the pane. The pattern is consistent, so the three without read as a
   different kind of thing rather than as three that failed. */
.main-navigation li.spartan-rail:not(.spartan-rail--nolink) > a::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	opacity: .4;
}

.main-navigation li.spartan-rail.is-active:not(.spartan-rail--nolink) > a::after {
	opacity: .75;
}

/* ---- right pane ---------------------------------------------------------- */

/* !important throughout: Kadence's own mega rules set position/width on
   .sub-menu .sub-menu and were winning, which left each pane flowing inside
   the 232px rail column instead of filling the right-hand side. */
.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail > ul.sub-menu {
	position: absolute !important;
	left: 232px !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	transform: none !important;
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	align-content: start;
	gap: 22px 28px;
	padding: 22px 26px;
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: auto;
}

.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail.is-active > ul.sub-menu {
	display: grid !important;
}

.main-navigation li.spartan-rail > ul.sub-menu > li {
	margin: 0;
	width: auto;
}

/* ---- the "All X" foot ---------------------------------------------------- */

.spartan-mega-all {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid var(--global-gray-400, #e2e4e7);
}

.spartan-mega-all a {
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}

.spartan-mega-all a:hover {
	text-decoration: underline;
}

/* ---- column headings ----------------------------------------------------- */

.spartan-mega-heading__label {
	display: block;
	padding: 0 0 6px;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--global-palette1, #1e3a5f);
	border-bottom: 1px solid var(--global-gray-400, #e2e4e7);
	cursor: default;
}

/* ---- category links ------------------------------------------------------ */

.main-navigation li.spartan-rail .sub-menu li > a {
	display: block;
	padding: 4px 0;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border: 0;
	background: transparent;
}

.main-navigation li.spartan-rail .sub-menu li > a:hover,
.main-navigation li.spartan-rail .sub-menu li > a:focus {
	text-decoration: underline;
	background: transparent;
}

/* ==========================================================================
 *  MOBILE DRAWER
 *
 *  The drawer is a plain nested list, not a mega panel. The "Shop all
 *  products" wrapper earns nothing in a vertical list - it would be one extra
 *  tap in front of everything - so it is unwrapped and the 11 sports become
 *  the top-level rows, which is the same tree the rail shows.
 * ========================================================================== */

@media (max-width: 1024px) {

	.mobile-navigation li.spartan-shopall > a,
	.mobile-navigation li.spartan-shopall > button,
	.mobile-navigation li.spartan-shopall > .drawer-nav-drop-wrap {
		display: none !important;
	}

	.mobile-navigation li.spartan-shopall > ul.sub-menu {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		padding: 0;
		margin: 0;
	}

	.mobile-navigation li.spartan-rail {
		width: auto;
		border: 0;
	}

	.mobile-navigation li.spartan-rail > a {
		padding: 0;
	}

	/* the rail's right pane is absolutely positioned on desktop - undo that */
	.mobile-navigation li.spartan-rail > ul.sub-menu {
		position: static;
		inset: auto;
		padding: 0;
		overflow: visible;
	}

	.mobile-navigation ul li a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* headings are spans, so Kadence gives them no toggle - their links would
	   stay hidden forever. Opening a sport shows its groups AND their links. */
	.mobile-navigation li.spartan-mega-heading > ul.sub-menu {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		padding: 0 0 4px;
		margin: 0;
	}

	.mobile-navigation .spartan-mega-heading__label {
		padding: 10px 0 4px;
		margin-bottom: 2px;
		font-size: 12px;
	}

	.mobile-navigation li.spartan-mega-heading > ul.sub-menu > li > a {
		padding-left: 0;
		font-size: 15px;
		opacity: .92;
	}

	.mobile-navigation .spartan-mega-all {
		border: 0;
		padding-top: 0;
	}
}

/* ---- beat Kadence's link padding ---------------------------------------- *
 * Measured on staging: Kadence applies padding:14px to every nav link with a
 * selector more specific than the rules above, so rail items rendered 65px
 * tall (11 of them = a 685px panel) and category links 46px. The panel was
 * taller than the screen and Baseball still overflowed into a scrollbar.
 * Only the ::after chevron had landed, because nothing competed for it.
 * ------------------------------------------------------------------------- */

.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail > a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 7px 16px !important;
	min-height: 0 !important;
	line-height: 1.35 !important;
}

.main-navigation li.spartan-rail ul.sub-menu li > a {
	display: block !important;
	padding: 3px 0 !important;
	min-height: 0 !important;
	line-height: 1.45 !important;
	font-size: 13.5px !important;
}

.main-navigation li.spartan-rail ul.sub-menu li {
	line-height: 1.45 !important;
}

.spartan-mega-all a {
	padding: 0 !important;
}

/* The rail link rule above carries font-weight:400 !important (to beat
   Kadence), which also beat the active state's 500. Restore it. */
.main-navigation li.spartan-shopall > ul.sub-menu > li.spartan-rail.is-active > a {
	font-weight: 500 !important;
}

/* Drawer links inherit Kadence's uppercase, which turns a category list into a
   wall of caps on a 375px screen. Headings stay uppercase; links do not. */
@media (max-width: 1024px) {
	.mobile-navigation li.spartan-rail > ul.sub-menu a,
	.mobile-navigation li.spartan-rail > a {
		text-transform: none !important;
		letter-spacing: 0 !important;
		font-weight: 400 !important;
	}
}