/**
 * Modern visual + responsive layer for the public-facing JobWP templates.
 *
 * Loaded after jobwp-front.css so it can refine card styling, add a design
 * token layer, and — most importantly — add the breakpoints the base
 * stylesheet never had (it only had one, at 500px), so the listing grid and
 * the single-job two-column layout actually work on a phone.
 */

.jobwp-listing-body-container,
.jobwp-single-body-container,
.jobwp-apply-form,
.jobwp-search-panel {
	--jobwp-accent: #1f6f5c;
	--jobwp-accent-ink: #0f4438;
	--jobwp-accent-soft: #e3f1ec;
	--jobwp-ink: #1d2327;
	--jobwp-ink-soft: #5b6b76;
	--jobwp-line: #e3e0d6;
	--jobwp-surface: #fff;
	--jobwp-radius: 12px;
	--jobwp-shadow: 0 1px 2px rgba(20, 30, 28, 0.06), 0 8px 24px rgba(20, 30, 28, 0.06);
	--jobwp-shadow-hover: 0 4px 10px rgba(20, 30, 28, 0.08), 0 16px 32px rgba(20, 30, 28, 0.1);
}

/* ---------- Job cards (list + grid) ---------- */

.jobwp-item {
	border: 1px solid var(--jobwp-line) !important;
	border-radius: var(--jobwp-radius) !important;
	box-shadow: var(--jobwp-shadow);
	background: var(--jobwp-surface);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.jobwp-item:hover {
	box-shadow: var(--jobwp-shadow-hover);
	transform: translateY(-2px);
}

.jobwp-item .jobwp-job-title a.jobwp-job-title-a {
	color: var(--jobwp-ink);
}

.jobwp-item .jobwp-job-title a.jobwp-job-title-a:hover {
	color: var(--jobwp-accent-ink);
}

.jobwp-listing-body-container .jobwp-item .jobwp-list-info-wrapper .jobwp-list-info-item .jobwp-list-bottom-item {
	background: var(--jobwp-accent-soft);
	color: var(--jobwp-accent-ink);
	border-radius: 999px;
	padding: 4px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
}

.jobwp-listing-body-container .jobwp-item .jobwp-list-info-wrapper .jobwp-list-info-item .jobwp-list-bottom-item strong {
	color: inherit;
	font-weight: 600;
}

/* Responsive grid: 3 columns only when there's genuinely room for them. */
.jobwp-listing-body-container.grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

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

.jobwp-pagination .page-numbers li a,
.jobwp-pagination .page-numbers li span {
	border-radius: 8px !important;
}

.jobwp-pagination .page-numbers li a.page-numbers.current,
.jobwp-pagination .page-numbers li span.page-numbers.current {
	background: var(--jobwp-accent) !important;
	border-color: var(--jobwp-accent) !important;
	color: #fff !important;
}

/* ---------- Apply form ---------- */

.jobwp-apply-form-message {
	background: var(--jobwp-accent-soft);
	color: var(--jobwp-accent-ink);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
}

.jobwp-field-row input[type="email"],
.jobwp-field-row input[type="text"],
.jobwp-field-row input[type="tel"],
.jobwp-field-row textarea {
	width: 100%;
	min-width: 0;
	border-radius: 8px !important;
	border-color: var(--jobwp-line) !important;
	background: var(--jobwp-surface) !important;
}

.jobwp-field-row input[type="email"]:focus,
.jobwp-field-row input[type="text"]:focus,
.jobwp-field-row input[type="tel"]:focus,
.jobwp-field-row textarea:focus {
	border-color: var(--jobwp-accent) !important;
	box-shadow: 0 0 0 3px var(--jobwp-accent-soft);
	outline: none;
}

#jobwp_apply_btn.jobwp-primary-button {
	background: var(--jobwp-accent);
	border-color: var(--jobwp-accent);
	border-radius: 8px;
}

#jobwp_apply_btn.jobwp-primary-button:hover {
	background: var(--jobwp-accent-ink);
	border-color: var(--jobwp-accent-ink);
}

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

.jobwp-single-body-container {
	border-radius: var(--jobwp-radius);
	overflow: hidden;
	box-shadow: var(--jobwp-shadow);
}

/* ---------- Responsive breakpoints ---------- */

@media only screen and (max-width: 900px) {
	.jobwp-single-body-container .left-cell,
	.jobwp-single-body-container .right-cell {
		float: none !important;
		width: 100% !important;
		text-align: left !important;
		padding: 16px 0 !important;
		border-left: none !important;
	}

	.jobwp-single-body-container .circulr-details-top {
		grid-template-columns: 1fr !important;
		text-align: center;
	}

	.jobwp-single-body-container .circulr-details-top .jobwp-job-title,
	.jobwp-single-body-container .circulr-details-top .jwb-single-comp-name {
		width: 100% !important;
		text-align: center !important;
		font-size: 24px !important;
		line-height: 32px !important;
	}
}

@media only screen and (max-width: 782px) {
	.jobwp-listing-body-container.grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		grid-gap: 16px;
	}

	.jobwp-listing-top .jobwp-total-jobs-found,
	.jobwp-listing-top .jobwp-select-view {
		width: 100% !important;
		display: block !important;
		margin-bottom: 8px;
	}
}

@media only screen and (max-width: 480px) {
	.jobwp-listing-body-container.grid {
		grid-template-columns: 1fr;
	}

	.jobwp-item {
		padding: 16px !important;
	}
}