/**
 * RSI Toolkit — Careers "Search & Apply" widget.
 *
 * Reference layout: the Emirates Group careers search-and-apply page — a search
 * field plus filters above a vertical list of job rows, each row carrying its
 * meta and an apply action on the trailing edge. Drawn in the RSI design
 * language (Alexandria, #bf0031 accent, hairline rules on near-white) rather
 * than Emirates' own styling.
 *
 * Logical properties throughout, so Arabic and English mirror off one
 * stylesheet and rtl.css needs no entry for this widget. Mobile-first: the base
 * is the phone layout and the desktop row splits at 768px.
 */

.rsi-careers {
	--rsi-cr-accent: #bf0031;
	--rsi-cr-row-bg: #f7f8f9;
	--rsi-cr-ink: #0a0a0a;
	--rsi-cr-muted: #5b6670;
	--rsi-cr-line: #e5e7eb;

	background: #ffffff;
}

.rsi-careers__inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 64px 0;
}

/* ------------------------------- header --------------------------------- */
.rsi-careers__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 32px;
}

.rsi-careers__bar {
	display: block;
	width: 48px;
	height: 9px;
	border-radius: 2px;
	background: var(--rsi-cr-accent);
}

.rsi-careers__heading {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.25;
	letter-spacing: .25px;
	color: var(--rsi-cr-ink);
	text-align: start;
}

.rsi-careers__intro {
	margin: 0;
	max-width: 620px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	color: var(--rsi-cr-muted);
	text-align: start;
}

/* ------------------------------ controls -------------------------------- */
.rsi-careers__controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.rsi-careers__field {
	position: relative;
	display: flex;
	align-items: center;
}

/* The magnifier sits on the inline-start edge and the input is padded past it,
   so it lands on the right in Arabic without a mirrored rule. */
.rsi-careers__icon {
	position: absolute;
	inset-inline-start: 16px;
	display: inline-flex;
	color: var(--rsi-cr-muted);
	pointer-events: none;
}

/* ⚠️ Prefixed with .rsi-careers deliberately — do not simplify to the bare
   class. Woodmart's base stylesheet carries `input[type="search"] { padding: 0
   15px }`, and an attribute selector is ALSO specificity 0,1,0, so a bare
   `.rsi-careers__search` merely TIES with it — and the theme sheet loads after
   this one, so the theme wins on source order. The symptom was the placeholder
   sitting under the magnifier: 44px of inline padding computed to 15px.
   The ancestor takes these to 0,2,0. Same trap as the Woodmart button
   specificity note, just wearing an attribute selector instead of :is(). */
.rsi-careers .rsi-careers__search,
.rsi-careers .rsi-careers__filter {
	width: 100%;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rsi-cr-ink);
	background: #ffffff;
	border: 1px solid var(--rsi-cr-line);
	border-radius: 6px;
	padding: 14px 16px;
	height: auto; /* Woodmart pins a height on bare inputs. */
	text-align: start;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.rsi-careers .rsi-careers__search {
	padding-inline-start: 44px;
}

.rsi-careers .rsi-careers__filter {
	/* Room for the native select arrow on the trailing edge. */
	padding-inline-end: 40px;
	cursor: pointer;
}

.rsi-careers .rsi-careers__search:focus,
.rsi-careers .rsi-careers__filter:focus {
	outline: none;
	border-color: var(--rsi-cr-accent);
	box-shadow: 0 0 0 3px rgba(191, 0, 49, .12);
}

.rsi-careers__count {
	margin: 0 0 16px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--rsi-cr-muted);
	text-align: start;
}

/* -------------------------------- list ---------------------------------- */
.rsi-careers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rsi-careers__job {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--rsi-cr-row-bg);
	border: 1px solid transparent;
	border-radius: 10px;
	transition: border-color .25s ease, background .25s ease;
}

.rsi-careers__job::before,
.rsi-careers__job::marker {
	content: none;
}

.rsi-careers__job:hover {
	background: #ffffff;
	border-color: var(--rsi-cr-line);
}

.rsi-careers__job[hidden] {
	display: none;
}

.rsi-careers__job-main {
	min-width: 0;
}

.rsi-careers__job-title {
	margin: 0 0 8px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: .15px;
	color: var(--rsi-cr-ink);
	text-align: start;
}

/* Two classes: Woodmart styles bare links inside content, and a single class
   would only tie with it. */
.rsi-careers .rsi-careers__job-link {
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.rsi-careers .rsi-careers__job-link:hover,
.rsi-careers .rsi-careers__job-link:focus-visible {
	color: var(--rsi-cr-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rsi-careers__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rsi-cr-accent);
	text-align: start;
}

.rsi-careers__sep {
	color: var(--rsi-cr-muted);
	opacity: .6;
}

.rsi-careers__summary {
	margin: 0;
	max-width: 62ch;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 26px;
	color: var(--rsi-cr-muted);
	text-align: start;
}

.rsi-careers__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: var(--rsi-cr-muted);
	text-align: start;
}

