/* ==========================================================================
	Project: Kraken Careers Plugin
	File: public.css
	Purpose: base + layout + components + utilities.
	Author: Christopher Satterthwaite  |  Updated: 2025-10-01  |  Version: 1.0.0
========================================================================== */

/* TOC
[00] Root
[01] Base
[02] Layout
	[02.0] Inner Wrapper
	[02.1] Header
	[02.2] Layout
	[02.3] Content
	[02.4] Sidebar
	[02.5] Footer
[03] Components
	[03.0] Filters
		[03.0.a] Filter Header
		[03.0.b] Filter Body
		[03.0.c] Filter Input
	[03.1] Results Summary
	[03.2] Back Button
	[03.3] Headlines
	[03.4] Job Title
	[03.5] Company
	[03.6] City
	[03.7] Meta Group
	[03.8] Job ID
	[03.9] Job Posted
	[03.10] Job Wages
	[03.11] Job Types
	[03.12] Job Hours
	[03.13] Job Remote Options
	[03.14] Job Education Level
	[03.15] Job Experience Years
	[03.16] Job Excerpt
	[03.17] Job Permalink
	[03.18] Job List
	[03.19] Job Card
		[03.19.a] Job Card Image
		[03.19.b] Job Card Content
		[03.19.c] Job Card Header
		[03.19.d] Job Card Body
		[03.19.e] Job Card Footer
	[03.20] Description
	[03.21] Duties
	[03.22] Qualifications
	[03.23] Additional Info
	[03.24] Education
	[03.25] Benefits
	[03.26] Company Profile
	[03.27] Application Form
	[03.28] Location
	[03.29] Pagination
	[03.30] Closed Message
	[03.21] Disclaimer Message
	[03.32] Messages
	[03.33] Archive Title
	[03.34] Archive Description
[04] Utilities
	[04.1] Screen Reader
*/

/* ================= [00] Root ================= */
/* Generated in the css.php */

/* ================= [01] Base ================= */
/* Generated in the css.php */

/* ================= [02] Layout ================= */
/* -- [02.0] Inner Wrapper -- */
.kc-job__inner {
	padding: 0 0 3rem 0;
}

