/* =========================================================
   Job Directory Pro — Front-end styles
   Lightweight, no framework dependency, GeneratePress compatible.
   ========================================================= */

.jdp-wrapper {
	--jdp-primary: #2563eb;
	--jdp-primary-dark: #1d4ed8;
	--jdp-text: #111827;
	--jdp-muted: #6b7280;
	--jdp-border: #e2e8f5;
	--jdp-bg-alt: #eef2fb;
	--jdp-header-bg: #dbe6fe;
	--jdp-success: #059669;
	--jdp-success-bg: #d1fae5;
	--jdp-warning: #c2410c;
	--jdp-warning-bg: #ffedd5;
	--jdp-danger: #dc2626;
	--jdp-danger-bg: #fee2e2;
	--jdp-link: #2563eb;
	--jdp-radius: 10px;

	margin: 1.5em 0;
	font-size: 15px;
	color: var(--jdp-text);
	line-height: 1.5;
	box-sizing: border-box;
	font-family: inherit;
}

.jdp-wrapper *,
.jdp-wrapper *::before,
.jdp-wrapper *::after {
	box-sizing: inherit;
	font-family: inherit;
}

/* ---------------------------------------------------------
   Controls: search + sort
   --------------------------------------------------------- */
.jdp-controls {
	margin-bottom: 1em;
}

.jdp-controls-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	background: linear-gradient(135deg, #f3f7ff, #eef2fb);
	padding: 12px;
	border-radius: var(--jdp-radius);
	border: 1px solid var(--jdp-border);
}

.jdp-search-input,
.jdp-sort-select {
	padding: 10px 14px;
	border: 1px solid var(--jdp-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: var(--jdp-text);
	min-height: 42px;
}

.jdp-search-input {
	flex: 1 1 220px;
	min-width: 180px;
}

.jdp-sort-select {
	flex: 0 0 auto;
	font-weight: 600;
}

.jdp-search-input:focus,
.jdp-sort-select:focus {
	outline: none;
	border-color: var(--jdp-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.jdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: #fff !important;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.jdp-btn:hover,
.jdp-btn:focus {
	background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(37, 99, 235, 0.4);
}

.jdp-btn:active {
	transform: translateY(0);
}

.jdp-btn-view {
	background: linear-gradient(135deg, #f87171, #dc2626);
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
	padding: 8px 18px;
	font-size: 13px;
}

.jdp-btn-view:hover,
.jdp-btn-view:focus {
	background: linear-gradient(135deg, #dc2626, #991b1b);
	box-shadow: 0 5px 12px rgba(220, 38, 38, 0.4);
}

/* ---------------------------------------------------------
   Table (desktop) — fixed layout so long titles never
   stretch the table; they truncate instead (see .jdp-col-title).
   --------------------------------------------------------- */
.jdp-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--jdp-border);
	border-radius: var(--jdp-radius);
	background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06);
}

.jdp-job-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	min-width: 560px;
}

.jdp-job-table thead th {
	text-align: left;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--jdp-primary-dark);
	background: linear-gradient(135deg, #dbe6fe, #eef2fb);
	padding: 14px 16px;
	border-bottom: 2px solid #c7d7fb;
	white-space: nowrap;
}

.jdp-job-table th.jdp-col-title,
.jdp-job-table td.jdp-col-title {
	width: 42%;
}

.jdp-job-table th.jdp-col-vacancy,
.jdp-job-table td.jdp-col-vacancy {
	width: 16%;
}

.jdp-job-table th.jdp-col-date,
.jdp-job-table td.jdp-col-date {
	width: 24%;
}

.jdp-job-table th.jdp-col-view,
.jdp-job-table td.jdp-col-view {
	width: 18%;
}

.jdp-job-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--jdp-border);
	vertical-align: middle;
}

.jdp-job-table tbody tr:nth-child(even) {
	background: rgba(219, 230, 254, 0.25);
}

.jdp-job-table tbody tr:last-child td {
	border-bottom: none;
}

