/* ==========================================================================
   STRAIN INDEX
   The cannabis site now wears the network shell (answer.css). This file only
   styles the parts no directory site has: the A to Z strain index and its type
   filter. Type is still information, so each type keeps one hue, used on the
   index dot and the pressed filter and nowhere else.
   ========================================================================== */

body[data-family="reference"] {
	--hb-indica: #5b3a8c;
	--hb-sativa: #c0472b;
	--hb-hybrid: #2f7a3a;
}

.hb-index-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.hb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
}

.hb-filter {
	font-family: var(--an-text);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--an-ink);
	background: #fff;
	border: 2px solid var(--an-ink);
	box-shadow: 3px 3px 0 var(--an-ink);
	padding: 8px 14px;
	cursor: pointer;
}

.hb-filter b {
	font-weight: 500;
	color: var(--an-ink-3);
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
}

.hb-filter[aria-pressed="true"] {
	background: var(--an-accent);
}

.hb-filter[aria-pressed="true"] b { color: var(--an-ink); }

.hb-index {
	padding: 20px 0 64px;
}

.hb-letter {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 0 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--an-rule);
}

.hb-letter__mark {
	font-family: var(--an-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--an-band);
	position: sticky;
	top: 16px;
	align-self: start;
}

.hb-letter__names {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 28px;
}

@media (min-width: 700px) {
	.hb-letter__names { columns: 3; }
}

@media (min-width: 1000px) {
	.hb-letter__names { columns: 3; }
}

.dp-prose .hb-letter__names li { margin: 0 0 6px; }
.dp-prose .hb-index { padding-bottom: 24px; }

.hb-letter__names li {
	break-inside: avoid;
	margin: 0 0 6px;
}

.hb-name {
	font-size: 1rem;
	line-height: 1.35;
	color: var(--an-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.hb-name::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	vertical-align: 1px;
	border: 1px solid var(--an-ink);
	background: var(--an-ink-3);
}

.hb-name[data-type="indica"]::before { background: var(--hb-indica); }
.hb-name[data-type="sativa"]::before { background: var(--hb-sativa); }
.hb-name[data-type="hybrid"]::before { background: var(--hb-hybrid); }

.hb-name:hover { border-bottom-color: var(--an-accent); }

.hb-name.is-hidden,
li.is-hidden { display: none; }

.hb-letter.is-empty { display: none; }

/* The buyer guide cover in the rail card. */
.dp-quote__cover {
	display: block;
	width: 120px;
	height: auto;
	margin: 4px 0 16px;
	box-shadow: 4px 4px 0 var(--dp-outline);
}