/* Blog index, archives and search (is_home(), is_archive(), is_search()). */

.archive-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.archive-filters__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.archive-filters__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--myco-color-primary);
	border-radius: var(--myco-radius-pill);
	color: var(--myco-color-text);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--myco-transition), color var(--myco-transition);
}

.archive-filters__nav a:hover,
.archive-filters__nav a[aria-current="page"] {
	background: var(--myco-color-primary);
	color: var(--myco-color-on-dark);
}

.archive-filters .search-form {
	flex: 1 1 18rem;
	max-width: 26rem;
}

.archive-filters .search-form {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

/* The pills already label the area; keep the field label for screen readers only. */
.archive-filters .search-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}