.jdp-job-table tbody tr:hover {
	background: var(--jdp-bg-alt);
}

/* Title: fixed to a set number of words via PHP (wp_trim_words) +
   CSS safety net that clips anything unexpectedly long with an ellipsis,
   so the column width never grows no matter how long the job title is. */
.jdp-col-title a {
	display: block;
	font-weight: 600;
	color: var(--jdp-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jdp-col-title a:hover {
	color: var(--jdp-link);
	text-decoration: underline;
}

/* Colorful pills for Vacancy / Last Date so the table feels lively
   instead of plain black-and-white text. */
.jdp-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.jdp-pill-vacancy {
	background: var(--jdp-success-bg);
	color: var(--jdp-success);
}

.jdp-pill-date {
	background: var(--jdp-warning-bg);
	color: var(--jdp-warning);
}

.jdp-pill-date.jdp-pill-expired {
	background: var(--jdp-danger-bg);
	color: var(--jdp-danger);
}

.jdp-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.jdp-badge-expired {
	background: var(--jdp-danger);
	color: #fff;
}

.jdp-job-row.jdp-expired .jdp-col-title a {
	color: var(--jdp-muted);
}

.jdp-no-results,
.jdp-error {
	padding: 28px;
	text-align: center;
	font-weight: 600;
	color: var(--jdp-muted);
	background: var(--jdp-bg-alt);
	border: 1px dashed var(--jdp-border);
	border-radius: var(--jdp-radius);
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.jdp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 1.2em;
	justify-content: center;
}

.jdp-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--jdp-border);
	border-radius: 8px;
	color: var(--jdp-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
}

.jdp-page-link:hover {
	border-color: var(--jdp-primary);
	color: var(--jdp-primary);
	background: var(--jdp-header-bg);
}

.jdp-page-current {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	border-color: var(--jdp-primary);
	color: #fff;
	font-weight: 700;
}

.jdp-page-dots {
	display: inline-flex;
	align-items: center;
	color: var(--jdp-muted);
	padding: 0 4px;
}

/* ---------------------------------------------------------
   Jobs By Education — homepage cards
   --------------------------------------------------------- */
.jdp-cards-wrapper .jdp-cards-heading {
	margin-bottom: 0.8em;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--jdp-primary-dark);
}

.jdp-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	justify-items: stretch;
}

