/**
 * Refreshed WP JobSearch job-detail view.
 */

.me-job-detail-page .careerfy-main-content,
.me-job-detail-page .jobsearch-main-content {
	margin: 0;
	padding: 0;
}

.me-job-detail {
	background: var(--me-color-canvas);
}

.me-job-hero {
	position: relative;
	padding: 30px 0 clamp(56px, 7vw, 82px);
	background:
		radial-gradient(circle at 86% 22%, rgba(31, 168, 102, .2), transparent 29%),
		linear-gradient(135deg, #111a38, #24366d);
	color: #fff;
	overflow: hidden;
}

.me-job-hero::after {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 48px 48px;
	content: "";
	pointer-events: none;
}

.me-job-hero .me-container {
	position: relative;
	z-index: 1;
}

.me-job-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 38px;
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
}

.me-job-breadcrumb a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.me-job-breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.me-job-hero__grid {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	align-items: start;
	gap: clamp(24px, 4vw, 38px);
}

.me-job-hero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(5, 10, 28, .2);
	overflow: hidden;
}

.me-job-hero__logo img {
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
}

.me-job-hero__logo > span {
	color: var(--me-color-primary);
	font-size: 24px;
	font-weight: 700;
}

.me-job-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 14px;
}

.me-job-hero__badges .me-badge {
	text-decoration: none;
}

.me-job-hero h1 {
	max-width: 920px;
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.08;
}

.me-job-hero__company {
	margin: 13px 0 0;
	color: #9ae8bc;
	font-size: 1.05rem;
	font-weight: 650;
}

.me-job-hero__company a {
	color: inherit;
	text-decoration: none;
}

.me-job-hero__company a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.me-job-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 13px 24px;
	margin: 24px 0 0;
	padding: 0;
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
	list-style: none;
}

.me-job-hero__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	list-style: none;
}

.me-job-hero__meta li::before {
	display: none;
}

.me-job-hero__meta a {
	color: inherit;
	text-decoration: none;
}

.me-job-hero__meta a:hover {
	color: #fff;
	text-decoration: underline;
}

.me-job-detail__body {
	padding: clamp(44px, 7vw, 80px) 0 clamp(72px, 9vw, 112px);
}

.me-job-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
	grid-template-areas:
		"main apply"
		"main info";
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: clamp(26px, 4vw, 42px);
	row-gap: 18px;
}

.me-job-detail__main {
	grid-area: main;
	display: grid;
	min-width: 0;
	gap: 24px;
}

.me-job-summary,
.me-job-description,
.me-job-skills,
.me-job-attachments,
.me-job-apply,
.me-job-company,
.me-job-location {
	border: 1px solid var(--me-color-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--me-shadow-sm);
}

.me-job-summary,
.me-job-description,
.me-job-skills,
.me-job-attachments {
	padding: clamp(25px, 4vw, 38px);
}

.me-job-section-heading {
	margin-bottom: 24px;
}

.me-job-section-heading h2,
.me-job-attachments h2,
.me-job-skills h2 {
	margin: 0;
	font-size: clamp(1.45rem, 3vw, 1.85rem);
	line-height: 1.2;
}

.me-job-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid var(--me-color-border);
	border-radius: 12px;
	background: var(--me-color-border);
	overflow: hidden;
}

.me-job-facts > div {
	min-width: 0;
	padding: 17px 18px;
	background: #fff;
}

.me-job-facts dt {
	margin: 0 0 4px;
	color: var(--me-color-muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.me-job-facts dd {
	margin: 0;
	color: var(--me-color-brand);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.me-job-facts dd a {
	color: inherit;
}

.me-job-custom-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.me-job-custom-fields li {
	margin: 0;
	padding: 14px;
	border-radius: 10px;
	background: var(--me-color-canvas);
	list-style: none;
}

.me-job-custom-fields li::before {
	display: none;
}

.me-job-description__content {
	color: #30394a;
	font-size: 1rem;
	line-height: 1.78;
	overflow-wrap: anywhere;
}

.me-job-description__content > :first-child {
	margin-top: 0;
}

.me-job-description__content > :last-child {
	margin-bottom: 0;
}

.me-job-description__content :where(h2, h3, h4) {
	margin: 1.65em 0 .65em;
	color: var(--me-color-brand);
	line-height: 1.3;
}

.me-job-description__content h2 {
	font-size: 1.45rem;
}

.me-job-description__content h3 {
	font-size: 1.2rem;
}

.me-job-description__content ul,
.me-job-description__content ol {
	margin: 1rem 0;
	padding-left: 1.35rem;
}

.me-job-description__content li {
	margin-bottom: .45rem;
}

.me-job-skills ul,
.me-job-attachments ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.me-job-skills li,
.me-job-attachments li {
	margin: 0;
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--me-color-brand-soft);
	color: var(--me-color-brand);
	font-size: 13px;
	font-weight: 600;
	list-style: none;
}

.me-job-skills li::before,
.me-job-attachments li::before {
	display: none;
}

.me-job-detail__apply-column {
	grid-area: apply;
	position: sticky;
	top: 24px;
}

.me-job-detail__sidebar {
	display: grid;
	grid-area: info;
	gap: 18px;
}

.me-job-apply,
.me-job-company,
.me-job-location {
	padding: 25px;
}

.me-job-apply__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--me-color-primary-soft);
	color: var(--me-color-primary-dark);
	font-size: 20px;
	font-weight: 700;
}

