/**
 * APEX RecSite Builder — Job Card Base Styles
 *
 * Base styles for all job card variants: list, grid, horizontal, and table.
 * The compact variant lives in layouts.css (built there alongside the sort bar
 * and filter bar components it shares visual language with).
 *
 * Colours reference CSS custom properties injected by design-tokens.php so
 * they automatically reflect each agency's brand configuration.
 *
 * @package ApexRecSiteBuilderCore
 * @since   1.0.0
 */

/* -----------------------------------------------------------------------
   Listing container
   ----------------------------------------------------------------------- */

.apex-job-listings {
	display: flex;
	flex-direction: column;
	gap: calc( var(--apex-sp, 8px) * 1.5 );
}

/* Grid layout */
.apex-job-listings--grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: calc( var(--apex-sp, 8px) * 2 );
}

.apex-job-listings--cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

@media ( max-width: 768px ) {
	.apex-job-listings--grid,
	.apex-job-listings--cols-3 {
		grid-template-columns: 1fr;
	}
}

/* Count display */
.apex-job-listings-count {
	font-size: 0.875rem;
	color: var(--apex-text-muted, #45474c);
	margin-bottom: calc( var(--apex-sp, 8px) * 1.5 );
	display: block;
}

/* Empty state */
.apex-job-listings-empty {
	padding: calc( var(--apex-sp, 8px) * 4 ) 0;
	text-align: center;
	color: var(--apex-text-muted, #45474c);
	font-size: 0.95rem;
}

/* Error message */
.apex-error {
	padding: calc( var(--apex-sp, 8px) * 2 );
	color: #c0392b;
	background: #fff5f5;
	border: 1px solid #ffd0d0;
	border-radius: var(--apex-radius, 4px);
	font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
   Card entrance animation
   ----------------------------------------------------------------------- */

@keyframes apex-card-in {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* -----------------------------------------------------------------------
   Base card — shared by list, grid, horizontal
   ----------------------------------------------------------------------- */

.apex-job-card {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.apex-job-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.10 );
	transform: translateY( -2px );
	border-color: rgba( 181, 16, 107, 0.2 );
}

/* Staggered entrance animation on page load & AJAX refresh */
@media ( prefers-reduced-motion: no-preference ) {
	.apex-job-listings .apex-job-card {
		animation: apex-card-in 0.25s ease both;
	}

	.apex-job-listings .apex-job-card:nth-child(2) { animation-delay:  40ms; }
	.apex-job-listings .apex-job-card:nth-child(3) { animation-delay:  80ms; }
	.apex-job-listings .apex-job-card:nth-child(4) { animation-delay: 120ms; }
	.apex-job-listings .apex-job-card:nth-child(5) { animation-delay: 160ms; }
}

/* -----------------------------------------------------------------------
   Card body & header
   ----------------------------------------------------------------------- */

.apex-job-card__body {
	padding: 20px 24px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.apex-job-card__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.apex-job-card__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--apex-dark, #050e1d);
}

.apex-job-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.apex-job-card__title a:hover {
	color: var(--apex-primary, #b5106b);
}

/* Job type label above the title */
.apex-job-card__type {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--apex-text-muted, #45474c);
	margin-bottom: 2px;
}

/* -----------------------------------------------------------------------
   Meta row  (location · salary · remote · exp badges)
   ----------------------------------------------------------------------- */

.apex-job-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-size: 0.875rem;
}

.apex-job-card__location {
	color: var(--apex-text-muted, #45474c);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Pin icon via inline SVG data-URI */
.apex-job-card__location::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16' fill='none'%3E%3Cpath d='M6 1a5 5 0 0 1 5 5c0 3.5-5 9-5 9S1 9.5 1 6a5 5 0 0 1 5-5z' stroke='%2345474c' stroke-width='1.3'/%3E%3Ccircle cx='6' cy='6' r='1.8' stroke='%2345474c' stroke-width='1.3'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
	opacity: 0.7;
}

.apex-job-card__salary {
	color: var(--apex-primary, #b5106b);
	font-weight: 600;
	font-size: 0.875rem;
}

/* Work-style badges */
.apex-job-card__remote {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 0.73rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.apex-job-card__remote--remote {
	background: #edfcf2;
	color: #16803d;
}

.apex-job-card__remote--hybrid {
	background: #fef9ec;
	color: #b45309;
}

.apex-job-card__remote--onsite {
	background: #eff6ff;
	color: #3b5bdb;
}

/* Experience level badge */
.apex-job-card__exp {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 0.73rem;
	font-weight: 600;
	background: var(--apex-light, #f7f9fb);
	color: var(--apex-text-muted, #45474c);
	border: 1px solid var(--apex-border, #e0e3e5);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
   Excerpt
   ----------------------------------------------------------------------- */

.apex-job-card__excerpt {
	font-size: 0.875rem;
	color: var(--apex-text-muted, #45474c);
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -----------------------------------------------------------------------
   Skill tags
   ----------------------------------------------------------------------- */

.apex-job-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.apex-skill-tag {
	display: inline-block;
	padding: 3px 10px;
	background: var(--apex-light, #f7f9fb);
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: 4px;
	font-size: 0.75rem;
	color: var(--apex-dark, #050e1d);
	font-weight: 500;
}

/* -----------------------------------------------------------------------
   Card footer  (date + action buttons)
   ----------------------------------------------------------------------- */

.apex-job-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 24px 16px;
	border-top: 1px solid var(--apex-border, #e0e3e5);
	margin-top: auto;
}

.apex-job-card__date {
	font-size: 0.8rem;
	color: var(--apex-text-muted, #45474c);
}

.apex-job-card__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------- */

.apex-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------
   Buttons  (frontend-only; wizard buttons live in wizard.css)
   ----------------------------------------------------------------------- */

.apex-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--apex-radius, 4px);
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.apex-btn--primary {
	background: var(--apex-primary, #b5106b);
	color: #ffffff;
	border-color: var(--apex-primary, #b5106b);
}

.apex-btn--primary:hover {
	filter: brightness( 1.1 );
	color: #ffffff;
}

.apex-btn--outline {
	background: transparent;
	color: var(--apex-dark, #050e1d);
	border-color: var(--apex-border, #e0e3e5);
}

.apex-btn--outline:hover {
	border-color: var(--apex-primary, #b5106b);
	color: var(--apex-primary, #b5106b);
}

.apex-btn--sm {
	padding: 5px 12px;
	font-size: 0.8rem;
}

.apex-btn--lg {
	padding: 12px 28px;
	font-size: 1rem;
}

/* -----------------------------------------------------------------------
   Horizontal layout
   ----------------------------------------------------------------------- */

.apex-job-card--horizontal {
	flex-direction: row;
	align-items: stretch;
}

.apex-job-card--horizontal .apex-job-card__body {
	flex: 1;
	min-width: 0;
}

.apex-job-card--horizontal .apex-job-card__footer {
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	border-top: none;
	border-left: 1px solid var(--apex-border, #e0e3e5);
	padding: 20px 20px 18px;
	min-width: 148px;
	gap: 8px;
	margin-top: 0;
}

.apex-job-card--horizontal .apex-job-card__date {
	order: 1;
	margin-top: auto;
}

.apex-job-card--horizontal .apex-job-card__actions {
	flex-direction: column;
	width: 100%;
}

.apex-job-card--horizontal .apex-job-card__actions .apex-btn {
	width: 100%;
	justify-content: center;
}

@media ( max-width: 600px ) {
	.apex-job-card--horizontal {
		flex-direction: column;
	}

	.apex-job-card--horizontal .apex-job-card__footer {
		border-left: none;
		border-top: 1px solid var(--apex-border, #e0e3e5);
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		min-width: 0;
		margin-top: 0;
	}

	.apex-job-card--horizontal .apex-job-card__actions {
		flex-direction: row;
		width: auto;
	}

	.apex-job-card--horizontal .apex-job-card__actions .apex-btn {
		width: auto;
	}
}

/* -----------------------------------------------------------------------
   Table layout
   ----------------------------------------------------------------------- */

/**
 * The widget renders a <table> + <thead> wrapper, with the normal
 * .apex-job-listings as a <tbody>. Each card is a <tr>.
 * The outer .apex-jobs-table-wrap handles horizontal scroll on small screens.
 */

.apex-jobs-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
}

.apex-jobs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

/* Column header row */
.apex-jobs-table__head th {
	padding: 10px 14px;
	text-align: left;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--apex-text-muted, #45474c);
	background: var(--apex-light, #f7f9fb);
	border-bottom: 2px solid var(--apex-border, #e0e3e5);
	white-space: nowrap;
}

.apex-jobs-table__head th:last-child {
	text-align: right;
}

/* Table row card */
.apex-job-card--table {
	border: none;
	border-radius: 0;
	transition: background-color 0.15s ease;
}

.apex-job-card--table:hover {
	background: var(--apex-light, #f7f9fb);
	transform: none;
	box-shadow: none;
	border: none;
}

.apex-jobs-table__cell {
	padding: 13px 14px;
	border-bottom: 1px solid var(--apex-border, #e0e3e5);
	vertical-align: middle;
}

/* Remove border from last row */
.apex-jobs-table tbody .apex-job-card--table:last-child .apex-jobs-table__cell {
	border-bottom: none;
}

/* Title cell */
.apex-jobs-table__cell--title {
	min-width: 200px;
}

.apex-jobs-table__title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.apex-jobs-table__cell--title .apex-job-card__title-link {
	color: var(--apex-dark, #050e1d);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: color 0.15s ease;
}

.apex-jobs-table__cell--title .apex-job-card__title-link:hover {
	color: var(--apex-primary, #b5106b);
}

/* Meta cell (location & salary stacked) */
.apex-jobs-table__cell--meta {
	white-space: nowrap;
}

.apex-jobs-table__cell--meta .apex-job-card__salary {
	display: block;
	font-weight: 600;
	font-size: 0.8rem;
}

.apex-jobs-table__cell--meta .apex-job-card__location {
	font-size: 0.8rem;
	display: block;
}

.apex-jobs-table__cell--meta .apex-job-card__location::before {
	display: none; /* pin icon clutters table view */
}

/* Type & remote cell */
.apex-jobs-table__cell--type {
	white-space: nowrap;
}

.apex-jobs-table__cell--type .apex-job-card__remote,
.apex-jobs-table__cell--type .apex-job-card__type {
	display: inline-block;
	margin: 0 4px 0 0;
}

/* Date cell */
.apex-jobs-table__cell--date {
	white-space: nowrap;
	color: var(--apex-text-muted, #45474c);
	font-size: 0.8rem;
}

/* Action cell */
.apex-jobs-table__cell--action {
	text-align: right;
	white-space: nowrap;
}

/* Priority left-border accent on table rows */
.apex-job-card--table.apex-job-card--priority .apex-jobs-table__cell:first-child {
	box-shadow: inset 3px 0 0 0 var(--apex-primary, #b5106b);
}

/* Responsive: hide secondary columns on small screens */
@media ( max-width: 768px ) {
	.apex-jobs-table__head th:nth-child(3),
	.apex-jobs-table__head th:nth-child(4),
	.apex-jobs-table__cell--type,
	.apex-jobs-table__cell--date {
		display: none;
	}
}

/* -----------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------- */

.apex-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: calc( var(--apex-sp, 8px) * 3 );
	justify-content: center;
}

.apex-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	color: var(--apex-dark, #050e1d);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.apex-pagination .page-numbers:hover {
	border-color: var(--apex-primary, #b5106b);
	color: var(--apex-primary, #b5106b);
}

.apex-pagination .page-numbers.current {
	background: var(--apex-primary, #b5106b);
	border-color: var(--apex-primary, #b5106b);
	color: #ffffff;
	cursor: default;
}

.apex-pagination .page-numbers.prev,
.apex-pagination .page-numbers.next {
	font-size: 1rem;
}

/* -----------------------------------------------------------------------
   Load More button
   ----------------------------------------------------------------------- */

.apex-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: calc( var(--apex-sp, 8px) * 3 );
}

.apex-load-more {
	min-width: 180px;
	justify-content: center;
}

/* -----------------------------------------------------------------------
   Full-width button modifier
   ----------------------------------------------------------------------- */

.apex-btn--full {
	width: 100%;
	justify-content: center;
}

/* -----------------------------------------------------------------------
   Single job listing page
   ----------------------------------------------------------------------- */

.apex-job-single-page {
	background: var(--apex-light, #f7f9fb);
	min-height: 60vh;
	padding: calc( var(--apex-sp, 8px) * 4 ) 0 calc( var(--apex-sp, 8px) * 10 );
}

.apex-job-single-page__container {
	max-width: var(--apex-max-w, 1280px);
	margin: 0 auto;
	padding: 0 calc( var(--apex-sp, 8px) * 2.5 );
}

/* Back navigation */
.apex-job-single__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: calc( var(--apex-sp, 8px) * 3 );
	font-size: 0.875rem;
}

.apex-job-single__back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var(--apex-text-muted, #45474c);
	text-decoration: none;
	transition: color 0.15s ease;
}

.apex-job-single__back-link:hover {
	color: var(--apex-primary, #b5106b);
}

.apex-job-single__breadcrumb-sep {
	color: var(--apex-border, #e0e3e5);
}

.apex-job-single__breadcrumb-sector {
	color: var(--apex-text-muted, #45474c);
}

/* Two-column layout */
.apex-job-single__layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 28px;
	align-items: start;
}

/* ─── Main column ─── */

/* Grid item min-width: 0 prevents content from blowing out the grid track */
.apex-job-single__main {
	min-width: 0;
}

.apex-job-single {
	background: #fff;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	overflow: hidden;
}

/* Priority bar — gradient strip at top when vacancy is priority */
.apex-job-single__priority-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 28px;
	background: linear-gradient( 135deg, var(--apex-primary, #b5106b) 0%, var(--apex-accent, #ff55a4) 100% );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

/* Header */
.apex-job-single__header {
	padding: 28px 32px 22px;
	border-bottom: 1px solid var(--apex-border, #e0e3e5);
}

.apex-job-single__type-label {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apex-primary, #b5106b);
	margin-bottom: 8px;
}

.apex-job-single__title {
	margin: 0 0 16px;
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--apex-dark, #050e1d);
	font-family: var(--apex-font-head, inherit);
}

/* Meta pills row */
.apex-job-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 14px;
}

.apex-job-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.875rem;
	color: var(--apex-text-muted, #45474c);
}

.apex-job-meta__item--salary {
	color: var(--apex-primary, #b5106b);
	font-weight: 600;
}

.apex-job-meta__item--location::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none'%3E%3Cpath d='M7 1a6 6 0 0 1 6 6c0 4.2-6 10-6 10S1 11.2 1 7a6 6 0 0 1 6-6z' stroke='%2345474c' stroke-width='1.3'/%3E%3Ccircle cx='7' cy='7' r='2' stroke='%2345474c' stroke-width='1.3'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
	opacity: 0.7;
}

.apex-job-meta__item--remote {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 600;
}

.apex-job-meta__item--remote-remote { background: #edfcf2; color: #16803d; }
.apex-job-meta__item--remote-hybrid { background: #fef9ec; color: #b45309; }
.apex-job-meta__item--remote-onsite { background: #eff6ff; color: #3b5bdb; }

.apex-job-meta__item--exp,
.apex-job-meta__item--ref {
	background: var(--apex-light, #f7f9fb);
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.775rem;
	font-weight: 500;
}

/* Skills tags in header */
.apex-job-single__skills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

/* Content area */
.apex-job-single__content {
	padding: 28px 32px 24px;
}

/* Prose styling for the_content output */
.apex-job-single__description {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--apex-text, #191c1e);
}

.apex-job-single__description > * + * { margin-top: 1em; }

.apex-job-single__description h2,
.apex-job-single__description h3,
.apex-job-single__description h4 {
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	font-family: var(--apex-font-head, inherit);
}

.apex-job-single__description h2 { font-size: 1.2rem; }
.apex-job-single__description h3 { font-size: 1.05rem; }
.apex-job-single__description h4 { font-size: 0.95rem; }

.apex-job-single__description ul,
.apex-job-single__description ol {
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.apex-job-single__description strong { font-weight: 700; color: var(--apex-dark, #050e1d); }

.apex-job-single__description a {
	color: var(--apex-primary, #b5106b);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Benefits sub-section */
.apex-job-single__benefits {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--apex-border, #e0e3e5);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--apex-text, #191c1e);
}

/* Section headings within article */
.apex-job-single__section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin: 0 0 16px;
	font-family: var(--apex-font-head, inherit);
}

.apex-job-single__section-title svg {
	flex-shrink: 0;
	color: var(--apex-primary, #b5106b);
}

/* Apply form section */
.apex-job-single__apply-form {
	padding: 28px 32px;
	border-top: 1px solid var(--apex-border, #e0e3e5);
	background: var(--apex-light, #f7f9fb);
}

.apex-job-single__apply-intro {
	margin: -8px 0 20px;
	font-size: 0.875rem;
	color: var(--apex-text-muted, #45474c);
}

.apex-job-single__apply-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* ─── Sidebar ─── */

.apex-job-single__sidebar {
	position: sticky;
	top: calc( 64px + 24px ); /* 64px = sticky header height */
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: calc( 100vh - 64px - 48px );
	overflow-y: auto;
}

/* Base sidebar card */
.apex-sidebar-card {
	background: #fff;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	padding: 20px 22px;
}

/* Apply CTA card — accented border */
.apex-sidebar-card--apply {
	border-color: var(--apex-primary, #b5106b);
	border-width: 2px;
	text-align: left;
	padding: 22px;
	position: relative;
	overflow: hidden;
}

.apex-sidebar-card--apply::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 135deg, rgba(181,16,107,0.04) 0%, rgba(255,85,164,0.04) 100% );
	pointer-events: none;
}

.apex-sidebar-card__priority-dot {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--apex-primary, #b5106b);
	box-shadow: 0 0 0 3px rgba(181,16,107,0.15);
}

.apex-sidebar-card__apply-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin-bottom: 12px;
	line-height: 1.35;
}

.apex-sidebar-card__deadline {
	margin: 10px 0 0;
	font-size: 0.78rem;
	color: var(--apex-text-muted, #45474c);
	text-align: center;
}

/* Card section title */
.apex-sidebar-card__title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apex-text-muted, #45474c);
	margin: 0 0 16px;
}

/* Job facts list */
.apex-job-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.apex-job-fact {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 10px 0;
	border-bottom: 1px solid var(--apex-border, #e0e3e5);
	font-size: 0.875rem;
}

.apex-job-facts li.apex-job-fact:last-child {
	border-bottom: none;
}

.apex-job-fact__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--apex-text-muted, #45474c);
	margin-top: 2px;
}

.apex-job-fact__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--apex-text-muted, #45474c);
	margin-bottom: 2px;
}

.apex-job-fact__value {
	color: var(--apex-dark, #050e1d);
	font-weight: 500;
}

/* Share buttons */
.apex-share-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apex-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	font-size: 0.8rem;
	font-weight: 500;
	font-family: inherit;
	color: var(--apex-dark, #050e1d);
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.apex-share-btn:hover {
	border-color: var(--apex-primary, #b5106b);
	color: var(--apex-primary, #b5106b);
}

.apex-share-btn--linkedin:hover {
	border-color: #0077b5;
	color: #0077b5;
}

.apex-share-btn--facebook:hover {
	border-color: #1877f2;
	color: #1877f2;
}

.apex-share-btn--x:hover {
	border-color: #000;
	color: #000;
}

.apex-share-btn--whatsapp:hover {
	border-color: #25d366;
	color: #25d366;
}

.apex-share-btn.is-copied {
	border-color: #16803d;
	color: #16803d;
	background: #edfcf2;
}

/* ─── Responsive ─── */

@media ( max-width: 960px ) {
	.apex-job-single__layout {
		grid-template-columns: 1fr;
	}

	.apex-job-single__sidebar {
		position: static;
		/* Sidebar renders above article on small screens — reorder via grid. */
		order: -1;
	}

	/* Show apply card full-width on tablet */
	.apex-share-buttons {
		flex-direction: row;
	}
}

@media ( max-width: 600px ) {
	.apex-job-single-page {
		padding-top: calc( var(--apex-sp, 8px) * 2.5 );
	}

	.apex-job-single__header,
	.apex-job-single__content,
	.apex-job-single__apply-form {
		padding: 20px;
	}

	.apex-job-single__title {
		font-size: 1.35rem;
	}

	.apex-share-buttons {
		flex-direction: column;
	}
}

/* ─── Print ─── */

@media print {
	.apex-job-single__sidebar { display: none; }
	.apex-job-single__layout { display: block; }
	.apex-job-single-page { background: #fff; padding: 0; }
	.apex-job-single__apply-form { display: none; }
}

/* -----------------------------------------------------------------------
   Job Search Form widget  (.apex-search-form)
   ----------------------------------------------------------------------- */

.apex-search-form {
	width: 100%;
}

/* Inline layout — all fields on a single row */
.apex-search-form--inline .apex-search-form__fields {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border: 1.5px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
}

.apex-search-form--inline .apex-search-form__field {
	flex: 1;
	min-width: 0;
	border-right: 1px solid var(--apex-border, #e0e3e5);
}

.apex-search-form--inline .apex-search-form__field:last-of-type {
	border-right: none;
}

/* Stacked layout — fields in a column */
.apex-search-form--stacked .apex-search-form__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.apex-search-form--stacked .apex-search-form__field {
	position: relative;
}

/* Shared field/input styles */
.apex-search-form__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apex-text-muted, #45474c);
	padding: 10px 16px 0;
}

.apex-search-form__input,
.apex-search-form__select {
	display: block;
	width: 100%;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--apex-dark, #050e1d);
	padding: 10px 16px 12px;
	outline: none;
	transition: background 0.15s ease;
	box-sizing: border-box;
	-webkit-appearance: none;
}

.apex-search-form__input::placeholder {
	color: var(--apex-text-muted, #45474c);
	opacity: 0.65;
}

.apex-search-form__input:focus,
.apex-search-form__select:focus {
	background: var(--apex-light, #f7f9fb);
}

/* Stacked variant — bordered inputs */
.apex-search-form--stacked .apex-search-form__input,
.apex-search-form--stacked .apex-search-form__select {
	border: 1.5px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	padding: 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apex-search-form--stacked .apex-search-form__input:focus,
.apex-search-form--stacked .apex-search-form__select:focus {
	border-color: var(--apex-primary, #b5106b);
	box-shadow: 0 0 0 3px rgba( 181, 16, 107, 0.1 );
	background: #fff;
}

/* Sector pills (alternative to select) */
.apex-search-form__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 14px 10px;
}

.apex-search-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 13px;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: 99px;
	font-size: 0.8rem;
	font-weight: 500;
	font-family: inherit;
	color: var(--apex-dark, #050e1d);
	background: transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.apex-search-pill:hover {
	border-color: var(--apex-primary, #b5106b);
	color: var(--apex-primary, #b5106b);
}

.apex-search-pill.is-active {
	background: var(--apex-primary, #b5106b);
	border-color: var(--apex-primary, #b5106b);
	color: #fff;
}

/* Submit button */
.apex-search-form--inline .apex-search-form__submit {
	flex-shrink: 0;
	border-radius: 0;
	border: none;
	padding: 0 28px;
	font-size: 0.9375rem;
}

.apex-search-form--stacked .apex-search-form__submit {
	width: 100%;
	justify-content: center;
	padding: 12px 24px;
}

/* Responsive: stack inline form on small screens */
@media ( max-width: 640px ) {
	.apex-search-form--inline .apex-search-form__fields {
		flex-direction: column;
		border-radius: var(--apex-radius, 4px);
	}

	.apex-search-form--inline .apex-search-form__field {
		border-right: none;
		border-bottom: 1px solid var(--apex-border, #e0e3e5);
	}

	.apex-search-form--inline .apex-search-form__field:last-of-type {
		border-bottom: none;
	}

	.apex-search-form--inline .apex-search-form__submit {
		border-radius: 0 0 var(--apex-radius, 4px) var(--apex-radius, 4px);
		padding: 14px;
	}
}

/* -----------------------------------------------------------------------
   Related Jobs widget  (.apex-related-jobs)
   ----------------------------------------------------------------------- */

.apex-related-jobs__heading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin: 0 0 16px;
	font-family: var(--apex-font-head, inherit);
}

/* Horizontal layout — stacked full-width cards */
.apex-related-jobs--horizontal .apex-related-jobs__list {
	display: flex;
	flex-direction: column;
	gap: calc( var(--apex-sp, 8px) * 1.5 );
}

.apex-related-jobs--horizontal .apex-job-card {
	flex-direction: row;
}

.apex-related-jobs--horizontal .apex-job-card .apex-job-card__body {
	flex: 1;
}

.apex-related-jobs--horizontal .apex-job-card .apex-job-card__footer {
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	border-top: none;
	border-left: 1px solid var(--apex-border, #e0e3e5);
	padding: 18px 20px;
	min-width: 130px;
	margin-top: 0;
}

/* Grid layout — 2-column */
.apex-related-jobs--grid .apex-related-jobs__list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: calc( var(--apex-sp, 8px) * 2 );
}

@media ( max-width: 600px ) {
	.apex-related-jobs--horizontal .apex-job-card {
		flex-direction: column;
	}

	.apex-related-jobs--horizontal .apex-job-card .apex-job-card__footer {
		border-left: none;
		border-top: 1px solid var(--apex-border, #e0e3e5);
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		min-width: 0;
		margin-top: 0;
	}

	.apex-related-jobs--grid .apex-related-jobs__list {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   Apply Block widget  (.apex-apply-block)
   ----------------------------------------------------------------------- */

.apex-apply-block {
	background: var(--apex-light, #f7f9fb);
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	padding: 32px;
}

.apex-apply-block__heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin: 0 0 10px;
	font-family: var(--apex-font-head, inherit);
	line-height: 1.25;
}

.apex-apply-block__subheading {
	font-size: 0.9375rem;
	color: var(--apex-text-muted, #45474c);
	margin: 0 0 24px;
	line-height: 1.65;
}

.apex-apply-block__body {
	/* Gravity Form or button container */
}

.apex-apply-block__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background: var(--apex-primary, #b5106b);
	color: #fff;
	border-radius: var(--apex-radius, 4px);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.apex-apply-block__btn:hover {
	filter: brightness( 1.1 );
	color: #fff;
}

.apex-apply-block__notice {
	font-size: 0.875rem;
	color: var(--apex-text-muted, #45474c);
	font-style: italic;
}

/* -----------------------------------------------------------------------
   Job Type Showcase widget  (.apex-job-types)
   ----------------------------------------------------------------------- */

.apex-job-types {
	width: 100%;
}

/* Grid layout */
.apex-job-types--grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
}

.apex-job-types--cols-2 { grid-template-columns: repeat( 2, 1fr ); }
.apex-job-types--cols-3 { grid-template-columns: repeat( 3, 1fr ); }
.apex-job-types--cols-4 { grid-template-columns: repeat( 4, 1fr ); }

/* List layout */
.apex-job-types--list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.apex-job-types--list .apex-job-type-card {
	border-radius: 0;
	border-bottom-width: 0;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
}

.apex-job-types--list .apex-job-type-card:first-child {
	border-radius: var(--apex-radius, 4px) var(--apex-radius, 4px) 0 0;
}

.apex-job-types--list .apex-job-type-card:last-child {
	border-bottom-width: 1px;
	border-radius: 0 0 var(--apex-radius, 4px) var(--apex-radius, 4px);
}

.apex-job-types--list .apex-job-type-card:only-child {
	border-radius: var(--apex-radius, 4px);
	border-bottom-width: 1px;
}

/* Type card */
.apex-job-type-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 18px 16px;
	background: #fff;
	border: 1px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	cursor: pointer;
}

.apex-job-type-card:hover {
	border-color: var(--apex-primary, #b5106b);
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -1px );
}

.apex-job-type-card__icon {
	font-size: 1.6rem;
	line-height: 1;
}

.apex-job-type-card__name {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--apex-dark, #050e1d);
	line-height: 1.3;
}

.apex-job-type-card__count {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--apex-primary, #b5106b);
	background: rgba( 181, 16, 107, 0.08 );
	padding: 2px 8px;
	border-radius: 99px;
	margin-top: auto;
}

@media ( max-width: 640px ) {
	.apex-job-types--grid,
	.apex-job-types--cols-3,
	.apex-job-types--cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 380px ) {
	.apex-job-types--grid,
	.apex-job-types--cols-2,
	.apex-job-types--cols-3,
	.apex-job-types--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------
   Job Counter widget  (.apex-counter)
   ----------------------------------------------------------------------- */

.apex-counter {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

/* Inline: number + suffix on one line, labels beside */
.apex-counter--inline {
	flex-direction: row;
	align-items: baseline;
}

/* Stacked: number above labels */
.apex-counter--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.apex-counter__before {
	font-size: 1rem;
	color: var(--apex-text-muted, #45474c);
	font-weight: 500;
}

.apex-counter__number {
	font-size: 3rem;
	font-weight: 800;
	color: var(--apex-primary, #b5106b);
	line-height: 1;
	font-family: var(--apex-font-head, inherit);
	font-variant-numeric: tabular-nums;
}

.apex-counter__suffix {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--apex-primary, #b5106b);
	line-height: 1;
}

.apex-counter__after {
	font-size: 1rem;
	color: var(--apex-text-muted, #45474c);
	font-weight: 500;
}

/* ── Related jobs section (single job template) ─────────────────────────── */

.apex-related-jobs-section {
	background: var(--apex-light, #f7f9fb);
	padding: clamp(40px, 6vw, 72px) calc(var(--apex-sp, 1rem) * 2);
	border-top: 1px solid var(--apex-border, #e0e3e5);
}

.apex-related-jobs-section__container {
	max-width: var(--apex-max-w, 1200px);
	margin: 0 auto;
}

.apex-related-jobs-section__heading {
	font-family: var(--apex-font-head, inherit), sans-serif;
	font-size: clamp(1.1rem, 2.5vw, 1.4rem);
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin: 0 0 1.5rem;
}

.apex-related-jobs-section__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.apex-related-job-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1.5px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, border-color .2s;
}

.apex-related-job-card:hover {
	box-shadow: 0 4px 16px rgba(5, 14, 29, .08);
	border-color: var(--apex-primary, #b5106b);
}

.apex-related-job-card__type {
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--apex-primary, #b5106b);
}

.apex-related-job-card__title {
	font-family: var(--apex-font-head, inherit), sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--apex-dark, #050e1d);
	margin: 0;
	line-height: 1.3;
}

.apex-related-job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem .75rem;
	margin-top: .125rem;
}

.apex-related-job-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	color: var(--apex-text-muted, #45474c);
}

.apex-related-job-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--apex-primary, #b5106b);
	margin-top: auto;
	padding-top: .75rem;
}

/* ── Gravity Forms — APEX theme styles ──────────────────────────────────── */
/* Applied when GF's built-in CSS is disabled (pre_option_rg_gforms_disable_css). */

.apex-job-single__apply-form .gform_wrapper,
.apex-job-single__apply-form .gf_browser_chrome {
	margin: 0;
}

.apex-job-single__apply-form .gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.apex-job-single__apply-form .gfield {
	margin: 0;
}

.apex-job-single__apply-form .gfield_label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--apex-dark, #050e1d);
	margin-bottom: .375rem;
}

.apex-job-single__apply-form .gfield_required {
	color: var(--apex-primary, #b5106b);
	margin-left: .2em;
}

.apex-job-single__apply-form .ginput_container input[type="text"],
.apex-job-single__apply-form .ginput_container input[type="email"],
.apex-job-single__apply-form .ginput_container input[type="tel"],
.apex-job-single__apply-form .ginput_container input[type="number"],
.apex-job-single__apply-form .ginput_container textarea,
.apex-job-single__apply-form .ginput_container select {
	width: 100%;
	padding: .625rem .875rem;
	border: 1.5px solid var(--apex-border, #e0e3e5);
	border-radius: var(--apex-radius, 4px);
	font-size: .9375rem;
	color: var(--apex-dark, #050e1d);
	background: #fff;
	transition: border-color .15s;
	box-sizing: border-box;
}

.apex-job-single__apply-form .ginput_container input:focus,
.apex-job-single__apply-form .ginput_container textarea:focus,
.apex-job-single__apply-form .ginput_container select:focus {
	outline: none;
	border-color: var(--apex-primary, #b5106b);
	box-shadow: 0 0 0 3px rgba(181, 16, 107, .1);
}

.apex-job-single__apply-form .ginput_container textarea {
	min-height: 120px;
	resize: vertical;
}

/* Name field — First + Last inline */
.apex-job-single__apply-form .ginput_complex {
	display: flex;
	gap: .75rem;
}

.apex-job-single__apply-form .ginput_complex span {
	flex: 1;
}

.apex-job-single__apply-form .ginput_complex label {
	display: block;
	font-size: .75rem;
	color: var(--apex-text-muted, #45474c);
	margin-top: .25rem;
}

/* Submit button */
.apex-job-single__apply-form .gform_footer,
.apex-job-single__apply-form .gform_page_footer {
	margin-top: 1.25rem;
}

.apex-job-single__apply-form .gform_button,
.apex-job-single__apply-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.75rem;
	background: var(--apex-primary, #b5106b);
	color: #fff;
	border: none;
	border-radius: var(--apex-radius, 4px);
	font-family: var(--apex-font-head, inherit), sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s;
}

.apex-job-single__apply-form .gform_button:hover,
.apex-job-single__apply-form input[type="submit"]:hover {
	opacity: .88;
}

/* Validation messages */
.apex-job-single__apply-form .validation_error {
	padding: .75rem 1rem;
	background: rgba(181, 16, 107, .06);
	border: 1px solid rgba(181, 16, 107, .25);
	border-radius: var(--apex-radius, 4px);
	color: var(--apex-primary, #b5106b);
	font-size: .875rem;
	margin-bottom: 1rem;
}

.apex-job-single__apply-form .gfield_error .ginput_container input,
.apex-job-single__apply-form .gfield_error .ginput_container textarea {
	border-color: var(--apex-primary, #b5106b);
}

.apex-job-single__apply-form .gfield_error .validation_message {
	font-size: .75rem;
	color: var(--apex-primary, #b5106b);
	margin-top: .25rem;
}

/* Confirmation message */
.apex-job-single__apply-form .gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	background: rgba(0, 160, 80, .06);
	border: 1px solid rgba(0, 160, 80, .25);
	border-radius: var(--apex-radius, 4px);
	color: #00703c;
	font-weight: 600;
}