/* ==========================================================================
   BioSpectrum Jobs 2026 — Design System
   Author: iDealOcean Technologies
   Layer order: tokens -> reset -> layout -> typography -> components -> pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand — carried over from the BioSpectrum identity */
	--bs-navy-900: #061136;
	--bs-navy-800: #0a1c4f;
	--bs-navy-700: #102a68;
	--bs-navy-600: #17398a;

	--bs-blue-700: #0b5c80;
	--bs-blue-600: #10719b;
	--bs-blue-500: #1a8cbb;
	--bs-blue-100: #e3f1f8;

	--bs-teal-700: #0f6f75;
	--bs-teal-600: #17969d;
	--bs-teal-500: #1fb3bb;
	--bs-teal-100: #e2f5f6;

	--bs-accent-600: #d93a25;
	--bs-accent-500: #e8563f;
	--bs-accent-100: #fdeae6;

	/* Neutrals */
	--bs-ink: #14181f;
	--bs-ink-2: #39424f;
	--bs-ink-3: #5d6875;
	--bs-ink-4: #8b95a3;
	--bs-line: #e3e7ed;
	--bs-line-soft: #eef1f5;
	--bs-surface: #ffffff;
	--bs-surface-2: #f6f8fb;
	--bs-surface-3: #eef2f7;

	/* Status */
	--bs-success: #128a5a;
	--bs-success-bg: #e6f5ee;
	--bs-warning: #a86a00;
	--bs-warning-bg: #fdf3e2;
	--bs-danger: #c0392b;
	--bs-danger-bg: #fdecea;

	/* Semantic aliases */
	--bs-primary: var(--bs-blue-600);
	--bs-primary-dark: var(--bs-blue-700);
	--bs-secondary: var(--bs-teal-600);

	/* Layout */
	--bs-container: 1440px;
	--bs-gutter: 1.5rem;
	--bs-radius-sm: 6px;
	--bs-radius: 10px;
	--bs-radius-lg: 16px;
	--bs-radius-pill: 999px;

	/* Elevation */
	--bs-shadow-xs: 0 1px 2px rgba(6, 17, 54, .06);
	--bs-shadow-sm: 0 2px 6px rgba(6, 17, 54, .07);
	--bs-shadow: 0 4px 16px rgba(6, 17, 54, .09);
	--bs-shadow-lg: 0 12px 32px rgba(6, 17, 54, .14);

	/* Type */
	--bs-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--bs-font-head: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	/* Motion */
	--bs-ease: cubic-bezier(.4, 0, .2, 1);
	--bs-dur: .18s;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.site {
	margin: 0;
	font-family: var(--bs-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--bs-ink-2);
	background: var(--bs-surface-2);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--bs-blue-600); text-decoration: none; transition: color var(--bs-dur) var(--bs-ease); }
a:hover { color: var(--bs-blue-700); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--bs-line); margin: 1.5rem 0; }

:focus-visible {
	outline: 3px solid var(--bs-blue-500);
	outline-offset: 2px;
}

/*
 * `.visually-hidden` (no prefix) is the class core Joomla itself renders on
 * screen-reader-only text — mod_finder's search label, pagination's page
 * counter, etc. Joomla normally expects Bootstrap/its own system.css to
 * define it; this template loads neither, so without this rule that text
 * rendered as a plain, visible label (e.g. "Search" floating above the
 * search-overlay input). Defined together with our own -prefixed version so
 * both core-rendered and theme-authored markup hide the same way.
 */
.bsj-visually-hidden,
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.bsj-skip-link {
	position: absolute; top: -100px; left: 1rem; z-index: 2000;
	background: var(--bs-navy-800); color: #fff;
	padding: .75rem 1.25rem; border-radius: 0 0 var(--bs-radius) var(--bs-radius);
	font-weight: 600;
}
.bsj-skip-link:focus { top: 0; color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.bsj-shell {
	width: 100%;
	max-width: var(--bs-container);
	margin-inline: auto;
	padding-inline: var(--bs-gutter);
}
.bsj-shell--flush { padding-inline: 0; }

.bsj-main { padding-block: 1.75rem 3rem; }

/* The two-rail split: jobs on the left, news on the right */
.bsj-split {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
	.bsj-split { grid-template-columns: minmax(0, 1fr) 330px; }
	.bsj-split--reverse { grid-template-columns: 330px minmax(0, 1fr); }
	.bsj-split--balanced { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/*
 * Interior pages: content + sidebar.
 *
 * No align-items here (default is `stretch`) so both grid cells are exactly
 * as tall as the row itself. `.bsj-sticky` sidebars/filter rails depend on
 * that: position:sticky only has room to "stick" while its own box is taller
 * than its content, i.e. while the cell spans the full row height. With
 * align-items:start the cell shrinks to the sidebar's own (short) content and
 * the sticky element has nowhere to stick — it just scrolls off with the page.
 */
.bsj-page {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
	.bsj-page--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
	.bsj-page--filters { grid-template-columns: 280px minmax(0, 1fr); }
	.bsj-page--filters-wide { grid-template-columns: 280px minmax(0, 1fr) 300px; }
}

.bsj-grid { display: grid; gap: 1.25rem; }
.bsj-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bsj-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bsj-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.bsj-stack > * + * { margin-top: 1.25rem; }
.bsj-stack--tight > * + * { margin-top: .75rem; }

.bsj-sticky { position: sticky; top: 1.5rem; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.bsj-h1, .bsj-h2, .bsj-h3, .bsj-h4 {
	font-family: var(--bs-font-head);
	color: var(--bs-navy-900);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .6em;
	letter-spacing: -.011em;
}

h1, .bsj-h1 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); }
h2, .bsj-h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
h3, .bsj-h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }
h4, .bsj-h4 { font-size: 1.05rem; }
h5 { font-size: .95rem; }
h6 { font-size: .875rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.bsj-lede { font-size: 1.075rem; color: var(--bs-ink-3); }
.bsj-muted { color: var(--bs-ink-4); }
.bsj-small { font-size: .8125rem; }

.bsj-eyebrow {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--bs-teal-600);
	margin-bottom: .5rem;
}

/* Section heading with the signature tab, modernised */
.bsj-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--bs-line);
	position: relative;
}
.bsj-section-head::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 64px; height: 2px;
	background: var(--bs-teal-600);
}
.bsj-section-head h2,
.bsj-section-head .bsj-section-title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bs-navy-900);
}
.bsj-section-head .bsj-section-more {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--bs-blue-600);
	white-space: nowrap;
}
.bsj-section-head .bsj-section-more::after { content: " →"; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.bsj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .625rem 1.15rem;
	font-family: var(--bs-font);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--bs-radius-sm);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--bs-dur) var(--bs-ease),
	            border-color var(--bs-dur) var(--bs-ease),
	            color var(--bs-dur) var(--bs-ease),
	            box-shadow var(--bs-dur) var(--bs-ease),
	            transform var(--bs-dur) var(--bs-ease);
}
.bsj-btn:hover { text-decoration: none; transform: translateY(-1px); }
.bsj-btn:active { transform: translateY(0); }
.bsj-btn[disabled], .bsj-btn.is-disabled { opacity: .55; pointer-events: none; }

.bsj-btn--primary { background: var(--bs-blue-600); border-color: var(--bs-blue-600); color: #fff; }
.bsj-btn--primary:hover { background: var(--bs-blue-700); border-color: var(--bs-blue-700); color: #fff; box-shadow: var(--bs-shadow-sm); }

.bsj-btn--accent { background: var(--bs-accent-600); border-color: var(--bs-accent-600); color: #fff; }
.bsj-btn--accent:hover { background: #b8301e; border-color: #b8301e; color: #fff; box-shadow: var(--bs-shadow-sm); }

.bsj-btn--teal { background: var(--bs-teal-600); border-color: var(--bs-teal-600); color: #fff; }
.bsj-btn--teal:hover { background: var(--bs-teal-700); border-color: var(--bs-teal-700); color: #fff; }

.bsj-btn--outline { background: transparent; border-color: var(--bs-line); color: var(--bs-ink-2); }
.bsj-btn--outline:hover { border-color: var(--bs-blue-600); color: var(--bs-blue-600); background: var(--bs-blue-100); }

.bsj-btn--ghost { background: transparent; border-color: transparent; color: var(--bs-blue-600); padding-inline: .5rem; }
.bsj-btn--ghost:hover { background: var(--bs-blue-100); }

.bsj-btn--sm { padding: .4rem .8rem; font-size: .8125rem; }
.bsj-btn--lg { padding: .8rem 1.6rem; font-size: 1rem; }
.bsj-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Badges / chips / pills
   -------------------------------------------------------------------------- */
.bsj-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: var(--bs-radius-pill);
	background: var(--bs-surface-3);
	color: var(--bs-ink-3);
	white-space: nowrap;
}
.bsj-badge--blue { background: var(--bs-blue-100); color: var(--bs-blue-700); }
.bsj-badge--teal { background: var(--bs-teal-100); color: var(--bs-teal-700); }
.bsj-badge--success { background: var(--bs-success-bg); color: var(--bs-success); }
.bsj-badge--warning { background: var(--bs-warning-bg); color: var(--bs-warning); }
.bsj-badge--danger { background: var(--bs-danger-bg); color: var(--bs-danger); }
.bsj-badge--new { background: var(--bs-accent-100); color: var(--bs-accent-600); }

.bsj-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .85rem;
	font-size: .8125rem;
	font-weight: 500;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	background: var(--bs-surface);
	color: var(--bs-ink-2);
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-chip:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); text-decoration: none; }
.bsj-chip.is-active { background: var(--bs-blue-600); border-color: var(--bs-blue-600); color: #fff; }
.bsj-chip .bsj-chip__count { color: var(--bs-ink-4); font-size: .75rem; }
.bsj-chip.is-active .bsj-chip__count { color: rgba(255,255,255,.75); }

.bsj-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.bsj-card {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-xs);
	overflow: hidden;
}
.bsj-card--pad { padding: 1.25rem; }
.bsj-card__head {
	padding: .9rem 1.25rem;
	border-bottom: 1px solid var(--bs-line-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.bsj-card__head h2, .bsj-card__head h3 {
	margin: 0; font-size: 1rem; font-weight: 700; color: var(--bs-navy-900);
}
.bsj-card__body { padding: 1.25rem; }
.bsj-card__foot {
	padding: .8rem 1.25rem;
	border-top: 1px solid var(--bs-line-soft);
	background: var(--bs-surface-2);
	text-align: right;
}

/* --------------------------------------------------------------------------
   8. Job card — the signature component
   -------------------------------------------------------------------------- */
.bsj-job {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: start;
	padding: 1.1rem 1.25rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-xs);
	transition: border-color var(--bs-dur) var(--bs-ease),
	            box-shadow var(--bs-dur) var(--bs-ease),
	            transform var(--bs-dur) var(--bs-ease);
	position: relative;
}
.bsj-job:hover {
	border-color: var(--bs-blue-500);
	box-shadow: var(--bs-shadow);
	transform: translateY(-2px);
}

.bsj-job__logo {
	width: 64px; height: 64px;
	display: grid; place-items: center;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius-sm);
	background: #fff;
	overflow: hidden;
	flex: none;
}
.bsj-job__logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; }
.bsj-job__logo--fallback {
	background: linear-gradient(135deg, var(--bs-blue-600), var(--bs-teal-600));
	color: #fff; font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em;
}

.bsj-job__title {
	margin: 0 0 .3rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}
.bsj-job__title a { color: var(--bs-navy-900); }
.bsj-job__title a:hover { color: var(--bs-blue-600); text-decoration: none; }
/* Make the whole card clickable without nesting interactive elements */
.bsj-job__title a::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
}

.bsj-job__company {
	font-size: .875rem;
	font-weight: 600;
	color: var(--bs-teal-700);
	margin-bottom: .5rem;
}

.bsj-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	font-size: .8125rem;
	color: var(--bs-ink-3);
	margin-bottom: .6rem;
}
.bsj-job__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.bsj-job__meta i { color: var(--bs-ink-4); font-size: .8rem; }

.bsj-job__tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.bsj-job__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .55rem;
	position: relative;
	z-index: 2;
}
.bsj-job__date { font-size: .75rem; color: var(--bs-ink-4); white-space: nowrap; }

@media (max-width: 640px) {
	.bsj-job { grid-template-columns: 48px minmax(0, 1fr); }
	.bsj-job__logo { width: 48px; height: 48px; }
	.bsj-job__aside {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-top: .75rem;
		border-top: 1px solid var(--bs-line-soft);
	}
}

/* Compact job row for sidebar rails */
.bsj-joblist { display: flex; flex-direction: column; }
.bsj-joblist__item {
	padding: .8rem 0;
	border-bottom: 1px dashed var(--bs-line);
	position: relative;
}
.bsj-joblist__item:last-child { border-bottom: 0; }
.bsj-joblist__title {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--bs-blue-700);
	margin-bottom: .25rem;
	line-height: 1.35;
}
.bsj-joblist__title:hover { color: var(--bs-blue-600); text-decoration: none; }
.bsj-joblist__loc {
	font-size: .8rem;
	color: var(--bs-ink-3);
	display: inline-flex; align-items: center; gap: .35rem;
}
.bsj-joblist__loc i { color: var(--bs-accent-600); }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.bsj-utility {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	font-size: .85rem;
}
.bsj-utility .bsj-shell {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 46px; flex-wrap: wrap;
}
.bsj-utility__date { color: var(--bs-ink-3); font-weight: 500; }
.bsj-utility__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bsj-utility__actions .bsj-sep { color: var(--bs-line); }

