@charset "UTF-8";

/* ==========================================================================
   Recruitment Requirements: Archive
   ========================================================================== */

.recruit-requirements {
	--recruit-requirements-filter-width: calc(var(--recruit-air-fluid-width) * 0.1);
	--recruit-requirements-filter-height: calc(var(--recruit-air-fluid-width) * 0.03);
	--recruit-requirements-filter-size: calc(var(--recruit-air-fluid-width) * 0.013333);
	--recruit-requirements-filter-gap: calc(var(--recruit-air-fluid-width) * 0.016667);
	--recruit-requirements-filter-margin: calc(var(--recruit-air-fluid-width) * 0.021667);
	--recruit-requirements-list-margin: calc(var(--recruit-air-fluid-width) * 0.056667);
	--recruit-requirements-padding-bottom: calc(var(--recruit-air-fluid-width) * 0.125);

	padding-bottom: var(--recruit-requirements-padding-bottom);
}

.recruit-requirements__filters {
	display: grid;
	grid-template-columns: repeat(7, var(--recruit-requirements-filter-width));
	gap: var(--recruit-requirements-filter-gap);
	margin-top: var(--recruit-requirements-filter-margin);
}

.recruit-requirements__filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--recruit-requirements-filter-width);
	height: var(--recruit-requirements-filter-height);
	padding: 0;
	border: 0;
	color: #087cc1;
	background: #ecf5f8;
	font-family: inherit;
	font-size: var(--recruit-requirements-filter-size);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.recruit-requirements__filter:hover,
.recruit-requirements__filter:focus-visible,
.recruit-requirements__filter.is-active {
	color: #fff;
	background: #056db9;
}

.recruit-requirements .recruit-air-openings__list {
	margin-top: var(--recruit-requirements-list-margin);
}

.recruit-requirements .recruit-air-opening[hidden] {
	display: none;
}

/* ==========================================================================
   Responsive: 600px and below
   ========================================================================== */

@media (max-width: 600px) {
	.recruit-requirements {
		--recruit-requirements-list-margin: 24px;
		--recruit-requirements-padding-bottom: 60px;
	}

	.recruit-requirements__filters {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.recruit-requirements__filter {
		transition: none;
	}
}