/* ==========================================================================
	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.19.f] Job Card Status
	[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] Job Status Message
	[03.31] 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-block: 0;
	padding-inline: 0;
}

/* -- [02.1] Header -- */
.kc-job__header {

	.kc-job__header-inner {
		max-inline-size: var(--header-width);
		margin-inline: auto;
		padding: var(--header-padding);
		padding-block: 2rem;
	}

	&.kc-job__header--archive {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	&.kc-job__header--single {
		background-color: var(--header-background-color);

		.kc-job__header-inner {
			display: flex;
			flex-direction: column;

			> :where(.kc-job__back) {
				margin-block-end: 0.9rem;
			}

			> :where(.kc-job__headlines) {
				margin-block-end: 1.5rem;
			}

			> :where(.kc-job__title) {
				margin-block-end: 0;
			}

			> :where(.kc-job__company) {
				margin-block-end: 0;
			}

			> :where(.kc-job__city) {
				margin-block-end: 1rem;
			}

			> :where(.kc-job__meta-group) {
				margin-block-end: 1rem;
			}
		}
	}
}

/* -- [02.2] Layout -- */
.kc-job__layout {
	background-color: var(--content-background-color);

	.kc-job__layout-inner {
		display: flex;
		flex-direction: column;
		gap: var(--layout-gap-mobile);
		max-inline-size: var(--layout-width);
		margin-block: 0;
		margin-inline: auto;
		padding: var(--layout-padding);
		padding-block: 2rem;

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

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

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

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

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

			@media (width >= 992px) {
				inline-size: var(--content-width-archive);
			}
		}
	}

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

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

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

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

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

		@media (width >= 1200px) {
			position: sticky;
			inset-block-start: calc(var(--kc-sidebar-sticky-offset) + var(--wp-admin--admin-bar--height, 0px));
			align-self: flex-start;
		}
	}

	.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-inline-size: var(--footer-width);
	margin-block: 0;
	margin-inline: auto;

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

/* ================= [03] Components ================= */
/* -- Shared Component Primitives -- */
:is(
	.kc-filters__clear,
	.kc-filters__input,
	.kc-job__back-link,
	.kc-job__title-link,
	.kc-job__apply-link,
	.kc-job__permalink-link,
	.kc-job-company-profile__link,
	.kc-job-form__input,
	.kc-job-form__button,
	.kc-job-form__submission-panel,
	.kc-job-location__button,
	.kc-job-location__modal-close,
	.kc-job-pagination__link
):focus-visible {
	outline: 2px solid var(--color-accessibility);
	outline-offset: 2px;
}

:is(
	.kc-job__id,
	.kc-job__posted,
	.kc-job__closing,
	.kc-job__status,
	.kc-job__wages,
	.kc-job__types,
	.kc-job__hours,
	.kc-job__remote-options,
	.kc-job__education_level,
	.kc-job__experience
) {
	--kc-icon: var(--kc-meta-icon);
	--kc-icon-size: 18px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--kc-meta-padding);
	background-color: var(--kc-meta-background-color);
	color: var(--kc-meta-font-color);
	border-radius: 0.1rem;
	font-size: var(--kc-meta-font-size);
	font-weight: var(--kc-meta-font-weight);
	line-height: 1;
}

:is(
	.kc-job__id,
	.kc-job__posted,
	.kc-job__closing,
	.kc-job__status,
	.kc-job__wages,
	.kc-job__types,
	.kc-job__hours,
	.kc-job__remote-options,
	.kc-job__education_level,
	.kc-job__experience
)::before,
:is(
	.kc-filters__heading,
	.kc-job__back-link,
	.kc-job__headlines-item:first-child,
	.kc-job__permalink-link,
	.kc-job-location__title
)::before {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--kc-icon-size, 18px);
	block-size: var(--kc-icon-size, 18px);
	background-color: currentColor;
	-webkit-mask-image: var(--kc-icon);
	mask-image: var(--kc-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* -- [03.0] Filters -- */
.kc-filters {
	/* -- [03.0.a] Filter Header -- */
	.kc-filters__header {
		display: flex;
		align-items: center;
		margin-block: 0 1.5rem;
		margin-inline: 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 {
				--kc-icon: var(--filter-header-svg);
				--kc-icon-size: 24px;
			}
		}

		.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);
			}
		}
	}

	/* -- [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;
		inline-size: 100%;
		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, border-color 0.2s ease-in-out;

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

/* -- [03.1] Results Summary -- */
.kc-job__results-summary {
	padding-block: 0 2.5rem;
	padding-inline: 0;
	margin-block: 0 2.5rem;
	margin-inline: 0;
	border-block-end: 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);
		}

		&::before {
			--kc-icon: 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");
			--kc-icon-size: 24px;
			margin-block: 0;
			margin-inline: 0 0.5rem;
		}
	}
}

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

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

			&:first-child::before {
				--kc-icon: var(--headline-svg);
				margin-block: 0;
				margin-inline: 0 0.5rem;
			}

			.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-block: 0;
					padding-inline: 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-block: 0;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 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);
			}
		}
	}
}

