/* Subcategory filter chips — the theme's design tokens (css/tokens.css)
   can override the custom properties per site. */

/* How many wrapped rows of chips stay on screen before "Show more filters"
   takes over. 0 (the default here) means no cap — every chip shows and the
   button never appears. category-filter.js reads this property and does the
   hiding; the number lives in CSS so the breakpoint below is the single
   place the viewport rule is written, and so a child theme can retune the
   count, or switch the cap off, with one declaration. */
.faqn-filter-wrap {
	--faqn-filter-rows: 0;
}

.faqn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block: 1rem 1.5rem;
}

/* The chips past the cap, and the button before the script has decided it
   is needed, are hidden with the `hidden` attribute. The UA's
   `[hidden] { display: none }` loses to a bare class selector, so both need
   an author rule at attribute specificity to actually disappear. */
.faqn-chip[hidden],
.faqn-filter-toggle[hidden] {
	display: none;
}

/* Visible whenever it is not `hidden` — the row cap alone decides that, so
   the button follows --faqn-filter-rows to whatever viewport it is set on
   rather than being pinned to a breakpoint of its own. */
.faqn-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	margin: 1rem 0;
	padding: .5rem 1.25rem;
	border: 1px solid var(--faqn-chip-border, rgba(0, 0, 0, .2));
	border-radius: 999px;
	background: var(--faqn-chip-bg, #ffffff);
	color: inherit;
	font: inherit;
	font-size: .9375rem;
	cursor: pointer;
}

.faqn-filter-toggle::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
	/* The chips used to be `display: none` at this width, with the button
	   revealing the whole bar — so a phone user who never pressed it saw no
	   filtering at all. Now the first rows are always on screen and only
	   what is past them is hidden, chip by chip, by the script. */
	.faqn-filter-wrap {
		--faqn-filter-rows: 3;
	}

	/* No top margin: the chips are the first thing in the section here, and
	   the elements above already supply the gap. */
	.faqn-filter {
		margin-block: 0 .75rem;
	}

	/* Sits directly under the capped rows, so it reads as their
	   continuation rather than as a separate control. */
	.faqn-filter-toggle {
		margin: 0 0 1.5rem;
	}
}

.faqn-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px; /* tap target */
	padding: .35rem 1rem;
	border: 1px solid var(--faqn-chip-border, rgba(0, 0, 0, .2));
	border-radius: 999px;
	background: var(--faqn-chip-bg, #ffffff);
	color: inherit;
	text-decoration: none;
	font-size: .9375rem;
	line-height: 1.2;
	cursor: pointer;
}

.faqn-chip:hover {
	border-color: var(--faqn-chip-active-bg, #1e293b);
}

.faqn-chip.is-active {
	background: var(--faqn-chip-active-bg, #1e293b);
	border-color: var(--faqn-chip-active-bg, #1e293b);
	color: var(--faqn-chip-active-color, #ffffff);
}

.faqn-chip__count {
	font-size: .8125rem;
	opacity: .7;
}

.faqn-chip.is-active .faqn-chip__count {
	opacity: .85;
}

/* Cards hidden by the filter. */
[data-faqn-cats][hidden] {
	display: none !important;
}