.bsj-masthead {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding-block: .9rem;
}
.bsj-masthead .bsj-shell {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.bsj-masthead__logo img { max-height: 90px; width: auto; }
.bsj-masthead__ad { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.bsj-masthead__ad img { max-height: 90px; width: auto; }
@media (max-width: 991px) {
	.bsj-masthead__ad { display: none; }
}

/* Primary navigation */
.bsj-nav {
	background: var(--bs-blue-700);
	position: relative;
	z-index: 900;
}
.bsj-nav .bsj-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bsj-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.bsj-nav > .bsj-shell > nav > ul > li > a,
.bsj-nav ul li a {
	display: block;
	padding: .8rem 1rem;
	color: rgba(255, 255, 255, .92);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	transition: background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease);
}
.bsj-nav ul li a:hover,
.bsj-nav ul li.active > a,
.bsj-nav ul li.current > a {
	background: rgba(255, 255, 255, .13);
	color: #fff;
	text-decoration: none;
}
/* Dropdowns */
.bsj-nav ul li { position: relative; }
.bsj-nav ul ul {
	position: absolute; top: 100%; left: 0;
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--bs-line);
	border-radius: 0 0 var(--bs-radius) var(--bs-radius);
	box-shadow: var(--bs-shadow-lg);
	flex-direction: column;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: all var(--bs-dur) var(--bs-ease);
	z-index: 950;
}
.bsj-nav ul li:hover > ul,
.bsj-nav ul li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.bsj-nav ul ul li a {
	color: var(--bs-ink-2);
	text-transform: none;
	font-weight: 500;
	padding: .6rem 1rem;
	border-bottom: 1px solid var(--bs-line-soft);
}
.bsj-nav ul ul li:last-child a { border-bottom: 0; }
.bsj-nav ul ul li a:hover { background: var(--bs-blue-100); color: var(--bs-blue-700); }
/*
 * FIX: the shared "active/current" rule above (.bsj-nav ul li.active > a)
 * sets white text — correct for a top-level item sitting on the dark navy
 * bar, but that rule also matches a submenu item with no override to undo
 * it, and .bsj-submenu's own background is white. Being on the page a
 * dropdown link points to made that link's text white-on-white — invisible,
 * not just unstyled. Recolour it the same as the (already-correct) hover
 * state instead.
 */
.bsj-nav ul ul li.active > a,
.bsj-nav ul ul li.current > a {
	background: var(--bs-blue-100);
	color: var(--bs-blue-700);
}

.bsj-header.is-sticky {
	position: sticky; top: 0; z-index: 1000;
	box-shadow: var(--bs-shadow);
}

/* Mobile nav toggle */
.bsj-navtoggle {
	display: none;
	background: transparent; border: 0; color: #fff;
	font-size: 1.35rem; padding: .6rem .75rem; cursor: pointer;
}
@media (max-width: 991px) {
	.bsj-navtoggle { display: block; }
	.bsj-nav nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--bs-blue-700);
		box-shadow: var(--bs-shadow-lg);
		max-height: 70vh; overflow-y: auto;
	}
	.bsj-nav nav.is-open { display: block; }
	.bsj-nav nav ul { flex-direction: column; }
	.bsj-nav ul ul {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0;
		background: rgba(0, 0, 0, .18);
	}
	.bsj-nav ul ul li a { color: rgba(255,255,255,.85); }
	.bsj-nav ul ul li a:hover { background: rgba(255,255,255,.1); color: #fff; }
}

/* Search icon — last item in the nav bar, opens the full-screen overlay below */
.bsj-navsearch-toggle {
	display: flex;
	align-items: center;
	flex: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, .92);
	font-size: 1.05rem;
	padding: .8rem 1.15rem;
	cursor: pointer;
	transition: background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease);
}
.bsj-navsearch-toggle:hover { background: rgba(255, 255, 255, .13); color: #fff; }
@media (max-width: 991px) {
	/* Same row as the hamburger; the collapsible menu drawer sits below both. */
	.bsj-navsearch-toggle { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   9b. Full-screen search overlay
   -------------------------------------------------------------------------- */

/*
 * Reuses the generic .bsj-modal open/close machinery (theme.js), just with
 * its own backdrop and panel treatment: full-viewport, on the same navy/teal
 * gradient as the homepage hero rather than the small centred dialog used
 * for login.
 */
.bsj-modal--search .bsj-modal__backdrop {
	background:
		radial-gradient(1200px 500px at 50% -10%, rgba(31, 179, 187, .28), transparent 60%),
		linear-gradient(135deg, var(--bs-navy-900) 0%, var(--bs-navy-700) 55%, var(--bs-blue-700) 100%);
	backdrop-filter: none;
}
.bsj-modal--search .bsj-modal__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: none;
	/*
	 * The base .bsj-modal__panel rule sets overflow-y:auto for the small
	 * centred login dialog, where content can legitimately outgrow 90vh. Left
	 * un-overridden here, it also applies to .bsj-searchoverlay__close, which
	 * sits above the panel's own box (top: -3.75rem, i.e. visually outside
	 * it). A position:relative ancestor with overflow:auto turns any child
	 * that sticks out past its bounds — including negatively-offset absolute
	 * children — into scrollable overflow, so the close button alone was
	 * enough to spawn a scrollbar. This variant's content is always short, so
	 * it never needs to scroll.
	 */
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-inline: 1rem;
}

.bsj-searchoverlay__eyebrow {
	margin: 0 0 1.25rem;
	text-align: center;
	color: #fff;
	font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
	font-weight: 700;
}

.bsj-modal--search .mod-finder,
.bsj-modal--search .js-finder-searchform { width: 100%; }
.bsj-modal--search .awesomplete { display: block; width: 100%; }

.bsj-modal--search input.js-finder-search-query {
	width: 100%;
	height: 62px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--bs-radius-pill);
	background: #fff;
	color: var(--bs-ink);
	font-size: 1.1rem;
	font-family: var(--bs-font);
	box-shadow: var(--bs-shadow-lg);
}
.bsj-modal--search input.js-finder-search-query::placeholder { color: var(--bs-ink-4); }
.bsj-modal--search input.js-finder-search-query:focus {
	outline: 3px solid var(--bs-teal-500);
	outline-offset: 3px;
}

.bsj-searchoverlay__close {
	position: absolute;
	top: -3.75rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--bs-dur) var(--bs-ease);
}
.bsj-searchoverlay__close:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 640px) {
	.bsj-searchoverlay__close { top: -3.25rem; right: .5rem; }
}

/* --------------------------------------------------------------------------
   10. Hero search band
   -------------------------------------------------------------------------- */
.bsj-hero {
	background:
		radial-gradient(1200px 400px at 15% -20%, rgba(31, 179, 187, .28), transparent 60%),
		linear-gradient(135deg, var(--bs-navy-900) 0%, var(--bs-navy-700) 55%, var(--bs-blue-700) 100%);
	color: #fff;
	padding-block: 2.5rem 2.25rem;
	position: relative;
	overflow: hidden;
}
.bsj-hero::after {
	content: "";
	position: absolute; right: -80px; top: -80px;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.06), transparent 65%);
	pointer-events: none;
}
.bsj-hero__inner { position: relative; z-index: 1; }
.bsj-hero h1 {
	color: #fff;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	margin-bottom: .4rem;
}
.bsj-hero p { color: rgba(255, 255, 255, .82); margin-bottom: 1.5rem; font-size: 1rem; }

.bsj-hero__stats {
	display: flex; flex-wrap: wrap; gap: 2rem;
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
}
.bsj-hero__stat strong {
	display: block;
	font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1;
}
.bsj-hero__stat span { font-size: .8125rem; color: rgba(255, 255, 255, .72); }

/* Search form inside the hero — also reused standalone */
.bsj-searchbar {
	display: grid;
	gap: .6rem;
	grid-template-columns: 1fr;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	padding: .6rem;
	border-radius: var(--bs-radius-lg);
	backdrop-filter: blur(6px);
}
@media (min-width: 768px) {
	.bsj-searchbar { grid-template-columns: 2fr 1.4fr 1.4fr auto; align-items: center; }
}
.bsj-searchbar input[type="text"],
.bsj-searchbar input[type="search"],
.bsj-searchbar select {
	width: 100%;
	height: 46px;
	padding: 0 .9rem;
	border: 1px solid transparent;
	border-radius: var(--bs-radius-sm);
	background: #fff;
	color: var(--bs-ink);
	font-size: .9rem;
	font-family: var(--bs-font);
}
.bsj-searchbar input::placeholder { color: var(--bs-ink-4); }
.bsj-searchbar .bsj-btn { height: 46px; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.bsj-form { display: grid; gap: 1.1rem; }
.bsj-form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.bsj-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsj-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bsj-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bsj-field > label,
.bsj-label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--bs-ink-2);
}
/*
 * Required-field asterisk.
 *
 * FIX: this was `.bsj-field .required::after` — a descendant selector, so it
 * fired on ANY element inside the field carrying Joomla's `required` class,
 * not just the label. On the registration form that included
 * `<fieldset class="required checkboxes">`, which rendered a stray red
 * asterisk on its own line under the "Marketing Communications" checkbox.
 * Scoped to the two elements that actually are labels here: a real <label>
 * (login / reset / remind / captcha) and the <span class="bsj-label"> the
 * registration layout emits. Note .bsj-label and .required sit on the SAME
 * element there, so it needs a compound selector, not a descendant one —
 * the old `.bsj-label .required` never matched anything at all.
 *
 * The marker is `"*"` with a margin rather than `" *"`: a literal space is a
 * line-break opportunity, which let the asterisk wrap onto a line by itself
 * after a long label. A margin cannot break.
 */
.bsj-field > label.required::after,
.bsj-label.required::after {
	content: "*";
	display: inline-block;
	margin-inline-start: .2rem;
	color: var(--bs-danger);
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="search"], select, textarea,
.bsj-input {
	width: 100%;
	min-height: 44px;
	padding: .6rem .85rem;
	font-family: var(--bs-font);
	font-size: .9rem;
	color: var(--bs-ink);
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	transition: border-color var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
textarea { min-height: 110px; resize: vertical; }

/*
 * Joomla's password field emits Bootstrap's .input-group markup with a
 * show/hide toggle button. This template deliberately does not load
 * Bootstrap, so the group had no layout: the toggle dropped onto its own
 * line under the input and rendered as a bare grey browser button on the
 * login form. Supplying just the few rules the widget needs keeps it
 * attached to the field without pulling in the framework.
 */
.input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}
.input-group > input,
.input-group > .form-control {
	flex: 1 1 auto;
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-password-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	padding: 0;
	border: 1px solid var(--bs-line);
	border-left: 0;
	border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
	background: var(--bs-surface-3);
	color: var(--bs-ink-3);
	cursor: pointer;
	transition: background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease);
}
.input-password-toggle:hover { background: var(--bs-blue-100); color: var(--bs-blue-700); }

input:focus, select:focus, textarea:focus, .bsj-input:focus {
	outline: 0;
	border-color: var(--bs-blue-500);
	box-shadow: 0 0 0 3px var(--bs-blue-100);
}
input::placeholder, textarea::placeholder { color: var(--bs-ink-4); }

input.invalid, select.invalid, textarea.invalid {
	border-color: var(--bs-danger);
	box-shadow: 0 0 0 3px var(--bs-danger-bg);
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d6875'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .65rem center;
	background-size: 16px;
	padding-right: 2.2rem;
}

.bsj-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; }
.bsj-check input[type="checkbox"], .bsj-check input[type="radio"] {
	width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--bs-blue-600);
}

.bsj-help { font-size: .78rem; color: var(--bs-ink-4); }
.bsj-error { font-size: .78rem; color: var(--bs-danger); font-weight: 500; }

/* Auth / form card used by login + registration */
.bsj-authcard {
	max-width: 940px;
	margin-inline: auto;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	box-shadow: var(--bs-shadow-sm);
	overflow: hidden;
}
.bsj-authcard__head {
	padding: 1.5rem 1.75rem 1.25rem;
	border-bottom: 1px solid var(--bs-line-soft);
	background: linear-gradient(135deg, var(--bs-surface) 0%, var(--bs-blue-100) 100%);
}
.bsj-authcard__head h1 { margin-bottom: .25rem; font-size: 1.5rem; }
.bsj-authcard__body { padding: 1.75rem; }

.bsj-benefits { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.bsj-benefits li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--bs-ink-2); }
.bsj-benefits li::before {
	content: "✓";
	flex: none;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bs-teal-100); color: var(--bs-teal-700);
	font-size: .7rem; font-weight: 700;
	margin-top: 1px;
}

/* --------------------------------------------------------------------------
   12. Filters sidebar
   -------------------------------------------------------------------------- */
.bsj-filters { display: grid; gap: 1rem; }
.bsj-filters__group {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
}
.bsj-filters__title {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%;
	padding: .8rem 1rem;
	background: var(--bs-surface-2);
	border: 0; border-bottom: 1px solid var(--bs-line-soft);
	font-family: var(--bs-font);
	font-size: .8125rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--bs-navy-900);
	cursor: pointer;
	text-align: left;
}
.bsj-filters__title i { transition: transform var(--bs-dur) var(--bs-ease); color: var(--bs-ink-4); }
.bsj-filters__group.is-collapsed .bsj-filters__title i { transform: rotate(-90deg); }
.bsj-filters__group.is-collapsed .bsj-filters__body { display: none; }
.bsj-filters__body { padding: .9rem 1rem; max-height: 260px; overflow-y: auto; }
.bsj-filters__body .bsj-check + .bsj-check { margin-top: .55rem; }

.bsj-activefilters {
	display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
	margin-bottom: 1rem;
}
.bsj-activefilters__clear { font-size: .8125rem; font-weight: 600; color: var(--bs-accent-600); }

/* Result toolbar */
.bsj-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 1rem;
	padding: .85rem 1.15rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	margin-bottom: 1.15rem;
}
.bsj-toolbar__count { font-size: .9rem; color: var(--bs-ink-3); }
.bsj-toolbar__count strong { color: var(--bs-navy-900); font-size: 1.05rem; }
.bsj-toolbar__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bsj-toolbar__actions select { min-height: 38px; padding-block: .3rem; font-size: .8125rem; width: auto; }

/* --------------------------------------------------------------------------
   13. Job detail page
   -------------------------------------------------------------------------- */
.bsj-jobhead {
	position: relative;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	padding: 1.75rem 1.5rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--bs-shadow-sm);
	overflow: hidden;
}
/* Modern touch: a slim brand-gradient rule along the top of the header card. */
.bsj-jobhead::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--bs-blue-600), var(--bs-teal-600));
}
.bsj-jobhead__top {
	display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--bs-line-soft);
}
.bsj-jobhead__logo {
	width: 84px; height: 84px; flex: none;
	display: grid; place-items: center;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	background: #fff; overflow: hidden;
	box-shadow: var(--bs-shadow-xs);
}
.bsj-jobhead__logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
/*
 * FIX: .bsj-jobhead__logo's own `background: #fff` was declared after
 * .bsj-job__logo--fallback's gradient in the stylesheet, and both are
 * single-class selectors of equal specificity — so on a job with no
 * company logo, the later rule always won, leaving the fallback
 * initial-letter (white text, per .bsj-job__logo--fallback) sitting on
 * a plain white box: invisible white-on-white instead of the intended
 * blue/teal gradient tile.
 */