/* -- [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-block: 0;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 0;
		list-style: none;

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

			&::before {
				margin-block: 0;
				margin-inline: 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 (width >= 992px) {
			flex-direction: row;
		}
	}

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

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

/* -- [03.7.a] Job Apply Button -- */
.kc-job__apply {
	inline-size: 100%;

	.kc-job__apply-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 100%;
		padding-block: 0.8rem;
		padding-inline: 1rem;
		background-color: var(--form-button-background-color);
		color: var(--form-button-font-color);
		border-radius: 0.2rem;
		font-size: var(--form-button-font-size);
		font-weight: 700;
		line-height: var(--form-button-line-height);
		text-align: center;
		text-decoration: none;
		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);
		}
	}
}

/* -- [03.8] Job ID -- */
.kc-job__id {
	--kc-meta-padding: var(--job-id-padding);
	--kc-meta-background-color: var(--job-id-background-color);
	--kc-meta-font-color: var(--job-id-font-color);
	--kc-meta-font-size: var(--job-id-font-size);
	--kc-meta-font-weight: var(--job-id-font-weight);
	--kc-meta-icon: var(--job-id-svg);
}

/* -- [03.9] Job Posted / Closing / Status -- */
.kc-job__posted,
.kc-job__closing,
.kc-job__status {
	--kc-meta-padding: var(--job-posted-padding);
	--kc-meta-background-color: var(--job-posted-background-color);
	--kc-meta-font-color: var(--job-posted-font-color);
	--kc-meta-font-size: var(--job-posted-font-size);
	--kc-meta-font-weight: var(--job-posted-font-weight);
	--kc-meta-icon: var(--job-posted-svg);
	flex-wrap: wrap;
}

.kc-job__posted-label,
.kc-job__closing-label,
.kc-job__status-label {
	font-weight: 700;
}

/* -- [03.10] Job Wages -- */
.kc-job__wages {
	--kc-meta-padding: var(--job-wages-padding);
	--kc-meta-background-color: var(--job-wages-background-color);
	--kc-meta-font-color: var(--job-wages-font-color);
	--kc-meta-font-size: var(--job-wages-font-size);
	--kc-meta-font-weight: var(--job-wages-font-weight);
	--kc-meta-icon: var(--job-wages-svg);
}

/* -- [03.11] Job Types -- */
.kc-job__types {
	--kc-meta-padding: var(--job-types-padding);
	--kc-meta-background-color: var(--job-types-background-color);
	--kc-meta-font-color: var(--job-types-font-color);
	--kc-meta-font-size: var(--job-types-font-size);
	--kc-meta-font-weight: var(--job-types-font-weight);
	--kc-meta-icon: var(--job-types-svg);

	.kc-job__type-list {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-block: 0;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 0;
		list-style: none;
	}
}

/* -- [03.12] Job Hours -- */
.kc-job__hours {
	--kc-meta-padding: var(--job-hours-padding);
	--kc-meta-background-color: var(--job-hours-background-color);
	--kc-meta-font-color: var(--job-hours-font-color);
	--kc-meta-font-size: var(--job-hours-font-size);
	--kc-meta-font-weight: var(--job-hours-font-weight);
	--kc-meta-icon: var(--job-hours-svg);
}

/* -- [03.13] Job Remote Options -- */
.kc-job__remote-options {
	--kc-meta-padding: var(--job-remote-options-padding);
	--kc-meta-background-color: var(--job-remote-options-background-color);
	--kc-meta-font-color: var(--job-remote-options-font-color);
	--kc-meta-font-size: var(--job-remote-options-font-size);
	--kc-meta-font-weight: var(--job-remote-options-font-weight);
	--kc-meta-icon: var(--job-remote-options-svg);
}

