.job-form, .job-grid, .job-filter {
	--job-clr-accent:  var(--action-green, #299847);
	--job-clr-card-bg: white;
    --job-clr-card-fg: black;
	--job-clr-content-bg: var(--off-white, #f2f2f2);
	--job-clr-secondary-bg: none;

	--padding-inline: unset;
}

.job-form-header, .listing-modal__header {
	background-color: var(--dark-blue);
}

.job-button {
	--gap: 6px;
	--icon-size: 1em;
	--inline-padding: 1rem;

	--padding-offset: calc( (var(--icon-size) + var(--gap)) / 2);

	display: flex;
	min-width: fit-content;
	height: 40px;
	background-color: var(--action-green);
	border-radius: 6969px;
	color: white;
	position: relative;
	line-height: 1;
	align-items: center;
	padding-left: calc(var(--padding-offset)  + var(--inline-padding));
	padding-right: var(--inline-padding);
	gap: var(--gap);
	justify-content: center;
	transition: .25s ease;

	font-family: var(--accent-font);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	text-decoration: none;

}

.job-button::after {
	content: "";
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='rgb(255, 255, 255)' d='M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z'/%3E%3C/svg%3E");
	width: var(--icon-size);
	height: var(--icon-size);
	opacity: 0;
	transition: 0.25s ease;
	margin-left: calc(-1 * var(--padding-offset));
	transform: translateX(-100%);
}

.job-button:not(:disabled,.job-button--prev):hover {
	padding-left: var(--inline-padding);
}

.job-button:not(:disabled,.job-button--prev):hover::after {
	margin-left: 0;
	opacity: 1;
	transform: translateX(0%);
}

.job-grid {
	background-color: var(--job-clr-content-bg);
}


.job-form .acf-field-group, .listing-card {
	box-shadow: 1px 1px 10px 0px var(--shadow-card);
	border-radius: var(--radius-card, 20px);
}

.job-form .acf-field-group {
    background: white;
}


#job-application, .job-filter {
	margin-bottom: 0; /*storefront */
}

.listing-modal__close, .listing-modal__close:hover, .listing-modal__close:focus { /* storefront */
	background: none;
	border: none;
	outline: none;
}

.listing-modal {
	border-radius: var(--radius-card);
	max-width: 95ch;
}

.listing-modal__content :where(.job-button) {
	margin-block-start: 1rem;
}

.job-form .acf-field :is([type="text"], [type="email"], [type="tel"]) {
	background-color: var(--off-white);
	padding: .5rem;
}



.job-form .acfe-form > *, 
.job-grid, 
.job-filter {
    padding: var(--side-padding);
}

.job-form .acfe-form > .acf-form-fields, .job-grid {
	padding-block: 4rem;
}

.job-form .acfe-form > .acf-form-fields {
	max-width: 95ch;
	margin: auto;
	padding-inline: 0;
}

.job-form .acf-form-submit, .job-filter {
	padding-block: 1rem;
}

.listing-card__actions {
	display: grid;
	gap: .5rem;
}

.job-filter {
	background-color: var(--off-white);
	display: flex;
	gap: var(--gutter);
	flex-wrap: wrap;
}

form.job-filter select {
	border: 0;
	border-radius: var(--radius-full);
	background-color: white;
	box-shadow: 1px 1px 10px 0px var(--shadow-card);
	padding-inline: 1rem;
	padding-block: 0.375rem;
}

form.job-filter select:open {
	border-radius: var(--radius-full);
}

.listing-card__apply {
	display: grid;
	grid-template-columns: 2em auto;
	gap: 1ch;
	align-content: center;
	align-items: center;
}

.job-form input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	width: 2em;
	height: 2em;
	border-radius: 100%;

	display: grid;
	place-items: center;
	place-content: center;
	grid-template-areas: 'a';
	border: 2px solid var(--action-green);
	outline: none;
	overflow: clip;

	&::before, &::after {
		grid-area: a;
		transition: .25s ease;
		scale: 0;
	}


	&::after {
		content: "";
		width: 0.65em;
		height: 0.65em;
		background: white;
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	}

	&::before {
		content: "";
		width: 2em;
		height: 2em;
		background-color: var(--action-green);
		border-radius: 100%;
	}

	&:checked {
		background-color: var(--action-green);

		&::before, &::after { 
			scale: 1;
		}
	}

}

.listing-card {
	border-width: 2px;
}

.job-form .acf-field .acf-label label {
	color: var(--dark-blue);
	font-weight: 600;
	font-size: var(--body-size);
}
.job-form .acf-field-group > .acf-label > label {
	font-size: var(--accent-header-size);

}

.job-form__required-legend {
	font-family: var(--body-font);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-height);
}
.job-form__required {
	color: #c02b0a;
}