.rsi-careers__ref {
	/* A reference is a Latin/number run — pin it so the digits don't reorder in
	   an RTL paragraph (the bidi trap that flipped the Media Card year range). */
	font-weight: 600;
	letter-spacing: .4px;
}

/* ------------------------------- apply ---------------------------------- */
.rsi-careers__job-action {
	display: flex;
	align-items: center;
}

/* role="button" span, not <button> — Woodmart styles buttons by tag. */
.rsi-careers__apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: #ffffff;
	background: var(--rsi-cr-accent);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: opacity .25s ease, transform .25s ease;
}

.rsi-careers__apply:hover,
.rsi-careers__apply:focus-visible {
	opacity: .88;
	outline: none;
}

.rsi-careers__apply:active {
	transform: translateY(1px);
}

.rsi-careers__empty {
	margin: 24px 0 0;
	padding: 32px 24px;
	background: var(--rsi-cr-row-bg);
	border-radius: 10px;
	font-family: 'Alexandria', sans-serif;
	font-size: 16px;
	color: var(--rsi-cr-muted);
	text-align: center;
}

.rsi-careers__empty[hidden] {
	display: none;
}

/* -------------------------------- modal --------------------------------- */
.rsi-careers__modal {
	position: fixed;
	inset: 0;
	z-index: 100000; /* above the Woodmart sticky header */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
}

.rsi-careers__modal[hidden] {
	display: none;
}

.rsi-careers__overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 22, 38, .62);
}

.rsi-careers__dialog {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin: auto;
	background: #ffffff;
	border-radius: 12px;
	padding: 28px 24px 32px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.rsi-careers__dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rsi-cr-line);
}

.rsi-careers__dialog-eyebrow {
	margin: 0 0 6px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .4px;
	color: var(--rsi-cr-accent);
	text-align: start;
}

.rsi-careers__dialog-job {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--rsi-cr-ink);
	text-align: start;
}

.rsi-careers__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	color: var(--rsi-cr-ink);
	background: var(--rsi-cr-row-bg);
	cursor: pointer;
	transition: background .2s ease;
}

.rsi-careers__close:hover,
.rsi-careers__close:focus-visible {
	background: var(--rsi-cr-line);
	outline: none;
}

/* Gravity Forms inside the dialog — keep it in the RSI type voice without
   fighting GF's own layout. */
.rsi-careers__form .gform_wrapper {
	margin: 0;
}

.rsi-careers__form .gform_wrapper,
.rsi-careers__form .gform_wrapper label,
.rsi-careers__form .gform_wrapper input,
.rsi-careers__form .gform_wrapper textarea,
.rsi-careers__form .gform_wrapper select,
.rsi-careers__form .gform_wrapper .gform_button {
	font-family: 'Alexandria', sans-serif;
}

.rsi-careers__form .gform_wrapper .gform_button {
	background: var(--rsi-cr-accent);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	cursor: pointer;
}

/* ------------------------------- desktop -------------------------------- */
@media (min-width: 768px) {
	.rsi-careers__inner {
		padding: 96px 0;
	}

	/* Search takes the room, the filters sit beside it. The modifier carries the
	   number of dropdowns the widget rendered — a dropdown is omitted entirely
	   when no job carries that field, so the template cannot be fixed. */
	.rsi-careers__controls {
		gap: 16px;
	}

	.rsi-careers__controls--f0 {
		grid-template-columns: 1fr;
	}

	.rsi-careers__controls--f1 {
		grid-template-columns: 2fr 1fr;
	}

	.rsi-careers__controls--f2 {
		grid-template-columns: 2fr 1fr 1fr;
	}

	/* Three filters plus search will not fit on a tablet, so the search takes a
	   row of its own and the filters share the next one. */
	.rsi-careers__controls--f3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.rsi-careers__controls--f3 .rsi-careers__field--search {
		grid-column: 1 / -1;
	}

	/* The row becomes copy + action, with the action on the trailing edge. */
	.rsi-careers__job {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		padding: 28px 32px;
	}

	.rsi-careers__job-title {
		font-size: 22px;
	}

	.rsi-careers__dialog {
		padding: 32px 36px 36px;
	}
}