.jdp-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
	padding: 16px 14px;
	background: linear-gradient(160deg, #eaf1ff, #dbe6fe);
	border: 1px solid var(--jdp-border);
	border-top: 4px solid var(--jdp-primary);
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.jdp-card:nth-child(6n+2) {
	background: linear-gradient(160deg, #fde8e8, #fee2e2);
	border-top-color: #dc2626;
}
.jdp-card:nth-child(6n+3) {
	background: linear-gradient(160deg, #e3f9ef, #d1fae5);
	border-top-color: #059669;
}
.jdp-card:nth-child(6n+4) {
	background: linear-gradient(160deg, #fff2e2, #ffedd5);
	border-top-color: #c2410c;
}
.jdp-card:nth-child(6n+5) {
	background: linear-gradient(160deg, #f3e8ff, #ede9fe);
	border-top-color: #7c3aed;
}
.jdp-card:nth-child(6n+6) {
	background: linear-gradient(160deg, #fce7f3, #fbcfe8);
	border-top-color: #db2777;
}

.jdp-card:hover,
.jdp-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 12px 22px rgba(17, 24, 39, 0.15);
}

.jdp-card-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jdp-text);
	line-height: 1.3;
}

.jdp-card-count {
	font-size: 11.5px;
	color: var(--jdp-primary-dark);
	font-weight: 700;
	background: rgba(255, 255, 255, 0.6);
	padding: 1px 8px;
	border-radius: 999px;
}

/* ---------------------------------------------------------
   Mobile — collapse table into cards
   --------------------------------------------------------- */
@media (max-width: 767px) {
	/* Hard safety net: whatever happens inside, never let this widget push
	   the page wider than the phone screen (this is what was causing the
	   working table to spill past the screen edge on mobile). */
	.jdp-wrapper {
		max-width: 100%;
		overflow-x: hidden;
	}

	.jdp-table-wrap {
		border: none;
		overflow: visible;
		background: transparent;
		box-shadow: none;
		max-width: 100%;
	}

	.jdp-job-table {
		table-layout: auto;
		min-width: 0;
		width: 100%;
		max-width: 100%;
	}

	.jdp-job-table thead {
		display: none;
	}

	.jdp-job-table,
	.jdp-job-table tbody {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.jdp-job-table th.jdp-col-title,
	.jdp-job-table td.jdp-col-title,
	.jdp-job-table th.jdp-col-vacancy,
	.jdp-job-table td.jdp-col-vacancy,
	.jdp-job-table th.jdp-col-date,
	.jdp-job-table td.jdp-col-date,
	.jdp-job-table th.jdp-col-view,
	.jdp-job-table td.jdp-col-view {
		width: auto;
	}

	.jdp-job-table tbody tr {
		display: block;
		max-width: 100%;
		margin-bottom: 10px;
		padding: 10px 12px;
		background: linear-gradient(160deg, #ffffff, #f7f9ff);
		border: 1px solid var(--jdp-border);
		border-left: 3px solid var(--jdp-primary);
		border-radius: 8px;
		box-shadow: 0 1px 5px rgba(37, 99, 235, 0.08);
	}

	.jdp-job-table tbody tr:nth-child(4n+2) { border-left-color: #dc2626; }
	.jdp-job-table tbody tr:nth-child(4n+3) { border-left-color: #059669; }
	.jdp-job-table tbody tr:nth-child(4n+4) { border-left-color: #c2410c; }

	.jdp-job-table tbody tr:hover,
	.jdp-job-table tbody tr:nth-child(even) {
		background: linear-gradient(160deg, #ffffff, #f7f9ff);
	}

	.jdp-job-table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 5px 0;
		border-bottom: 1px dashed var(--jdp-border);
		text-align: right;
		/* Lets the cell shrink below its content's natural width instead
		   of forcing the row (and the whole page) wider than the screen. */
		min-width: 0;
	}

	.jdp-job-table tbody td:last-child {
		border-bottom: none;
	}

	.jdp-job-table tbody td::before {
		content: attr(data-label);
		font-size: 10.5px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--jdp-muted);
		text-align: left;
		flex-shrink: 0;
	}

	.jdp-col-title {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.jdp-col-title::before {
		margin-bottom: 3px;
	}

	.jdp-col-title a {
		font-size: 14px;
		text-align: left;
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100%;
	}

	/* Any long unbroken string (long numbers, pill text, dates) wraps
	   instead of stretching its cell past the screen edge. */
	.jdp-pill,
	.jdp-badge {
		white-space: normal;
		overflow-wrap: anywhere;
		max-width: 100%;
	}

	.jdp-col-view {
		justify-content: flex-end;
	}

	.jdp-btn-view {
		width: 100%;
		justify-content: center;
		padding: 7px 14px;
		font-size: 12.5px;
	}

	.jdp-controls-row {
		flex-direction: column;
		align-items: stretch;
	}

	.jdp-search-input,
	.jdp-sort-select,
	.jdp-btn-search {
		width: 100%;
		flex: 0 0 auto;
		min-height: 40px;
		max-height: 40px;
	}
}

/* ---------------------------------------------------------
   Jobs By Education cards — compact grid on mobile so 4
   cards fit per row without heavy scrolling.
   --------------------------------------------------------- */
@media (max-width: 767px) {
	.jdp-cards-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
	}

	.jdp-card {
		padding: 8px 6px;
		border-top-width: 3px;
		border-left: none;
		border-radius: 6px;
		text-align: center;
		align-items: center;
	}

	.jdp-card-title {
		font-size: 11px;
		line-height: 1.25;
	}

	.jdp-card-count {
		font-size: 9.5px;
	}
}