.bsj-jobhead__logo.bsj-job__logo--fallback {
	background: linear-gradient(135deg, var(--bs-blue-600), var(--bs-teal-600));
	border: 0;
}
.bsj-jobhead__main { flex: 1; min-width: 240px; }
.bsj-jobhead__main h1 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); margin-bottom: .35rem; }
.bsj-jobhead__company { font-size: 1rem; font-weight: 600; color: var(--bs-teal-700); margin-bottom: .7rem; }
.bsj-jobhead__cta { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; min-width: 170px; }

.bsj-jobfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: .75rem;
	padding-top: 1.25rem;
}
.bsj-jobfact {
	display: flex; align-items: center; gap: .75rem;
	padding: .65rem .75rem;
	background: var(--bs-surface-2, var(--bs-blue-100));
	border-radius: var(--bs-radius-sm);
}
.bsj-jobfact__icon {
	flex: none;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--bs-teal-600);
	font-size: .85rem;
	box-shadow: var(--bs-shadow-xs);
}
.bsj-jobfact__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bsj-jobfact__label {
	font-size: .68rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--bs-ink-4);
}
.bsj-jobfact__value { font-size: .9rem; font-weight: 600; color: var(--bs-navy-900); }

.bsj-jobbody { line-height: 1.75; color: var(--bs-ink-2); }
.bsj-jobbody h2 {
	display: flex; align-items: center; gap: .55rem;
	font-size: 1.2rem; margin-top: 2rem; margin-bottom: .9rem;
	padding-bottom: .5rem; border-bottom: 2px solid var(--bs-line);
	position: relative;
}
.bsj-jobbody h2 i { color: var(--bs-teal-600); font-size: 1rem; }
.bsj-jobbody h2:first-child { margin-top: 0; }
.bsj-jobbody h2::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 48px; height: 2px; background: var(--bs-teal-600);
}
.bsj-jobbody ul, .bsj-jobbody ol { padding-left: 1.35rem; margin-bottom: 1.15rem; }
.bsj-jobbody li { margin-bottom: .5rem; }
.bsj-jobbody li::marker { color: var(--bs-teal-600); }

.bsj-applybar {
	position: sticky; bottom: 0; z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .9rem 1.25rem;
	margin-top: 1.5rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-lg);
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   14. Article / news
   -------------------------------------------------------------------------- */
.bsj-article-card {
	display: flex; flex-direction: column;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
	box-shadow: var(--bs-shadow-xs);
	height: 100%;
	transition: box-shadow var(--bs-dur) var(--bs-ease), transform var(--bs-dur) var(--bs-ease);
	position: relative;
}
.bsj-article-card:hover { box-shadow: var(--bs-shadow); transform: translateY(-2px); }
.bsj-article-card__media {
	aspect-ratio: 16 / 9;
	background: var(--bs-surface-3);
	overflow: hidden;
}
.bsj-article-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .35s var(--bs-ease);
}
.bsj-article-card:hover .bsj-article-card__media img { transform: scale(1.04); }
.bsj-article-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bsj-article-card__title { font-size: .95rem; font-weight: 700; line-height: 1.4; margin: 0; }
.bsj-article-card__title a { color: var(--bs-navy-900); }
.bsj-article-card__title a::after { content: ""; position: absolute; inset: 0; }
.bsj-article-card__title a:hover { color: var(--bs-blue-600); text-decoration: none; }
.bsj-article-card__meta {
	font-size: .75rem; color: var(--bs-ink-4);
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	margin-top: auto; padding-top: .5rem;
}
.bsj-article-card__excerpt { font-size: .8375rem; color: var(--bs-ink-3); line-height: 1.55; }

/* Category list rows (default_articles.php) — description clamped to
   3 lines with an automatic ellipsis, regardless of how long the intro
   text actually is. */
.bsj-newsrow__excerpt {
	margin: .35rem 0 0;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--bs-ink-3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Horizontal list variant used in the news rails */
.bsj-newslist { display: flex; flex-direction: column; gap: .9rem; }
.bsj-newsitem {
	display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .8rem;
	padding-bottom: .9rem; border-bottom: 1px solid var(--bs-line-soft);
	position: relative;
}
.bsj-newsitem:last-child { border-bottom: 0; padding-bottom: 0; }
.bsj-newsitem__thumb {
	width: 76px; height: 60px; border-radius: var(--bs-radius-sm);
	overflow: hidden; background: var(--bs-surface-3);
}
.bsj-newsitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bsj-newsitem__title { font-size: .85rem; font-weight: 600; line-height: 1.4; margin: 0 0 .25rem; }
.bsj-newsitem__title a { color: var(--bs-navy-900); }
.bsj-newsitem__title a::after { content: ""; position: absolute; inset: 0; }
.bsj-newsitem__title a:hover { color: var(--bs-blue-600); text-decoration: none; }
.bsj-newsitem__date { font-size: .72rem; color: var(--bs-ink-4); }

/* Full article */
.bsj-article { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); }
.bsj-article__header { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bs-line-soft); }
.bsj-article__header h1 { margin-bottom: .6rem; }
.bsj-article__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; color: var(--bs-ink-4); align-items: center; }
.bsj-article__body { font-size: 1rem; line-height: 1.8; color: var(--bs-ink-2); }
.bsj-article__body > p:first-of-type { font-size: 1.075rem; color: var(--bs-ink); }
.bsj-article__body img { border-radius: var(--bs-radius); margin-block: 1.25rem; }
.bsj-article__body h2, .bsj-article__body h3 { margin-top: 2rem; }
.bsj-article__body blockquote {
	margin: 1.5rem 0; padding: 1rem 1.25rem;
	border-left: 3px solid var(--bs-teal-600);
	background: var(--bs-teal-100);
	border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
	font-style: italic; color: var(--bs-ink-2);
}
.bsj-share { display: flex; gap: .5rem; align-items: center; }
.bsj-share a {
	width: 34px; height: 34px; display: grid; place-items: center;
	border-radius: var(--bs-radius-sm); background: var(--bs-surface-3);
	color: var(--bs-ink-3); font-size: .9rem;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-share a:hover { background: var(--bs-blue-600); color: #fff; text-decoration: none; }

/*
 * Article featured image.
 *
 * Default: a wide banner treatment for real photography — fills the frame,
 * cropped to a fixed height so tall/short source photos still sit level.
 */
.bsj-article__media {
	margin: 0 0 1.75rem;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
	background: var(--bs-surface-2);
}
.bsj-article__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
}
.bsj-article__media figcaption {
	padding: .65rem 1rem;
	font-size: .8125rem;
	color: var(--bs-ink-4);
	text-align: center;
	background: var(--bs-surface);
	border-top: 1px solid var(--bs-line-soft);
}

/*
 * Compact variant: for source images under ~480px wide — typically vendor
 * logo lockups and deal graphics, not photography. Framing these at their
 * own natural size on a neutral card keeps them crisp; stretching a ~200px
 * source to fill a 900px-wide column (the old behaviour) upscaled it well
 * past its native resolution and read as blurry, low-quality.
 */
.bsj-article__media--compact {
	background: #fff;
	text-align: center;
	padding: 2.25rem 1.5rem;
}
.bsj-article__media--compact img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   15. Company / employer
   -------------------------------------------------------------------------- */
.bsj-company-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
	padding: 1.25rem 1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	transition: all var(--bs-dur) var(--bs-ease);
	position: relative;
	height: 100%;
	overflow: hidden;
}
.bsj-company-card:hover { border-color: var(--bs-blue-500); box-shadow: var(--bs-shadow); transform: translateY(-2px); }
.bsj-company-card__logo {
	width: 100%;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/*
 * Some uploaded logos are full banner-style images rather than a clean
 * mark on a transparent background, so object-fit:contain alone still
 * shows their own solid background colour filling the box — not fixable
 * from CSS since that colour is baked into the image's own pixels.
 *
 * FIX: max-height was a *percentage* (100%) — percentage max-height only
 * resolves reliably against an ancestor with a definite height, and inside
 * a `display:grid` + `place-items:center` parent (the previous rule here)
 * that isn't guaranteed, so some logos were sized past the 72px box and
 * then clipped by the container's overflow:hidden instead of actually
 * being scaled down to fit — cropped at the bottom instead of shrunk.
 * A fixed-unit max-height (72px, matching the container's own height, in a
 * plain flex box instead of grid) resolves unambiguously.
 */
.bsj-company-card__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 72px;
	max-width: 100%;
	object-fit: contain;
}
.bsj-company-card__name { font-size: .9rem; font-weight: 700; color: var(--bs-navy-900); margin: 0; }
.bsj-company-card__name a::after { content: ""; position: absolute; inset: 0; }
.bsj-company-card__count { font-size: .78rem; color: var(--bs-ink-4); }

.bsj-logo-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	background: var(--bs-line);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
}
.bsj-logo-strip a {
	background: var(--bs-surface);
	padding: 1.1rem .9rem;
	display: grid; place-items: center;
	min-height: 88px;
	transition: background var(--bs-dur) var(--bs-ease);
}
.bsj-logo-strip a:hover { background: var(--bs-surface-2); }
.bsj-logo-strip img { max-height: 46px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: all var(--bs-dur) var(--bs-ease); }
.bsj-logo-strip a:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   16. Dashboard
   -------------------------------------------------------------------------- */
.bsj-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.bsj-stat {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-left: 3px solid var(--bs-blue-600);
	border-radius: var(--bs-radius);
	padding: 1.1rem 1.25rem;
}
.bsj-stat--teal { border-left-color: var(--bs-teal-600); }
.bsj-stat--accent { border-left-color: var(--bs-accent-600); }
.bsj-stat--success { border-left-color: var(--bs-success); }
.bsj-stat__value { font-size: 1.85rem; font-weight: 700; color: var(--bs-navy-900); line-height: 1.1; }
.bsj-stat__label { font-size: .8125rem; color: var(--bs-ink-3); margin-top: .2rem; }

.bsj-progress { height: 8px; background: var(--bs-surface-3); border-radius: var(--bs-radius-pill); overflow: hidden; }
.bsj-progress__bar {
	height: 100%; border-radius: var(--bs-radius-pill);
	background: linear-gradient(90deg, var(--bs-teal-600), var(--bs-blue-600));
	transition: width .5s var(--bs-ease);
}

.bsj-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--bs-line); margin-bottom: 1.5rem; overflow-x: auto; }
.bsj-tabs a, .bsj-tabs button {
	padding: .7rem 1.1rem;
	font-size: .875rem; font-weight: 600;
	color: var(--bs-ink-3);
	background: transparent; border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap; cursor: pointer;
	font-family: var(--bs-font);
}
.bsj-tabs a:hover, .bsj-tabs button:hover { color: var(--bs-blue-600); text-decoration: none; }
.bsj-tabs a.is-active, .bsj-tabs button.is-active { color: var(--bs-blue-700); border-bottom-color: var(--bs-blue-600); }

/* --------------------------------------------------------------------------
   17. Tables
   -------------------------------------------------------------------------- */
.bsj-table-wrap { overflow-x: auto; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); background: var(--bs-surface); }
.bsj-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bsj-table th {
	text-align: left; padding: .8rem 1rem;
	background: var(--bs-surface-2);
	font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--bs-ink-3);
	border-bottom: 1px solid var(--bs-line);
	white-space: nowrap;
}
.bsj-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--bs-line-soft); vertical-align: middle; }
.bsj-table tbody tr:last-child td { border-bottom: 0; }
.bsj-table tbody tr:hover { background: var(--bs-surface-2); }

/* --------------------------------------------------------------------------
   18. Breadcrumbs, pagination, messages, empty state
   -------------------------------------------------------------------------- */
.bsj-breadcrumb {
	padding-block: .85rem;
	font-size: .8125rem;
}
.bsj-breadcrumb ol, .bsj-breadcrumb ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.bsj-breadcrumb li { display: flex; align-items: center; gap: .4rem; color: var(--bs-ink-4); }
.bsj-breadcrumb li + li::before { content: "/"; color: var(--bs-line); }
.bsj-breadcrumb a { color: var(--bs-ink-3); }
.bsj-breadcrumb a:hover { color: var(--bs-blue-600); }
.bsj-breadcrumb .active, .bsj-breadcrumb [aria-current="page"] { color: var(--bs-navy-900); font-weight: 600; }

.bsj-pagination { display: flex; justify-content: center; margin-top: 1.75rem; }

/*
 * The actual box styling for pagination links lives in section 31 below,
 * scoped to `.page-link` — the class Joomla's real Pagination::getPagesLinks()
 * markup uses (`<a class="page-link"><span class="icon-angle-right"></span></a>`).
 *
 * An earlier, broader `.bsj-pagination a, .bsj-pagination span` rule used to
 * live here. Because Joomla nests an icon <span> inside the <a> for the
 * prev/next/first/last controls, that selector matched BOTH the anchor and
 * its inner span and drew the same bordered box on each — a visible double
 * border around every arrow control. Removed; `.page-link` below is now the
 * only rule that boxes a pagination control.
 */

