/*
 * Category filter checkboxes. Shared by the search page and the Aktuelt
 * listing, so the two read as one system.
 *
 * Colours come from currentColor, because this sits on the site's dark green
 * panel in one place and on plain background in another.
 */

.ff-filters {
	--ff-rule: color-mix(in srgb, currentColor 18%, transparent);
	--ff-muted: color-mix(in srgb, currentColor 70%, transparent);
}

/* Filters ------------------------------------------------------------------ */

.ff-filters {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.ff-filters__legend {
	padding: 0;
	margin-block-end: 0.5rem;
	font-size: 0.8125em;
	font-weight: 600;
	color: var(--ff-muted);
}

.ff-filters__options {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	align-items: flex-start;
}

/* Side by side once there is room; stacked on phones, where five labels on one
   line would wrap into an unreadable grid. */
@media (min-width: 600px) {

	.ff-filters__options {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.5rem;
	}
}

.ff-filters .ff-filters__option {
	display: inline-flex;
	/* The theme sets label { width: 100% }, which would put every option on its
	   own line even in a row-direction flex container. */
	inline-size: auto;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	line-height: 1.2;
}

/*
 * The native box is replaced rather than hidden. display:none would take it out
 * of the tab order; appearance:none keeps it focusable and keeps the label
 * association intact.
 */
.ff-filters .ff-filters__option input[type="checkbox"] {
	appearance: none;
	margin: 0;
	/* Ollie's own input rule (style.css:92) matches checkboxes too and gives
	   them .5em 1em, which blows the box up to 42px. */
	padding: 0;
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	display: grid;
	place-content: center;
	cursor: pointer;
}

.ff-filters .ff-filters__option input[type="checkbox"]::before {
	content: "";
	inline-size: 0.625rem;
	block-size: 0.625rem;
	transform: scale(0);
	transition: transform 0.1s ease-out;
	box-shadow: inset 1em 1em currentColor;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

@media (prefers-reduced-motion: reduce) {
	.ff-filters .ff-filters__option input[type="checkbox"]::before {
		transition: none;
	}
}

.ff-filters .ff-filters__option input[type="checkbox"]:checked {
	/* No fill: the section this form sits in can be any palette colour, and a
	   filled box would disappear whenever the fill matched the background. */
	border-width: 2px;
}

.ff-filters .ff-filters__option input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.ff-filters .ff-filters__option input[type="checkbox"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* Filter form (Aktuelt) ---------------------------------------------------- */

.ff-filterform {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.ff-filterform__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ff-filterform__reset {
	font-size: 0.875em;
}