/* -- [03.14] Job Education Level -- */
.kc-job__education_level {
	--kc-meta-padding: var(--job-education-level-padding);
	--kc-meta-background-color: var(--job-education-level-background-color);
	--kc-meta-font-color: var(--job-education-level-font-color);
	--kc-meta-font-size: var(--job-education-level-font-size);
	--kc-meta-font-weight: var(--job-education-level-font-weight);
	--kc-meta-icon: var(--job-education-level-svg);
}

/* -- [03.15] Job Experience Years -- */
.kc-job__experience {
	--kc-meta-padding: var(--job-experience-padding);
	--kc-meta-background-color: var(--job-experience-background-color);
	--kc-meta-font-color: var(--job-experience-font-color);
	--kc-meta-font-size: var(--job-experience-font-size);
	--kc-meta-font-weight: var(--job-experience-font-weight);
	--kc-meta-icon: var(--job-experience-svg);
}

/* -- [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-block: 0.5rem;
		padding-inline: 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 {
			--kc-icon: var(--permalink-svg);
		}

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

/* -- [03.18] Job List -- */
.kc-job__list {
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 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 {
			block-size: 100%;
		}

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

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

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

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

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

/* -- [03.19] Job Card -- */
.kc-job-card {
	--kc-card-title-font-size: var(--link-title-font-size);
	--kc-card-title-compact-font-size: var(--global-body-font-size);
	--kc-card-title-line-height: var(--global-heading-line-height);
	container: kc-job-card / inline-size;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-block: 0 2.5rem;
	padding-inline: 0;
	margin-block: 0 2.5rem;
	margin-inline: 0;
	border-block-end: 1px solid var(--color-gray);

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

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

	.kc-job__list--grid & {
		flex-direction: column;
		border-block-end: none;
		padding-block: 0;
		padding-inline: 0;
		margin-block: 0 2rem;
		margin-inline: 0;
	}

	.kc-job__title-heading {
		font-size: var(--kc-card-title-font-size);
		line-height: var(--kc-card-title-line-height);

		.kc-job__title-link {
			font-size: inherit;
			line-height: inherit;
		}
	}

	@container kc-job-card (inline-size < 36rem) {
		.kc-job__title-heading {
			font-size: var(--kc-card-title-compact-font-size);
		}
	}

	.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 (width >= 992px) {
			inline-size: 100%;
			block-size: 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: flex;
		flex-direction: column;

		&:has(> .kc-job-card__status) {
			@media (width >= 640px) {
				display: grid;
				grid-template-columns: minmax(0, 1fr) max-content;
				align-items: start;
				column-gap: 1rem;
			}
		}

		> :where(.kc-job__headlines) {
			margin-block-end: 1rem;
		}

		> :where(.kc-job__title) {
			margin-block-end: 0;
		}

		> :where(.kc-job-card__status) {
			margin-block: 0.55rem 1rem;
			margin-inline: 0;
		}

		> :where(.kc-job__company) {
			margin-block-end: 0;
		}

		&:not(:has(> :where(.kc-job__city))) {
			> :where(.kc-job__company) {
				.kc-job__company-name {
					display: block;
					margin-block-end: 1rem;
				}
			}
		}

		&:not(:has(> :where(.kc-job__company))) {
			> :where(.kc-job__city) {
				margin-block-end: 1rem;
			}
		}

		> :where(.kc-job__city) {
			margin-block-end: 1rem;
		}

		> :where(.kc-job__meta-group) {
			margin-block-end: 1rem;
		}

		&:has(> .kc-job-card__status) {
			@media (width >= 640px) {
				> :where(.kc-job__headlines, .kc-job__company, .kc-job__city, .kc-job__meta-group) {
					grid-column: 1 / -1;
				}

				> :where(.kc-job__title) {
					grid-column: 1;
					min-inline-size: 0;
				}

				> :where(.kc-job-card__status) {
					grid-column: 2;
					justify-self: end;
					margin-block: 0.15rem 0;
				}
			}
		}
	}

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

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

	/* -- [03.19.f] Job Card Status -- */
	.kc-job-card__status {
		--kc-job-card-status-background-color: var(--job-card-status-closed-background-color);
		--kc-job-card-status-font-color: var(--job-card-status-closed-font-color);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		max-inline-size: 100%;
		padding: var(--job-card-status-padding);
		color: var(--kc-job-card-status-font-color);
		background-color: var(--kc-job-card-status-background-color);
		border-radius: 0.2rem;
		font-size: var(--job-card-status-font-size);
		font-weight: var(--job-card-status-font-weight);
		line-height: var(--job-card-status-line-height);
		white-space: nowrap;

		&.kc-job-card__status--filled {
			--kc-job-card-status-background-color: var(--job-card-status-filled-background-color);
			--kc-job-card-status-font-color: var(--job-card-status-filled-font-color);
		}
	}

	&:has(.kc-job-card__status) {
		.kc-job__excerpt,
		.kc-job__meta-group {
			opacity: 0.82;
		}
	}
}

/* -- [03.20] Image -- */
.kc-job__image-wrapper {
	overflow: hidden;
	margin-block-end: 1rem;

	.kc-job__image {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

/* -- Shared Content Sections -- */
.kc-job__wrapper--single {
	--kc-detail-section-space: clamp(2rem, 4vw, 4rem);
	--kc-sidebar-sticky-offset: 2rem;
}

.kc-job__wrapper--single :is(
	.kc-job__description,
	.kc-job__duties,
	.kc-job__qualifications,
	.kc-job__additional,
	.kc-job__education,
	.kc-job__benefits
) {
	margin-block-start: var(--kc-detail-section-space);
}

.kc-job__wrapper--single :is(
	.kc-job__description,
	.kc-job__duties,
	.kc-job__qualifications,
	.kc-job__additional,
	.kc-job__education,
	.kc-job__benefits
):first-child {
	margin-block-start: 0;
}

.kc-job__wrapper--single :is(
	.kc-job__description,
	.kc-job__duties,
	.kc-job__qualifications,
	.kc-job__additional,
	.kc-job__education,
	.kc-job__benefits
) :is(h2, h3, h4) {
	margin-block: 0 0.85rem;
}

.kc-job__wrapper--single :is(
	.kc-job__description,
	.kc-job__duties,
	.kc-job__qualifications,
	.kc-job__additional,
	.kc-job__education,
	.kc-job__benefits
) p {
	margin-block: 0 1rem;
}

:is(
	.kc-job__description .kc-job-description__title,
	.kc-job__duties .kc-job-duties__title,
	.kc-job__qualifications .kc-job-qualifications__title,
	.kc-job__additional .kc-job-additional__title,
	.kc-job__education .kc-job-education__title,
	.kc-job__benefits .kc-job-benefits__title
) {
	color: var(--kc-section-heading-font-color);
	font-size: var(--kc-section-heading-font-size);
	font-weight: var(--kc-section-heading-font-weight);
	line-height: var(--kc-section-heading-line-height);
}

:is(
	.kc-job__description .kc-job-description__body,
	.kc-job__duties .kc-job-duties__body,
	.kc-job__qualifications .kc-job-qualifications__body,
	.kc-job__additional .kc-job-additional__body,
	.kc-job__education .kc-job-education__body,
	.kc-job__benefits .kc-job-benefits__body
) {
	color: var(--kc-section-font-color);
	font-size: var(--kc-section-font-size);
	line-height: var(--kc-section-line-height);
}

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

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

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

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

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

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

/* -- [03.26] Company Profile -- */
.kc-job-company-profile {
	.kc-job-company-profile__inner {
		background-color: var(--company-background-color);
		max-inline-size: var(--company-width);
		margin-block: 2rem;
		margin-inline: auto;
		padding: var(--company-padding);
		padding-block: 2rem;
		border-radius: 0.5rem;
	}

	.kc-job-company-profile__summary {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;

		@media (width >= 992px) {
			flex-direction: row;
			align-items: center;
		}

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

				@media (width >= 992px) {
					flex: 0 0 250px;
					inline-size: auto;
				}
			}

			&.kc-job-company-profile__col--details {
				display: flex;
				flex-direction: column;

				> :where(.kc-job-company-profile__name) {
					margin-block-end: 0;
				}

				> :where(.kc-job-company-profile__division) {
					margin-block-end: 1rem;
				}

				> :where(.kc-job-company-profile__address) {
					margin-block-end: 0;
				}

				> :where(.kc-job-company-profile__contact-methods) {
					margin-block-end: 0;
				}

				> :where(.kc-job-company-profile__website) {
					margin-block-end: 0;
				}
			}

			.kc-job__company-logo {
				display: block;
				max-inline-size: 250px;
				block-size: auto;
			}

			.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__division {
				color: var(--company-division-font-color);
				font-size: var(--company-division-font-size);
				font-weight: var(--company-division-font-weight);
				line-height: var(--company-division-line-height);
			}

			.kc-job-company-profile__contact-info {
				display: flex;
				flex-direction: column;
				padding-block: 0;
				padding-inline: 0;
			}

			.kc-job-company-profile__contact-methods {
				line-height: 1;
			}

			.kc-job-company-profile__website {
				line-height: 1;
			}

			.kc-job-company-profile__address {
				margin-block: 0;
				margin-inline: 0;
				font-style: normal;
				line-height: 1;
			}

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

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

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

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

	.kc-job-company-profile__description {
		margin-block: 1rem;
		color: var(--company-font-color);
		font-size: var(--global-body-small-font-size);
		line-height: var(--company-line-height);
	}
}

/* -- [03.27] Application Form -- */
.kc-job-form__wrapper {
	background-color: var(--form-background-color);

	.kc-job-form__inner {
		max-inline-size: var(--form-width);
		margin-inline: auto;
		padding: var(--form-padding);
		padding-block: 2rem;
	}

	.kc-job-form__title {
		scroll-margin-block-start: 2rem;
		margin: 0;
		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-block: 2rem 3rem;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 0;
		border: none;

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

	.kc-job-form__fieldset--application {
		display: grid;
		gap: 1rem;

		@media (width >= 992px) {
			grid-template-columns: 1fr;
		}
	}

	.kc-job-form__fieldset--application-questions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;

		> .kc-job-form__group {
			@media (width >= 992px) {
				inline-size: 50%;
			}
		}
	}

	.kc-job-form__row {
		display: grid;
		gap: 1rem;

		@media (width >= 768px) {
			&.kc-job-form__row--thirds {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}

			&.kc-job-form__row--documents {
				grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
			}

			&.kc-job-form__row--address {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (width >= 1100px) {
			&.kc-job-form__row--address {
				grid-template-columns: minmax(8rem, 1.2fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(8rem, 1fr) minmax(7rem, 0.85fr);
			}
		}
	}

	.kc-job-form__legend {
		margin-block-end: 1.5rem;
		color: var(--form-input-font-color);
		font-size: 1.3rem;
		line-height: 1.5;
		font-weight: 700;
	}

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

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

	.kc-job-form__choice-group {
		display: block;
		min-inline-size: 0;
		margin-block: 0;
		margin-inline: 0;
		padding-block: 0;
		padding-inline: 0;
		border: 0;
	}

	.kc-job-form__choice-question {
		float: none;
		display: block;
		margin-block-end: 0.65rem;
		line-height: 1.35;
	}

	.kc-job-form__choices {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.65rem 1.25rem;
	}

	.kc-job-form__choice-group--radio {
		@media (width <= 767px) {
			.kc-job-form__choices {
				flex-direction: column;
				align-items: flex-start;
				gap: 0.65rem;
			}
		}
	}

	.kc-job-form__choice {
		position: relative;
		display: inline-block;
		padding-inline-end: 1.25rem;

		.kc-job-form__input-choice {
			position: absolute;
			clip: rect(0 0 0 0);
			inline-size: 1px;
			block-size: 1px;
			margin: -1px;
			overflow: hidden;
			padding-block: 0;
			padding-inline: 0;
			border: 0;
		}

		.kc-job-form__input-choice:disabled + .kc-job-form__choice-label {
			cursor: not-allowed;
			opacity: 0.5;
		}

		.kc-job-form__choice-label {
			position: relative;
			display: inline-flex;
			align-items: center;
			min-block-size: 1rem;
			margin-block: 0;
			margin-inline: 1rem 0;
			padding-inline-start: 0.65rem;
			color: var(--form-input-font-color);
			font-size: 1rem;
			line-height: 2;
			cursor: pointer;
		}

		.kc-job-form__choice-label::before {
			content: "";
			position: absolute;
			inset-inline-start: -1rem;
			display: inline-block;
			inline-size: 1rem;
			block-size: 1rem;
			background-color: var(--form-input-background-color);
			border: 4px solid var(--form-input-background-color);
			box-shadow: 0 0 0 2px var(--form-input-border-color);
			transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		}

		.kc-job-form__choice-label:hover::before {
			background-image: linear-gradient(to bottom, var(--form-input-background-hover-color), var(--form-input-background-color) 50%);
		}

		.kc-job-form__input-choice:focus-visible + .kc-job-form__choice-label::before {
			box-shadow: 0 0 0 2px var(--form-input-border-color), 0 0 8px 4px var(--color-accessibility);
		}

		.kc-job-form__input-choice[type="radio"] + .kc-job-form__choice-label::before {
			border-radius: 50%;
		}

		.kc-job-form__input-choice[type="radio"]:checked + .kc-job-form__choice-label::before {
			background: var(--form-button-background-color);
		}

		.kc-job-form__input-choice[type="checkbox"]:checked + .kc-job-form__choice-label::after {
			content: "";
			position: absolute;
			inset-block-start: 0.25rem;
			inset-inline-start: -1.5rem;
			display: inline-block;
			inline-size: 0.8rem;
			block-size: 1.55rem;
			border-color: var(--form-button-background-color);
			border-style: solid;
			border-width: 0 5px 5px 0;
			transform: rotate(45deg);
		}
	}

	.kc-job-form__label {
		display: block;
		margin-block-end: 0.3rem;
		color: var(--form-input-font-color);
		font-size: 1rem;
		line-height: 1;
	}

	.kc-job-form__help {
		margin-block: 0.35rem 0;
		margin-inline: 0;
		color: var(--form-input-font-color);
		font-size: 0.9rem;
		line-height: 1.4;
	}

	.kc-job-form__input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		display: block;
		inline-size: 100%;
		padding-block: 0.5rem;
		padding-inline: 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, border-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-color: var(--form-input-border-hover-color);
		}

		&.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;
			inline-size: 2rem;
			block-size: 2rem;
		}

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

	.kc-job-form__button {
		padding-block: 0.8rem;
		padding-inline: 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);
		}

		&:disabled,
		&[aria-disabled="true"] {
			opacity: 0.65;
			cursor: not-allowed;
		}
	}

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

	.kc-job-form__error {
		font-size: 0.8rem;
		color: var(--color-red);
	}
}

/* -- [03.27.a] Applicant Communication Forms -- */
.kraken-applicant-communication-form-wrapper {
	background-color: var(--form-background-color, transparent);
}

.kraken-applicant-communication-form {
	box-sizing: border-box;
	max-inline-size: var(--form-width, 960px);
	margin-inline: auto;
	padding: var(--form-padding, 0 2rem);
	padding-block: 2rem;
	color: var(--global-font-color, #1f2937);

	* {
		box-sizing: border-box;
	}

	:is(h1, h2, h3) {
		margin-block: 0 0.75rem;
		margin-inline: 0;
		color: var(--global-heading-color, #111827);
		font-weight: var(--global-heading-font-weight, 700);
		line-height: var(--global-heading-line-height, 1.2);
	}

	h2 {
		font-size: var(--global-h2-font-size, 2.25rem);
	}

	h3 {
		font-size: var(--global-h3-font-size, 1.5rem);
	}

	p {
		margin-block: 0 0.9rem;
		margin-inline: 0;
		color: var(--global-font-color, #1f2937);
		font-size: var(--global-font-size, 1rem);
		line-height: var(--global-line-height, 1.3);
	}

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

	.kc-job-form__label {
		display: block;
		margin-block-end: 0.3rem;
		color: var(--form-input-font-color, #1f2937);
		font-size: 1rem;
		line-height: 1;
	}

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

		&:is(:hover, :focus) {
			background-color: var(--form-input-background-hover-color, #ffffff);
			color: var(--form-input-font-hover-color, #1f2937);
			border-color: var(--form-input-border-hover-color, #94a3b8);
		}
	}

	.kc-job-form__button {
		padding-block: 0.8rem;
		padding-inline: 1rem;
		background-color: var(--form-button-background-color, #1e40af);
		color: var(--form-button-font-color, #ffffff);
		border: none;
		border-radius: 0.2rem;
		font-size: var(--form-button-font-size, 1rem);
		font-weight: var(--form-button-font-weight, 400);
		line-height: var(--form-button-line-height, 1.2);
		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, #1d4ed8);
			color: var(--form-button-font-hover-color, #ffffff);
		}
	}

	&__title {
		margin-block-end: 1rem;
		color: var(--title-font-color, var(--global-heading-color, #111827));
		font-size: var(--title-font-size, var(--global-h1-font-size, 3.375rem));
		font-weight: var(--title-font-weight, var(--global-heading-font-weight, 700));
		line-height: var(--title-line-height, var(--global-heading-line-height, 1.2));
	}

	&__message,
	&__intro {
		margin-block: 0 1.75rem;
		color: var(--global-font-color, #1f2937);
		font-size: var(--global-font-size, 1rem);
		line-height: var(--global-line-height, 1.3);
	}

	&__message {
		:last-child {
			margin-block-end: 0;
		}

		a {
			color: var(--form-button-background-color, #1e40af);
			text-decoration: underline;
			text-underline-offset: 0.12em;
		}

		&--error {
			color: var(--form-input-error, #f25757);
		}
	}

	&__form {
		margin-block: 0;
		margin-inline: 0;
	}

	&__attachments {
		margin-block: 1.5rem;
		margin-inline: 0;

		:last-child {
			margin-block-end: 0;
		}

		a {
			display: block;
			margin-block-end: 0.5rem;
			color: var(--form-button-background-color, #1e40af);
			text-decoration: underline;
			text-underline-offset: 0.12em;
		}
	}

	&__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.75rem;
		margin-block-start: 1.5rem;
	}
}

.kc-job-form__submission-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 1.5rem;
	padding-inline: 1.5rem;
	background-color: rgba(15, 23, 42, 0.78);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.kc-job-form__submission-overlay--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.kc-job-form__submission-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	inline-size: min(100%, 28rem);
	padding-block: 2rem;
	padding-inline: 2rem;
	background-color: #ffffff;
	color: #111827;
	border-radius: 0.4rem;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28);
	text-align: center;
}

.kc-job-form__submission-panel:focus:not(:focus-visible) {
	outline: none;
}

.kc-job-form__submission-spinner {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-end: 1.25rem;
	border: 0.35rem solid rgba(17, 24, 39, 0.16);
	border-block-start-color: var(--form-button-background-color);
	border-radius: 50%;
	animation: kc-job-form-submission-spin 0.8s linear infinite;
}

.kc-job-form__submission-title {
	margin-block: 0 0.5rem;
	margin-inline: 0;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1.2;
}

.kc-job-form__submission-message {
	margin-block: 0;
	margin-inline: 0;
	color: #4b5563;
	font-size: 1rem;
	line-height: 1.5;
}

body.kc-job-form__submitting {
	overflow: hidden;
}

@keyframes kc-job-form-submission-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -- [03.28] Location -- */
.kc-job-location {
	.kc-job-location__inner {
		container: kc-job-location / inline-size;

		.kc-job-location__title {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			margin-block: 1.25rem 0.75rem;
			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 {
				--kc-icon: var(--location-svg);
			}
		}

		.kc-job-location__item {
			display: grid;
			grid-template-columns: 6rem minmax(0, 1fr);
			gap: 0.75rem;
			align-items: start;
			margin-block-end: 1rem;

			@container kc-job-location (inline-size >= 24rem) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 1.5rem;
			}

			.kc-job-location__col {
				&.kc-job-location__col--map {
					inline-size: 100%;

					.kc-job-location__map {
						display: block;
						inline-size: 100%;
						block-size: auto;
						aspect-ratio: 1;
						border: 0;
						border-radius: 6px;
					}
				}

				&.kc-job-location__col--location {
					min-inline-size: 0;

					.kc-job-location__company-name {
						display: block;
						margin-block-end: 0.5rem;
						color: var(--location-address-font-color);
						font-size: 0.9rem;
						font-weight: 700;
					}

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

		.kc-job-location__button {
			padding-block: 0.5rem;
			padding-inline: 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);
			}
		}
	}

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

		.kc-job-location__modal-content {
			inline-size: 90vw;
			max-inline-size: 800px;
			min-block-size: 600px;
			background-color: #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-block: 0.75rem;
			padding-inline: 1rem;
		}

		.kc-job-location__modal-title {
			margin-block: 0;
			margin-inline: 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-block: 0;
			padding-inline: 0;
			display: flex;
			flex-direction: column;
		}

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

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

		.kc-job-location__modal-close:hover {
			background-color: #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-block: 0;
			margin-inline: 0;
			padding-block: 0;
			padding-inline: 0;
		}

		.kc-job-pagination__link {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			inline-size: 2rem;
			block-size: 2rem;
			color: var(--pagination-font-color);
			border-radius: 1rem;
			font-size: 1rem;
			line-height: 1;
			letter-spacing: 0;
			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);
			}

			&.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);
			}

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

/* -- Shared Rich Text Blocks -- */
:is(
	.kc-job-status .kc-job-status__inner,
	.kc-job-disclaimer .kc-job-disclaimer__inner,
	.kc-job-message .kc-job-message__inner
) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--kc-rich-heading-font-color);
	font-size: var(--kc-rich-heading-font-size);
	font-weight: var(--kc-rich-heading-font-weight);
	line-height: var(--kc-rich-heading-line-height);
	margin: 0 0 0.5rem 0;
}

:is(
	.kc-job-status .kc-job-status__inner,
	.kc-job-disclaimer .kc-job-disclaimer__inner,
	.kc-job-message .kc-job-message__inner
) p {
	color: var(--kc-rich-body-font-color);
	font-size: var(--kc-rich-body-font-size);
	font-weight: var(--kc-rich-body-font-weight);
}

:is(
	.kc-job-status .kc-job-status__inner,
	.kc-job-disclaimer .kc-job-disclaimer__inner,
	.kc-job-message .kc-job-message__inner
) :is(ul, ol) {
	color: var(--kc-rich-list-font-color);
	font-size: var(--kc-rich-list-font-size);
	font-weight: var(--kc-rich-list-font-weight);
}

/* -- [03.30] Job Status Message -- */
.kc-job-status {
	--kc-job-status-background-color: var(--message-closed-background-color);
	--kc-job-status-font-color: var(--message-closed-font-color);
	--kc-rich-heading-font-color: var(--kc-job-status-font-color);
	--kc-rich-heading-font-size: var(--message-heading-font-size);
	--kc-rich-heading-font-weight: var(--message-heading-font-weight);
	--kc-rich-heading-line-height: var(--message-heading-line-height);
	--kc-rich-body-font-color: var(--kc-job-status-font-color);
	--kc-rich-body-font-size: var(--message-font-size);
	--kc-rich-body-font-weight: var(--message-font-weight);
	--kc-rich-list-font-color: var(--kc-job-status-font-color);
	--kc-rich-list-font-size: var(--message-font-size);
	--kc-rich-list-font-weight: var(--message-font-weight);

	&.kc-job-status--expired {
		--kc-job-status-background-color: var(--message-expired-background-color);
		--kc-job-status-font-color: var(--message-expired-font-color);
	}

	&.kc-job-status--filled {
		--kc-job-status-background-color: var(--message-filled-background-color);
		--kc-job-status-font-color: var(--message-filled-font-color);
	}

	.kc-job-status__inner {
		color: var(--kc-job-status-font-color);
		background-color: var(--kc-job-status-background-color);
		inline-size: var(--message-width);
		margin-block: 2rem;
		margin-inline: auto;
		padding: var(--message-padding);
		padding-block: 1rem;
		border-radius: 0.5rem;
	}
}

/* -- [03.31] Disclaimer Message -- */
.kc-job-disclaimer {
	--kc-rich-heading-font-color: var(--disclaimer-heading-font-color);
	--kc-rich-heading-font-size: var(--disclaimer-heading-font-size);
	--kc-rich-heading-font-weight: var(--disclaimer-heading-font-weight);
	--kc-rich-heading-line-height: var(--disclaimer-heading-line-height);
	--kc-rich-body-font-color: var(--disclaimer-font-color);
	--kc-rich-body-font-size: var(--disclaimer-font-size);
	--kc-rich-body-font-weight: var(--disclaimer-font-weight);
	--kc-rich-list-font-color: var(--disclaimer-font-color);
	--kc-rich-list-font-size: var(--disclaimer-font-size);
	--kc-rich-list-font-weight: var(--disclaimer-font-weight);
	max-inline-size: var(--disclaimer-width);
	margin-inline: auto;

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

/* -- [03.32] Messages -- */
.kc-job-message {
	--kc-rich-heading-font-color: var(--message-heading-font-color);
	--kc-rich-heading-font-size: var(--message-heading-font-size);
	--kc-rich-heading-font-weight: var(--message-heading-font-weight);
	--kc-rich-heading-line-height: var(--message-heading-line-height);
	--kc-rich-body-font-color: var(--message-font-color);
	--kc-rich-body-font-size: var(--message-font-size);
	--kc-rich-body-font-weight: var(--message-font-weight);
	--kc-rich-list-font-color: var(--message-font-color);
	--kc-rich-list-font-size: var(--message-font-size);
	--kc-rich-list-font-weight: var(--message-font-weight);

	.kc-job-message__inner {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-block: 1rem;
		padding-inline: 1rem;
	}

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

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

/* -- [03.33] Archive Title -- */
.kc-archive__title {
	margin-block: 1rem;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 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,
.kc-sr-only.focusable:not(:focus):not(:focus-within) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding-block: 0;
	padding-inline: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kc-sr-only:focus,
.kc-sr-only:focus-within,
.kc-sr-only.focusable:focus,
.kc-sr-only.focusable:focus-within {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin-block: 0;
	margin-inline: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}