.bsj-alert {
	display: flex; gap: .75rem; align-items: flex-start;
	padding: .9rem 1.15rem;
	border-radius: var(--bs-radius);
	border: 1px solid transparent;
	font-size: .875rem;
	margin-bottom: 1rem;
}
.bsj-alert--info { background: var(--bs-blue-100); border-color: #b9dcec; color: var(--bs-blue-700); }
.bsj-alert--success { background: var(--bs-success-bg); border-color: #b6e2cd; color: var(--bs-success); }
.bsj-alert--warning { background: var(--bs-warning-bg); border-color: #f0dcb4; color: var(--bs-warning); }
.bsj-alert--danger, .bsj-alert--error { background: var(--bs-danger-bg); border-color: #f3c6c1; color: var(--bs-danger); }
.bsj-alert__close { margin-left: auto; background: 0; border: 0; cursor: pointer; color: inherit; opacity: .6; font-size: 1.1rem; line-height: 1; }
.bsj-alert__close:hover { opacity: 1; }

.bsj-empty {
	text-align: center;
	padding: 3rem 1.5rem;
	background: var(--bs-surface);
	border: 1px dashed var(--bs-line);
	border-radius: var(--bs-radius);
}
.bsj-empty__icon { font-size: 2.5rem; color: var(--bs-line); margin-bottom: .75rem; }
.bsj-empty h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.bsj-empty p { color: var(--bs-ink-4); font-size: .9rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   19. Ads
   -------------------------------------------------------------------------- */
/*
 * On interior pages, jdoc:include "middle-ad" can hold more than one
 * module — e.g. a banner-ad module and the "Latest Articles and Interviews"
 * carousel share this position. flex's default row direction put them side
 * by side, so the ad rendered as a sliver to the left of the carousel
 * instead of a banner above it. Stacked vertically instead.
 */
.bsj-ad { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.bsj-ad img { max-width: 100%; height: auto; border-radius: var(--bs-radius-sm); }
.bsj-ad > * { width: 100%; }
.bsj-ad--leader { margin-block: 1.5rem; }
.bsj-ad--rail { margin-bottom: 1.25rem; }
.bsj-ad__label {
	display: block; text-align: center;
	font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bs-ink-4); margin-bottom: .3rem;
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.bsj-footer {
	background: var(--bs-navy-900);
	color: rgba(255, 255, 255, .72);
	padding-block: 3rem 0;
	margin-top: 3rem;
}
.bsj-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	padding-bottom: 2.5rem;
}
.bsj-footer h3, .bsj-footer h4, .bsj-footer .bsj-footer__title {
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.bsj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bsj-footer a { color: rgba(255, 255, 255, .72); font-size: .875rem; }
.bsj-footer a:hover { color: #fff; text-decoration: none; }
.bsj-footer img { max-width: 170px; }

.bsj-footer__social { display: flex; gap: .5rem; margin-top: 1rem; }
.bsj-footer__social a {
	width: 36px; height: 36px; display: grid; place-items: center;
	border-radius: var(--bs-radius-sm);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	transition: background var(--bs-dur) var(--bs-ease);
}
.bsj-footer__social a:hover { background: var(--bs-teal-600); }

.bsj-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 1.15rem;
	font-size: .8125rem;
	text-align: center;
	color: rgba(255, 255, 255, .55);
}
.bsj-footer__bar p { margin: 0; }

/* Back to top */
.bsj-totop {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 800;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--bs-teal-600); color: #fff;
	box-shadow: var(--bs-shadow);
	cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bsj-totop:hover { background: var(--bs-teal-700); }

/* --------------------------------------------------------------------------
   21. Joomla interop — normalise core markup that we do not override
   -------------------------------------------------------------------------- */
.bsj-component .page-header h1,
.bsj-component .page-header h2 { margin-top: 0; }

/* Joomla system messages */
#system-message-container joomla-alert { display: block; margin-bottom: 1rem; }

/* Legacy module chrome from mod_* templates we did not rewrite */
.bsj-module { margin-bottom: 1.5rem; }
.bsj-module:last-child { margin-bottom: 0; }
.bsj-module > h3:first-child,
.bsj-module > .module-title {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0 0 1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--bs-line);
	font-size: 1.05rem;
	position: relative;
}
.bsj-module > h3:first-child::after,
.bsj-module > .module-title::after {
	content: ""; position: absolute; left: 0; bottom: -2px;
	width: 56px; height: 2px; background: var(--bs-teal-600);
}

/* Tame Bootstrap remnants coming from third-party modules */
.bsj-main .row { margin-inline: 0; }
.bsj-main img { max-width: 100%; height: auto; }

/* Utilities */
.bsj-hide { display: none !important; }
@media (max-width: 767px) { .bsj-hide-sm { display: none !important; } }
@media (max-width: 991px) { .bsj-hide-md { display: none !important; } }
.bsj-mt-0 { margin-top: 0 !important; }
.bsj-mb-0 { margin-bottom: 0 !important; }
.bsj-text-center { text-align: center; }
.bsj-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print {
	.bsj-utility, .bsj-nav, .bsj-hero, .bsj-footer,
	.bsj-totop, .bsj-ad, .bsj-applybar, .bsj-filters, .bsj-modal { display: none !important; }
	body.site { background: #fff; font-size: 12pt; }
	.bsj-card, .bsj-job, .bsj-jobhead, .bsj-article { border: 1px solid #ccc; box-shadow: none; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
}

/* --------------------------------------------------------------------------
   23. Module overrides — news blocks, job rail, events, employers
   -------------------------------------------------------------------------- */

/* mod_bsj_articles */
.bsj-newsblock { margin-bottom: 0; }
.bsj-newsblock__body {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.bsj-newsblock__foot {
	text-align: right;
	padding-top: .6rem;
	font-size: .8125rem;
	font-weight: 600;
}

.bsj-newslead { display: block; position: relative; }
.bsj-newslead__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--bs-radius-sm);
	background: var(--bs-surface-3);
	margin-bottom: .85rem;
}
.bsj-newslead__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .35s var(--bs-ease);
}
.bsj-newslead:hover .bsj-newslead__media img { transform: scale(1.03); }
.bsj-newslead__title {
	font-size: 1.05rem; font-weight: 700; line-height: 1.4;
	margin: 0 0 .4rem;
}
.bsj-newslead__title a { color: var(--bs-navy-900); }
.bsj-newslead__title a::after { content: ""; position: absolute; inset: 0; }
.bsj-newslead__title a:hover { color: var(--bs-blue-600); text-decoration: none; }
.bsj-newslead__excerpt {
	font-size: .85rem; color: var(--bs-ink-3); line-height: 1.55;
	margin: 0 0 .4rem;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* Compact rows inside a news block */
.bsj-newsblock .bsj-newsitem {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bs-line-soft);
}
.bsj-newsblock .bsj-newsitem:last-child { border-bottom: 0; padding-bottom: 0; }
.bsj-newsitem--notext { grid-template-columns: minmax(0, 1fr); }
.bsj-newsitem__date { display: flex; align-items: center; gap: .35rem; }
.bsj-newsitem__date i { color: var(--bs-teal-600); }

/* mod_latest_jobs rail */
.bsj-jobrail .bsj-joblist {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: .35rem 1.1rem;
}

/* mod_bsjevents */
.bsj-eventcard {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: .9rem;
	align-items: start;
	padding: 1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	position: relative;
	transition: border-color var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
.bsj-eventcard:hover { border-color: var(--bs-blue-500); box-shadow: var(--bs-shadow-sm); }
.bsj-eventcard__date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 58px; padding: .45rem 0;
	background: var(--bs-navy-900); color: #fff;
	border-radius: var(--bs-radius-sm);
}
.bsj-eventcard__day { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.bsj-eventcard__mon {
	font-size: .68rem; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; opacity: .8;
}
.bsj-eventcard__title { font-size: .9rem; font-weight: 700; line-height: 1.4; margin: 0 0 .35rem; }
.bsj-eventcard__title a { color: var(--bs-navy-900); }
.bsj-eventcard__title a::after { content: ""; position: absolute; inset: 0; }
.bsj-eventcard__title a:hover { color: var(--bs-blue-600); text-decoration: none; }

/* --------------------------------------------------------------------------
   24. Menus (mod_menu)
   -------------------------------------------------------------------------- */
.bsj-menu, .bsj-submenu { list-style: none; margin: 0; padding: 0; }
.bsj-nav .bsj-menu { display: flex; flex-wrap: wrap; }
.bsj-nav .bsj-submenu {
	position: absolute; top: 100%; left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid var(--bs-line);
	border-radius: 0 0 var(--bs-radius) var(--bs-radius);
	box-shadow: var(--bs-shadow-lg);
	display: flex; flex-direction: column;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: all var(--bs-dur) var(--bs-ease);
	z-index: 950;
}
.bsj-nav .bsj-menu > li { position: relative; }
.bsj-nav .bsj-menu > li:hover > .bsj-submenu,
.bsj-nav .bsj-menu > li:focus-within > .bsj-submenu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.bsj-nav .bsj-menu > li.has-children > a::after {
	content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900;
	margin-left: .4rem; font-size: .7rem; opacity: .7;
}
.bsj-menu__heading, .bsj-menu__sep {
	display: block; padding: .8rem 1rem;
	color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 700;
	text-transform: uppercase;
}

/* Footer menus reuse the same markup */
.bsj-footer .bsj-menu { display: grid; gap: .6rem; }
.bsj-footer .bsj-submenu { display: grid; gap: .5rem; padding-left: .9rem; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   25. Modal
   -------------------------------------------------------------------------- */
.bsj-modal {
	position: fixed; inset: 0; z-index: 1200;
	display: grid; place-items: center;
	padding: 1.25rem;
}
.bsj-modal[hidden] { display: none; }
.bsj-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(6, 17, 54, .6);
	backdrop-filter: blur(2px);
}
.bsj-modal__panel {
	position: relative;
	width: 100%; max-width: 420px;
	max-height: 90vh; overflow-y: auto;
	background: var(--bs-surface);
	border-radius: var(--bs-radius-lg);
	box-shadow: var(--bs-shadow-lg);
}
.bsj-modal__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 1.35rem;
	border-bottom: 1px solid var(--bs-line-soft);
}
.bsj-modal__head h2 { font-size: 1.15rem; }
.bsj-modal__close {
	background: 0; border: 0; cursor: pointer;
	font-size: 1.6rem; line-height: 1; color: var(--bs-ink-4);
	padding: 0 .25rem;
}
.bsj-modal__close:hover { color: var(--bs-ink); }
.bsj-modal__body { padding: 1.35rem; }
.bsj-modal__body input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.bsj-modal__body button[type="submit"],
.bsj-modal__body .btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; margin-top: .5rem;
	padding: .7rem 1.15rem;
	background: var(--bs-blue-600); border: 0; color: #fff;
	border-radius: var(--bs-radius-sm); font-weight: 600; cursor: pointer;
}
.bsj-modal__body ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   26. Third-party module fallbacks
   -------------------------------------------------------------------------- */

/* Ads (mod_bsjads, mod_custom): never let a banner blow out its column.
   Scoped to ad wrappers only — a blanket ".bsj-module img { margin-inline:auto }"
   also centred the news thumbnails and broke their grid columns. */
.bsj-ad img, .mod-bsjads img, .bsjads-content img, .bsj-module > div > img {
	max-width: 100%; height: auto; display: block; margin-inline: auto;
}
.bsj-module img { max-width: 100%; height: auto; }
.mod-bsjads, .bsjads-content { max-width: 100%; overflow: hidden; }

/* Card media.
   Most article images on this site are company logos, not photography, so
   these box-fit with `contain` on a white plate: `cover` cropped the sides off
   wordmarks like "NEUROCRINE" and "Opportunity @Work" and left them unreadable. */
.bsj-article-card__media,
.bsj-newslead__media,
.bsj-newsitem__thumb { background: #fff; }

.bsj-article-card__media img,
.bsj-newslead__media img,
.bsj-newsitem__thumb img {
	width: 100%; height: 100%;
	object-fit: contain;
	margin: 0;
	padding: .5rem;
}
.bsj-newsitem__thumb img { padding: .25rem; }

/* Opt-in for genuine photography (article intro images, hero banners) */
.bsj-article-card__media--photo img,
.bsj-newslead__media--photo img { object-fit: cover; padding: 0; }

.bsj-newsgrid--wide .bsj-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Smart search (mod_finder), where it still appears inline in the flow —
   the main site-wide search now lives in the full-screen overlay below. */
.bsj-utility form { display: flex; align-items: center; gap: .5rem; margin: 0; }
.bsj-utility .awesomplete { display: block; }
.bsj-utility input[type="search"], .bsj-utility input[type="text"] {
	min-height: 34px; padding: .3rem .7rem; font-size: .8125rem;
	min-width: 200px; border-radius: var(--bs-radius-pill);
}
.bsj-utility label { margin: 0; white-space: nowrap; }

/* Footer custom-HTML modules often ship bare <ul> lists */
.bsj-footer ul ul { padding-left: 1rem; margin-top: .5rem; }
.bsj-footer p { font-size: .875rem; }
.bsj-footer img { max-width: 170px; height: auto; }

/* Breadcrumbs module */
.bsj-breadcrumb .breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.bsj-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--bs-line); padding-right: .4rem; }
.bsj-breadcrumb .divider { display: none; }

/* Anything a legacy module renders with Bootstrap grid classes we no longer
   ship: stop them collapsing to zero width. */
.bsj-module [class^="col-"], .bsj-module [class*=" col-"] { width: auto; max-width: 100%; padding: 0; }
.bsj-module .row { display: block; margin: 0; }

/* Two-up logo strip, for narrow rails (Featured Recruiters) */
.bsj-logo-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsj-logo-strip--2 a { min-height: 76px; padding: .85rem .7rem; }
.bsj-logo-strip--2 img { max-height: 38px; }

/* Featured Recruiters is paid placement — show those logos in full colour. */
.bsj-logo-strip--2 img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   27. Carousel — native scroll-snap, no library
   -------------------------------------------------------------------------- */
.bsj-carousel { position: relative; }

.bsj-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: .25rem;
}
.bsj-carousel__track::-webkit-scrollbar { display: none; }

.bsj-carousel__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 0;
}

/* Slide widths. Each track sets how many are visible at a time. */
.bsj-carousel--1 .bsj-carousel__slide { width: 100%; }

.bsj-carousel--3 .bsj-carousel__slide { width: calc((100% - 2.5rem) / 3); }
@media (max-width: 991px) {
	.bsj-carousel--3 .bsj-carousel__slide { width: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 640px) {
	.bsj-carousel--3 .bsj-carousel__slide { width: 100%; }
}

/* Nav buttons */
.bsj-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--bs-line);
	border-radius: 50%;
	background: var(--bs-surface);
	color: var(--bs-navy-900);
	box-shadow: var(--bs-shadow);
	cursor: pointer;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-carousel__nav:hover:not(:disabled) {
	background: var(--bs-blue-600);
	border-color: var(--bs-blue-600);
	color: #fff;
}
.bsj-carousel__nav:disabled { opacity: 0; pointer-events: none; }
.bsj-carousel__nav--prev { left: -18px; }
.bsj-carousel__nav--next { right: -18px; }

/* When everything fits, hide the chrome entirely. */
.bsj-carousel.is-static .bsj-carousel__nav { display: none; }

@media (max-width: 991px) {
	.bsj-carousel__nav--prev { left: 2px; }
	.bsj-carousel__nav--next { right: 2px; }
}

/* Spotlight slider: one full-width editorial slide at a time.
   The card chrome sits on the slide, not the track: padding on the track makes
   a 100%-wide slide narrower than the scroll step, so the next slide's title
   bleeds in at the right edge. */
.bsj-spotlight .bsj-carousel__track {
	padding: 0;
	gap: 1.25rem;
}
.bsj-spotlight .bsj-carousel__slide { width: 100%; }

.bsj-spotlight .bsj-newslead {
	height: 100%;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 1rem 1.15rem;
}

/* Spotlight art is editorial banner work, not a logo, so it fills the frame:
   `contain` left a band of empty white down the right-hand side of the slide.
   The media grows to take whatever height the card has spare. */
.bsj-spotlight .bsj-newslead {
	display: flex;
	flex-direction: column;
}
/*
 * The media box grows to fill whatever height the card has spare, so an
 * image shorter than that box (a wide logo, say) sat pinned to the top
 * with dead space under it. Centre it instead — the box keeps its size,
 * the image just sits in the middle of it.
 */
.bsj-spotlight .bsj-newslead__media {
	flex: 1;
	aspect-ratio: auto;
	max-height: none;
	min-height: 260px;
	border-radius: var(--bs-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bsj-spotlight .bsj-newslead__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	padding: 0;
	max-height: none;
}
.bsj-spotlight .bsj-newslead__body { flex: none; }
.bsj-spotlight .bsj-newslead__title { min-height: 0; }

/* Header advert: keep multiple banners on one visual line */
.bsj-masthead__ad img { max-height: 90px; width: auto; }
.bsj-masthead__ad > * { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; }

/* Dots */
.bsj-carousel__dots {
	display: flex; justify-content: center; gap: .4rem;
	margin-top: .85rem;
}
.bsj-carousel__dot {
	width: 7px; height: 7px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--bs-line);
	cursor: pointer;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-carousel__dot.is-active { background: var(--bs-blue-600); width: 20px; border-radius: var(--bs-radius-pill); }

/* --------------------------------------------------------------------------
   28. Equal-height category columns
   -------------------------------------------------------------------------- */

/* Make every column in a row stretch to the tallest one. */
.bsj-grid { align-items: stretch; }
.bsj-grid > .bsj-module,
.bsj-grid > div { display: flex; flex-direction: column; min-width: 0; }

.bsj-grid > .bsj-module > .bsj-newsblock,
.bsj-grid > div > .bsj-newsblock { display: flex; flex-direction: column; flex: 1; }

.bsj-grid > .bsj-module > .bsj-newsblock > .bsj-newsblock__body,
.bsj-grid > div > .bsj-newsblock > .bsj-newsblock__body { flex: 1; }

/* Align the article rows across sibling columns:
   fixed lead image ratio + clamped titles give every column the same rhythm. */
.bsj-newsblock .bsj-newslead__media { aspect-ratio: 16 / 10; margin-bottom: .75rem; }

.bsj-newsblock .bsj-newslead__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
	margin-bottom: .3rem;
}

.bsj-newsblock .bsj-newsitem__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bsj-newsblock .bsj-newsitem { align-items: start; }
.bsj-newsblock .bsj-newsitem__thumb { width: 64px; height: 48px; flex: none; }
.bsj-newsblock .bsj-newsitem { grid-template-columns: 64px minmax(0, 1fr); }
.bsj-newsblock .bsj-newsitem--notext { grid-template-columns: minmax(0, 1fr); }

/* Push the "view more" foot to the bottom of the tallest column */
.bsj-newsblock__foot { margin-top: auto; }

/* Cards inside a carousel or grid stretch to full height */
.bsj-carousel__slide > .bsj-article-card,
.bsj-grid > .bsj-article-card { height: 100%; }
.bsj-article-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   29. Home feature row — news list beside the spotlight
   -------------------------------------------------------------------------- */
.bsj-featurerow {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
	/* Both columns end on the same line — the news list is usually the taller
	   of the two, and a short spotlight card floating beside it reads as a bug. */
	align-items: stretch;
}

.bsj-featurerow > .bsj-module { display: flex; flex-direction: column; }
.bsj-featurerow > .bsj-module > section { display: flex; flex-direction: column; flex: 1; }

/*
 * Only the spotlight stretches. The news list sets the row height from its own
 * content: `flex: 1` there means `flex-basis: 0`, which collapsed the list and
 * clipped the last stories off the bottom.
 *
 * The track is a flex ROW, so giving its slides flex:1 would also override
 * their `flex: 0 0 auto` width and squeeze every slide on screen at once.
 */
.bsj-featurerow .bsj-carousel { flex: 1; }
.bsj-featurerow .bsj-newslist-block__body { flex: 1 0 auto; }

.bsj-featurerow .bsj-carousel__track { height: 100%; }
.bsj-featurerow .bsj-spotlight .bsj-newslead { height: 100%; }

@media (min-width: 992px) {
	/* News list on the left at a fixed narrow width, spotlight taking the
	   remaining width. Column order follows the source order in index.php. */
	.bsj-featurerow { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
	.bsj-featurerow--single { grid-template-columns: minmax(0, 1fr); }
}

.bsj-featurerow > .bsj-module { margin-bottom: 0; min-width: 0; }

/* Vertical news list (Latest News) */
.bsj-newslist-block__body {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: .35rem 1.1rem;
}

.bsj-newslist-block .bsj-newsitem {
	grid-template-columns: 64px minmax(0, 1fr);
	gap: .8rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--bs-line-soft);
	align-items: start;
}
.bsj-newslist-block .bsj-newsitem:last-child { border-bottom: 0; }
.bsj-newslist-block .bsj-newsitem--notext { grid-template-columns: minmax(0, 1fr); }

.bsj-newslist-block .bsj-newsitem__thumb { width: 64px; height: 48px; flex: none; }

.bsj-newslist-block .bsj-badge {
	margin-bottom: .3rem;
	font-size: .62rem;
	padding: .12rem .45rem;
}

.bsj-newslist-block .bsj-newsitem__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .85rem;
	margin-bottom: .3rem;
}