.me-job-apply h2,
.me-job-company h2,
.me-job-location h2 {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
}

.me-job-apply > p,
.me-job-company > p,
.me-job-location > p {
	margin: 10px 0 20px;
	color: var(--me-color-muted);
	font-size: 14px;
}

.me-job-apply__method {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	margin: -4px 0 18px;
	padding: 11px 12px;
	border: 1px solid var(--me-color-border);
	border-radius: 10px;
	background: var(--me-color-canvas);
}

.me-job-apply__method > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: #fff;
	color: var(--me-color-primary-dark);
	font-size: 16px;
	font-weight: 700;
}

.me-job-apply__method small,
.me-job-apply__method strong {
	display: block;
}

.me-job-apply__method small {
	margin-bottom: 2px;
	color: var(--me-color-muted);
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.me-job-apply__method strong {
	color: var(--me-color-brand);
	font-size: 13px;
	line-height: 1.35;
}

.me-job-apply__actions {
	display: grid;
	gap: 9px;
}

.me-job-apply__actions a,
.me-job-apply__actions button,
.me-job-apply .jobsearch-applyjob-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--me-color-border-strong);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--me-color-brand);
	font-size: 14px;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.me-job-apply__actions .jobsearch-applyjob-btn,
.me-job-apply__actions .jobsearch-job-apply-btn-con {
	border-color: var(--me-color-primary);
	background: var(--me-color-primary);
	color: #fff;
}

.me-job-apply__actions .jobsearch-application-ending {
	display: block;
	margin: 10px 0 0;
	color: var(--me-color-muted);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

.me-job-apply__actions .jobsearch-applywith-title {
	margin-top: 17px;
	color: var(--me-color-muted);
	font-size: 11px;
	font-weight: 650;
	text-align: center;
	text-transform: uppercase;
}

.me-job-apply__actions .jobsearch-easy-apply-txt {
	margin: 5px 0 10px;
	color: var(--me-color-muted);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

.me-job-apply__actions .jobsearch_apply_job_wrap > ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.me-job-apply__actions .jobsearch_apply_job_wrap > ul > li {
	margin: 0;
	list-style: none;
}

.me-job-apply__actions .jobsearch_apply_job_wrap > ul > li::before {
	display: none;
}

.me-job-apply__actions .jobsearch_apply_job_wrap > ul a {
	min-height: 44px;
	padding: 9px 10px;
	border-color: var(--me-color-border-strong);
	background: #fff;
	color: var(--me-color-brand);
	font-size: 12px;
}

.me-job-apply__actions a:hover,
.me-job-apply__actions button:hover {
	border-color: var(--me-color-primary-dark);
	background: var(--me-color-primary-dark);
	color: #fff;
}

.me-job-apply__shortlist {
	margin-top: 10px;
}

.me-job-company__top {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.me-job-company__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border: 1px solid var(--me-color-border);
	border-radius: 11px;
	background: #fff;
	overflow: hidden;
}

.me-job-company__logo img {
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
}

.me-job-company__logo span {
	color: var(--me-color-primary);
	font-weight: 700;
}

.me-job-company .me-eyebrow {
	margin-bottom: 3px;
}

.me-job-company .me-button {
	width: 100%;
}

.me-job-location a {
	color: var(--me-color-action);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.me-job-location a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.me-job-safety {
	padding: 18px 19px;
	border: 1px solid #f2d8a8;
	border-radius: 12px;
	background: var(--me-color-warning-soft);
}

.me-job-safety strong {
	color: #8b5c17;
	font-size: 13px;
}

.me-job-safety p {
	margin: 5px 0 0;
	color: #725123;
	font-size: 12px;
	line-height: 1.55;
}

.me-job-related {
	margin-top: clamp(48px, 7vw, 80px);
}

.me-job-related__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.me-job-related__heading h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.me-job-related__heading > a {
	color: var(--me-color-action);
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.me-job-related__list {
	border: 1px solid var(--me-color-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--me-shadow-sm);
	overflow: hidden;
}

.me-job-related__list .me-job-card:last-child {
	border-bottom: 0;
}

@media (max-width: 960px) {
	.me-job-detail__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"apply"
			"main"
			"info";
		grid-template-rows: auto;
		gap: 24px;
	}

	.me-job-detail__apply-column {
		position: static;
	}

	.me-job-detail__sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.me-job-apply,
	.me-job-safety {
		grid-column: 1 / -1;
	}
}

@media (max-width: 720px) {
	.me-job-hero {
		padding-top: 22px;
	}

	.me-job-breadcrumb {
		margin-bottom: 27px;
	}

	.me-job-hero__grid {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 17px;
	}

	.me-job-hero__logo {
		width: 76px;
		height: 76px;
		border-radius: 14px;
	}

	.me-job-hero h1 {
		font-size: clamp(1.7rem, 9vw, 2.35rem);
	}

	.me-job-hero__meta {
		grid-column: 1 / -1;
	}

	.me-job-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.me-job-detail__sidebar {
		grid-template-columns: 1fr;
	}

	.me-job-apply,
	.me-job-safety {
		grid-column: auto;
	}

	.me-job-related__heading {
		align-items: start;
		flex-direction: column;
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.me-job-hero__grid {
		grid-template-columns: 1fr;
	}

	.me-job-hero__logo {
		width: 68px;
		height: 68px;
	}

	.me-job-facts,
	.me-job-custom-fields {
		grid-template-columns: 1fr;
	}
}