/* LHT Jobs — minimal unopinionated base styles.
   The Elementor/WP team owns final design; these are just sane defaults
   for the plugin-rendered /careers templates. */

.lht-jobs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lht-jobs-list__item {
	border-bottom: 1px solid #e2e2e2;
}

.lht-jobs-list__link {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	padding: 0.85rem 0;
	text-decoration: none;
}

.lht-jobs-list__title {
	font-weight: 600;
}

.lht-jobs-list__location,
.lht-jobs-list__type {
	color: #555;
	font-size: 0.9em;
}

.lht-jobs-single__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 0;
	margin: 0 0 1.5rem;
	color: #555;
}

.lht-jobs-single__comp-label {
	font-weight: 600;
}

.lht-jobs-apply-button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	background: #1f6feb;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

.lht-jobs-apply-button:hover {
	background: #1659c4;
}

/* ===================================================================
   Master–detail careers board (v0.3.0)
   Themeable via the custom properties below — override --lht-primary
   etc. on .lht-board (or :root) to re-skin without touching this file.
   =================================================================== */

.lht-board {
	--lht-bg: #ffffff;
	--lht-surface: #f4f5f7;
	--lht-surface-hover: #e9ebef;
	--lht-primary: #1d4863;
	--lht-primary-hover: #163a50;
	--lht-primary-tint: #eaf0f4;
	--lht-text: #15191e;
	--lht-text-muted: #5b6571;
	--lht-on-primary: #ffffff;
	--lht-border: #e2e5ea;

	--lht-radius: 14px;
	--lht-card-gap: 12px;
	--lht-pane-gutter: 22px;
	--lht-list-width: 380px;

	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	box-sizing: border-box;
	background: var(--lht-bg);
	color: var(--lht-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	/* The board swaps the detail pane and hides/shows cards in place; with the
	   page as the only scroller, browser scroll anchoring re-adjusts scrollY
	   after those mutations and fights the intentional scroll-to-detail-top
	   (and causes jumps while filtering). Opt the whole board out. */
	overflow-anchor: none;
}

/* The two master–detail panes sit in a row under the toolbar + count bar.
   Single-scroll model (v0.6.0): the board has NO fixed height and the panes
   have NO inner scrollbars — list and detail lay out at natural height and
   the PAGE is the only scroller, so both columns move together. flex-start
   keeps each column its own height (the page just keeps scrolling whichever
   column is taller, like the reference job boards). */
.lht-board__panes {
	display: flex;
	align-items: flex-start;
	gap: var(--lht-pane-gutter);
}

.lht-board *,
.lht-board *::before,
.lht-board *::after {
	box-sizing: border-box;
}

/* ---- list pane ----
   Sticky sidebar: rides the page scroll in tandem with the detail until its
   top reaches the viewport, then PINS there while the (taller) detail keeps
   scrolling with the page. Its own scrollport (max-height + overflow) lets
   the user scroll the pinned list independently by pointing at it.
   --lht-side-sticky-top is a theme override point for sites with a sticky
   header (set it to the header's height on .lht-board). The max-height
   reserves room for the bottom-fixed Apply bar so the last card is never
   trapped behind it. */
.lht-board__side {
	flex: 0 0 var(--lht-list-width);
	max-width: var(--lht-list-width);
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	top: var(--lht-side-sticky-top, 0px);
	max-height: calc(100vh - var(--lht-side-sticky-top, 0px) - 12px);
	overflow-y: auto;
}

.lht-board__list {
	display: flex;
	flex-direction: column;
	gap: var(--lht-card-gap);
	/* Inner padding on every side so the selected card's 2px ring + the 2px
	   keyboard focus outline are never clipped — including first/last card. */
	padding: 6px;
	outline: none;
}

/* ---- filter/search toolbar (full-width row above the panes) ---- */

/* The toolbar is driven entirely by the board JS — without it the controls
   would be decorative, so keep it (and the count bar) hidden until .lht-js. */
.lht-board:not(.lht-js) .lht-board__toolbar,
.lht-board:not(.lht-js) .lht-board__countbar {
	display: none;
}

.lht-board__toolbar {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Search input: pill with an inline magnifier icon. The wrap grows to take
   the row's spare width, mirroring the search-first layout. */
.lht-toolbar__search-wrap {
	position: relative;
	flex: 1 1 260px;
	min-width: 220px;
	display: block;
}

.lht-toolbar__search-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--lht-text-muted, #5b6571);
	pointer-events: none;
}

/* Explicit colours/borders on the controls: Elementor/theme form styles
   otherwise leak in (same reason the cards/buttons pin theirs). */
.lht-toolbar__search,
.lht-toolbar__select {
	font: inherit;
	font-size: 14px;
	color: var(--lht-text, #15191e);
	background: var(--lht-bg, #ffffff);
	border: 1px solid var(--lht-border, #e2e5ea);
	border-radius: 9999px;
	padding: 10px 18px;
}

/* !important on the box model: the active theme styles bare `input` (padding,
   border-radius, height) with rules that otherwise win over ours and turn the
   pill into a rectangle / push the text under the icon. Selects are untouched
   by the theme, so they stay un-pinned. Text sits left; the magnifier lives at
   the right end of the pill, cleared by the right padding. */
.lht-toolbar__search {
	width: 100%;
	height: auto !important;
	padding: 10px 42px 10px 18px !important;
	border: 1px solid var(--lht-border, #e2e5ea) !important;
	border-radius: 9999px !important;
	background-color: var(--lht-bg, #ffffff) !important;
	box-shadow: none !important;
	appearance: none;
	-webkit-appearance: none;
}

.lht-toolbar__select {
	flex: 0 1 auto;
	max-width: 260px;
	padding-right: 32px;
	appearance: none;
	-webkit-appearance: none;
	/* Chevron in the brand slate (#5b6571). */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6571' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}

.lht-toolbar__search:focus,
.lht-toolbar__select:focus {
	outline: 2px solid var(--lht-primary, #1d4863);
	outline-offset: 1px;
}

/* Persistent "Reset filters" affordance at the row's end — link-styled,
   muted/inert until a filter or search term is active. */
.lht-toolbar__clear {
	margin-left: auto;
	padding: 10px 4px;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--lht-primary, #1d4863) !important;
	cursor: pointer;
}

.lht-toolbar__clear:hover {
	color: var(--lht-primary-hover, #163a50) !important;
	text-decoration: underline;
}

.lht-toolbar__clear:disabled {
	color: var(--lht-text-muted, #5b6571) !important;
	opacity: 0.55;
	cursor: default;
	text-decoration: none;
}

.lht-toolbar__clear:focus-visible {
	outline: 2px solid var(--lht-primary, #1d4863);
	outline-offset: 2px;
}

/* ---- results-count banner ---- */
.lht-board__countbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: var(--lht-primary-tint, #eaf0f4);
	border-radius: var(--lht-radius, 14px);
	color: var(--lht-primary, #1d4863);
}

.lht-board__countbar-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.lht-toolbar__count {
	font-size: 14px;
	font-weight: 600;
}

/* The author display rules on these elements beat the UA [hidden] style, so
   pin the hidden behavior explicitly (JS toggles the attribute). */
.lht-card[hidden],
.lht-board__no-results[hidden] {
	display: none !important;
}

.lht-board__no-results {
	margin: 0;
	padding: 18px 6px;
	font-size: 14px;
	color: var(--lht-text-muted, #5b6571);
}

/* Empty detail pane (every posting filtered out). */
.lht-detail--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 24px;
}

.lht-detail__empty-msg {
	margin: 0;
	max-width: 420px;
	text-align: center;
	font-size: 15px;
	color: var(--lht-text-muted, #5b6571);
}

.lht-card {
	position: relative;
	display: block;
	padding: 18px 20px;
	background: var(--lht-surface);
	border: 1px solid var(--lht-border);
	border-radius: var(--lht-radius);
	text-decoration: none;
	/* !important: these cards are <a> elements, so the theme's link colour (red)
	   otherwise overrides the title text now that the board is in the normal
	   pipeline. Dark text when unselected, white when selected. */
	color: var(--lht-text, #15191e) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.lht-card:hover {
	background: var(--lht-surface-hover);
}

.lht-card.is-selected {
	background: var(--lht-primary);
	color: var(--lht-on-primary, #ffffff) !important;
	border-color: var(--lht-primary);
	box-shadow: 0 0 0 2px var(--lht-primary);
}

.lht-card:focus-visible {
	outline: 2px solid var(--lht-primary);
	outline-offset: 2px;
}

.lht-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
}

.lht-card__loc {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font-size: 13px;
	color: var(--lht-text-muted);
}

.lht-card.is-selected .lht-card__loc,
.lht-card.is-selected .lht-card__dept {
	color: rgba(255, 255, 255, 0.8);
}

.lht-card__divider {
	display: block;
	height: 1px;
	margin: 12px 0 10px;
	background: var(--lht-border);
}

.lht-card.is-selected .lht-card__divider {
	background: rgba(255, 255, 255, 0.35);
}

.lht-card__dept {
	font-size: 13px;
	color: var(--lht-text-muted);
}

/* ---- detail pane (natural height; scrolls with the page) ---- */
.lht-board__detail {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--lht-border);
	border-radius: var(--lht-radius);
	background: var(--lht-bg);
}

.lht-detail {
	max-width: 860px;
	margin: 0 auto;
}

/* Non-sticky: with the single page scroller the hero scrolls away like the
   reference site's — the fixed bottom Apply bar keeps Apply reachable. */
.lht-detail__hero {
	background: var(--lht-bg);
	padding: 24px 28px 18px;
	border-bottom: 1px solid var(--lht-primary);
	text-align: center;
}

.lht-detail__title {
	margin: 4px 0 6px;
	/* !important: cap at 32px (2× the 16px left-column card title); otherwise the
	   theme's heading font-size makes this title oversized. Line-height forced
	   too so wrapped titles don't overlap. */
	font-size: 32px !important;
	font-weight: 700;
	line-height: 1.3 !important;
	outline: none;
}

.lht-detail__subtitle {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 400;
	color: var(--lht-text-muted);
}

/* Apply Now lives in the hero, directly under the title/subtitle, and
   scrolls with the description (desktop). Mobile's detail view keeps its
   thumb-reachable bottom-fixed bar — see the mobile media block. */
.lht-detail__apply-wrap {
	margin: 0;
}

/* !important on the colours: the active theme's link colour (red) otherwise
   leaks onto this <a> button now that the board renders in the normal pipeline.
   Default = blue fill / white text; hover = inverted white fill / blue text. */
.lht-detail__apply {
	display: inline-block;
	padding: 12px 32px;
	background: var(--lht-primary, #1d4863) !important;
	color: var(--lht-on-primary, #ffffff) !important;
	border-radius: 9999px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lht-detail__apply:hover {
	background: var(--lht-on-primary, #ffffff) !important;
	color: var(--lht-primary, #1d4863) !important;
	box-shadow: inset 0 0 0 2px var(--lht-primary, #1d4863);
}

.lht-detail__body {
	padding: 22px 28px 40px;
}

.lht-detail__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 24px;
	margin: 0 0 24px;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--lht-border);
}

.lht-detail__meta-item {
	margin: 0;
}

.lht-detail__meta dt {
	font-size: 13px;
	font-weight: 600;
	color: var(--lht-text-muted);
	margin: 0 0 4px;
}

.lht-detail__meta dd {
	font-size: 15px;
	font-weight: 400;
	margin: 0;
}

.lht-detail__desc {
	font-size: 16px;
}

.lht-detail__desc h2,
.lht-detail__desc h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 1.6em 0 0.5em;
}

.lht-detail__desc a {
	color: var(--lht-primary);
}

.lht-detail__desc ul,
.lht-detail__desc ol {
	padding-left: 1.3em;
}

.lht-board__detail.is-swapping .lht-detail {
	opacity: 0;
}

.lht-board__detail .lht-detail {
	transition: opacity 0.18s ease;
	opacity: 1;
}

.lht-jobs-empty {
	color: var(--lht-text-muted);
	padding: 24px;
}

/* ---- tablet ---- */
@media (max-width: 1023px) {
	.lht-board {
		--lht-list-width: 300px;
	}
}

/* ---- mobile: single column, list first; detail slides in over it ---- */
@media (max-width: 767px) {
	.lht-board {
		height: auto;
		padding: 16px;
		gap: 10px;
	}

	.lht-board__panes {
		flex-direction: column;
	}

	.lht-board__side,
	.lht-board__list,
	.lht-board__detail {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
		height: auto;
		overflow: visible;
	}

	/* Single-column flow: no pinned sidebar on mobile. */
	.lht-board__side {
		position: static;
		max-height: none;
		overflow-y: visible;
	}

	/* Search grows full-width; the selects share rows below it. */
	.lht-toolbar__search-wrap {
		flex: 1 1 100%;
	}

	.lht-toolbar__select {
		flex: 1 1 40%;
		max-width: none;
	}

	/* When JS opens a job, show only the detail and a back affordance —
	   the toolbar + count bar belong to the list view. */
	.lht-board.lht-js.is-detail-open .lht-board__side,
	.lht-board.lht-js.is-detail-open .lht-board__toolbar,
	.lht-board.lht-js.is-detail-open .lht-board__countbar {
		display: none;
	}

	.lht-board.lht-js:not(.is-detail-open) .lht-board__detail {
		display: none;
	}

	/* Thumb-reachable sticky Apply bar at the bottom of the detail view. */
	.lht-board.lht-js.is-detail-open .lht-detail__apply-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 12px 16px;
		background: var(--lht-bg, #ffffff);
		border-top: 1px solid var(--lht-border, #e2e5ea);
		z-index: 5;
		text-align: center;
	}

	.lht-board.lht-js.is-detail-open .lht-detail__apply {
		display: block;
		width: 100%;
		text-align: center;
	}

	.lht-board.lht-js.is-detail-open .lht-detail__body {
		padding-bottom: 96px; /* clear the fixed Apply bar */
	}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.lht-card,
	.lht-detail__apply,
	.lht-board__detail .lht-detail {
		transition: none;
	}
}

/* ===================================================================
   Apply modal — Brightbot apply form embedded in an overlay (v0.4.0)
   Mounted on <body> (outside .lht-board), so it carries its own token
   defaults; override them here if you re-skin .lht-board.
   =================================================================== */

html.lht-modal-open,
body.lht-modal-open {
	overflow: hidden;
}

.lht-modal {
	--lht-bg: #ffffff;
	--lht-primary: #1d4863;
	--lht-primary-hover: #163a50;
	--lht-on-primary: #ffffff;
	--lht-text: #15191e;
	--lht-border: #e2e5ea;
	--lht-surface: #f4f5f7;
	--lht-radius: 14px;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: rgba(21, 25, 30, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.lht-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.lht-modal *,
.lht-modal *::before,
.lht-modal *::after {
	box-sizing: border-box;
}

.lht-modal__panel {
	display: flex;
	flex-direction: column;
	width: 90vw;
	max-width: 1200px;
	height: 90vh;
	max-height: 90vh;
	background: var(--lht-bg, #ffffff);
	border-radius: var(--lht-radius, 14px);
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
	transform: translateY(8px);
	transition: transform 0.18s ease;
}

.lht-modal.is-open .lht-modal__panel {
	transform: none;
}

.lht-modal__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: var(--lht-bg, #ffffff);
	border-bottom: 1px solid var(--lht-border, #e2e5ea);
}

.lht-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--lht-text, #15191e);
}

/* White ✕ on a primary-blue circle — robust against theme link/button colours
   leaking in, and the blue stays our #1D4863 everywhere. */
.lht-modal__close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* !important defeats theme/Elementor button rules that otherwise leak a
	   pink/red colour or border onto our close button. No border or ring at
	   rest/hover/programmatic-focus; a blue ring appears only on keyboard focus. */
	border: none !important;
	box-shadow: none !important;
	outline: none;
	background: var(--lht-primary, #1d4863) !important;
	border-radius: 9999px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--lht-on-primary, #ffffff) !important;
}

.lht-modal__close:hover {
	background: var(--lht-primary-hover, #163a50) !important;
}

/* Kill the default/theme focus ring (the modal programmatically focuses this
   button on open). */
.lht-modal__close:focus {
	outline: none !important;
}

/* Keyboard-only focus: our blue ring (wins over :focus via higher specificity). */
.lht-modal__close:focus-visible {
	outline: 2px solid var(--lht-primary, #1d4863) !important;
	outline-offset: 2px;
}

.lht-modal__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.lht-modal__iframe {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: var(--lht-bg, #ffffff);
}

.lht-modal__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.lht-modal__spinner::after {
	content: "";
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	border: 3px solid var(--lht-border, #e2e5ea);
	border-top-color: var(--lht-primary, #1d4863);
	animation: lht-spin 0.8s linear infinite;
}

.lht-modal.is-loaded .lht-modal__spinner {
	display: none;
}

@keyframes lht-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Mobile: near-fullscreen with a small inset. */
@media (max-width: 767px) {
	.lht-modal {
		padding: 10px;
	}
	.lht-modal__panel {
		width: 100%;
		max-width: none;
		max-height: 100%;
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lht-modal,
	.lht-modal__panel {
		transition: none;
	}
}