/* Inside the feature row the card is already height-matched to the news list
   beside it, so the media just fills whatever space is left over. Capping it
   here would reintroduce the empty band around the image. */
@media (min-width: 992px) {
	.bsj-featurerow .bsj-spotlight .bsj-newslead__media { min-height: 300px; }
}

/* Carousel controls docked in the section header (spotlight).
   Floated over the slide they covered the headline. */
.bsj-section-head__tools { display: flex; align-items: center; gap: .85rem; }

.bsj-carousel__controls { display: inline-flex; gap: .35rem; }

.bsj-carousel__nav--head {
	position: static;
	transform: none;
	width: 30px; height: 30px;
	box-shadow: none;
	font-size: .75rem;
}

/* Header advert: clip cleanly instead of showing a sliver of the next banner */
.bsj-masthead__ad { max-height: 96px; overflow: hidden; align-items: center; }

/* --------------------------------------------------------------------------
   30. Latest Jobs rail — employer logo beside each role
   -------------------------------------------------------------------------- */
.bsj-joblist__item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: .7rem;
	align-items: start;
}

.bsj-joblist__logo {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	flex: none;
	background: #fff;
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius-sm);
	overflow: hidden;
}
/* object-fit only does anything when the element has a concrete box. With just
   max-width/max-height a wide wordmark (Syngene, Boston Scientific) rendered at
   its own ratio and got clipped by the square container. */
.bsj-joblist__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
}
/* Initial-letter fallback sits in the same 40px box */
.bsj-joblist__logo.bsj-job__logo--fallback {
	font-size: .95rem;
	border: 0;
}

.bsj-joblist__body { display: block; min-width: 0; }

.bsj-joblist__company {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	color: var(--bs-teal-700);
	margin-bottom: .15rem;
}

.bsj-joblist__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   31. Pagination — Joomla core markup
   -------------------------------------------------------------------------- */

/*
 * Also matched under #jevents_body: com_jevents (Career Fairs) renders its
 * own pagination with the same core page-item/page-link markup but never
 * inside a .bsj-pagination wrapper (that markup comes from a jevents view
 * method we can't override), so the id is the only reliable hook there.
 */

/* Core renders its own <nav class="pagination__wrapper"> inside ours. */
.bsj-pagination .pagination__wrapper,
#jevents_body .pagination__wrapper { width: 100%; }

.bsj-pagination ul.pagination,
#jevents_body ul.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem;
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.bsj-pagination .page-item,
#jevents_body .page-item { display: block; }

.bsj-pagination .page-link,
#jevents_body .page-link {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 .65rem;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-surface);
	font-size: .875rem;
	font-weight: 600;
	color: var(--bs-ink-2);
	text-decoration: none;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-pagination a.page-link:hover,
#jevents_body a.page-link:hover {
	border-color: var(--bs-blue-500);
	color: var(--bs-blue-700);
	background: var(--bs-blue-100);
	text-decoration: none;
}
/* The default :focus-visible outline sits outside the button at a fixed
   offset, which reads as a mismatched second border on a small pill-shaped
   control. Recolour the button itself instead of drawing a ring around it. */
.bsj-pagination .page-link:focus-visible,
#jevents_body .page-link:focus-visible {
	outline: none;
	border-color: var(--bs-blue-600);
	box-shadow: 0 0 0 2px var(--bs-blue-100);
}
.bsj-pagination .page-item.active .page-link,
#jevents_body .page-item.active .page-link {
	background: var(--bs-blue-600);
	border-color: var(--bs-blue-600);
	color: #fff;
}
.bsj-pagination .page-item.disabled .page-link,
#jevents_body .page-item.disabled .page-link {
	opacity: .4;
	pointer-events: none;
}

/*
 * The first/last/prev/next controls are Joomla icon-font spans. That font
 * ships with Cassiopeia's asset bundle, which this template does not load, so
 * they rendered as empty boxes. Map them onto Font Awesome, which we do load.
 */
.bsj-pagination [class^="icon-angle"]::before,
.bsj-pagination [class*=" icon-angle"]::before,
#jevents_body [class^="icon-angle"]::before,
#jevents_body [class*=" icon-angle"]::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	display: inline-block;
}
.bsj-pagination .icon-angle-double-left::before,
#jevents_body .icon-angle-double-left::before { content: "\f100"; }
.bsj-pagination .icon-angle-left::before,
#jevents_body .icon-angle-left::before        { content: "\f104"; }
.bsj-pagination .icon-angle-right::before,
#jevents_body .icon-angle-right::before       { content: "\f105"; }
.bsj-pagination .icon-angle-double-right::before,
#jevents_body .icon-angle-double-right::before { content: "\f101"; }

/* Limit box in the toolbar */
.bsj-toolbar__actions select,
.bsj-toolbar__actions .form-select {
	min-height: 38px;
	padding-block: .3rem;
	font-size: .8125rem;
	width: auto;
	min-width: 80px;
}
.bsj-toolbar__actions label { white-space: nowrap; margin: 0; }

/* --------------------------------------------------------------------------
   32. Smart search (com_finder)
   -------------------------------------------------------------------------- */
.bsj-searchpage { max-width: 900px; margin-inline: auto; }

/* Search bar */
.bsj-findersearch { margin-bottom: 1.75rem; }
.bsj-findersearch__bar {
	display: flex;
	gap: .6rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	padding: .4rem .4rem .4rem 1.15rem;
	box-shadow: var(--bs-shadow-xs);
}
.bsj-findersearch__bar input[type="text"] {
	flex: 1;
	min-width: 0;
	border: 0;
	height: 46px;
	padding: 0;
	font-size: .95rem;
	background: transparent;
}
.bsj-findersearch__bar input[type="text"]:focus { outline: none; box-shadow: none; }
.bsj-findersearch__bar .bsj-btn { height: 46px; flex: none; }

@media (max-width: 480px) {
	.bsj-findersearch__bar .bsj-hide-sm { display: none; }
}

/* Advanced search — native <details>/<summary>, no JS dependency */
.bsj-findersearch__advanced {
	margin-top: .75rem;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	background: var(--bs-surface);
	padding: 0;
}
.bsj-findersearch__advanced summary {
	list-style: none;
	cursor: pointer;
	padding: .85rem 1.15rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--bs-ink-2);
	display: flex;
	align-items: center;
	gap: .5rem;
}
.bsj-findersearch__advanced summary::-webkit-details-marker { display: none; }
.bsj-findersearch__advanced summary::before {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--bs-ink-4);
	transition: transform var(--bs-dur) var(--bs-ease);
}
.bsj-findersearch__advanced[open] summary::before { transform: rotate(180deg); }
.bsj-findersearch__advanced > .bsj-alert,
.bsj-findersearch__filters {
	margin: 0 1.15rem 1.15rem;
}
.bsj-findersearch__filters select { margin-bottom: .75rem; }

/* Results */
.bsj-searchresults__foot { margin-top: 1.5rem; }

.bsj-job--noimage .bsj-job__title { font-size: 1rem; }

/* Term-highlight marker — mirrors core com_finder.css, scoped to our own
   result cards instead of the unstyled .result__item it ships for. */
.bsj-searchresults .highlight { position: relative; }
.bsj-searchresults .highlight::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -3px;
	width: calc(100% + 6px);
	height: calc(100% + 2px);
	transform: translateY(-50%);
	background: rgba(255, 215, 0, .45);
	border-radius: 3px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   33. Login page — branded split panel
   -------------------------------------------------------------------------- */
