/**
 * BambooHR Careers embed — LFBC 2026 skin.
 *
 * Reskins BambooHR's Applicant Tracking System widget (embed.js) on the
 * Careers page to match the site's design system: Noto Sans body copy,
 * Skeena Indigenous heading, and the Soft-black / Oatmeal / Poppy palette.
 *
 * embed.js injects its own <style> block plus inline style="" attributes on
 * nearly every element (h2, ul, li, span, footer div) and @imports the Lato
 * webfont. Inline styles carry the highest cascade specificity short of
 * !important, so every override below uses !important to win regardless of
 * BambooHR's own markup/CSS — none of BambooHR's inline attributes are
 * themselves !important, so this reliably wins.
 *
 * Scoped to #BambooHR. Enqueued frontend + editor in functions.php
 * (handle: lfbc-bamboohr).
 */

#BambooHR,
#BambooHR .BambooHR-ATS-board {
	font-family: var(--wp--preset--font-family--noto-sans) !important;
}

/* ---- Card width -----------------------------------------------------------
 * As a direct child of the Rich Content card, #BambooHR inherits that
 * pattern's 932px reading-width cap + auto-centering (patterns/rich-content.css)
 * — meant to keep prose lines readable, not to apply to a widget. On this
 * page's full-width card that available width exceeds 932px, so BambooHR gets
 * squeezed into a centered column instead of filling the card like the
 * "Driven by Purpose" text does (its own column is already narrower than
 * 932px, so the cap never binds there — which is why only this card looked
 * off). Exempt it so it fills the card's full padded width instead. */
#BambooHR {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* ---- "Open Positions" heading ------------------------------------------- */
#BambooHR .BambooHR-ATS-board h2 {
	font-family: var(--wp--preset--font-family--skeena-indigenous) !important;
	font-size: var(--wp--preset--font-size--display-2-responsive) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -1px !important;
	color: var(--wp--preset--color--soft-black-500) !important;
	border-bottom: 1px solid var(--wp--preset--color--oatmeal-700) !important;
	padding-bottom: 16px !important;
	margin: 0 0 16px !important;
}

/* ---- List reset (bullets) ------------------------------------------------ */
#BambooHR ul,
#BambooHR ol {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#BambooHR li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#BambooHR li::before {
	content: none !important;
	display: none !important;
}

/* ---- Job list -------------------------------------------------------------- */
#BambooHR .BambooHR-ATS-Jobs-List {
	border-bottom: 1px solid var(--wp--preset--color--oatmeal-700) !important;
}

/* Bamboo positions the location via inline `float: right`; flex handles the
 * layout and un-floats it in one move.
 *
 * Vertical rhythm (20px top/bottom) lives here, not on the blanket `li` reset
 * above — `.BambooHR-ATS-Department-Item` is also a `li` and wraps this one,
 * so padding on the blanket selector double-stacks at that boundary. */
#BambooHR .BambooHR-ATS-Jobs-Item {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 4px 24px !important;
	padding: 20px 0 !important;
}

#BambooHR .BambooHR-ATS-board a {
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--soft-black-500) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

/* Poppy-on-hover matches the site's other interactive link/heading treatments
 * (typography.css: .wp-block-heading a:hover, .is-style-arrow-link a:hover). */
#BambooHR .BambooHR-ATS-board a:hover,
#BambooHR .BambooHR-ATS-board a:focus {
	color: var(--wp--preset--color--poppy-500) !important;
}

#BambooHR .BambooHR-ATS-Location {
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--soft-black-400) !important;
	white-space: nowrap;
}

/* ---- Blank state (shown when a department has no open roles) ------------- */
#BambooHR .BambooHR-ATS-blankState {
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	color: var(--wp--preset--color--soft-black-400) !important;
}

#BambooHR .BambooHR-ATS-blankState strong {
	color: var(--wp--preset--color--soft-black-500) !important;
	font-weight: 600 !important;
}

/* ---- "Powered by BambooHR" attribution ------------------------------------ */
/* No id/class on this element — it's the one child div of #BambooHR that
 * isn't the #BambooHR-ATS board. Leave the logo image itself alone: it can't
 * be recolored via CSS, and BambooHR's embed terms require the attribution. */
#BambooHR > div:not(#BambooHR-ATS) {
	font-family: var(--wp--preset--font-family--noto-sans) !important;
	font-size: 13px !important;
	color: var(--wp--preset--color--soft-black-400) !important;
}