/**
 * SmartRecruiters Job Widget — NEC SWS theme
 * Re-skin of the default SmartRecruiters embed widget CSS to match the
 * NEC SWS brand (Neo Sans Std, NEC Orange/Blue/Grey, 8px radius) instead of
 * the vendor's generic grey/blue default styling.
 *
 * Class names (srJobList, srSearch, srPages, etc.) are fixed — they're
 * rendered by the third-party SmartRecruiters embed script, not this theme,
 * so they must not be renamed. Only colour, type, spacing and radius were
 * brought in line with DESIGN.md.
 *
 * Fixed: two selectors (bare `th` and `nobr`) were unscoped in the original
 * vendor file and would have overridden every table/nobr element site-wide,
 * not just inside the widget — both are now scoped under .smartWidget.
 * Also removed: legacy IE/Opera hacks (`-o-transform`, `border-collapse
 * \9`) and commented-out references to a sprite image (widget_list_bg.png)
 * that isn't part of this theme.
 *
 * The search form (input/button/dropdown triggers) intentionally uses a 4px
 * radius and borderless white fields to match .contact-form-module__input/
 * __submit (assets/css/modules/contact_form_module.css) rather than the
 * site-wide 8px var(--radius) used elsewhere in this file (job list rows,
 * dropdown panel) — this is the one place this widget directly mirrors
 * another module's field styling, per client request.
 *
 * Enqueued conditionally — see inc/assets.php (`rh_careers_assets()`).
 */

.smartWidget * {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
}

.smartWidget *::-moz-focus-inner {
	border: none;
}

/* Visible keyboard focus only (NEC Orange, matching the theme-wide focus
   colour) — the vendor default suppressed all focus/active outlines,
   which fails WCAG 2.1 AA (2.4.7 Focus Visible). */