.bsj-authpage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1000px;
	margin-inline: auto;
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
	box-shadow: var(--bs-shadow-sm);
	border: 1px solid var(--bs-line);
}
@media (min-width: 900px) {
	.bsj-authpage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Left: brand visual, same gradient language as the homepage hero and the
   full-screen search overlay, so this reads as the same product. */
.bsj-authpage__visual {
	background:
		radial-gradient(1200px 500px at 15% -10%, rgba(31, 179, 187, .28), transparent 60%),
		linear-gradient(135deg, var(--bs-navy-900) 0%, var(--bs-navy-700) 55%, var(--bs-blue-700) 100%);
	color: #fff;
	padding: 2.5rem;
	display: flex;
	align-items: center;
}
.bsj-authpage__visual-inner { max-width: 380px; }
.bsj-authpage__visual h2 {
	color: #fff;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	margin-bottom: .6rem;
}
.bsj-authpage__visual-sub {
	color: rgba(255, 255, 255, .78);
	font-size: .9rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 899px) {
	.bsj-authpage__visual { padding: 2rem 1.5rem; }
	.bsj-authpage__visual-inner { max-width: none; }
	.bsj-authpage__visual ul.bsj-benefits { margin-bottom: 0; }
}

/* Light checkmark list, for use on the dark visual panel */
.bsj-benefits--onDark li { color: rgba(255, 255, 255, .92); }
.bsj-benefits--onDark li::before {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* Right: the actual form, nested inside .bsj-authpage rather than floating
   as its own bordered card — the outer split panel already draws the border
   and shadow, so the card modifier here strips its own to avoid a
   card-inside-a-card look. */
.bsj-authpage__form { background: var(--bs-surface); display: flex; }
.bsj-authcard--flush {
	max-width: none;
	width: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	align-self: center;
}
.bsj-authcard--flush .bsj-authcard__head { background: transparent; border-bottom: 0; padding-bottom: 0; }
.bsj-authcard--flush .bsj-authcard__body { padding-top: 1.25rem; }

.bsj-authcard__links {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--bs-line-soft);
	font-size: .8125rem;
}
.bsj-authcard__links .bsj-sep { margin-inline: .5rem; color: var(--bs-line); }

.bsj-authcard__register { margin-top: 1.25rem; }
.bsj-authcard__register-buttons {
	display: flex;
	gap: .6rem;
	margin-top: .6rem;
	flex-wrap: wrap;
}

/* Password reset / forgot username: single short form, so the 940px auth
   card is far too wide to read comfortably. */
.bsj-authcard--narrow { max-width: 520px; }

.bsj-field__hint {
	display: block;
	margin-top: .3rem;
	font-size: .78rem;
	color: var(--bs-ink-4);
}

/* Three-step progress indicator for the reset flow. */
.bsj-steps {
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: none;
}
.bsj-steps__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	text-align: center;
	min-width: 0;
}
/* Connector line between markers. Drawn from each item except the first,
   back towards the previous one, so it never overhangs either end. */
.bsj-steps__item + .bsj-steps__item::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--bs-line);
}
.bsj-steps__item.is-done::before,
.bsj-steps__item.is-current::before { background: var(--bs-teal-600); }

.bsj-steps__marker {
	position: relative;
	z-index: 1;
	flex: none;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bs-surface);
	border: 2px solid var(--bs-line);
	color: var(--bs-ink-4);
	font-size: .78rem;
	font-weight: 700;
}
.bsj-steps__item.is-current .bsj-steps__marker {
	border-color: var(--bs-teal-600);
	background: var(--bs-teal-600);
	color: #fff;
}
.bsj-steps__item.is-done .bsj-steps__marker {
	border-color: var(--bs-teal-600);
	background: var(--bs-teal-100);
	color: var(--bs-teal-700);
}
.bsj-steps__label {
	font-size: .72rem;
	font-weight: 600;
	color: var(--bs-ink-4);
	line-height: 1.3;
}
.bsj-steps__item.is-current .bsj-steps__label { color: var(--bs-teal-700); }
.bsj-steps__item.is-done .bsj-steps__label { color: var(--bs-ink-3); }

/* --------------------------------------------------------------------------
   34. mod_bsjads (banner layout) — raw admin-pasted <img>/<a> markup
   -------------------------------------------------------------------------- */

/*
 * This module ships its own wrapper classes (bsj-banner-ads / banner-container
 * / banner-content) with no CSS of their own, so a pasted ad banner rendered
 * at whatever size the source image happened to be — including bleeding past
 * its column and overlapping neighbouring content. Used at 7 different
 * positions across the site (header, homepage rails, sidebars), so this is
 * scoped to the module's own class rather than any one position.
 */
.bsj-banner-ads {
	/* margin-block: 1.25rem; */
	text-align: center;
}
.bsj-banner-ads .banner-container {
	display: flex;
	justify-content: center;
}
.bsj-banner-ads .banner-content {
	max-width: 100%;
	line-height: 0;
}
.bsj-banner-ads img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bs-radius-sm);
}

/*
 * Some positions hold more than one banner in a single module. The pasted
 * markup separates them with Bootstrap spacing utilities (pt-3 / mb-3, and
 * sometimes a bare <br>), none of which do anything here: this template does
 * not load Bootstrap, and .banner-content sets line-height:0 so a <br>
 * collapses too. The banners therefore sat flush against each other in the
 * sidebar. Space them from the template side instead, at both nesting levels
 * the pasted markup uses, so it holds whatever the admin pastes next time.
 */
.bsj-banner-ads .banner-content > * + *,
.bsj-banner-ads .banner-content .row > * + * {
	margin-top: 1rem;
}

/* Inside the header masthead the ad sits beside the logo at a fixed height;
   let it size to that instead of the generic centred block above. */
.bsj-masthead__ad .bsj-banner-ads { margin: 0; }
.bsj-masthead__ad .banner-container { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   35. mod_login (popup + any other placement)
   -------------------------------------------------------------------------- */

/*
 * Core's password field ships a show/hide toggle built on its OWN icon font
 * (icon-eye / icon-eye-slash, swapped by media/system/js/fields/passwordview.js
 * on click) — a font this template never loads, so the button rendered with
 * no visible glyph at all: just an empty, full-width bar between the
 * password field and "Remember me". Mapped onto Font Awesome, which we do
 * load; the JS behaviour and class names are untouched.
 */
.icon-eye::before {
	content: "\f06e";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.icon-eye-slash::before {
	content: "\f070";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

.bsj-password { position: relative; }
.bsj-password input { padding-right: 2.75rem; }
.bsj-password__toggle {
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--bs-radius-sm);
	color: var(--bs-ink-4);
	cursor: pointer;
	transition: color var(--bs-dur) var(--bs-ease), background var(--bs-dur) var(--bs-ease);
}
.bsj-password__toggle:hover { color: var(--bs-ink-2); background: var(--bs-surface-3); }

.bsj-modlogin__links {
	margin-top: 1rem;
	text-align: center;
	font-size: .8125rem;
}
.bsj-modlogin__links .bsj-sep { margin-inline: .5rem; color: var(--bs-line); }
.bsj-modlogin__register { margin-top: .6rem; }

/* The popup itself: a touch tighter than the full login page (this is a
   quick sign-in, not a landing page), still on the same field/button
   language so it never feels like a different product mid-flow. */
#bsj-popup .bsj-modal__panel { max-width: 400px; }
#bsj-popup .bsj-modal__body { padding: 1.5rem 1.75rem 1.75rem; }
#bsj-popup .bsj-form { display: grid; gap: 1rem; }

/* --------------------------------------------------------------------------
   36. com_users registration — core field polish
   -------------------------------------------------------------------------- */

/*
 * The password field (email1/password1/password2 in the registration form)
 * goes through core's own layouts/joomla/form/field/password.php rather
 * than our own markup like mod_login does — it ships the "Minimum
 * Requirements" rules text, a .password-group/.input-group wrapper, the
 * show/hide toggle button, and (for password1 only) a JS-injected <meter>
 * strength bar + label. None of that Bootstrap-flavoured markup was styled
 * anywhere in this template. The toggle's icon glyph itself is already
 * fixed by the global .icon-eye mapping above; everything else is scoped
 * here.
 */
.com-users-registration [id$="-rules"].text-muted {
	font-size: .78rem;
	color: var(--bs-ink-4);
	line-height: 1.4;
}
.com-users-registration [id$="-rules"].text-muted strong { color: var(--bs-ink-3); font-weight: 600; }

.com-users-registration .password-group { margin-top: .35rem; }
.com-users-registration .input-group { position: relative; }
.com-users-registration .input-group .form-control { padding-right: 2.75rem; }
.com-users-registration .input-password-toggle {
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--bs-radius-sm);
	color: var(--bs-ink-4);
	cursor: pointer;
	transition: color var(--bs-dur) var(--bs-ease), background var(--bs-dur) var(--bs-ease);
}
.com-users-registration .input-password-toggle:hover { color: var(--bs-ink-2); background: var(--bs-surface-3); }

.com-users-registration .password-group meter {
	display: block;
	width: 100%;
	height: 6px;
	margin-top: .5rem;
	border: 0;
	border-radius: 999px;
}
.com-users-registration .password-group meter::-webkit-meter-bar { background: var(--bs-surface-3); border-radius: 999px; border: 0; }
.com-users-registration .password-group meter::-webkit-meter-optimum-value { background: var(--bs-teal-600); border-radius: 999px; }
.com-users-registration .password-group meter::-webkit-meter-suboptimum-value { background: #e9a23b; border-radius: 999px; }
.com-users-registration .password-group meter::-webkit-meter-even-less-good-value { background: var(--bs-danger); border-radius: 999px; }
.com-users-registration .password-group meter::-moz-meter-bar { border-radius: 999px; }
.com-users-registration .password-group .text-center {
	margin-top: .3rem;
	text-align: left;
	font-size: .74rem;
	color: var(--bs-ink-4);
}

/*
 * Marketing-communications / newsletter custom fields render as core's
 * Bootstrap checkbox fieldset (fieldset.checkboxes > .form-check), also
 * unstyled — cramped, default-sized native checkboxes with no spacing.
 * Reuses the same visual language as .bsj-check elsewhere.
 */
.com-users-registration fieldset.checkboxes { border: 0; margin: 0; padding: 0; }
.com-users-registration fieldset.checkboxes legend { padding: 0; }
.com-users-registration .form-check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .875rem;
	color: var(--bs-ink-2);
}
.com-users-registration .form-check + .form-check { margin-top: .5rem; }
.com-users-registration .form-check-input {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 2px 0 0;
	flex: none;
	accent-color: var(--bs-blue-600);
}
.com-users-registration .form-check-label { padding: 0; }

/* Math captcha: generated image beside its answer input. */
.bsj-captcha { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bsj-captcha__img {
	flex: none;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
}
.bsj-captcha input { flex: 1 1 140px; min-width: 120px; }

/* --------------------------------------------------------------------------
   37. com_jevents — event detail (Career Fairs)
   -------------------------------------------------------------------------- */

/*
 * jevents renders its event-detail page from a template stored in its own
 * admin (Components > Events Calendar > Templates > icalevent.detail_body)
 * rather than a Joomla template-override file — jevents only falls back to
 * on-disk files when no DB template exists for that name, and this site has
 * one. That stored template was rewritten to use these .bsj-event* classes
 * (previously raw Bootstrap-5 utility classes like bg-body-tertiary/row
 * that this template never loads); this is the matching CSS. Rows with no
 * value (Contact, Location) collapse via :has() rather than needing any
 * template-side conditional, which jevents' placeholder syntax can't do.
 */
/*
 * FIX: border + border-radius + overflow:hidden + box-shadow together on
 * one box is a known Chromium combo that mis-renders as a faint second
 * "ghost" border just inside the real one (the rounded clip mask doesn't
 * perfectly align with the border stroke). Dropping overflow:hidden and
 * rounding the header's own top corners to match gets the same rounded-card
 * look without the clip/border conflict.
 */
.bsj-event {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	box-shadow: var(--bs-shadow-sm);
}
.bsj-event__header {
	padding: 1.5rem 1.75rem 1.25rem;
	border-bottom: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius-lg) var(--bs-radius-lg) 0 0;
	background: linear-gradient(135deg, var(--bs-surface) 0%, var(--bs-blue-100) 100%);
}
.bsj-event__title { margin: 0; font-size: 1.4rem; }
.bsj-event__body { padding: 1.75rem; display: grid; gap: 1.5rem; }

.bsj-event__meta {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	padding: 1rem 1.25rem;
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
}
.bsj-event__meta-item:has(.bsj-event__meta-value:empty) { display: none; }
.bsj-event__meta-label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--bs-ink-4);
}
.bsj-event__meta-label i { color: var(--bs-blue-600); }
.bsj-event__meta-value { display: block; margin-top: .3rem; font-size: .95rem; font-weight: 600; color: var(--bs-ink); }

.bsj-event__section:has(.bsj-event__desc:empty) { display: none; }
.bsj-event__section-title { margin: 0 0 .6rem; font-size: 1.05rem; }
.bsj-event__desc { font-size: .92rem; line-height: 1.7; color: var(--bs-ink-2); }
.bsj-event__desc:empty { display: none; }

.bsj-event__nav:empty { display: none; }
.bsj-event__nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bs-line-soft);
	flex-wrap: wrap;
}
.bsj-event__nav a { font-size: .875rem; font-weight: 600; color: var(--bs-blue-600); }
.bsj-event__nav a:hover { color: var(--bs-blue-700); }

/* --------------------------------------------------------------------------
   38. com_jevents — Career Fairs list/year view
   -------------------------------------------------------------------------- */

/*
 * jevents wraps every one of its pages (detail AND the year/list view) in
 * the same #jevents_body element, and its own bundled stylesheet
 * (views/flat/assets/css/events_css.css, loaded automatically — legacy
 * float layout, hardcoded #ff3b30 red nav buttons, high-specificity and
 * !important rules) gives that element its own grey card border/background.
 * On the detail page that nested INSIDE .bsj-event's own card border,
 * which is what the double-border report above actually was. The two pages
 * need opposite treatment for #jevents_body: invisible wrapper on detail
 * (the id has no other hook there), the card itself on the list view (the
 * id is the only element wrapping nav + months + pagination + legend
 * together) — #jev_maincal only exists in the list view's markup, .bsj-event
 * only in the detail view's, so :has() tells them apart without touching
 * component code.
 */
#jevents_body:has(.bsj-event) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
#jevents_body:has(#jev_maincal) {
	background: var(--bs-surface) !important;
	border: 1px solid var(--bs-line) !important;
	border-radius: var(--bs-radius-lg) !important;
	padding: 1.5rem 1.75rem !important;
	box-shadow: var(--bs-shadow-sm);
}

/* Year navigation bar (previous year / year / next year) */
#jevents_body .jev_toprow { margin-bottom: 1.5rem; }
#jevents_body .jev_header2 {
	display: flex !important;
	align-items: center;
	gap: .75rem;
	float: none !important;
	width: 100% !important;
}
#jevents_body .jev_toprow div.previousmonth,
#jevents_body .jev_toprow div.nextmonth,
#jevents_body .jev_toprow div.currentmonth {
	float: none !important;
	width: auto !important;
	height: auto !important;
	line-height: normal !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}
