/* Brands index page - [spartan_brands].
   Palette variables are Kadence globals; the fallbacks keep the page readable
   if the theme ever changes and stops defining them. */

.spartan-brands {
	--spb-line: var(--global-gray-400, #e2e4e7);
	--spb-muted: var(--global-palette5, #6b7280);
	--spb-accent: var(--global-palette1, #1e3a5f);
}

/* --- jump bar ------------------------------------------------------------ */

.spartan-brands__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 10px 0;
	margin-bottom: 6px;
	background: var(--global-palette9, #fff);
	border-bottom: 1px solid var(--spb-line);
}

.spartan-brands__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 4px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: 3px;
	color: var(--spb-accent);
}

a.spartan-brands__letter:hover,
a.spartan-brands__letter:focus {
	background: var(--spb-accent);
	color: var(--global-palette9, #fff);
	text-decoration: none;
}

.spartan-brands__letter.is-empty {
	color: var(--spb-muted);
	opacity: 0.35;
	cursor: default;
}

.spartan-brands__count {
	margin: 0 0 22px;
	font-size: 13px;
	color: var(--spb-muted);
}

/* --- groups -------------------------------------------------------------- */

.spartan-brands__group {
	margin-bottom: 30px;
	/* clears the sticky bar when a jump link lands */
	scroll-margin-top: 60px;
}

.spartan-brands__heading {
	margin: 0 0 10px;
	padding-bottom: 6px;
	font-size: 18px;
	line-height: 1.2;
	border-bottom: 2px solid var(--spb-accent);
}

/* Double class on purpose. The theme sets .entry-content ul { padding-left },
   which is (0,1,1) and beat a single-class rule - measured at 36px of phantom
   indent that pushed every brand out of line with its own letter rule. */
.spartan-brands .spartan-brands__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	padding-left: 0;
	list-style: none;
}

.spartan-brands .spartan-brands__item {
	margin: 0;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	border-bottom: 1px solid var(--spb-line);
}

.spartan-brands__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 2px;
	text-decoration: none;
	color: inherit;
}

.spartan-brands__item a:hover .spartan-brands__name,
.spartan-brands__item a:focus .spartan-brands__name {
	color: var(--spb-accent);
	text-decoration: underline;
}

.spartan-brands__name {
	font-size: 15px;
	line-height: 1.35;
}

.spartan-brands__n {
	flex: 0 0 auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--spb-muted);
}

@media (max-width: 767px) {
	.spartan-brands .spartan-brands__list {
		grid-template-columns: 1fr 1fr;
		gap: 0 16px;
	}

	.spartan-brands__name {
		font-size: 14px;
	}

	/* Wrapped, the 27 letters take three rows - measured at 115px of a 812px
	   phone screen, permanently stuck to the top. One scrollable row costs 34px
	   and keeps the jump targets reachable from anywhere in the list. */
	.spartan-brands__jump {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.spartan-brands__jump::-webkit-scrollbar {
		display: none;
	}

	/* Thumb targets. At the desktop size these were 30x30 and the brand rows
	   37px tall - both under the 44px both Apple and Android ask for. */
	.spartan-brands__letter {
		flex: 0 0 auto;
		min-width: 40px;
		height: 40px;
		font-size: 15px;
	}

	.spartan-brands .spartan-brands__item a {
		padding: 12px 2px;
	}

	.spartan-brands__group {
		scroll-margin-top: 58px;
	}
}

@media (max-width: 479px) {
	.spartan-brands .spartan-brands__list {
		grid-template-columns: 1fr;
	}
}