.smartWidget *:focus-visible {
	outline: 2px solid var(--nec-orange, #EB6E00);
	outline-offset: 2px;
}

.smartWidget .srJobList {
	margin: 0;
	padding: 0;
	border: none;
	width: auto;
	height: auto;
	background: var(--nec-white, #fff);
	border-collapse: separate;
	border-spacing: 0;
}

/* Same reasoning as the row fix below: target header cells directly
   (> th), not every descendant, in case a header ever wraps its label
   in a nested span/icon (e.g. a future sort indicator). */
.smartWidget .srJobList .srJobListTitles > th {
	margin: 0;
	padding: 10px 12px;
	border: none;
	background: var(--nec-grey, #384249);
	color: var(--nec-white, #fff);
	text-align: left;
	font-size: 13px;
	font-weight: var(--semi, 600);
}

.smartWidget th {
	white-space: nowrap;
}

.smartWidget nobr {
	padding: 0 !important;
	background: transparent !important;
}

/* Target the cells themselves (> td) only — NOT `*`. Several columns
   (e.g. Location) wrap their content in a vendor-rendered <span>/<svg>;
   a `*` descendant selector would apply this padding/border-left to
   those nested elements too, compounding indentation and (on hover)
   drawing one border per nested element instead of one per row. */
.smartWidget .srJobList .srJobListJobEven > td,
.smartWidget .srJobList .srJobListJobOdd > td {
	margin: 0;
	padding: 8px 12px;
	border: none;
	border-left: 3px solid transparent;
	color: var(--nec-grey, #384249);
	text-align: left;
	font-size: 13px;
	font-weight: 400;
	transition: var(--transition, all .2s cubic-bezier(.2, .8, .2, 1));
}

.smartWidget .srJobList .srJobListJobEven {
	background-color: var(--nec-light-grey, #f5f5f6);
}

.smartWidget .srJobList .srJobListJobOdd {
	background-color: var(--nec-white, #fff);
}

.smartWidget .srJobList .srJobListJobEven:hover > td,
.smartWidget .srJobList .srJobListJobOdd:hover > td {
	border: none;
	border-left: 3px solid var(--nec-orange, #EB6E00);
}

.smartWidget tr.srJobListJobEven,
.smartWidget tr.srJobListJobOdd {
	cursor: pointer;
}

.smartWidget .srJobListJobTitle {
	width: auto;
	min-width: 100px;
}

.smartWidget .srJobListTypeOfEmployment {
	width: auto;
	min-width: 130px;
}

.smartWidget .srJobListDepartment {
	width: auto;
	min-width: 80px;
}

.smartWidget .srJobListLocation {
	width: auto;
	min-width: 70px;
}

/* Location is centred by the vendor widget's own inline styling on some
   layouts — force it left-aligned at all times, matching every other
   column, header and data cells alike. */
.smartWidget .srJobListLocation,
.smartWidget .srJobListTitles .srJobListLocation,
.smartWidget .srJobListJobEven .srJobListLocation,
.smartWidget .srJobListJobOdd .srJobListLocation {
	text-align: left !important;
}

/* On some rows the vendor renders the cell's content as
   <span style="display: inline-flex; align-items: start; ...">, not plain
   text — text-align on the <td> above has no effect on a flex container's
   children, which is why that alone didn't fully left-align this column.
   !important here still overrides the inline style (inline styles only
   beat external rules of equal/lower specificity, not !important ones). */
.smartWidget .srJobListLocation span {
	display: inline-flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	text-align: left !important;
	width: auto !important;
}

/* Hides the work-mode icon (Hybrid/Remote/Onsite) the vendor renders in
   front of the location text on some rows, so every row's text starts at
   the same x-position — rows with the icon otherwise sit ~20px further
   right than plain-text rows purely because of the icon's own width. */
.smartWidget .srJobListLocation span svg {
	display: none !important;
}

.smartWidget .srJobListOccupationalArea {
	width: auto;
	min-width: 118px;
}

.smartWidget .srJobListPublishedSince {
	width: auto;
	min-width: 120px;
}

/*
 * Search form — styled to match .contact-form-module__input/__submit:
 * flat white fields, no borders, 4px radius, NEC Blue focus-visible
 * outline, orange submit button. Each field/dropdown trigger is now its
 * own separate flat "pill" (gapped, not joined into one bordered toolbar).
 */

.smartWidget .srSearch,
.smartWidget .srSearch * {
	box-sizing: border-box;
}

.smartWidget .srSearch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px 0;
	padding: 0;
	border: none;
	width: auto;
	min-height: 0;
	background: transparent;
}

.smartWidget .srPages {
	margin: 8px 0 0 0;
	padding: 8px;
	border: none;
	border-radius: 4px;
	width: auto;
	min-height: 25px;
	background: var(--nec-light-grey, #f5f5f6);
	float: right;
}

.smartWidget .srSearchForm {
	margin: 0;
	padding: 0;
	height: auto;
	overflow: visible;
	border: none;
	display: flex;
	align-items: center;
}

.smartWidget .srSearchInput {
	display: block;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--nec-grey20, #ebeced);
	border-radius: 4px 0 0 4px;
	min-width: 180px;
	width: auto;
	height: auto;
	background: var(--nec-white, #fff);
	color: var(--nec-grey, #384249);
	text-align: left;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: var(--transition, all .2s cubic-bezier(.2, .8, .2, 1));
}

.smartWidget .srSearchInput::placeholder {
	color: var(--nec-grey, #384249);
	opacity: 0.55;
}

/* No visible focus outline on this field, per client request — this
   overrides the theme-wide .smartWidget *:focus-visible rule above.
   Flagging: removing focus indication fails WCAG 2.1 AA (2.4.7 Focus
   Visible) for keyboard users. If that matters here, a non-outline
   alternative (e.g. a background or border-colour change on focus)
   would keep it accessible without the outline ring. */
.smartWidget .srSearchInput:focus-visible {
	outline: none;
}

.smartWidget .srSearchButton {
	display: block;
	margin: 0;
	padding: 12px 22px;
	border: none;
	border-radius: 0 4px 4px 0;
	width: auto;
	height: auto;
	background: var(--nec-orange, #EB6E00);
	color: var(--nec-white, #fff);
	text-align: center;
	font-size: 0.9375rem;
	font-weight: var(--medium, 500);
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: var(--transition, all .2s cubic-bezier(.2, .8, .2, 1));
}

.smartWidget .srSearchButton:hover,
.smartWidget .srSearchButton:active,
.smartWidget .srSearchButton:focus-visible {
	border: none;
	background: var(--nec-blue, #1414A0);
}

.smartWidget .srSearchOption {
	position: relative;
	margin: 0;
	height: auto;
}

.smartWidget .srSearchOption,
.smartWidget .srSearchForm {
	margin-bottom: 0;
	flex-shrink: 1;
	border: none;
	box-sizing: border-box;
}

.smartWidget .srSearchOption:after {
	display: none;
}

.smartWidget .srSearchOptionText,
.smartWidget .srPagesText,
.smartWidget .srFilterRemote {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 12px 34px 12px 16px;
	border: none;
	border-radius: 4px;
	width: auto;
	height: auto;
	background: var(--nec-white, #fff);
	color: var(--nec-grey, #384249);
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.4;
	box-sizing: border-box;
	cursor: pointer;
}

.smartWidget .srSearchOptionText {
	border: 1px solid var(--nec-grey20, #ebeced);
}

.smartWidget .srSearchOptionText,
.smartWidget .srFilterRemote {
	min-width: 82px;
	width: auto;
	text-align: left;
	padding-top: 12px;
	padding-bottom: 12px;
}

.smartWidget .srPagesText {
	background: transparent;
}

.smartWidget .srSearchOptionText:before {
	display: none;
}

.smartWidget .srSearchOptionText:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 14px;
	margin-top: -2px;
	display: block;
	border-top: 5px solid var(--nec-orange, #EB6E00);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 0;
	height: 0;
}

.smartWidget .srSearchOptionList {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	display: none;
	float: left;
	margin: 0;
	padding: 0;
	border: 1px solid var(--grey, #e3e3e3);
	border-radius: 4px;
	width: 160px;
	min-height: 16px;
	max-height: 240px;
	background: var(--nec-white, #fff);
	z-index: 1;
	overflow: hidden;
}

.smartWidget .srSearchOptionListElement,
.smartWidget .srSearchOptionListElementChecked {
	display: table;
	float: left;
	margin: 0;
	padding: 4px 0;
	width: 160px;
	min-height: 18px;
	vertical-align: middle;
}

.smartWidget .srSearchOptionListElement:hover {
	background: var(--nec-light-grey, #f5f5f6);
}

.smartWidget .srSearchOptionListElementChecked {
	background: var(--nec-light-grey, #f5f5f6);
}

.smartWidget .srSearchOptionListElementText {
	display: table-cell;
	margin: 0 0 0 8px;
	padding: 5px 17px 5px 5px;
	width: 127px;
	font-size: 12px;
	font-weight: 400;
	color: var(--nec-grey, #384249);
	text-align: left;
	line-height: 10px;
	vertical-align: middle;
	user-select: none;
	cursor: default;
}

.smartWidget .srSearchOptionListElementChecked > .srSearchOptionListElementText {
	color: var(--nec-blue, #1414A0);
	font-weight: var(--medium, 500);
}

.smartWidget .srPagesText {
	padding: 3px 8px;
	cursor: default;
}

.smartWidget .srPagesTextCenter:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	margin: -8px 0 0 0;
	padding: 0;
	border-left: 1px solid var(--grey, #e3e3e3);
	width: 0;
	height: 35px;
}

.smartWidget .srPagesTextCenter:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	margin: -8px 0 0 0;
	padding: 0;
	border-right: 1px solid var(--grey, #e3e3e3);
	width: 0;
	height: 35px;
}

.smartWidget .srPagesTextPrevious,
.smartWidget .srPagesTextNext {
	cursor: pointer;
}

.smartWidget .srPagesTextPrevious:before {
	content: '';
	position: absolute;
	top: 0;
	right: 10px;
	display: block;
	margin: 5px 0 0 0;
	padding: 0;
	border-top: 5px solid transparent;
	border-right: 5px solid var(--nec-grey, #384249);
	border-bottom: 5px solid transparent;
	width: 0;
	height: 0;
	cursor: pointer;
	transition: border-color .2s ease;
}

.smartWidget .srPagesTextNext:after {
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	display: block;
	margin: 5px 0 0 0;
	padding: 0;
	border-top: 5px solid transparent;
	border-left: 5px solid var(--nec-grey, #384249);
	border-bottom: 5px solid transparent;
	width: 0;
	height: 0;
	cursor: pointer;
	transition: border-color .2s ease;
}

.smartWidget .srPagesTextPrevious:hover:before {
	border-right-color: var(--nec-orange, #EB6E00);
}

.smartWidget .srPagesTextNext:hover:after {
	border-left-color: var(--nec-orange, #EB6E00);
}

#smartWidget0 .srJobList .srJobListJobEven:hover *, #smartWidget0 .srJobList .srJobListJobEven:focus * {
  background-color: transparent!important;
}

.smartWidget .srJobList{
  margin-top: 30px;
}

#smartWidget0 .srJobList .srJobListTitles * {
  background-color: var(--nec-grey);
  color: var(--black)!important;
  font-size: clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem);
  line-height: 1.471;
  font-weight: 400;
  font-family: var(--content);
}

.srJobListLocation span.srNoWrap {
  color: var(--black)!important;
  font-size: clamp(0.9375rem, calc(0.894rem + 0.188vw), 1.0625rem)!important;
  line-height: 1.471!important;
  font-weight: 400!important;
  font-family: var(--content);
}

.srJobListRow {
  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--content);
}

.srJobListLocation span {
	text-align:left!important;  color: var(--black)!important;
  font-size: 13px!important;
  font-weight: 400;
  font-family: var(--content)!important;
	justify-content: flex-start !important;
	padding-left:0px!important
}

.srJobListTypeOfEmployment,
.srJobListJobTitle {font-family: var(--content)!important;}

.srJobListTypeOfEmployment span.srNoWrap {padding-left:0px!important}

.smartWidget .none {
	height: 0;
	border: none;
}

.smartWidget .srFilterRemote {
	padding-left: 10px;
}

.smartWidget .srFilterRemoteElement {
	vertical-align: middle;
}

.smartWidget .srFilterRemoteElementText {
	position: relative;
	top: 1px;
	padding-left: 3px;
}

.smartWidget .srFilterRemoteElementText:after {
	position: relative;
	top: 2px;
}

.smartWidget .srRemoteLocation:after,
.smartWidget .srFilterRemoteElementText:after {
	margin-left: 5px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='15' height='15' viewBox='0 0 22 22'%3E%3Cpath fill='%23384249' d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13C15,12.45 14.55,12 14,12H8V10H10C10.55,10 11,9.55 11,9V7H13C14.1,7 15,6.1 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16C9,17.1 9.9,18 11,18M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z'/%3E%3C/svg%3E");
}

.smartWidget .display--none {
	display: none;
}

.smartWidget .srNoWrap {
	display: block;
	white-space: nowrap;
}

#smartWidget0 .srJobList .srJobListJobOdd:hover *, #smartWidget0 .srJobList .srJobListJobOdd:focus * {
  background-color: var(--nec-white, #fff)!important;
}