#jevents_body .jev_toprow div.previousmonth,
#jevents_body .jev_toprow div.nextmonth { flex: none; }
#jevents_body .jev_toprow div.previousmonth a,
#jevents_body .jev_toprow div.nextmonth a {
	display: inline-flex !important;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.2rem !important;
	background: var(--bs-surface) !important;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	color: var(--bs-ink-2) !important;
	font-size: .8125rem !important;
	font-weight: 600;
	white-space: nowrap;
	transition: all var(--bs-dur) var(--bs-ease);
}
#jevents_body .jev_toprow div.previousmonth a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f104";
}
#jevents_body .jev_toprow div.nextmonth a::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
}
#jevents_body .jev_toprow div.previousmonth a:hover,
#jevents_body .jev_toprow div.nextmonth a:hover {
	color: #fff !important;
	background: var(--bs-blue-600) !important;
	border-color: var(--bs-blue-600);
}
#jevents_body .jev_toprow div.currentmonth {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	color: var(--bs-ink) !important;
	font-weight: 800 !important;
	font-size: 1.15rem;
}
#jevents_body .jev_toprow div.currentmonth::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f073";
	font-size: .95rem;
	color: var(--bs-blue-600);
}

/* Month section headings */
#jevents_body #jev_maincal.jev_listview .jev_daysnames {
	float: none !important;
	width: 100% !important;
	height: auto !important;
	line-height: normal !important;
	background: var(--bs-surface-2) !important;
	border: 1px solid var(--bs-line-soft) !important;
	border-radius: var(--bs-radius-sm);
	padding: .5rem 1rem !important;
	margin-top: 1.25rem;
	font-size: .8rem !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--bs-ink-3) !important;
}
#jevents_body .jev_daysnames:first-child,
#jevents_body .bsj-eventsyear__group:first-child .jev_daysnames { margin-top: 0; }
#jevents_body .jev_listrow { margin-top: .5rem; }
#jevents_body ul.ev_ul { margin: 0; display: grid; gap: .5rem; }

/* Event rows — content markup comes from the icalevent.list_row jevents
   template (Components > Events Calendar > Templates), rewritten to use
   .bsj-eventrow* classes the same way icalevent.detail_body was. */
#jevents_body ul.ev_ul li.ev_td_li {
	border-width: 0 0 0 4px !important;
	border-top: 1px solid var(--bs-line-soft) !important;
	border-right: 1px solid var(--bs-line-soft) !important;
	border-bottom: 1px solid var(--bs-line-soft) !important;
	border-radius: var(--bs-radius-sm);
	background: var(--bs-surface);
	padding: .85rem 1rem !important;
	transition: box-shadow var(--bs-dur) var(--bs-ease);
}
#jevents_body ul.ev_ul li.ev_td_li:hover { box-shadow: var(--bs-shadow-sm); }
#jevents_body .bsj-eventrow { display: flex; align-items: baseline; gap: .4rem 1.25rem; flex-wrap: wrap; }
#jevents_body .bsj-eventrow__date { flex: none; min-width: 200px; font-size: .8125rem; font-weight: 600; color: var(--bs-ink-3); }
#jevents_body .bsj-eventrow__date br { display: none; }
#jevents_body .bsj-eventrow__main { flex: 1 1 240px; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
#jevents_body .ev_link_row { font-weight: 600; color: var(--bs-ink); text-decoration: none; }
#jevents_body .ev_link_row:hover { color: var(--bs-blue-700); }
#jevents_body .bsj-eventrow__cat {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .15rem .55rem;
	border-radius: var(--bs-radius-pill);
	background: var(--bs-blue-100);
	color: var(--bs-blue-700);
}

/* Pagination toolbar ("1-10/20 items" + Display # + pager) */
#jevents_body .jev_pagination { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bs-line-soft); }
#jevents_body .pagination-toolbar { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; }
#jevents_body .text-end.me-3 { color: var(--bs-ink-4) !important; font-size: .8rem; margin: 0 0 .75rem !important; }
/* "Display #" items-per-page control — hidden per request, page count stays fixed */
#jevents_body .limit { display: none !important; }

/* Category legend chips */
#jevents_body .event_legend_container {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 1.25rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var(--bs-line-soft);
}
#jevents_body .event_legend_container br,
#jevents_body br[style*="clear:both"] { display: none !important; }
#jevents_body div.event_legend_item {
	float: none !important;
	min-width: 0 !important;
	white-space: normal !important;
	overflow: visible !important;
	margin: 0 !important;
	padding-left: 0 !important;
}
#jevents_body div.event_legend_name {
	border-left-width: 4px !important;
	border-top: 1px solid var(--bs-line-soft) !important;
	border-right: 1px solid var(--bs-line-soft) !important;
	border-bottom: 1px solid var(--bs-line-soft) !important;
	border-radius: var(--bs-radius-pill) !important;
	background: var(--bs-surface-2);
	padding: .35rem .9rem !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
}
#jevents_body div.event_legend_name a { color: var(--bs-ink-2) !important; }
#jevents_body div.event_legend_item.activechildcat div.event_legend_name {
	background: var(--bs-blue-600);
	border-color: var(--bs-blue-600) !important;
}
#jevents_body div.event_legend_item.activechildcat div.event_legend_name a { color: #fff !important; }

/* --------------------------------------------------------------------------
   39. Career Fairs — year view card redesign
   -------------------------------------------------------------------------- */

/*
 * Markup from templates/bsjobs2026/html/com_jevents/flat/year/listevents_body.php
 * — a genuine Joomla html override of the component's own file (jevents'
 * view classes never touch loadTemplate(), so the standard override lookup
 * applies), replacing the plain grouped list with a month-filterable card
 * layout per the reference design supplied.
 */

/* Connected year-nav pill: prev | year | next as one continuous bar */
#jevents_body .bsj-eventsyear__nav {
	display: flex;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	overflow: hidden;
	margin-bottom: 1rem;
}
#jevents_body .bsj-eventsyear__nav-btn {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: none;
	padding: .75rem 1.5rem;
	background: var(--bs-blue-700);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background var(--bs-dur) var(--bs-ease);
}
#jevents_body .bsj-eventsyear__nav-btn:hover { background: var(--bs-blue-600); color: #fff; }
#jevents_body .bsj-eventsyear__nav-btn.is-disabled { background: var(--bs-surface-3); color: var(--bs-ink-4); pointer-events: none; }
#jevents_body .bsj-eventsyear__nav-year {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bs-surface);
	color: var(--bs-ink);
	font-weight: 800;
	font-size: 1.15rem;
}

/* Month filter tabs */
#jevents_body .bsj-eventsyear__months {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
#jevents_body .bsj-eventsyear__month {
	flex: none;
	padding: .5rem 1.1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	color: var(--bs-ink-2);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--bs-dur) var(--bs-ease);
}
#jevents_body .bsj-eventsyear__month:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); }
#jevents_body .bsj-eventsyear__month.is-active {
	background: var(--bs-blue-700);
	border-color: var(--bs-blue-700);
	color: #fff;
}

/* Month groups + cards */
#jevents_body .bsj-eventsyear__group.is-hidden { display: none; }
#jevents_body .bsj-eventsyear__cards { display: grid; gap: 1rem; margin-top: .75rem; }
#jevents_body .bsj-eventsyear__empty { padding: 2rem 0; text-align: center; color: var(--bs-ink-4); }

#jevents_body .bsj-eventcard {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
	padding: 1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	transition: box-shadow var(--bs-dur) var(--bs-ease), border-color var(--bs-dur) var(--bs-ease);
}
#jevents_body .bsj-eventcard:hover { box-shadow: var(--bs-shadow-sm); border-color: var(--bs-line); }

#jevents_body .bsj-eventcard__datebadge {
	flex: none;
	width: 92px;
	border-radius: var(--bs-radius-sm);
	overflow: hidden;
	text-align: center;
	text-decoration: none;
}
#jevents_body .bsj-eventcard__day {
	display: block;
	padding: .6rem 0 .3rem;
	background: var(--bs-blue-700);
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}
#jevents_body .bsj-eventcard__monyear {
	display: block;
	padding: .3rem 0 .5rem;
	background: var(--bs-blue-100);
	color: var(--bs-blue-700);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

#jevents_body .bsj-eventcard__body { flex: 1 1 240px; min-width: 0; }
#jevents_body .bsj-eventcard__title {
	display: block;
	margin-bottom: .35rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bs-blue-700);
	text-decoration: none;
}
#jevents_body .bsj-eventcard__title:hover { color: var(--bs-teal-700); }
#jevents_body .bsj-eventcard__desc {
	margin: 0 0 .5rem;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--bs-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#jevents_body .bsj-eventcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	font-size: .8rem;
	color: var(--bs-ink-3);
}
#jevents_body .bsj-eventcard__meta i { color: var(--bs-blue-600); margin-right: .3rem; }

#jevents_body .bsj-eventcard__more {
	flex: none;
	align-self: flex-end;
	margin-left: auto;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--bs-blue-600);
	text-decoration: none;
	white-space: nowrap;
}
#jevents_body .bsj-eventcard__more:hover { color: var(--bs-blue-700); }
#jevents_body .bsj-eventcard__more i { margin-left: .3rem; transition: transform var(--bs-dur) var(--bs-ease); }
#jevents_body .bsj-eventcard__more:hover i { transform: translateX(3px); }

@media (max-width: 480px) {
	#jevents_body .bsj-eventcard { flex-direction: column; }
	#jevents_body .bsj-eventcard__datebadge { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }
	#jevents_body .bsj-eventcard__day,
	#jevents_body .bsj-eventcard__monyear { display: inline; padding: .5rem .75rem; }
	#jevents_body .bsj-eventcard__more { align-self: flex-start; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   40. Candidate / Employer dashboard area
   -------------------------------------------------------------------------- */

/*
 * "My Resume | My Profile | Applied Jobs | ..." — the persistent secondary
 * nav shown on every logged-in dashboard page. It's not a template file:
 * it's a Custom HTML module ("Candidate Menus" / "Employer Menus", site
 * modules, position "breadcrumbs") whose stored content already uses these
 * bsj-user-* class names, just with no matching CSS anywhere — so it
 * rendered completely unstyled. Mapped here instead of editing the module
 * content, same reasoning as the other core/third-party markup elsewhere in
 * this file: the classes are already right, only the styling was missing.
 */
.bsj-user-header { margin-bottom: 1rem; }
.bsj-user-menu-toggle { display: none; }
.bsj-user-menu-icon { display: none; }
.bsj-user-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.bsj-user-nav a {
	display: block;
	padding: .5rem 1.1rem;
	border-radius: var(--bs-radius-pill);
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	color: var(--bs-ink-2);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-user-nav a:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); background: var(--bs-blue-100); }

/*
 * FIX: the module's stored HTML hardcodes "current active" on whichever
 * link the site owner happened to be viewing when they last edited it
 * (currently "Newest Jobs") — mod_custom has no dynamic active-state logic,
 * so that class never moved and every page showed the same item as active.
 *
 * A first attempt matched body.itemid-<id> against each link's own
 * href*="Itemid=<id>" in plain CSS — that looked right reading the stored
 * content, but this site has plg_system_sef enabled, which rewrites every
 * href="index.php?..." in the final HTML buffer (including inside custom
 * module content) into a clean SEF URL, so the rendered links never
 * actually contain that "Itemid=" substring for the attribute selector to
 * match against. Fixed in JS instead (theme.js initUserNavActive()),
 * comparing each link's browser-resolved pathname to the current page's —
 * that works regardless of however SEF rewrote the href, since it compares
 * the final resolved URLs rather than guessing at query-string text.
 */
.bsj-user-nav li.is-current a {
	background: var(--bs-blue-700);
	border-color: var(--bs-blue-700);
	color: #fff;
}

@media (max-width: 640px) {
	.bsj-user-menu-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 1px solid var(--bs-line);
		border-radius: var(--bs-radius-sm);
		cursor: pointer;
		font-size: 0;
	}
	.bsj-user-menu-icon::before {
		content: "\f0c9";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 1rem;
		color: var(--bs-ink-2);
	}
	.bsj-user-nav { display: none; margin-top: .6rem; max-width: 100%; overflow-x: auto; }
	.bsj-user-menu-toggle:checked ~ .bsj-user-nav { display: block; }
	.bsj-user-nav ul { flex-wrap: nowrap; }
}

/* Recommended jobs (welcome page) */
.bsj-recommended__more { margin-top: 1.5rem; text-align: center; }

/* Dashboard (candidate + employer) */
.bsj-dashboard { display: grid; gap: 1.5rem; }
.bsj-dashboard__actions { display: flex; justify-content: flex-end; }

.bsj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.bsj-stat-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-xs);
}
.bsj-stat-card__icon {
	flex: none;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: var(--bs-radius);
	background: var(--bs-stat-color, var(--bs-blue-600));
	color: #fff;
	font-size: 1.25rem;
}
.bsj-stat-card__count { font-size: 1.6rem; font-weight: 800; color: var(--bs-ink); line-height: 1; }
.bsj-stat-card__label { margin-top: .3rem; font-size: .8125rem; color: var(--bs-ink-3); }

/* Generic tabs (dashboard tables, reused anywhere data-bsj-tabs appears) */
.bsj-tabs__nav { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--bs-line); margin-bottom: 1.25rem; }
.bsj-tabs__btn {
	margin-bottom: -1px;
	padding: .7rem 1.25rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--bs-font);
	font-size: .875rem;
	font-weight: 600;
	color: var(--bs-ink-3);
	cursor: pointer;
	transition: color var(--bs-dur) var(--bs-ease), border-color var(--bs-dur) var(--bs-ease);
}
.bsj-tabs__btn:hover { color: var(--bs-blue-600); }
.bsj-tabs__btn.is-active { color: var(--bs-blue-700); border-bottom-color: var(--bs-blue-700); }
.bsj-tabs__panel { display: none; }
.bsj-tabs__panel.is-active { display: block; }

/* Generic data table (dashboard) */
.bsj-table-wrap { overflow-x: auto; border: 1px solid var(--bs-line-soft); border-radius: var(--bs-radius); }
.bsj-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .875rem; }
.bsj-table th {
	padding: .75rem 1rem;
	background: var(--bs-surface-2);
	color: var(--bs-ink-3);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: left;
	border-bottom: 1px solid var(--bs-line-soft);
	white-space: nowrap;
}
.bsj-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--bs-line-soft); vertical-align: middle; }
.bsj-table tr:last-child td { border-bottom: 0; }
.bsj-table tr:hover td { background: var(--bs-surface-2); }
.bsj-table__job { display: flex; align-items: center; gap: .75rem; color: var(--bs-ink); text-decoration: none; font-weight: 600; }
a.bsj-table__job:hover { color: var(--bs-blue-700); }
.bsj-table__logo {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--bs-radius-sm);
	object-fit: contain;
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-line-soft);
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--bs-ink-3);
}
.bsj-table__logo--round { border-radius: 50%; object-fit: cover; }
.bsj-table__logo--fallback { background: var(--bs-blue-100); color: var(--bs-blue-700); }
.bsj-table__empty { padding: 2.5rem 1rem; text-align: center; color: var(--bs-ink-4); }

