/*
 * sidebar.css - the in-page sidebar.
 *
 * These rules used to live in home.css, which is enqueued only by
 * front-page.php. The sidebar however renders on the job archive, single job
 * pages and the blog index too, so on every one of those it was shipping as
 * unstyled markup. Split out here and enqueued wherever the sidebar actually
 * renders.
 */

/* -------------------------------------------------------------------------
 * 17. FreeJobAlert Default Sidebar Styling
 * ---------------------------------------------------------------------- */

.ifja-sidebar-widget {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.ifja-sidebar-title {
	background: #3a75b6;
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 800;
	padding: 0.5rem 0.75rem;
	margin: 0;
}

.ifja-sidebar-list {
	list-style: none;
	padding: 0.25rem 0;
	margin: 0;
}

.ifja-sidebar-list li {
	border-bottom: 1px dashed #e2e8f0;
}

.ifja-sidebar-list li:last-child {
	border-bottom: none;
}

.ifja-sidebar-list a {
	display: block;
	padding: 0.4rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #1e3a8a;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ifja-sidebar-list a:hover {
	background: #fff7ed;
	color: #ea580c;
	text-decoration: none;
	padding-left: 0.875rem;
}

/* =========================================================================
 * Sidebar: data modules + independent scrolling
 * ====================================================================== */

.ifja-sidebar-data { padding-bottom: 0; }

/* The widget shell has no padding of its own — the title bar is full-bleed and
 * the link lists pad their own <a> so the hover highlight runs edge to edge.
 * The data modules have no such per-row padding, so their content sat flush
 * against the 1px border (measured: 1px clearance each side). This wrapper
 * gives them a proper body inset that lines up with the title's 12px. */
.ifja-sidebar-body { padding: 12px; }

.ifja-sidebar-body--tight { padding: 10px 12px 2px; }

.ifja-sidebar-note {
	margin: 0;
	color: #64748b;               /* 4.76:1 on white */
	font-size: 11px;
	line-height: 1.45;
}

/* Closing-soon table */
.ifja-sb-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.ifja-sb-table thead th {
	padding: 0 0 6px;
	border-bottom: 1px solid var(--ifja-border);
	color: #64748b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
}

.ifja-sb-table tbody tr + tr th,
.ifja-sb-table tbody tr + tr td { border-top: 1px solid var(--ifja-border); }

.ifja-sb-table th,
.ifja-sb-table td { padding: 8px 0; vertical-align: top; }

.ifja-sb-table__job { width: 62%; padding-right: 8px !important; font-weight: 500; text-align: left; }

.ifja-sb-table__job a {
	color: var(--ifja-text);      /* 17:1 on white */
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ifja-sb-table__job a:hover,
.ifja-sb-table__job a:focus { color: var(--ifja-accent-hover); text-decoration: underline; }

.ifja-sb-table__date { color: #475569; text-align: right; white-space: nowrap; }  /* 7.58:1 */

.ifja-sb-days { display: block; margin-top: 2px; color: #64748b; font-size: 10px; font-weight: 600; }
.ifja-sb-days--urgent { color: #b91c1c; }   /* 6.47:1 on white */

/* Latest vacancies list */
.ifja-sb-jobs { margin: 0; padding: 0; list-style: none; }

.ifja-sb-job { padding: 9px 0; border-top: 1px solid var(--ifja-border); }
.ifja-sb-job:first-child { border-top: 0; padding-top: 0; }

.ifja-sb-job__link {
	display: block;
	color: var(--ifja-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ifja-sb-job__link:hover,
.ifja-sb-job__link:focus { color: var(--ifja-accent-hover); text-decoration: underline; }

.ifja-sb-job__meta { margin: 3px 0 0; color: #64748b; font-size: 11px; }

/* Footer link shared by both data modules */
.ifja-sidebar-more {
	display: inline-block;
	margin-top: 10px;
	color: var(--ifja-accent-strong);   /* 8.72:1 on white */
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
}

.ifja-sidebar-more:hover,
.ifja-sidebar-more:focus { text-decoration: underline; }

/* -------------------------------------------------------------------------
 * Independent scrolling.
 *
 * The pane becomes its own scroll container capped to the viewport below the
 * sticky header. overscroll-behavior stays `auto` (the default) on purpose:
 * that is what lets the page continue scrolling once the pane reaches either
 * end, so the pane scrolls first and then the page, and the reverse on the way
 * back up. `contain` would block that hand-off.
 *
 * --ifja-header-offset is set from the real header height by navigation.js;
 * the 183px fallback is the measured desktop value if JS does not run.
 * ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.has-sidebar .ifja-layout__secondary {
		position: sticky;
		top: calc(var(--ifja-header-offset, 183px) + var(--ifja-space-3));
		max-height: calc(100vh - var(--ifja-header-offset, 183px) - var(--ifja-space-5));
		overflow-y: auto;
		overscroll-behavior-y: auto;
		padding-right: 6px;
		scrollbar-width: thin;
		scrollbar-color: #cbd5e1 transparent;
	}

	.has-sidebar .ifja-layout__secondary::-webkit-scrollbar { width: 8px; }
	.has-sidebar .ifja-layout__secondary::-webkit-scrollbar-track { background: transparent; }
	.has-sidebar .ifja-layout__secondary::-webkit-scrollbar-thumb {
		border: 2px solid transparent;
		border-radius: 8px;
		background-clip: padding-box;
		background-color: #cbd5e1;
	}
	.has-sidebar .ifja-layout__secondary::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
}


/* External portal links get a trailing indicator so it is obvious the link
 * leaves the site. Added via ::after so no markup change is needed and screen
 * readers are unaffected. */
.ifja-sidebar-list--external a::after {
	content: " ↗";
	color: #64748b;
	font-size: 0.9em;
}