/* Wide enough for search and all three filters on one line. */
@media (min-width: 1024px) {
	.rsi-careers__controls--f3 {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}

	.rsi-careers__controls--f3 .rsi-careers__field--search {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rsi-careers__job,
	.rsi-careers__apply,
	.rsi-careers__close {
		transition: none;
	}
}

/* ========================================================================== */
/* SINGLE JOB PAGE (templates/single-rsi_job.php)                             */
/* ========================================================================== */
/* Lives here rather than in its own stylesheet because it is the same feature
   and this file is already enqueued site-wide — and because the job page reuses
   .rsi-careers__form for the Gravity Forms styling. */

.rsi-job {
	background: #ffffff;
	--rsi-cr-accent: #bf0031;
	--rsi-cr-ink: #0a0a0a;
	--rsi-cr-muted: #5b6670;
	--rsi-cr-line: #e5e7eb;
	--rsi-cr-row-bg: #f7f8f9;
}

/* ---------------------------- header background ------------------------- */
/* The hero takes the job's Featured image, with the same dark overlay the other
   pages' hero containers use (#0a1626 at .62) so white type stays readable over
   any photo. The generous top padding is not decoration: the Woodmart header
   overlays the page, so without it the logo lands on the job's meta line — same
   clearance the hero containers use (210/150). */
/* Full-bleed: the theme drops this inside its 1350px content container, so the
   hero is pulled back out to the viewport edges. `margin-inline: calc(50% -
   50vw)` is the form that works — the percentage resolves against the containing
   block, which is what we want here. (Do NOT reach for the same expression in
   scroll-padding or clip-path: there the percentage resolves against the
   scrollport or the element's own box and silently collapses to 0. See the
   carousel full-bleed notes in the handoff.) The inner keeps its own max-width,
   so the copy still lines up with the body content below. */
.rsi-job__hero {
	position: relative;
	margin-inline: calc(50% - 50vw);
	background-color: #0a1626;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.rsi-job__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 22, 38, .62);
}

/* No Featured image: a flat brand-dark band rather than a broken-looking gap. */
.rsi-job__hero--plain::before {
	background: rgba(10, 22, 38, .35);
}

/* 35px, not 20px: the hero is full-bleed, so it escaped the theme container's
   15px gutter that the body copy below still sits inside. 20px of design inset
   plus that 15px keeps the hero title flush with the summary underneath it.
   The desktop rule adds the same 15px for the same reason — centring only takes
   over once the viewport exceeds the 860px inner PLUS its padding (~908px), so
   between 768 and there the padding is still what aligns the two. */
.rsi-job__hero-inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 150px 35px 56px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.rsi-job__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 48px 20px 64px;
}

/* Back to the listing. Two classes because Woodmart styles bare links, and the
   chevron flips with the text direction via the logical transform below. */
.rsi-job .rsi-job__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	border: 0;
	box-shadow: none;
	transition: color .2s ease;
}

.rsi-job .rsi-job__back:hover,
.rsi-job .rsi-job__back:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

.rsi-job__back-icon {
	display: inline-flex;
}

/* The glyph points inline-start. In RTL that is the other way round, and a
   chevron is one of the few things a logical property can't mirror for us. */
[dir="rtl"] .rsi-job__back-icon {
	transform: scaleX(-1);
}

.rsi-job__bar {
	display: block;
	width: 48px;
	height: 9px;
	border-radius: 2px;
	background: var(--rsi-cr-accent);
}

/* Hero type is white — it sits on the photo, not on the page. */
.rsi-job__title {
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	letter-spacing: .25px;
	color: #ffffff;
	text-align: start;
}

.rsi-job__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	text-align: start;
}

.rsi-job__sep {
	color: #ffffff;
	opacity: .5;
}

.rsi-job__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 4px 0 0;
	font-family: 'Alexandria', sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, .82);
	text-align: start;
}

.rsi-job__ref {
	font-weight: 600;
	letter-spacing: .4px;
}

.rsi-job__summary {
	margin: 0 0 20px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 29px;
	color: var(--rsi-cr-ink);
	text-align: start;
}

.rsi-job__content {
	font-family: 'Alexandria', sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: var(--rsi-cr-muted);
	text-align: start;
}

.rsi-job__content p {
	margin: 0 0 16px;
}

.rsi-job__apply {
	margin-top: 40px;
	padding: 28px 24px 32px;
	background: var(--rsi-cr-row-bg);
	border-radius: 12px;
}

.rsi-job__apply-title {
	margin: 0 0 20px;
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.35;
	color: var(--rsi-cr-ink);
	text-align: start;
}

@media (min-width: 768px) {
	.rsi-job__hero-inner {
		padding: 210px 39px 72px; /* 24 + the theme's 15px gutter — see above. */
	}

	.rsi-job__inner {
		padding: 56px 24px 96px;
	}

	.rsi-job__title {
		font-size: 40px;
	}

	.rsi-job__apply {
		padding: 32px 36px 36px;
	}
}