/*
 * Add/Edit Job form. Every field on this form is a standard Joomla field
 * type, so $this->form->renderField()/getInput() output core's own field
 * wrapper (.control-group > .control-label + .controls — confirmed via
 * layouts/joomla/form/renderfield.php, unchanged there since Bootstrap 2)
 * rather than anything this theme controls. Themed here instead of being
 * rebuilt, scoped to .bsj-jobform so it can't leak into any other page.
 */
.bsj-jobform__head {
	padding: 1.5rem 1.75rem 1.25rem;
	border: 1px solid var(--bs-line);
	border-bottom: 0;
	border-radius: var(--bs-radius-lg) var(--bs-radius-lg) 0 0;
	background: linear-gradient(135deg, var(--bs-surface) 0%, var(--bs-blue-100) 100%);
}
.bsj-jobform__body {
	padding: 1.75rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-top: 0;
	border-radius: 0 0 var(--bs-radius-lg) var(--bs-radius-lg);
}
.bsj-jobform .control-group { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bsj-jobform .control-label { font-size: .8125rem; font-weight: 600; color: var(--bs-ink-2); }
.bsj-jobform .control-label label { font: inherit; color: inherit; }
.bsj-jobform .controls { min-width: 0; }
.bsj-jobform .form-text { display: block; margin-top: .3rem; font-size: .78rem; color: var(--bs-ink-4); }

.bsj-jobform__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 1.25rem;
	margin-top: .5rem;
	border-top: 1px solid var(--bs-line-soft);
}

/* My Profile */
.bsj-profile {
	display: grid;
	gap: 1.5rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-lg);
	box-shadow: var(--bs-shadow-sm);
	padding: 1.75rem;
}
.bsj-profile__header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bsj-profile__photo-form { flex: none; }
.bsj-profile__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2px solid var(--bs-line);
	background-color: var(--bs-surface-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: grid;
	place-items: center;
	font-size: 1.75rem;
	color: var(--bs-ink-4);
	cursor: pointer;
	transition: border-color var(--bs-dur) var(--bs-ease);
}
.bsj-profile__photo:hover { border-color: var(--bs-blue-500); }

.bsj-profile__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .75rem 1.5rem;
	padding: 1.25rem;
	background: var(--bs-surface-2);
	border: 1px solid var(--bs-line-soft);
	border-radius: var(--bs-radius);
	font-size: .875rem;
	color: var(--bs-ink-2);
}
.bsj-profile__meta i { width: 18px; color: var(--bs-blue-600); margin-right: .5rem; }

.bsj-profile__progress-head { display: flex; justify-content: space-between; font-size: .8125rem; font-weight: 600; color: var(--bs-ink-3); margin-bottom: .5rem; }
.bsj-progress { height: 8px; background: var(--bs-surface-3); border-radius: 999px; overflow: hidden; }
.bsj-progress__bar { height: 100%; background: var(--bs-teal-600); border-radius: 999px; transition: width var(--bs-dur) var(--bs-ease); }

.bsj-profile__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.bsj-profile__resume-form { display: contents; }

/*
 * Joomla core "search tools" bar (layouts/joomla/searchtools/*) — used
 * wherever a list view renders LayoutHelper::render('joomla.searchtools.
 * default', ...) inside .bsj-toolbar__actions (jobs + companies listings).
 * None of its wrapper divs (.js-stools*, .filter-search-bar, .ordering-
 * select) had any layout CSS, so its search box / clear button / sort
 * dropdown each fell to their own line as plain blocks instead of sitting
 * in one row. Its "Clear" and "Filter Options" buttons and the sort arrow
 * also use Joomla's own icon font, which this template doesn't load —
 * mapped onto Font Awesome, same as the pagination arrows elsewhere.
 */
.js-stools,
.js-stools-container-bar,
.js-stools .btn-toolbar,
.ordering-select {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}
.filter-search-bar .input-group {
	display: flex;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	overflow: hidden;
	background: var(--bs-surface);
}
.filter-search-bar input[type="text"] { border: 0; border-radius: 0; min-height: 42px; }
.filter-search-bar input[type="text"]:focus { box-shadow: none; }
.filter-search-bar__description { display: none; }
.filter-search-bar__button {
	border: 0;
	background: var(--bs-blue-600);
	color: #fff;
	padding: 0 1.1rem;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.filter-search-bar__button:hover { background: var(--bs-blue-700); }
.filter-search-bar__button-icon.icon-search::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f002";
}

.filter-search-actions { display: flex; gap: .5rem; }
.filter-search-actions__button {
	border: 1px solid var(--bs-line);
	background: var(--bs-surface);
	color: var(--bs-ink-2);
	padding: .6rem 1.1rem;
	border-radius: var(--bs-radius-sm);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all var(--bs-dur) var(--bs-ease);
}
.filter-search-actions__button:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); background: var(--bs-blue-100); }
.filter-search-actions__button .icon-angle-down::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	margin-left: .35rem;
}

.js-stools-field-list select { min-height: 42px; }

/* "Items per page" removed per request — only the sort field stays. */
.js-stools-field-list:has(#list_limit) { display: none; }

/* My Resume (preview) */
.bsj-resume-frame { display: block; width: 100%; height: 75vh; min-height: 480px; border: 1px solid var(--bs-line-soft); border-radius: var(--bs-radius); }

/*
 * Choices.js (media/vendor/choicesjs) — Joomla's own bundled dropdown/
 * multi-select enhancer, used on the Add Job form's "sql"-type fields.
 * Its own choices.min.css (loaded via useStyle('choicesjs')) gives it
 * Joomla admin's default blue; this recolours it to the site palette.
 */
.choices__inner {
	min-height: 44px;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-sm);
	background: var(--bs-surface);
	font-family: var(--bs-font);
	font-size: .9rem;
	padding: .4rem .85rem;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: var(--bs-blue-500);
	box-shadow: 0 0 0 3px var(--bs-blue-100);
}
/*
 * FIX: on the Add Job form, an open Country/City/Shift dropdown was
 * rendering BEHIND the TinyMCE editor below it (Description field).
 * The library's own default is z-index:1 on both .choices (once
 * .is-open switches its overflow to visible) and the dropdown list —
 * fine against plain content, but TinyMCE's own toolbar/header chrome
 * uses z-index up to 1300 (media/vendor/tinymce/skins/ui/oxide/
 * skin.min.css), which wins that comparison since these fields sit in
 * separate sibling grid rows with no other stacking context between
 * them and the editor. Raised well past TinyMCE's own max so an open
 * dropdown always wins.
 */
.choices.is-open { z-index: 2000; }
.choices__list--dropdown {
	z-index: 2000;
	border-color: var(--bs-line);
	border-radius: var(--bs-radius-sm);
	box-shadow: var(--bs-shadow-sm);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--bs-blue-100); color: var(--bs-blue-700); }
.choices__list--multiple .choices__item {
	background: var(--bs-blue-600);
	border-color: var(--bs-blue-600);
	border-radius: var(--bs-radius-pill);
	font-size: .8rem;
}
/*
 * FIX: the real root cause — this form's selects render through Joomla
 * core's <joomla-field-fancy-select> custom element (jobform.xml uses the
 * "list-fancy-select" field layout), and that wrapper's own JS
 * (media/system/js/fields/joomla-field-fancy-select.js) explicitly
 * overrides Choices.js's default button class to "choices__button_joomla"
 * (not the library's own "choices__button") specifically to avoid an
 * unavailable icon file. Every earlier .choices__button rule here was
 * therefore targeting a class that never existed on this page's actual
 * buttons at all — no cascade/specificity issue, just the wrong selector
 * — so the browser fell back to default UA <button> styling and showed
 * the raw "Remove item" accessibility label as visible text. Cassiopeia
 * (Joomla's own default template) ships the matching CSS for this exact
 * class at media/templates/site/cassiopeia/css/vendor/choicesjs/
 * choices.css — this rule follows that same text-indent + ::before
 * "×" approach, restyled to this theme's colours/shape.
 */
.choices[data-type*="select-one"] .choices__item,
.choices[data-type*="select-multiple"] .choices__item--selectable {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.choices__button_joomla {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bs-surface-3);
	color: inherit;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	appearance: none;
	transition: background-color var(--bs-dur) var(--bs-ease);
}
.choices__button_joomla::before {
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: .6rem;
	line-height: 20px;
	color: var(--bs-ink-3);
	text-indent: 0;
	text-align: center;
	display: block;
	position: absolute;
	inset: 0;
}
.choices__button_joomla:hover,
.choices__button_joomla:focus { background: var(--bs-danger-bg, #fbe4e4); outline: none; }
.choices__button_joomla:hover::before,
.choices__button_joomla:focus::before { color: var(--bs-danger); }
.choices[data-type*="select-one"] .choices__button_joomla {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	margin-block-start: -10px;
	margin-inline-end: 44px;
}

/*
 * Core Joomla field layouts (calendar picker, TinyMCE's "Toggle Editor")
 * assume either Bootstrap's CSS or Joomla's own icon-font (joomla-
 * fontawesome.css) is loaded on the page — this theme loads neither
 * (it ships its own real Font Awesome instead), so both rendered as
 * unstyled, icon-less browser-default buttons. Restyled here to match
 * the rest of the form chrome, with the icon glyphs redrawn using this
 * theme's own Font Awesome font instead of Joomla's icon-font classes.
 */
.field-calendar .input-group { display: flex; }
.field-calendar input[type="text"] {
	flex: 1 1 auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.field-calendar .btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	border: 1px solid var(--bs-line);
	border-left: 0;
	border-top-right-radius: var(--bs-radius-sm);
	border-bottom-right-radius: var(--bs-radius-sm);
	background: var(--bs-surface-3);
	color: var(--bs-ink-2);
	cursor: pointer;
	transition: background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease);
}
.field-calendar .btn:hover { background: var(--bs-blue-100); color: var(--bs-blue-700); }
.icon-calendar { display: inline-block; font-size: .9rem; line-height: 1; }
.icon-calendar::before {
	content: "\f073";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

.toggle-editor { margin-top: .75rem; }
.toggle-editor .js-tiny-toggler-button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	font-family: var(--bs-font);
	font-size: .8125rem;
	font-weight: 600;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	background: var(--bs-surface);
	color: var(--bs-ink-2);
	cursor: pointer;
	transition: all var(--bs-dur) var(--bs-ease);
}
.toggle-editor .js-tiny-toggler-button:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); }
/* Solid weight (900): the Free tier's Regular face does not carry every
   glyph, and this one is also used by the password show/hide toggle. */
.icon-eye { display: inline-block; font-size: .85rem; }
.icon-eye::before {
	content: "\f06e";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

/* --------------------------------------------------------------------------
   Contact page (com_contact)
   -------------------------------------------------------------------------- */
.bsj-contacthead { margin-bottom: 1.75rem; }
.bsj-contacthead h1 { margin-bottom: .4rem; }
.bsj-contacthead__sub {
	margin: 0;
	max-width: 60ch;
	color: var(--bs-ink-3);
	font-size: 1rem;
}

/* Email card: icon beside the label + address. */
.bsj-contactcard { display: flex; align-items: center; gap: .9rem; }
.bsj-contactcard__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--bs-teal-100);
	color: var(--bs-teal-700);
	font-size: 1rem;
}
/*
 * The sidebar is 320px, so a long address had nowhere to go and
 * word-break:break-word snapped it mid-word ("...mmactiv.co / m").
 * A slightly smaller size fits it on one line, and overflow-wrap only
 * kicks in for something genuinely longer than the column.
 */
.bsj-contactcard__link {
	font-weight: 600;
	font-size: .875rem;
	overflow-wrap: anywhere;
}

/* "* Required field" and similar form-level notes. */
.bsj-form__note {
	margin: 0 0 .25rem;
	font-size: .78rem;
	color: var(--bs-ink-4);
}

/*
 * The "misc" block is admin-entered HTML — a run of bare <p> tags, one of
 * which is just an email address on its own line. Tighten the rhythm and
 * let long addresses wrap instead of pushing the sidebar wider.
 */
.bsj-contactmisc p { margin-bottom: .7rem; word-break: break-word; }
.bsj-contactmisc p:last-child { margin-bottom: 0; }
.bsj-contactmisc a { font-weight: 600; }

/* Educational Institutes */
.bsj-institutes .bsj-lede { margin-bottom: 1rem; }

.bsj-chipfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
/*
 * flex-grow so each wrapped row's buttons stretch to fill the full row
 * width — without it, a short trailing row (e.g. "S T U V W X Y Z" under a
 * long first row of A-R) only fills part of the width and leaves a ragged
 * gap after the last item; growing every button evenly closes that gap on
 * every row, long or short, without hardcoding how many fit per line.
 */
.bsj-chipfilter__btn {
	flex: 1 1 44px;
	text-align: center;
	padding: .5rem 1.1rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius-pill);
	color: var(--bs-ink-2);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-chipfilter__btn:hover { border-color: var(--bs-blue-500); color: var(--bs-blue-700); text-decoration: none; }
.bsj-chipfilter__btn.is-active { background: var(--bs-blue-700); border-color: var(--bs-blue-700); color: #fff; }

.bsj-institute-card {
	position: relative;
	padding: 1.25rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-xs);
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-institute-card:hover { border-color: var(--bs-blue-500); box-shadow: var(--bs-shadow); }
.bsj-institute-card__name { margin: 0 0 .75rem; padding-right: 1.5rem; font-size: 1.02rem; color: var(--bs-navy-900); }
.bsj-institute-card__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .85rem; color: var(--bs-ink-2); }
.bsj-institute-card__meta li { display: flex; align-items: flex-start; gap: .55rem; }
.bsj-institute-card__meta i { flex: none; width: 16px; margin-top: .2rem; color: var(--bs-blue-600); }
.bsj-institute-card__meta a { color: inherit; word-break: break-word; }
.bsj-institute-card__meta a:hover { color: var(--bs-blue-700); }
.bsj-institute-card__delete {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--bs-ink-4);
	transition: all var(--bs-dur) var(--bs-ease);
}
.bsj-institute-card__delete:hover { background: var(--bs-danger-bg); color: var(--bs-danger); }