/* -- [02.1] Header -- */
.kc-job__header {
	max-width: var(--header-width);
	margin: 0 auto;

	.kc-job__header-inner {
		padding: var(--header-padding);
		padding-bottom: 2rem;
	}

	&.kc-job__header--archive {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	&.kc-job__header--single {
		.kc-job__header-inner {
			display: grid;
			row-gap: 0.5rem;

			> :first-child {
				margin-bottom: 1rem;
			}

			.kc-job__headlines {
				margin-bottom: 1.5rem;
			}
		}
	}
}

/* -- [02.2] Layout -- */
.kc-job__layout {
	max-width: var(--layout-width);
	margin: 0 auto;

	.kc-job__layout-inner {
		display: flex;
		flex-direction: column;
		gap: var(--layout-gap-mobile);
		padding: var(--layout-padding);

		@media (min-width: 992px) {
			flex-direction: row;
		}

		:where(.kc-job__wrapper--archive) & {
			@media (min-width: 1200px) {
				gap: var(--layout-gap-desktop);
			}
		}

		:where(.kc-job__wrapper--single) & {
			@media (min-width: 1200px) {
				gap: var(--layout-gap-desktop);
			}
		}
	}
}

/* -- [02.3] Content -- */
.kc-job__content {
	.kc-job__content-inner {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: var(--content-padding);
	}

	.kc-job__layout--search-filter & {
		:where(.kc-job__wrapper--archive) & {
			order: 2;

			@media (min-width: 992px) {
				width: var(--content-width-archive);
			}
		}
	}

	.kc-job__layout--single & {
		:where(.kc-job__wrapper--single) & {
			@media (min-width: 992px) {
				width: var(--content-width-single);
			}
		}
	}
}

/* -- [02.4] Sidebar -- */
.kc-job__sidebar {
	display: none;
	width: 100%;

	.kc-job__sidebar-inner {
		width: 100%;
		padding: var(--sidebar-padding);
	}


	:where(.kc-job__wrapper--archive) & {
		@media (min-width: 992px) {
			width: var(--side-width-archive);
		}
	}

	:where(.kc-job__wrapper--single) & {
		@media (min-width: 992px) {
			width: var(--side-width-single);
		}
	}

	.kc-job__layout--search-filter & {
		display: flex;
		flex-grow: 1;
	}

	.kc-job__layout--single & {
		display: flex;
		flex-grow: 1;
	}
}

/* -- [02.5] Footer -- */
.kc-job__footer {
	max-width: var(--footer-width);
	margin: 0 auto;

	.kc-job__footer-inner {
		padding: var(--footer-padding);
	}
}

/* ================= [03] Components ================= */
/* -- [03.0] Filters -- */
.kc-filters {
	/* -- [03.0.a] Filter Header -- */
	.kc-filters__header {
		display: flex;
		align-items: center;
		margin: 0 0 1.5rem 0;

		.kc-filters__header-col {
			flex: 1 1 50%;

			&.kc-filters__header-col--left {
				display: flex;
				justify-content: flex-start;
			}

			&.kc-filters__header-col--right{
				display: flex;
				justify-content: flex-end;
			}
		}

		.kc-filters__heading {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			color: var(--filter-header-font-color);
			font-size: var(--filter-header-font-size);
			font-weight: var(--filter-header-font-weight);

			&:before {
				content: "";
				width: 24px;
				height: 24px;
				background-color: currentColor;
				-webkit-mask-image: var(--filter-header-svg);
				mask-image: var(--filter-header-svg);
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
			}
		}

		.kc-filters__clear {
			color: var(--filter-clear-button-font-color);
			border-radius: 0.2rem;
			font-size: var(--filter-clear-button-font-size);
			text-decoration: none;
			transition: color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				color: var(--filter-clear-button-font-hover-color)
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}
		}
	}

	/* -- [03.0.b] Filter Body -- */
	.kc-filters__body {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* -- [03.0.c] Filter Input -- */
	.kc-filters__input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		padding: var(--filter-input-padding);
		background-color: var(--filter-input-background-color);
		color: var(--filter-input-font-color);
		border:1px solid var(--filter-input-border-color);
		border-radius: 0.2rem;
		background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 1rem 1rem;
		cursor: pointer;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

		&:is(:hover, :focus) {
			background-color: var(--filter-input-background-hover-color);
			color: var(--filter-input-font-color);
			border:1px solid var(--filter-input-border-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}
	}
}

/* -- [03.1] Results Summary -- */
.kc-job__results-summary {
	padding: 0 0 2.5rem 0;
	margin: 0 0 2.5rem 0;
	border-bottom: 1px solid var( --color-gray);

	.kc-job__results-count {
		color: var(--results-font-color);
		font-size: var(--results-font-size);
		line-height: var(--results-line-height);

		.kc-job__results-start,
		.kc-job__results-separator,
		.kc-job__results-end {
			font-weight: var(--results-font-weight);
		}

		.kc-job__results-total {
			font-size: 1.5rem;
			font-weight: var(--results-font-weight);
		}

		.kc-job__results-label {
			font-weight: var(--results-font-weight);
		}
	}
}

/* -- [03.2] Back Button -- */
.kc-job__back {
	.kc-job__back-link {
		display: flex;
		align-items: center;
		color: var(--back-button-color);
		border-radius: 0.2rem;
		font-size: var(--back-button-font-size);
		font-weight: var(--back-button-font-weight);
		text-decoration: none;
		transition: color 0.2s ease-in-out;

		&:is(:hover, :focus) {
			color: var(--back-button-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}

		&:before {
			--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7'/%3E%3C/svg%3E");
			content: "";
			width: 24px;
			height: 24px;
			margin: 0 0.5rem 0 0;
			background-color: currentColor;
			-webkit-mask-image: var(--svg);
			mask-image: var(--svg);
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
		}
	}
}

/* -- [03.3] Headlines -- */
.kc-job__headlines {
	.kc-job__headlines-list {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;

		.kc-job__headlines-item {
			display: flex;
			align-items: center;

			&:first-child::before {
				content: "";
				width: 18px;
				height: 18px;
				margin: 0 0.5rem 0 0;
				background-color: currentColor;
				-webkit-mask-image: var(--headline-svg);
				mask-image: var(--headline-svg);
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
			}

			.kc-job__headline-text {
				color: var(--headline-font-color);
				font-size: var(--headline-font-size);
				font-weight: var(--headline-font-weight);

				&.kc-job__headline-text--featured {
					padding: 0 0.3rem;
					background-color: var(--headline-featured-background-color);
					color: var(--headline-featured-font-color);
					border-radius: 5px;
				}
			}
		}
	}
}

/* -- [03.4] Job Title -- */
.kc-job__title {
	.kc-job__title-heading {
		margin: 0;
		padding: 0;
		color: var(--title-font-color);
		font-size: var(--title-font-size);
		font-weight: var(--title-font-weight);
		line-height: var(--title-line-height);

		.kc-job__title-link {
			color: var(--link-title-font-color);
			font-size: var(--link-title-font-size);
			font-weight: var(--link-title-font-weight);
			text-decoration: none;
			transition: color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				color: var(--link-title-font-hover-color);
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

/* -- [03.5] Company -- */
.kc-job__company {
	.kc-job__company-name {
		color: var(--company-location-font-color);
		font-size: var(--company-location-font-size);
		font-weight: var(--company-location-font-weight);
		line-height: var(--company-location-line-height);
	}
}

/* -- [03.6] City -- */
.kc-job__city {
	.kc-job__city-list {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;

		.kc-job__city-item {
			display: flex;
			align-items: center;

			&:before {
				margin: 0 0.8rem;
				content: "●";
				color: color-mix(in srgb, var(--city-font-color) 60%, white);
				font-size: 0.5rem;
			}

			&:first-child::before {
				content: none;
			}

			.kc-job__city-text {
				color: var(--city-font-color);
				font-size: var(--city-font-size);
				font-weight: var(--city-font-weight);
			}
		}
	}
}

/* -- [03.7] Meta Group -- */
.kc-job__meta-group {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;

	&.kc-job__meta-group--row {
		flex-direction: column;

		@media (min-width: 992px) {
			flex-direction: row;
		}
	}

	&.kc-job__meta-group--column {
		flex-direction: column;
	}

	.kc-job__list--grid & {
		flex-direction: column;
		margin-top: 0.5rem;
	}
}

/* -- [03.8] Job ID -- */
.kc-job__id {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-id-padding);
	background-color: var(--job-id-background-color);
	color: var(--job-id-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-id-font-size);
	font-weight: var(--job-id-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-id-svg);
		mask-image: var(--job-id-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.9] Job Posted -- */
.kc-job__posted {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-posted-padding);
	background-color: var(--job-posted-background-color);
	color: var(--job-posted-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-posted-font-size);
	font-weight: var(--job-posted-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-posted-svg);
		mask-image: var(--job-posted-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.10] Job Wages -- */
.kc-job__wages {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-wages-padding);
	background-color: var(--job-wages-background-color);
	color: var(--job-wages-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-wages-font-size);
	font-weight: var(--job-wages-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-wages-svg);
		mask-image: var(--job-wages-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.11] Job Types -- */
.kc-job__types {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-types-padding);
	background-color: var(--job-types-background-color);
	color: var(--job-types-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-types-font-size);
	font-weight: var(--job-types-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-types-svg);
		mask-image: var(--job-types-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.12] Job Hours -- */
.kc-job__hours {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-hours-padding);
	background-color: var(--job-hours-background-color);
	color: var(--job-hours-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-hours-font-size);
	font-weight: var(--job-hours-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-hours-svg);
		mask-image: var(--job-hours-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.13] Job Remote Options -- */
.kc-job__remote-options {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-remote-options-padding);
	background-color: var(--job-remote-options-background-color);
	color: var(--job-remote-options-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-remote-options-font-size);
	font-weight: var(--job-remote-options-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-remote-options-svg);
		mask-image: var(--job-remote-options-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.14] Job Education Level -- */
.kc-job__education_level {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-education-level-padding);
	background-color: var(--job-education-level-background-color);
	color: var(--job-education-level-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-education-level-font-size);
	font-weight: var(--job-education-level-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-education-level-svg);
		mask-image: var(--job-education-level-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.15] Job Experience Years -- */
.kc-job__experience {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--job-experience-padding);
	background-color: var(--job-experience-background-color);
	color: var(--job-experience-font-color);
	border-radius: 0.1rem;
	font-size: var(--job-experience-font-size);
	font-weight: var(--job-experience-font-weight);
	line-height: 1;

	&:before {
		content: "";
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask-image: var(--job-experience-svg);
		mask-image: var(--job-experience-svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -- [03.16] Job Excerpt -- */
.kc-job__excerpt {
	color: var(--excerpt-font-color);
	font-size: var(--excerpt-font-size);
	font-weight: var(--excerpt-font-weight);
	line-height: var(--excerpt-line-height);
}

/* -- [03.17] Job Permalink -- */
.kc-job__permalink {
	.kc-job__permalink-link {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
		background-color: var(--permalink-background-color);
		color: var(--permalink-font-color);
		border-radius: 0.2rem;
		font-size: var(--permalink-font-size);
		font-weight: var(--permalink-font-weight);
		line-height: var(--permalink-line-height);
		text-decoration: none;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

		&:before {
			content: "";
			width: 18px;
			height: 18px;
			background-color: currentColor;
			-webkit-mask-image: var(--permalink-svg);
			mask-image: var(--permalink-svg);
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
		}

		&:is(:hover, :focus) {
			background-color: var(--permalink-background-hover-color);
			color: var(--permalink-font-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}
	}
}

/* -- [03.18] Job List -- */
.kc-job__list {
	margin: 0;
	padding: 0;
	list-style: none;

	&.kc-job__list--flex {
		display: flex;
		flex-direction: column;
	}

	&.kc-job__list--grid {
		display: grid;
		gap: 2rem;
		align-items: stretch;

		.kc-job__item {
			height: 100%;
		}

		&.kc-job__list--grid-02 {
			grid-template-columns: repeat(1, minmax(0, 1fr));

			@media (min-width: 992px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		&.kc-job__list--grid-03 {
			grid-template-columns: repeat(1, minmax(0, 1fr));

			@media (min-width: 992px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
			
			@media (min-width: 1200px) {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}
	}
}

/* -- [03.19] Job Card -- */
.kc-job-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
	padding: 0 0 2.5rem 0;
	margin: 0 0 2.5rem 0;
	border-bottom: 1px solid var(--color-gray);

	@media (min-width: 992px) {
		flex-direction: row;
	}

	&:not(:has(.kc-job-card__col-01)) {
		flex-direction: column;
	}	

	.kc-job__list--grid & {
		flex-direction: column;
		border-bottom: none;
		padding: 0;
		margin: 0 0 2rem 0;

		.kc-job-card__featured-image {
			aspect-ratio: 1 / 1;
		}
	}

	.kc-job-card__col-01 {
		flex: 0 0 30%;
	}

	.kc-job-card__col-02 {
		flex: 0 0 70%;
	}

	/* -- [03.19.a] Job Card Image -- */
	.kc-job-card__featured-image {
		aspect-ratio: 1 / 1;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		@media (min-width: 992px) {
			width: 100%;
			height: 100%;
		}
	}

	/* -- [03.19.b] Job Card Content -- */
	.kc-job-card__content {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* -- [03.19.c] Job Card Header -- */
	.kc-job-card__header {
		display: grid;
		row-gap: 0.5rem;

		> :first-child {
			margin-bottom: 0.5rem;
		}

		.kc-job__list--grid & {
			row-gap: 1rem;

			> :first-child {
				margin-bottom: 0;
			}
		}
	}

	/* -- [03.19.d] Job Card Body -- */
	.kc-job-card__body {
		padding: 0;
	}

	/* -- [03.19.e] Job Card Footer -- */
	.kc-job-card__footer {
		padding: 0.2rem 0 0 0;
	}
}

/* -- [03.20] Image -- */
.kc-job__image-wrapper {
	object-fit: cover;
	overflow: hidden;
	margin-bottom: 1rem;

	.kc-job__image {
		width: 100%;
		height: 100%;
	}
}

/* -- [03.20] Description -- */
.kc-job__description {
	.kc-job-description__title {
		color: var(--description-heading-font-color);
		font-size: var(--description-heading-font-size);
		font-weight: var(--description-heading-font-weight);
		line-height: var(--description-heading-line-height);
	}

	.kc-job-description__body {
		color: var(--description-font-color);
		font-size: var(--description-font-size);
		line-height: var(--description-line-height);
	}
}

/* -- [03.21] Duties -- */
.kc-job__duties {
	.kc-job-duties__title {
		color: var(--duties-heading-font-color);
		font-size: var(--duties-heading-font-size);
		font-weight: var(--duties-heading-font-weight);
		line-height: var(--duties-heading-line-height);
	}

	.kc-job-duties__body {
		color: var(--duties-font-color);
		font-size: var(--duties-font-size);
		line-height: var(--duties-line-height);
	}
}

/* -- [03.22] Qualifications -- */
.kc-job__qualifications {
	.kc-job-qualifications__title {
		color: var(--qualifications-heading-font-color);
		font-size: var(--qualifications-heading-font-size);
		font-weight: var(--qualifications-heading-font-weight);
		line-height: var(--qualifications-heading-line-height);
	}

	.kc-job-qualifications__body {
		color: var(--qualifications-font-color);
		font-size: var(--qualifications-font-size);
		line-height: var(--qualifications-line-height);
	}
}

/* -- [03.23] Additional Info -- */
.kc-job__additional {
	.kc-job-additional__title {
		color: var(--additional-heading-font-color);
		font-size: var(--additional-heading-font-size);
		font-weight: var(--additional-heading-font-weight);
		line-height: var(--additional-heading-line-height);
	}

	.kc-job-additional__body {
		color: var(--additional-font-color);
		font-size: var(--additional-font-size);
		line-height: var(--additional-line-height);
	}
}

/* -- [03.24] Education -- */
.kc-job__education {
	.kc-job-education__title {
		color: var(--education-heading-font-color);
		font-size: var(--education-heading-font-size);
		font-weight: var(--education-heading-font-weight);
		line-height: var(--education-heading-line-height);
	}

	.kc-job-education__body {
		color: var(--education-font-color);
		font-size: var(--education-font-size);
		line-height: var(--education-line-height);
	}
}

/* -- [03.25] Benefits -- */
.kc-job__benefits {
	.kc-job-benefits__title {
		color: var(--benefits-heading-font-color);
		font-size: var(--benefits-heading-font-size);
		font-weight: var(--benefits-heading-font-weight);
		line-height: var(--benefits-heading-line-height);
	}

	.kc-job-benefits__body {
		color: var(--benefits-font-color);
		font-size: var(--benefits-font-size);
		line-height: var(--benefits-line-height);
	}
}

/* -- [03.26] Company Profile -- */
.kc-job-company-profile {
	max-width: var(--company-width);
	margin: 0 auto;

	.kc-job-company-profile__inner {
		padding: var(--company-padding);
		padding-bottom: 1rem;
	}

	.kc-job-company-profile__header {
		color: var(--company-heading-color);
		font-size: var(--company-heading-font-size);
		font-weight: var(--company-heading-font-weight);
		line-height: var(--company-heading-line-height);
	}

	.kc-job-company-profile__grid {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 1rem 2rem;
		background-color: var(--company-background-color);

		@media (min-width: 992px) {
			flex-direction: row;
			padding: 1rem 0.7rem;
		}

		.kc-job-company-profile__col {
			&.kc-job-company-profile__col--logo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				@media (min-width: 992px) {
					width: 20%;
				}
			}

			&.kc-job-company-profile__col--details {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;

				@media (min-width: 992px) {
					width: 80%;
				}
			}
		}

		.kc-job-company-profile__name {
			color: var(--company-name-font-color);
			font-size: var(--company-name-font-size);
			font-weight: var(--company-name-font-weight);
			line-height: var(--company-name-line-height);
		}

		.kc-job-company-profile__description {
			color: var(--company-font-color);
			font-size: var(--company-font-size);
			line-height: var(--company-line-height);
		}

		.kc-job-company-profile__contact-info {
			padding: 1rem 0;
		}

		.kc-job-company-profile__full-address {
			color: var(--company-font-color);
			font-size: var(--company-font-size);
		}

		.kc-job-company-profile__label {
			color: var(--company-font-color);
			font-size: var(--company-font-size);
			font-weight: var(--company-font-weight);
		}

		.kc-job-company-profile__link {
			color: var(--company-link-color);
			font-size: var(--company-font-size);
			text-decoration: none;
			transition: color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				color: var(--company-link-hover-color);
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

/* -- [03.27] Application Form -- */
.kc-job-form__wrapper {
	max-width: var(--form-width);
	margin: 0 auto;

	.kc-job-form__inner {
		padding: var(--form-padding);
		padding-bottom: 3rem;
	}

	.kc-job-form__title {
		color: var(--form-heading-font-color);
		font-size: var(--form-heading-font-size);
		font-weight: var(--form-heading-font-weight);
		line-height: var(--form-heading-line-height);
	}

	.kc-job-form__fieldset {
		margin: 2rem 0;
		margin-inline: 0;
		padding-inline: 0;

		@media (min-width: 992px) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;

			&:last-of-type .kc-job-form__group {
				grid-column: 1 / -1;
			}
		}
	}

	.kc-job-form__legend {
		font-size: 1.2rem;
		font-weight: 700;
	}

	.kc-job-form__group {
		margin: 0 0 0.9rem 0;

		&:has(.kc-job-form__input-checkbox) {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}
	}

	.kc-job-form__input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		display: block;
		padding: 0.5rem 0.5rem;
		background-color: var(--form-input-background-color);
		color: var(--form-input-font-color);
		border:1px solid var(--form-input-border-color);
		border-radius: 0.2rem;
		font-family: inherit;
		font-size: var(--form-input-font-size);
		line-height: var(--form-input-line-height);
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

		&:is(:hover, :focus) {
			background-color: var(--form-input-background-hover-color);
			color: var(--form-input-font-hover-color);
			border:1px solid var(--form-input-border-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}

		&.kc-job-form__input-select {
			background-image: var(--form-input-select-background);
			background-repeat: no-repeat;
			background-position: right 0.75rem center;
			background-size: 1rem 1rem;
			cursor: pointer;
		}

		&.kc-job-form__input-checkbox {
			-webkit-appearance: auto;
			-moz-appearance: auto;
			appearance: auto;
			width: 2rem;
			height: 2rem;
		}

		&.kc-job-form__is-invalid {
			border:1px solid var(--form-input-error);
		}
	}


	.kc-job-form__button {
		padding: 0.8rem 1rem;
		background-color: var(--form-button-background-color);
		color: var(--form-button-font-color);
		border: none;
		border-radius: 0.2rem;
		font-size: var(--form-button-font-size);
		font-weight: var(--form-button-font-weight);
		line-height: var(--form-button-line-height);
		text-decoration: none;
		cursor: pointer;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

		&:is(:hover, :focus) {
			background-color: var(--form-button-background-hover-color);
			color: var(--form-button-font-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}
	}

	.kc-job-form__required {
		color: var(--color-red);
	}

	.kc-job-form__error {
		color: var(--color-red);
	}
}

/* -- [03.28] Location -- */
.kc-job-location {
	.kc-job-location__inner {
		.kc-job-location__title {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			color: var(--location-heading-font-color);
			font-size: var(--location-heading-font-size);
			font-weight: var(--location-heading-font-weight);
			line-height: var(--location-heading-line-height);

			&:before {
				content: "";
				width: 18px;
				height: 18px;
				background-color: currentColor;
				-webkit-mask-image: var(--location-svg);
				mask-image: var(--location-svg);
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
			}
		}

		.kc-job-location__item{
			display: flex;
			gap: 1rem;
			margin-bottom: 1rem;

			.kc-job-location__col {
				&.kc-job-location__col--map {
					width: 150px;

					.kc-job-location__map {
						border: 0;
						border-radius: 6px;
					}
				}

				&.kc-job-location__col--location {
					width: auto;

					.kc-job-location__company-name {
						color: var(--location-address-font-color);
						font-size: 1rem;
						font-weight: 700;
					}

					.kc-job-location__address {
						margin: 0 0 1rem 0;
						color: var(--location-address-font-color);
						font-size: var(--location-address-font-size);
						line-height: var(--location-address-line-height);
						font-style: normal;
					}
				}
			}
		}

		.kc-job-location__button {
			padding: 0.5rem 0.9rem;
			background-color: var(--location-button-background-color);
			color: var(--location-button-font-color);
			border: none;
			border-radius: 0.2rem;
			font-size: var(--location-button-font-size);
			font-weight: var(--location-button-font-weight);
			line-height: var(--location-button-line-height);
			text-decoration: none;
			cursor: pointer;
			transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				background-color: var(--location-button-background-hover-color);
				color: var(--location-button-font-hover-color);
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}
		}
	}

	.kc-job-location__modal {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;

		.kc-job-location__modal-content {
			width: 90vw;
			max-width: 800px;
			min-height: 600px;
			background: #fff;
			border-radius: 0.5rem;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.kc-job-location__modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem 1rem;
		}

		.kc-job-location__modal-title {
			margin: 0;
			color: var(--location-modal-heading-font-color);
			font-size: var(--location-modal-heading-font-size);
			font-weight: var(--location-modal-heading-font-weight);
			line-height: var(--location-modal-heading-line-height);
		}

		.kc-job-location__modal-body {
			flex: 1;
			padding: 0;
			display: flex;
			flex-direction: column;
		}

		.kc-job-location__large-map {
			flex: 1;
			width: 100%;
			height: 100%;
			border: 0;
			display: block;
		}

		.kc-job-location__modal-close {
			padding: 0.4rem 0.8rem;
			background: #444;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 0.9rem;
			transition: background 0.2s ease;
		}

		.kc-job-location__modal-close:hover {
			background: #222;
		}
	}
}

/* -- [03.29] Pagination -- */
.kc-job-pagination  {
	display: flex;
	justify-content: center;
	align-items: center;

	.kc-job-pagination__inner {
		display: flex;
		align-items: center;
		gap: 1.5rem;

		.kc-job-pagination__list {
			display: flex;
			gap: 0.5rem;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.kc-job-pagination__link {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 2rem;
			height: 2rem;
			color: var(--pagination-font-color);
			border-radius: 1rem;
			font-size: 1rem;
			line-height: 1;
			letter-spacing: 2px;
			text-decoration: none;
			transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				color: var(--pagination-button-font-color);
				background-color: var(--pagination-button-background-color);
				border-radius: 1rem;
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}

			&.kc-job-pagination__link--disabled {
				opacity: 0.4;
				color: var( --color-dark-gray);
				cursor: not-allowed;
				pointer-events: none;

			}

			&.kc-job-pagination__link--current  {
				color: var(--pagination-button-font-color);
				background-color: var(--pagination-button-background-color);
				border-radius: 1rem;
			}

			&.kc-job-pagination__link--next,
			&.kc-job-pagination__link--prev {
				width: auto;
				padding: 0.5rem 1rem;
			}
		}
	}
}

/* -- [03.30] Closed Message -- */
.kc-job-closed {
	width: var(--closed-width);
	margin: 2rem auto;

	.kc-job-closed__inner {
		padding: var(--closed-padding);

		h1, h2, h3, h4, h5, h6 {
			color: var(--closed-heading-font-color);
			font-size: var(--closed-heading-font-size);
			font-weight: var(--closed-heading-font-weight);
			line-height: var(--closed-heading-line-height);
		}

		p {
			color: var(--closed-font-color);
			font-size: var(--closed-font-size);
			font-weight: var(--closed-font-weight);
		}


		ul, ol {
			color: var(--closed-font-color);
			font-size: var(--closed-font-size);
			font-weight: var(--closed-font-weight);
		}
	}
}

/* -- [03.31] Disclaimer Message -- */
.kc-job-disclaimer {
	max-width: var(--disclaimer-width);
	margin: 2rem auto;

	.kc-job-disclaimer__inner {
		padding: var(--disclaimer-padding);

		h1, h2, h3, h4, h5, h6 {
			color: var(--disclaimer-heading-font-color);
			font-size: var(--disclaimer-heading-font-size);
			font-weight: var(--disclaimer-heading-font-weight);
			line-height: var(--disclaimer-heading-line-height);
		}

		p {
			color: var(--disclaimer-font-color);
			font-size: var(--disclaimer-font-size);
			font-weight: var(--disclaimer-font-weight);
		}


		ul, ol {
			color: var(--disclaimer-font-color);
			font-size: var(--disclaimer-font-size);
			font-weight: var(--disclaimer-font-weight);
		}
	}
}

/* -- [03.32] Messages -- */
.kc-job-message {
	.kc-job-message__inner{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;


		h1, h2, h3, h4, h5, h6 {
			color: var(--message-heading-font-color);
			font-size: var(--message-heading-font-size);
			font-weight: var(--message-heading-font-weight);
			line-height: var(--message-heading-line-height);
		}

		p {
			color: var(--message-font-color);
			font-size: var(--message-font-size);
			font-weight: var(--message-font-weight);
		}


		ul, ol {
			color: var(--message-font-color);
			font-size: var(--message-font-size);
			font-weight: var(--message-font-weight);
		}
	}

	&.kc-job-message--not-found {
		width: 100%;
	}

	&.kc-job-message--not-available {
		width: 100%;
	}

	&.kc-job-message--expired {
		width: var(--message-width);
		margin: 1.5rem auto;

		.kc-job-message__inner{
			margin: var(--message-padding);
			background-color: var(--message-expired-background-color);
			border-radius: 0.5rem;

			h1, h2, h3, h4, h5, h6 {
				color: var(--message-expired-font-color);
			}

			p {
				color: var(--message-expired-font-color);
			}
		}
	}

	&.kc-job-message--filled {
		width: var(--message-width);
		margin: 1.5rem auto;

		.kc-job-message__inner{
			margin: var(--message-padding);
			background-color: var(--message-filled-background-color);
			border-radius: 0.5rem;

			h1, h2, h3, h4, h5, h6 {
				color: var(--message-filled-font-color);
			}

			p {
				color: var(--message-filled-font-color);
			}
		}
	}
}

/* -- [03.33] Archive Title -- */
.kc-archive__title {
	margin: 0;
	padding: 0;
	color: var(--archive-heading-font-color);
	font-size: var(--archive-heading-font-size);
	font-weight: var(--archive-heading-font-weight);
	line-height: var(--archive-heading-line-height);
}

/* -- [03.34] Archive Description -- */
.kc-archive__description {
	color: var(--archive-description-font-color);
	font-size: var(--archive-description-font-size);
	font-weight: var(--archive-description-font-weight);
	line-height: var(--archive-description-line-height);
}

/* ================= [04] Utilities ================= */
/* -- [04.1] Screen Reader -- */
.kc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;

	&:focus,
	&:focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	&.focusable:not(:focus):not(:focus-within) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	&.focusable:focus,
	&.focusable:focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}